DEV Community

Cover image for I open-sourced a 502-component HTML design kit that works natively with AI coding agents
Pixeliro
Pixeliro

Posted on

I open-sourced a 502-component HTML design kit that works natively with AI coding agents

#ai #design #development

** 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:

  1. 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.
  2. 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
Enter fullscreen mode Exit fullscreen mode

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 */
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode 
Turn this layout into a Vue 3 <script setup> SFC
Enter fullscreen mode Exit fullscreen mode 
Rewrite this screen as a SwiftUI View
Enter fullscreen mode Exit fullscreen mode 
Convert to a Flutter Widget
Enter fullscreen mode Exit fullscreen mode

The AI has something concrete to work from — actual markup and actual structure — not your mental image of what a "dashboard card" should look like.

The full-page designs

Beyond individual components, there are 33 complete multi-page designs:

Mobile (17 apps): Finance, Fitness, Food delivery, E-commerce, Social, Chat, Healthcare, Education, Music, News, Real estate, Travel, Weather, Todo, Dating

Web (16 apps): SaaS landing, Dashboard, Analytics, CRM, E-commerce store, Blog, Auth flows, Agency, Portfolio, Courses, Project management, Docs, Job board, Events, Restaurant

Each design includes:

  • tokenkit.json — design tokens
  • css/tokens.css — generated CSS vars
  • index.html — gallery of all screens
  • Individual page HTML files
  • Specs README

These work as scaffolding. Open the Finance dashboard, change --kit-primary to your brand color, ask an AI to convert it to Next.js. You're done with the design phase in an afternoon.

Why HTML specifically?

A few reasons I landed on HTML over JSON schemas, Figma exports, or design tokens alone:

  1. It renders. You see the actual UI, not a data structure.
  2. AI understands it perfectly. LLMs are trained on an enormous amount of HTML. No custom DSL to teach.
  3. It's framework-agnostic. HTML → React, Vue, Svelte, SwiftUI, Flutter — the same source works as a target for any conversion.
  4. No tooling required. Designers, devs, and AI agents can all open and understand the same file.

What's next

The kit is open source under MIT. Contributions welcome — especially:

  • New component categories
  • Dark mode token presets
  • Framework-specific conversion examples (React, Vue, Svelte)
  • Additional full-page designs

Links

Drop a ⭐ if it's useful. And if you build something with it, I'd love to see it.

Top comments (0)