# Open Design Design System From Url

Make a design system from a website, measure its real colours, fonts, spacing and...

- Repository: https://github.com/feimacode/open-design-agent-kit (756 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add feimacode/open-design-agent-kit --skill open-design-design-system-from-url -g -a claude-code -y`
Codex: `npx skills add feimacode/open-design-agent-kit --skill open-design-design-system-from-url -g -a codex -y`
Cursor: `npx skills add feimacode/open-design-agent-kit --skill open-design-design-system-from-url -g -a cursor -y`
Gemini CLI: `npx skills add feimacode/open-design-agent-kit --skill open-design-design-system-from-url -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add feimacode/open-design-agent-kit`

## Description

Make a design system from a website, measure its real colours, fonts, spacing and button states in a browser, write DESIGN.md and tokens.css that agree, and check the result side by side with the site before saving, use whenever the user wants a design system, brand kit, theme or tokens taken from a website or URL ("make a design system from stripe.com", "match our site's look", "extract the brand from this page"), even if they don't mention Open Design

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

<!-- generated:open-design-agent-kit -->

Make an Open Design design system from a website: measure the rendered site, write `DESIGN.md` and `tokens.css` from one set of measurements, and check the result against the site before saving it.

Request: the rest of the user's message (if there is none, ask the user: "Which website should the design system come from?")

**How to talk to the user.** Many people using Open Design don't write code, so:
- Use the user's own words. If they say "artifact", "design tokens" or give a file path, use those terms back; otherwise use the plain words below.
- Keep the machinery out of replies: no tool names, no ids like `od:prototype:poster-hero`, no internal files (`.artifact.json`, `.comments.json`, `config.json`), and not the words "register", "manifest", "sidecar", "entry" or "surface", unless the user used them first.
- Explain a print term the first time it comes up, in one short clause, and not again.
- Say where a file is the way the user would find it ("in your Open Design folder, under seed-swap-flyer"). Give a raw path only where the user can click it (Claude Code, Claude Desktop's Code tab, VS Code) or asks for it.
- End each reply that finishes a step with one line on what they can do next, with at most two options ("Want it in Instagram sizes too, or is it ready to print?").

| Instead of | Say |
|---|---|
| artifact, entry, registered | your design, saved |
| design system, active design system | your style (the first time: "a saved style: colours, fonts and spacing") |
| surface, skill, template, recipe | kind of design, starting layout, or nothing |
| workspace, output directory | your folder, your Open Design folder |
| bleed | print edge ("a few millimetres extra that the printer trims off") |
| trim size | final size |
| preflight findings, errors | "I checked it and fixed…", "one thing to look at:" |
| export | save as PDF, save as an image |
| inline preview, MCP App | the preview above |

The rest: https://github.com/feimacode/open-design-agent-kit/blob/HEAD/.agents/skills/open-design-design-system-from-url/SKILL.md