Design System Lite is a self-contained set of CSS, brand assets, and Claude Code skills
that follow Wego's brand system. There is no build step, no server, and no runtime dependencies —
every page links two CSS files and renders in any browser. Copy it into your project with one
degit command, describe a screen or component to Claude Code, and it
generates a production-quality HTML page using the real design tokens and components.
Everything is driven by two files: design-system/foundation.css (all design tokens,
typography, layout) and design-system/components.css (the component library). Browse the
rest of this documentation to see the tokens and components you can use.
The whole system — tokens, component CSS, brand assets, and the Claude Code skills — lives in one
folder in the repo. Copy it into your project with degit (no registry, no token, no
install). Run this from your project root:
This drops a self-contained design-system/ folder into your project:
design-system/ (the CSS + JSON + JS), assets/ (icons, logos, mascot), and
skills/ (the Claude Code skills). No build step, no dependencies.
degit pulls straight from the repo, so you need read access to
wego/design-hub. Prefer git? git clone the repo and copy
packages/design-system-lite/ yourself — same result.
Start Claude Code in the project. Copy the design-system/skills/ folder you just pulled
into your .claude/skills/ so Claude learns the design rules, the components, and where the
tokens live — then it can generate on-brand pages from a prompt.
Ask in plain language. For example, "make a desktop flight results page with a filter
sidebar". Claude asks which format you want (desktop, mobile, dashboard, email, or a
component preview) and generates a self-contained HTML file in the matching
exploration-*/ folder.
The generated file is plain HTML — double-click it, or serve the whole repo and browse to it. No build required.
# optional: serve everything on one localhost
npm run start # → http://127.0.0.1:8080Ask Claude to tweak spacing, swap a component, change copy, or add a state. Because every page uses the same tokens and components, changes stay on-brand and consistent.
Claude follows these automatically, but they're worth knowing:
var(--token) — never hardcoded values or inline style=""..btn, .chip, .badge, etc. as built — no re-declaring their appearance.assets/icon/, inlined and recolored via --wp-ic-* tokens — never hand-drawn.If Claude drifts from these, just remind it in plain language. If it hand-builds something instead of reusing a component, say:
"Hi Claude, make sure you use the existing components for this."Same for any rule — e.g. "use tokens, not hardcoded colors" or "pull the icon from the library." It will correct course.
design-system/ — the source of truth: foundation.css (tokens), components.css + components/ (the library), components.js (behaviours).design-system-preview/ — this documentation: every token and component, browsable.exploration-desktop/, -mobile/, -dashboard/, -email/ — where generated pages land, one folder per format.assets/ — brand assets: logos, 512 icons, product icons, the Weggio mascot.