skilled.design — docs
what this is
Skilled extracts design systems from screenshots. Upload a screenshot of any UI — a full page, a single component, a color palette — and Skilled breaks it down into tokens (colors, typography, spacing, effects) and components. You edit what you want, then generate production-ready code: Tailwind config, CSS variables, React/Shadcn components, or a CLAUDE.md snippet for your coding agent.
how it works
1. create a design system — give it a name and tags
2. upload a screenshot — full page or cropped component
3. review extracted tokens — colors, typography, spacing, effects, components
4. edit anything — rename tokens, adjust values, delete what you don't need
5. generate code — pick your format, copy or export as zip
6. add more screenshots — upload additional references to expand the system
7. add individual components — screenshot a button, card, or input and get a Shadcn wrapper component generated with your design system's tokens
output formats
tailwind config — complete theme extension with all your tokens
css variables — :root block with custom properties
react components — Shadcn/UI wrapper components styled with your tokens
CLAUDE.md — design system rules formatted for Claude Code or Cursor agents
component analyzer
upload a screenshot of a single UI component (a button, card, input, modal, sidebar — anything). Skilled identifies the component type, maps it to Shadcn/UI primitives, extracts styles, and generates a production-ready React wrapper.
for best results:
- crop tight to a single component
- use the context field to describe states you can't screenshot (hover, focus, disabled, loading)
- example: "primary CTA from Stripe — hover inverts to white bg"
the analyzer also flags colors and tokens not yet in your design system and lets you add them with one click.
supported shadcn primitives
Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Checkbox, Collapsible, Combobox, Command, ContextMenu, DataTable, DatePicker, Dialog, Drawer, DropdownMenu, Form, HoverCard, Input, InputOTP, Label, Menubar, NavigationMenu, Pagination, Popover, Progress, RadioGroup, Resizable, ScrollArea, Select, Separator, Sheet, Skeleton, Slider, Sonner, Switch, Table, Tabs, Textarea, Toast, Toggle, ToggleGroup, Tooltip.
keyboard shortcuts
ctrl/cmd + v — paste screenshot from clipboard (on upload screens)
ctrl/cmd + c — copy generated code (when code block is focused)
api (coming soon)
POST /api/v1/analyze — upload screenshot, get tokens back as JSON
POST /api/v1/generate — pass tokens, get code output
GET /api/v1/systems — list your design systems
GET /api/v1/systems/:id — get full design system with all tokens
limits
max file size: 10mb per screenshot
supported formats: png, jpg, webp
analysis time: 10-15 seconds per screenshot
storage: unlimited design systems, unlimited screenshots