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

base url: https://skilled.design/api/v1
auth: pass your API key as a Bearer token in the Authorization header.
curl -H "Authorization: Bearer sk_live_your_key" \
  https://skilled.design/api/v1/systems
endpoints
GET /systems — list your design systems
GET /systems/:id — get full system with all tokens and components
POST /analyze — upload screenshot, extract design system
POST /analyze-component — upload component screenshot, get shadcn mapping + code
POST /generate — generate code from existing system
PUT /systems/:id/tokens — update a token
DELETE /systems/:id/tokens — delete a token
POST /analyze example
curl -X POST https://skilled.design/api/v1/analyze \
  -H "Authorization: Bearer sk_live_your_key" \
  -F "image=@screenshot.png" \
  -F "name=my new system" \
  -F "tags=dark-mode,dashboard"
POST /generate example
curl -X POST https://skilled.design/api/v1/generate \
  -H "Authorization: Bearer sk_live_your_key" \
  -H "Content-Type: application/json" \
  -d '{"design_system_id": "uuid-here", "format": "tailwind"}'
POST /analyze-component example
curl -X POST https://skilled.design/api/v1/analyze-component \
  -H "Authorization: Bearer sk_live_your_key" \
  -F "image=@button.png" \
  -F "design_system_id=uuid-here" \
  -F "context=primary CTA, hover inverts"
rate limits
analysis: 20 requests per hour
code generation: 50 requests per hour
reads: 60 requests per minute
errors
401 — invalid or missing API key
403 — key valid but not authorized for this resource
404 — resource not found
429 — rate limit exceeded (check Retry-After header)
500 — server error

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