UI/UX、ロゴ、スライド、画像生成（7,438 件）
概要と使いどころ
UI/UX best practices for web interfaces. Use when reviewing animations, CSS, audio, typography, UX patterns, prefetching, or icon implementations. Covers 11 categories from animation principles to typography. Outputs file:line findings.
日本語の概要は準備中です。原文の説明を表示しています。
Playbook for designing SaaS and startup products that convert, retain, and monetize — landing pages & CRO, checkout & forms, onboarding/activation, churn reduction, pricing psychology, dashboards, behavioral-science tactics, feature discipline, positioning/ICP, go-to-market, and AI-era differentiation. Use when advising on product design, UX, conversion, landing pages, checkout, onboarding, trials, pricing, retention/churn, growth, or positioning for a startup or SaaS. Distilled from product designer Richard (@richardrx). Not for use on gambling, betting, or casino products.
日本語の概要は準備中です。原文の説明を表示しています。
Engineer growth systems: PLG motions, referrals, viral and retention loops. "design a referral program"
日本語の概要は準備中です。原文の説明を表示しています。
Design a live Looker Studio dashboard spec with fields, filters and setup guide. "build a Looker Studio dashboard"
日本語の概要は準備中です。原文の説明を表示しています。
Design an executive dashboard spec: north-star metrics, charts, alert thresholds. "design a CMO dashboard"
日本語の概要は準備中です。原文の説明を表示しています。
Design cross-channel journeys as state machines, simulation-tested before build. "map the onboarding journey"
日本語の概要は準備中です。原文の説明を表示しています。
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
日本語の概要は準備中です。原文の説明を表示しています。
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
日本語の概要は準備中です。原文の説明を表示しています。
Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.
日本語の概要は準備中です。原文の説明を表示しています。
Use when the user needs to design evaluation datasets, create test cases, stratify samples, generate adversarial examples, extract eval dimensions from traces/specs, or build a labeled evaluation set. Also use when the user mentions test data design, eval coverage, difficulty stratification, synthetic data generation for eval, or "how to create good evaluation data." Outputs datasets in OpenJudge-compatible format.
日本語の概要は準備中です。原文の説明を表示しています。
Use when the user has evaluation principles or a dataset but needs help choosing the right graders, designing evaluation metrics, creating LLM-as-judge prompts, combining multiple metrics into a composite score, or building an automated evaluation pipeline. Also use when the user mentions grader selection, metric design, judge prompt engineering, rubric design, evaluation pipeline code, or "how to evaluate [X] automatically." Outputs executable OpenJudge pipeline code.
日本語の概要は準備中です。原文の説明を表示しています。
When the user wants to design, construct, or improve an offer — the thing they actually sell — including value framing, bonus stacking, guarantee design, scarcity/urgency, naming, and payment structure. Also use when the user mentions 'offer,' 'offer design,' 'build an offer,' 'grand slam offer,' 'irresistible offer,' 'value stack,' 'bonus stack,' 'guarantee,' 'risk reversal,' 'money-back guarantee,' 'scarcity,' 'urgency,' 'high-ticket offer,' 'productize a service,' 'naming an offer,' 'payment plan,' 'down-sell,' 'upsell offer,' or 'why isn't my offer converting.' Best for services, agencies, courses, coaching, info products, high-ticket B2B, and direct-response. If you run pure self-serve SaaS, read pricing first — tiers and packaging do more work there. For price level itself (tiers, freemium, value metric), see pricing. For the page that presents the offer, see copywriting. For the launch moment, see launch. For sales collateral, see sales-enablement.
日本語の概要は準備中です。原文の説明を表示しています。
Give one hero card or CTA quiet premium life: a soft band of light travels around its border. One shining element per view; keep it slow and low-contrast. Pure CSS. Fully static under prefers-reduced-motion. Do not put several on screen at once.
日本語の概要は準備中です。原文の説明を表示しています。
Make one primary CTA feel premium: a soft band of light sweeps across it (slowly at rest, faster on hover). Reserve for the single primary button; keep it subtle. Pure CSS; the sweep stops (solid button) under prefers-reduced-motion. Do not use on secondary/destructive buttons or many at once.
日本語の概要は準備中です。原文の説明を表示しています。
A soft light rotates around a pill/button border — a gentle animated outline for a single CTA. One per view; keep it slow and low-contrast. Pure CSS; static border under prefers-reduced-motion.
日本語の概要は準備中です。原文の説明を表示しています。
A soft highlight sweeps across muted text — a quiet premium shimmer for one short label ("new", "pro", a CTA word). Keep the base text readable; one or two per view. Pure CSS; solid under reduced-motion.
日本語の概要は準備中です。原文の説明を表示しています。
Lift a clickable card toward the viewer on hover with a deepening shadow — a tactile, responsive cue. Pure CSS, no JS. Only use on actually-clickable cards (motion implies clickability). Honors prefers-reduced-motion (static). Avoid on very dense grids where many lifts feel noisy.
日本語の概要は準備中です。原文の説明を表示しています。
Give one card or CTA a lively accent: a small bright comet of light travels around its border. Brighter/livelier than shine-border — use for a single "new"/"featured" element, one per view. Pure CSS; fully static under prefers-reduced-motion.
日本語の概要は準備中です。原文の説明を表示しています。
Give one short headline quiet premium emphasis: a slow on-brand gradient drifts through the type. One phrase per view; never body copy (readability). Pure CSS; falls back to a solid brand color under prefers-reduced-motion.
日本語の概要は準備中です。原文の説明を表示しています。
A jittery electric outline traces a card — an energetic accent for one hero element. One per view. Pure CSS; a static solid outline remains under prefers-reduced-motion.
日本語の概要は準備中です。原文の説明を表示しています。
An RGB-split glitch flickers across a headline — a techy, edgy reveal. One short line; techy tones only. Pure CSS; steady under prefers-reduced-motion.
日本語の概要は準備中です。原文の説明を表示しています。
Slide Out Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
日本語の概要は準備中です。原文の説明を表示しています。
Zoom Out Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
日本語の概要は準備中です。原文の説明を表示しています。
Zoom Out Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
日本語の概要は準備中です。原文の説明を表示しています。