FreeVideo
App window with zoom
- 365365 downloads
- 125125 likes
- 188188 saves
Works with
+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
Live UI Variant Picker v1.0.0
Use this resource to explore several design directions for an interface component
New
- 454 downloads
- 150 likes
- 123 saves
Free
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install ui-variant-prototyperWith no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.
First time: connect the CLI with
npx --yes palatekit@latest loginThe agent takes a piece of UI you describe (a toast, a pricing card, a button) and builds 3 to 5 versions that truly differ in layout, density or motion. They appear one at a time, full size, behind a picker. You choose, the agent integrates the winner and deletes the rest.
Updated November 2, 2026
Previews
Details
- Install guides
- Generates with
- Your agent's model
- Licence
- MIT
Similar resources
View all- Free
FreeVideo
One big number
- 463463 downloads
- 223223 likes
- 100100 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
PalateKit Motion, the library
- 338338 downloads
- 198198 likes
- 249249 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Three bars head to head
- 348348 downloads
- 133133 likes
- 182182 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Before / after slider
- 322322 downloads
- 248248 likes
- 238238 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Three-card carousel
- 418418 downloads
- 157157 likes
- 101101 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Chat exchange
- 564564 downloads
- 127127 likes
- 161161 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Checklist ticking off
- 442442 downloads
- 233233 likes
- 160160 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
What you get
- SKILL.md: the six-phase method
- PICKER.md: the exact markup and behavior of the variant picker
- A closing table giving each variant's axis, strength and cost
Good fit for
- Hesitating between directions for a pricing card or a key button
- Showing a client several truly different takes on one component
- Exploring a component before wiring it into an existing site
Not for
- Auditing or fixing an interface that is already live
- Designing a whole page or full dashboard in one go
- Choosing a component library
Tags
- design
- prototype
- components
- variants
- motion
About
You say
"/prototype a pricing card with three plans for my coaching site"
Skill published by emilkowalski under the MIT license.
Show moreShow less
Prerequisites
- You bring
- A description of one interface component and Ideally, an existing web project whose style the agent can reuse
How to use it
- Copy the skill into your project and run it with one component description.
- The agent scans your project, proposes directions, then builds the variants and the picker.
- Flip through the variants with the keyboard, then tell it which one to keep.
Content preview
Files
- LICENSE1.1 KB
- NOTICE-PALATEKIT.md0.4 KB
- PICKER.md7.6 KB
- SKILL.md7.7 KB
Origin and licence
Modified by PalateKit
- Author
- emilkowalski
- Source
- github.com/emilkowalski/skills/tree/a81dbca07f2217b7103e510c0f13f8d5b017afc9/skills/prototype
- Licence
- MIT
Notice
Version modifiée de « prototype » (emilkowalski, MIT) : traduction française et fiche par PalateKit.
User reviews
–
No ratings yet
Loading reviews…
Frequently asked questions
Do I need an existing project?
No. Without a project, the agent writes a single self-contained HTML file you open in a browser, with a restrained default look.
Does the skill change my site during exploration?
No. Everything stays in an isolated prototype surface. Integration only happens after you choose, and the prototype is then deleted unless you ask to keep it.