01
Capture
- Input
- Public URL
- Output
- HTML, CSS, screenshots, computed styles
- Gate
- Reject private networks, blocked pages, and unsupported evidence.
Public URL to design system package
Turn any website into a design system file.
Generate a grounded DESIGN.md, token map, audit report, and implementation guidance from a public URL.
WebAPICLISDKSkill
Discover
Real design systems, extracted.
Every card is a live job. Click to open the full package.
Calderacaldera.xyz
action#FC5000
displayPP Neue Corp
radius100px
6 colors5 type styles15 tokens
ElevenLabselevenlabs.io
action#2B7FFF
displayWaldenburg
radius9999px
6 colors5 type styles19 tokens
Anthropicanthropic.com
action#3898ec
displayAnthropic Serif
radius0px
6 colors7 type styles20 tokens
Hume AIhume.ai
action#C094E4
displayFellix
radius1.5rem
6 colors6 type styles20 tokens
Supabasesupabase.com
action#3ECF8E
displayCircular
radius6px
7 colors4 type styles17 tokens
Whoopwhoop.com
action#000000
displayProxima Nova
radius6px
7 colors6 type styles21 tokens
Le Labolelabofragrances.com
action#424242
displayBell Gothic Std
radius30px
8 colors5 type styles19 tokens
Microsoft AImicrosoft.ai
action#0078d4
displayBradford LL
radius3px
8 colors4 type styles20 tokens
Product
From URL to design system package.
01Input
Paste a public URL
We fetch the live page and capture all visual evidence before any model runs.
CSSscreensDOMmetadata
02Agents
7 specialist agents run
Each agent owns one domain and must cite evidence for every claim it writes.
Crawl
Public URL checks and source capture
Screenshot
Desktop, mobile, and key regions
Agents
Brand, color, type, layout, motion, visual, composition
Grounding
Evidence, gaps, and confidence
Render
Polished DESIGN.md package
03Output
8 ready-to-use artifacts
Grounded files usable from browser, API, CLI, SDK, or AI skill — no manual editing required.
DESIGN.mddesign.jsondesign-tokens.jsoncss-variables.csstailwind-v4.cssaudit.mdSKILL.mdgrounding.json
action#FC5000
displayPP Neue
surface#F7F6F2
radius40px
# Style Reference
> Evidence-grounded design system package.
## Overview
Turn visual identity into implementation rules.
## Tokens
--color-canvas: #E2E2DF
--color-action: #FC5000
--font-display: PP Neue Corp Compact
## Components
- URL input: pill-shaped, high contrast, 100px radius
- Artifact viewer: ash-white surface, 40px rounded shell
- Workflow cards: orange and ash blocks with clear gates
## Do's and Don'ts
- Do keep guidance actionable.
- Do not invent unsupported brand claims.7Specialist agentsBrand, color, type, layout, motion, visual, composition
8Artifact formatsDESIGN.md, tokens, CSS, Tailwind, audit, skill, grounding
5Access surfacesWeb, REST API, CLI, SDK, and AI skill
Workflow
Five checks before the file ships.
Each run moves through evidence, interpretation, and validation before the final DESIGN.md is allowed to become an instruction source.
02
Extract
- Input
- Raw visual evidence
- Output
- Colors, type, spacing, surfaces, media, components
- Gate
- Keep deterministic tokens separate from model interpretation.
03
Interpret
- Input
- Evidence packet
- Output
- Brand, layout, component, and implementation guidance
- Gate
- Specialist agents must cite observed or inferred support.
04
Ground
- Input
- Draft DesignDoc
- Output
- Supported claims, inferred claims, known gaps
- Gate
- Unsupported specifics stay out of the polished DESIGN.md.
05
Package
- Input
- Validated DesignDoc
- Output
- DESIGN.md, JSON, audit, grounding report
- Gate
- Artifacts must be usable from web, API, CLI, SDK, and skill.
Developer surfaces
Use the same job anywhere.
Start in the browser, automate through the API, or generate locally from the CLI when the workflow moves into code.
npm install -g mydesignmdmydesignmd generate https://example.com --out DESIGN.mdclient.createDesignJob({ url: "https://example.com" })