Open-source skill pack
AI skills for designers who code
14 skills and 4 agents that help you build real products by talking naturally. Works with VS Code Copilot, Claude Code, and OpenAI Codex.
Talk naturally. Build real things.
No commands to memorize. Describe what you want and the right skill activates automatically.
"I want to build a portfolio site"
Sets up the project with the right stack
"Make a contact page with a form"
Builds the full page with realistic content
"Save what people submit"
Creates the database table and connects the form
"Make it look like stripe.com"
Generates a DESIGN.md and applies the visual style
"Make it look more premium"
Adds animations, better typography, hover effects
"Only I should see the submissions"
Adds authentication and protects the page
"Check it"
Runs quality check: loads? works? mobile? accessible?
"Ship it"
Runs safety check, then deploys to the web
Everything you need, nothing you don't.
Each skill handles one job well. They activate from plain English.
what-am-i-building
Figures out your project, picks the right stack, sets everything up
build-page
Turns descriptions or screenshots into working UI
make-it-wow
Instant visual polish with animations, typography, hover effects
design-system
Extracts tokens and builds reusable components from your existing UI
generate-design-md
Captures any website's visual style into a DESIGN.md reference
save-data
Makes forms actually save. Creates the database and connects it
add-login
Adds authentication so only the right people see the right pages
show-data
Displays saved data as cards, tables, or dashboards
send-email
Sends confirmation or notification emails when things happen
upload-file
Handles image and file uploads with storage
quick-check
4-item quality check: loads? works? mobile? accessible?
before-you-ship
Full 9-item pre-deploy checklist
unstuck
Fixes problems fast when you're frustrated
noob-mode
Translates tech jargon to plain English
Each agent has a clear role.
Talk naturally and the right one activates. Or call them by name when you want a specific mode.
Default (just talk)
Assistant
Builds UI, connects backends, fixes issues. Your primary partner.
"Check it" / "Is this ready?"
Checker
Reviews your work in read-only mode. Can't break anything.
"Ship it" / "Put it online"
Shipper
Runs safety checks, then deploys. Gives you a URL and undo instructions.
"Find the bug" / "It was working before"
Investigator
Deep debugs when quick fixes don't work. Traces root causes like a senior engineer.
Built from your DESIGN.md tokens.
Buttons
Dropdown
Card
Card title
Text content sits below the card container, not inside it.
Extract any website's design tokens.
Paste a URL below. We launch a headless browser, scan computed styles on every element, and generate a downloadable DESIGN.md.
Web, mobile, or Figma plugins.
Web
Next.js + Tailwind + Supabase + Vercel
Full-stack web apps with database, auth, and deployment built in.
Mobile
React Native + Expo + Supabase
iOS and Android apps from one codebase. Scan a QR to test on your phone.
Figma Plugin
TypeScript + Figma API
Extend Figma with custom tools. UI in an iframe, logic on the canvas.
Start building in 30 seconds.
One command installs everything. It asks which AI tool you use and sets up only what you need.