Tech Stack
TypeScript
React
Next.js
Tailwind CSS
Vercel
Architecture
01
Browse
Pick design system
→
02
Select
Choose components
→
03
Customize
Set variants, props
→
04
Generate
Build AI prompt
→
05
Export
Claude / GPT / Cursor
Key Features
-
[1]
Design System BrowserExplore component libraries from shadcn/ui, Radix, Mantine, and more. See live previews alongside metadata.
-
[2]
Visual CustomizerAdjust variants, sizes, colors, and props through a visual interface. No code required to configure components.
-
[3]
Prompt Generation EngineConverts visual selections into structured prompts optimized for Claude, GPT, and Cursor AI assistants.
-
[4]
Multi-Target ExportOne-click export with formatting tailored to each AI assistant's prompt style and context window.
Stats
TypeScript 97%
CSS 3%
Lessons Learned
Meta-Tool Building
A tool to help build tools. The recursive nature of building a prompt generator that generates prompts for building components.
Design System Curation
Cataloging and normalizing component APIs across different design systems revealed how much overlap exists.
Prompt Engineering
Structured prompts with explicit constraints produce dramatically better AI output than free-form descriptions.