DesignKit
Upload a screenshot. Get a complete design system.
AI extracts your colors, typography, spacing, and components into ready-to-use files.
DESIGN.mdtailwind.config.tsglobals.csslight previewdark preview
Paste, drop, or
Ctrl+V · PNG, JPG, WebP · Max 10MB
How it works
1
Upload a screenshot
Any UI, any website. PNG, JPG, or WebP.
2
AI extracts the design system
Colors, typography, spacing, components, light and dark mode.
3
Download and use
Get a zip with DESIGN.md, Tailwind config, CSS variables, and HTML previews.
Built for AI-first workflows
Paste the DESIGN.md into Claude Code, Cursor, or any AI coding agent. It builds on-brand from the first prompt. No more guessing colors or recreating spacing scales from scratch.