Generate a production design system from a brand brief
Design System Framework encodes senior design engineer patterns into prompt sequences that generate complete, production-ready design systems. From token architecture to Storybook stories, every prompt produces design system artifacts that scale across teams and products.
Full Access Unlocked
All 52 prompts · All 5 modules
"The token architecture prompts saved us 3 weeks of debate. We had a complete token system in 2 days ..."
Mei L. · Design Engineer
Need expert implementation?
Hire an OrchestratorConnect with a certified Prompt.Doctor Orchestrator to deploy this framework for you.
No coding required. You will use ChatGPT or Claude as your AI tool. Follow these steps in order — do not skip ahead.
Purchase & download the framework
Click the buy button on this page. After checkout, go to the and hit Download .zip. Unzip it — you'll get a .md file (the full framework) and a .pdf (easy to read reference). Keep both open.
Open your project — new or existing
This dashboard is designed to integrate into any existing project or be built as a standalone app. If you already have a site in Airo (or Cursor, Bolt, etc.), open that project. If you're starting fresh, create a new project. The Orchestrator Prompt handles both cases — it scans what's already there and adds only what's missing.
Paste the Orchestrator Prompt into your builder's chat
Open the on this page. Copy the Orchestrator Prompt and paste it into your AI builder's chat. It will scaffold the full admin system — secure login, email marketing module, booking engine, and CMS — on top of your existing codebase. This takes 2–5 minutes.
Add your API keys as secrets
Critical — Novice UsersIn your builder, go to Settings → Secrets and add the keys your app needs. For this framework: STRIPE_SECRET_KEY (for booking payments — get it from your Stripe dashboard), ANTHROPIC_API_KEY (for AI-assisted content — get it from console.anthropic.com), and DATABASE_URL (your MySQL connection string). No key is needed for the admin login, CMS, or email modules — those run on your existing infrastructure.
Don't have a MySQL server?
You can purchase a shared hosting plan with cPanel and MySQL at host.esgwon.dev. Once your account is set up, follow the step-by-step guide to create your database and connect it to your AI website builder.
How to set up cPanel MySQL & connect to your AI website →Need help with Stripe?
Get your STRIPE_SECRET_KEY and STRIPE_PUBLISHABLE_KEY from your Stripe dashboard. The guide covers test keys, webhook setup, and going live.
Need help with Anthropic?
Get your ANTHROPIC_API_KEY from console.anthropic.com. The guide covers model selection, cost management, and troubleshooting.
Prompting Airo after setup — always name the file
When asking Airo to add tables, columns, or features to the admin dashboard, always include src/server/lib/admin-db.ts in your prompt. Without it, Airo may target the wrong database. Example: "Add a bookings table in the admin database (src/server/lib/admin-db.ts) — do not touch any other database connection in this project."
Run the framework prompts inside your live app
Your app is now running in the builder's preview panel. Open the on this page, copy each prompt one at a time, and paste it into your builder's chat. Replace every [BRACKET] with your real data before sending. Work through the stages in order — each stage output feeds the next.
Test end-to-end, then publish or hand off to your client
Walk through the admin as a real user: log in, create a booking, send a test email campaign, update a CMS image, and run the Safe-to-Publish gate. Once everything passes, click Publish in your builder. Because this is a white-label dashboard, your client accesses it at /admin on their own domain — no Prompt.Doctor branding, no third-party login required.
5 modules · 52 prompts · 6 workflow stages
Token Architecture System
Generate a complete design token hierarchy: primitive tokens → semantic tokens → component tokens. Covers color, typography, spacing, border radius, shadow, and motion.
8 promptsComponent API Design
Design component APIs that are intuitive, composable, and accessible. Includes prop naming conventions, variant systems, and compound component patterns.
9 promptsStorybook Story Generator
Generate CSF3 Storybook stories for any component: default story, all variants, interactive controls, accessibility tests, and visual regression snapshots.
8 promptsAccessibility System
WCAG 2.2 audit prompts, ARIA pattern implementation, keyboard navigation testing, and color contrast verification.
8 promptsDark Mode Architecture
Semantic token mapping for dark mode, CSS variable strategy, system preference detection, and user preference persistence.
9 promptsGenerate a complete design token architecture for [BRAND NAME] with primary color [HEX] and brand personality [DESCRIBE]. Structure: (1) Primitive tokens (raw values: color palette 50-950, font sizes, spacing scale), (2) Semantic tokens (purpose-based: color.background.primary, color.text.muted), (3) Component tokens (component-specific: button.background.default). Output as CSS custom properties and a JSON token file compatible with Style Dictionary. Include dark mode semantic tokens.
Design the TypeScript API for a [COMPONENT NAME] component for a design system. Include: Props interface with JSDoc comments, Variant system using a discriminated union or CVA, Composition pattern (if applicable), Ref forwarding, Default prop values, Accessibility props (aria-*, role), and usage examples. The API should be intuitive for consumers and flexible enough for all use cases. Follow Radix UI / shadcn conventions.
You are building a Design System Management Platform using the Airo AI Website Builder. Build a full-stack React + TypeScript + Tailwind CSS application with the following architecture: CORE FEATURES: 1. Token Studio — visual editor for design tokens (color, typography, spacing, shadow, motion). CRUD interface with live preview. Export as CSS custom properties and Style Dictionary JSON. 2. Component Library — browsable component catalog with Storybook-style preview, props documentation, and code snippet copy. Filter by category (form, layout, feedback, navigation). 3. Figma Sync Dashboard — token sync status, last-synced timestamp, conflict detection, and one-click push to Figma Variables API. 4. Accessibility Auditor — paste any component code and run WCAG 2.2 checks. Returns contrast ratios, ARIA issues, and keyboard navigation gaps with fix suggestions. 5. Dark Mode Builder — side-by-side light/dark token mapping editor. Preview components in both modes simultaneously. 6. Contribution Guide — markdown editor for design system documentation. Version history, contributor attribution, and publish-to-Notion integration. TECH STACK: React 19, TypeScript, Tailwind CSS, shadcn/ui, Express API, MySQL (Drizzle ORM), BetterAuth. DATABASE TABLES: design_tokens, components, token_versions, audit_results, contributors. API ROUTES: GET/POST /api/tokens, GET/POST /api/components, POST /api/audit, GET /api/sync-status. Build the complete application with all pages, components, API routes, and database schema. Start with the Token Studio dashboard as the main view.
system
8 prompts
architecture
9 prompts
prompts
8 prompts
workflow
8 prompts
templates
9 prompts
"The token architecture prompts saved us 3 weeks of debate. We had a complete token system in 2 days that the whole team agreed on."
Mei L.
Design Engineer
All 52 prompts across 5 modules are unlocked for your account.
Lifetime access