How to use this kit
A quick start for designers and PMs. Claude Code (Anthropic's assistant that runs in your terminal) reads this kit and builds Yuno Dashboard prototypes for you. Set up once, then just describe what you want.
How it works
You don't copy code from this site. You open Claude Code inside a folder and describe what you want. Claude reads the kit and builds the prototype for you. Everything runs through four commands you'll use over and over:
/kit-newStart a brand-new prototype from an empty folder.
/kit-searchAsk the kit what it has for something specific.
/kit-buildAdd or change a screen in a prototype you already have.
/kit-auditCheck how faithful your prototype is to the kit.
One-time setup
Copy this into your terminal. It installs everything Claude needs: the base tools, Claude Code, and the four commands above. You run it once and never again.
curl -fsSL https://prototype-kit.tools.y.uno/install.sh | bashWhen it finishes, close the terminal and open a fresh one. Then, inside any empty folder, type `claude` and hit enter. Claude Code opens and you're ready to paste any of the prompts below.
Prompts to copy and paste
The fastest way to start. Copy any prompt below into Claude Code, replace the {placeholders} with what you actually want, and send. Heads up: these only work after you've done the one-time setup above.
First time here?
I just finished the one-time setup for the Yuno prototype kit. Confirm the four kit commands are installed by running /kit-search button. I should see kit results back. If something's missing or broken, tell me what to fix in plain language.Starting fresh
/kit-new prototype for {what you want to build, e.g. a screen where a merchant sets up a payout rule}. Show me the plan before writing any code.Install the kit on top of my existing prototype without overwriting my work. Run this in the project root: `curl -fsSL https://prototype-kit.tools.y.uno/kit-starter.tar.gz | tar -xzf - --strip-components=1 -k`. Then show me what changed with git status, and remind me to restart Claude Code so it picks up the new commands.Exploring what's available
/kit-search {what you're looking for, e.g. a table with sortable columns, a modal to confirm delete, an empty state with an illustration}Show me a full page from the kit that includes a {sidebar + header + list} so I can see what a real prototype looks like before I start building mine.Building
/kit-build add a screen for {feature or flow} at {url path, e.g. /rules/new}. Keep the sidebar and top bar and only use kit components. Show me the plan first./kit-build turn this Figma design into a prototype: {paste the Figma link or drop a screenshot}. Don't copy every pixel. Pick the closest kit component for each element. If something in the design doesn't exist in the kit, tell me and offer the closest match. Show me the plan first./kit-build on {short description of the screen or its url path}: {what to change, e.g. add a status filter, make the empty state warmer, fix the spacing between cards}. Only use kit components. If the change affects other screens that use the same pattern, list them before editing.Verifying
/kit-auditI just ran /kit-audit and it found problems. Fix them in small batches and after each batch show me what changed before I approve. When you're done, run /kit-audit again so we compare before and after.Growing the kit
The {component or pattern I built at some path} looks reusable across prototypes. Prepare it to send back to the kit: draft the code, the doc page and the manifest entry. Show me the diff and the PR title. Leonardo or JP will review before it merges.Prefer to browse and copy?
If you already know what you want and just need the code, open the Components section in the sidebar and use the Copy button on any example. Most of the time Claude does this for you, so you shouldn't need this.
<Button>Continue</Button>
<Button variant="outline">Cancel</Button>