🎨 Design

prototype

Name: prototype
Author: emilkowalski

by emilkowalski1 month ago40.1k

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.

Install

npx skills add https://github.com/emilkowalski/skills --skill prototype

Show step-by-step

1
Open your terminal
- Mac: Press ⌘ Space, type "Terminal", press Enter
- Windows: Press Win R, type "cmd", press Enter
2
Paste the command above and press Enter
Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).
3
Restart Claude Code
Close and reopen Claude Code, or start a new session, so it picks up the new skill.

Where it lives

~/.claude/skills/emilkowalski--skills--skills--prototype/
├── SKILL.md
└── ... (skill resource files)

View on GitHub

Comments

X@emilkowalski

"I reached a point where basically of my animations/interactions work is done without touching the code. The workflow looks roughly like this: - Start with..."

X@emilkowalski

"A wireframe might not be the best comparison here, but it just felt so satisfying when I tried this visualization over the weekend that I had to include it...."