Build distinct, working versions of one interface component and compare them at full size using a visual picker. Explore differences in layout, interaction, or motion, then integrate the version you choose into the project.
中文简介正在准备中。当前显示英语简介。
Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own.
安装前可以查看交给 AI 代理的指令内容。
A divergence skill. It does ONE thing: take a described piece of UI ("a toast", "the pricing card", "a hold-to-delete button"), build several genuinely different versions of it, and put them behind a visual picker so the user can flip through them live and choose a winner. It does not review existing UI (that's review-animations), plan fixes for it (that's improve-animations), or choose dependencies (that's pick-ui-library).
You are a senior design engineer running a design exploration. The entire value of this skill is divergence: three tints of the same idea waste the picker — the user learns nothing by flipping between them. Each variant must be a direction you could defend shipping on its own, exploring a genuinely different answer to the same brief.
Divergence is not an excuse to drop the craft bar. Every variant individually meets Emil Kowalski's standards — right easing (ease-out on entrances, never ease-in), sub-300ms UI motion, correct transform-origin, transform/opacity only, reduced-motion handled. A sloppy variant doesn't widen the exploration; it just loses on execution and teaches nothing about the direction it represents.
One thing per run. If the description spans multiple components ("the dashboard"), narrow it: pick the single highest-leverage piece, say which and why, and offer the rest as follow-up runs. Restate the brief in one sentence — what the thing is, where it will live, what it must do.
Before designing anything, map the ground the variants must stand on:
If there is no project (empty directory, or the user is just exploring), skip to the standalone branch in Phase 4 and choose a restrained default look: neutral grays, one accent, system font stack.
Default 3 variants; up to 5 when the user asks or the design space is genuinely wide. More than 5 dilutes the comparison.
Before writing any code, list the set: a name and an axis for each. Names describe the direction — "Quiet", "Editorial", "Playful", "Dense" — never "Option A/B/C". If two proposed directions would differ only in accent color or copy, they are one direction; replace one with a real alternative (different layout, different interaction model, different motion story).
Completion criterion: every variant has a name and a stated axis, and no two variants share an axis position.
Two branches, by what exists:
/prototypes/<slug>, or the framework's equivalent), one file per variant plus a small harness file. Nothing imports from the prototype surface into production code.The picker's markup, styles, keyboard wiring, and placement come from PICKER.md, verbatim — load it now and build exactly that. Beyond the picker itself, the harness must render one variant at a time, full size, in realistic surrounding context — a toast needs a page behind it, a card needs siblings, a button needs a form. Side-by-side thumbnails distort spacing and scale; never judge UI at postage-stamp size. Switching is instant — flipping is a 100+/session action; by the frequency rule the variant swap gets no animation.
Run the harness. Confirm every variant renders, every interaction responds, and the console is clean — flip through all of them yourself before showing the user. If browser tooling is available, screenshot each variant.
Then present the set and stop — the choice belongs to the user:
| # | Variant | Axis | When it's the right choice | Its cost |
|---|---|---|---|---|
| 1 | Quiet | Minimal motion, borders over shadows | The product is a daily-use tool | Least memorable |
| 2 | Editorial | Large type, generous whitespace | The moment deserves weight | Eats vertical space |
Close with where the picker is running (URL or file path) and the keys to flip.
Completion criterion: every variant is reachable from the picker and behaves correctly; no console errors; the table names each variant's tradeoff honestly.
When the user picks: integrate that variant where it belongs, following the project's existing conventions (file layout, naming, token usage), then delete the prototype surface per Hard Rule 5. If the user instead wants another round, keep the harness and run Phase 3 again, diverging around the direction they gravitated to.
| Invocation | Behavior |
|---|---|
<description> | Full workflow: scope → recon → 3 variants → picker → wait for choice |
<description> x5 | Same, with that many variants (capped at 5) |
riff <variant> | New round: keep the harness, generate a fresh set diverging around the named variant's direction |
keep <variant> | Promote that variant into the codebase and delete the prototype surface |
keep <variant>, leave the picker | Promote, but keep the prototype surface around |
Sell each variant honestly — one line on when it wins, one on what it costs. Never pre-pick a favorite in the table; if the user asks which you'd choose, answer with a reason rooted in the product's personality and frequency of use, not aesthetics alone. If two variants converged while you built them, cut one and say so: a picker with two truly distinct directions beats one padded to three.
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Build UI animations by first deciding whether motion serves a useful purpose. Produces code with suitable timing, transitions, interruption behavior, exit paths, reduced motion support, and hover effects adapted to the input device.
中文简介正在准备中。当前显示英语简介。
Turn a plain description of a web animation into the matching term from a curated glossary. Get a short definition and distinctions between similar effects so you can describe the motion to an AI or designer.
中文简介正在准备中。当前显示英语简介。
Design and review web interfaces using Apple’s principles for fluid interaction. Shape drags, swipes, and spring motion that can change direction mid-animation, alongside translucent layers, readable typography, and accessible alternatives to movement.
中文简介正在准备中。当前显示英语简介。
Build and review interface components with guidance on animation timing, press feedback, drag behavior, and accessibility. Decide when motion helps, choose concrete settings, and explain proposed code changes in a before-and-after comparison.
中文简介正在准备中。当前显示英语简介。
Find places in an interface where animation would help, then filter suggestions by frequency, purpose, speed, and function. Get precise motion settings and reasons for rejected candidates, without changing source code.
中文简介正在准备中。当前显示英语简介。
Audit an app’s animations for responsiveness, performance, and accessibility, then rank the findings by impact and effort. Produce detailed implementation plans that another agent can follow, while leaving source code unchanged during the audit.
中文简介正在准备中。当前显示英语简介。