** DesignKit is a library of 502 self-contained HTML components + 33 full-page designs (mobile + web). Every component uses CSS custom properties (--kit-*). Drop it into any AI agent context — it generates pixel-perfect, on-brand HTML screens in one shot. The problem I kept hitting Every time I wanted to prototype a new app screen, I had two bad options: Describe the UI to an AI — "make a finance dashboard with a balance card, transaction list, bottom nav..." — and get generic, inconsistent output that doesn't match any real design system. Open Figma — spend 30 minutes setting up a frame before writing a single line of code. What I actually wanted: open a file, see a finished UI, ask an AI to convert it to my framework. Done. What DesignKit is A folder of HTML files. That's it. DesignKit/ ├── components/ │ ├── app-mobile/ 204 components (iOS + Android) │ ├── web/ 200 components (Desktop / responsive) │ └── common/ 98 components (Icons, illustrations, mockups) └── previews/ └── full-designs/ ├── mobile/ 17 complete app designs └── web/ 16 complete web designs Every component is a self-contained HTML snippet with inline styles. No build step. No npm install. Open in browser, copy the HTML, done. The token system Every component uses CSS custom properties instead of hardcoded values: :root --kit-primary: #6366F1; --kit-bg: #FFFFFF; --kit-surface: #F8FAFC; --kit-text: #0F172A; --kit-text-2: #475569; --kit-border: #E2E8F0; --kit-radius: 10px; --kit-shadow: 0 4px 12px rgba(0,0,0,0.10); --kit-font: 'Inter', system-ui, sans-serif; /* ...and ~30 more */ Override any token → the entire design recolors instantly. One variable change switches from light to dark mode, or from indigo SaaS to orange e-commerce. There are also presets baked into AI-AGENT.md for common app types: Finance (dark, premium), Health (soft green), Social (vibrant pink), Travel (blue-teal), and more. The AI-native part This is where it gets interesting. The repo includes AI-AGENT.md — a structured prompt file that tells any AI agent: The full token system The complete component list (what exists, what it's called) Layout patterns for mobile screens and web dashboards Output rules: inline styles only, semantic HTML, no JS, single file An output checklist With an AI CLI like Claude Code, Cursor, or Copilot, you just run: Read AI-AGENT.md, then design: a finance app home screen — dark mode, premium feel, mobile 390px. Output a single self-contained HTML file to output/finance-home.html The agent reads the file, understands the design system, and generates a complete HTML screen that: Uses the token system correctly Follows mobile layout conventions (status bar, fixed nav, safe area insets) Is ready to open in a browser and screenshot No describing "make it look premium." No Figma reference. No back-and-forth. Convert HTML → any framework Once you have the HTML, you can use it as a precise reference instead of vague descriptions: Convert this HTML component to a React component using Tailwind CSS Turn this layout into a Vue 3