MVP Blueprint for Designers
Stop Writing Entry Code. Start Shipping.
A collection of Claude Code commands that automate the tedious parts of web development.
Wasting time on repeatable commands to kick-off your new project is dumb
For each MVP build you need to set up your tokens, repository and project structure. It's stupid to repeat the same workflows without automation
Setup Takes significant effort Before You Start
Creating a project, wiring up design tokens, configuring auth — each step requires chatting with Agent to properly set up.
Figma Tokens Don't Become Code Automatically
Although Figma MCP exists, it doesn't automatically connect all your variables. Doing it each time manually becomes annoying.
Backend Setup forces you to leave your Terminal
Supabase, row-level security, profiles table, auth helpers - You need to open Supabase each time to configure everything
Understanding how to manage repository is not trivial
Branching strategy, commit messages, .gitignore, secrets in version control - this is a part that Designers often didn't have occasion to work with
11 Skills & Commands Included
8 skills that build things. 3 commands that keep the workflow tight. One install to get all of them.
/install-skills
Run once after cloning - installs all skills, verifies setup, walks through API token configuration
/setup-env
Checks Figma and Supabase tokens, creates the tokens file if missing, guides setup one service at a time
/init-vite
Scaffolds a Vite project pre-wired for design tokens, removes boilerplate, starts the dev server
/figma-tokens
Paste your Figma JSON export and get back organized CSS custom properties: colors, typography, sizes
/init-backend
Provisions a Supabase project with auth, profiles table, row-level security, and auth helper functions
/test-auth
Wires your existing login page to Supabase auth, adds sign in / register logic, verifies the build
/github
Creates a GitHub repo, verifies .gitignore, pushes your code, explains the branching workflow
/grill-my-code
Ruthless code review - bugs, security vulnerabilities, leaked secrets - grouped by severity with exact file locations
/commit
Writes a conventional commit message from your staged changes - under 72 characters, correct type, body for complex changes
/lean
Switches Claude into maximum efficiency mode - no explanations, no narration, fast focused execution
/rules
Prints a quick-reference card: branching rules, commit format, skill workflow order, security reminders
The route from idea to a reviewed change, step by step.
Core 3 of the free Claude Code course walks the same path these skills automate: research, one shared page, a prototype, a plan, a small build, a second opinion.
Frequently Asked Questions
Claude Code Skills are slash commands you install once into Claude Code. Each command automates a specific development task — scaffolding a project, pulling in Figma tokens, wiring up Supabase auth, publishing to GitHub — so you type one line and the AI handles the rest.
Product designers, UX leads, and design founders who want to ship real working apps — not just Figma prototypes. If you know what you want to build but the terminal slows you down, these skills close that gap.
Claude Code (the CLI), a Figma account for design tokens, and a Supabase account for auth and database. The /init-vite skill scaffolds the project. Everything else follows from there — no prior terminal experience required.
Skills build things: /init-vite creates a project, /figma-tokens converts your design export, /init-backend provisions Supabase. Commands manage the workflow: /commit writes your git message, /lean drops the narration, /rules prints the quick-reference card. Both are installed together.
No. You describe what you want in plain language, review what Claude builds, and iterate. The skills handle the boilerplate, the config, and the wiring. You handle the decisions.
Export your variables from Figma as JSON, paste the output into the /figma-tokens prompt, and you get back organized CSS custom properties split into colors.css, typography.css, sizes.css, and index.css. No manual mapping.
Yes. We built these skills from our own internal workflow at Bonanza Studios and we're sharing them with the design community. If you want us to run a build sprint with your team, that's a paid engagement — but the skills are free.
The backend skills are currently built around Supabase — it's the fastest path from zero to auth + database for designers. If you're using a different backend, the /figma-tokens, /init-vite, /github, and workflow commands work independently of any backend choice.
How we can help you
AI Chief of Staff
01
Set up an AI Chief of Staff: shared rules, connected tools and a memory that turns your team's daily AI use into organisational intelligence. Built with you.
Design Retainer
02
Get an on-demand design department without hiring. Product, marketing and brand design on a flexible retainer, run by designers with 60+ products shipped.
UX Innovation
03
Run startup-speed UX research, design and strategy in flexible sprints. Three hours a week from you, full engagement from us, a prototype to test every sprint.
Need Your Team to Ship Like This?
We run custom AI build sprints with design and product teams. Your product context, your stack, your timeline. We bring the process, the setup, and the skills to match.