mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
a75d9938c7
* feat(design-systems): add structured tokens.css schema (default + kami) Compile each brand's DESIGN.md prose into a machine-readable :root block agents paste verbatim, removing the "Primary → --accent" translation step where most token misuse happens. Daemon prompt injection lands in a follow-up; lint-artifact already enforces the shared token vocabulary so no rule changes needed. Schema validated across two contrasting aesthetics: - default (sans-serif, cobalt, B2B utility) — stress test the shallow form, 2-level fg / 2-level surface - kami (serif, parchment, ink-blue, print-first) — stress test the rich form, 4-level fg ramp, 3-level surface, ring elevation, i18n font stacks, and solid-hex tag tints (print renderers double-paint alpha) Schema growth from kami's stress test (5 new optional slots, all backward-compatible — default aliases via var() to existing tokens): - --fg-2 / --meta (4-level fg ramp) - --surface-warm (3-level surface) - --border-soft (2-level border) - --elev-ring (ring elevation as first-class level) Brand-specific extensions live in tokens.css with explicit "NOT in shared schema" labels and a documented promotion path (≥2 brands need it → promote to schema slot). components.html in each brand is a self-contained reference fixture that exercises every token through real layouts. Both fixtures lint clean against apps/daemon/src/lint-artifact.ts. Co-authored-by: Cursor <cursoragent@cursor.com> * feat(design-systems): add token-fixture drift guard Each design system in design-systems/<brand>/ ships two files agents consume in tandem: tokens.css (canonical token bindings) and components.html (a self-contained fixture whose first <style> embeds the same :root paste so the file renders standalone). The fixture's :root block is a copy of tokens.css's :root block, kept in sync only by an inline comment. This adds scripts/check-tokens-fixture-sync.ts and registers it in pnpm guard. The check pairs each brand's tokens.css with its components.html and asserts the unscoped :root block is byte-equivalent after canonical normalization (CSS comments stripped, whitespace collapsed, separator spacing normalized). Brands missing one half of the pair, or with no :root rule in either file, fail the guard. Scoped overrides like :root[lang="zh-CN"] are not required to appear in the fixture (per the kami fixture's inline comment they are pasted only when an artifact's <html lang> matches), so the check only compares the unscoped :root block. Verified: pnpm guard passes for default + kami, fails on intentional value drift, fails on missing token, tolerates whitespace-only formatting differences. Co-authored-by: Cursor <cursoragent@cursor.com> * fix(design-systems): point fixture CTAs to real files Both default and kami components.html advertised in-page anchors (#tokens, #spec, #surface, #accent, #type, #components) but defined no matching ids, so every CTA was a no-op when the fixture was opened locally — flagged by mrcfps in #1231. Re-point each link to a real artifact in the same brand directory: - "View tokens" / "Inspect tokens" / "Inspect typography" → ./tokens.css - "Read the spec" / "Read the rule" → ./DESIGN.md Browsers render these as raw source views, which is the desired UX for a reference fixture: clicking the CTA shows the underlying contract instead of jumping to nothing. Agents copying the fixture also learn the pattern of "buttons link to actual sibling resources". The :root token block is unchanged, so the token-fixture drift guard still passes for both brands. Co-authored-by: Cursor <cursoragent@cursor.com> * feat(design-systems): codify token schema (A1/A2/B/C layers) The two-brand pilot (default + kami) settled the shape of the shared token schema; this commit codifies it as a machine-readable contract and enforces it in pnpm guard, addressing lefarcen's review on #1231: > the optional-vs-required split won't generalize cleanly when brand > #3 needs different Layer A tokens or when multiple brands converge > on the same extension (promoting C→B→A). Consider surfacing that > limitation in the PR narrative or in a future SCHEMA.md. Schema lives under design-systems/_schema/ as three files: - tokens.schema.ts — TypeScript declaration of every shared token with its layer (A1-identity / A1-structure / A2 / B-slot), plus per-brand C-extension allowlists and a global C-prefix allowlist - defaults.css — CSS mirror of A2 fallback values, used as the human-readable contract reviewer's-eye copy and the future input to the derive script - AGENTS.md — schema layer model, C → B-slot → A2 promotion rules, when-not-to-add-a-token guidance Layer model: A1-identity 8 tokens — bg/surface/fg/muted/border/accent + font-display/font-body. The brand IS these values; no fallback is defensible. A1-structure 18 tokens — type scale (8), leading (2), tracking (1), section-y (3), container (4). Structural decisions vary per brand by design and have no cross-brand default. A2 26 tokens — accent states, semantic colors, motion, base spacing scale, radius, elevation, focus, font-mono. Required in every tokens.css; fallback lives in defaults.css for the future derive script to inline when DESIGN.md does not specify the value. B-slot 4 tokens — fg-2 / meta / surface-warm / border-soft. Brand may bind independently or alias the named sibling via var(...) for components that target the richer ramp. C-extension n tokens — brand-specific names (kami's tag-bg-*, leading-display, accent-light, etc.). Allowlisted per-brand in BRAND_EXTENSIONS or globally by prefix in BRAND_EXTENSION_PREFIXES. Promote when a second brand adopts the same name. Why A2 fails the guard today: Artifacts are generated by agents pasting one brand's :root block into a single <style>; there is no global stylesheet that supplies fallbacks at runtime. A tokens.css missing an A2 declaration would silently break any var() reference in the fixture. Until the derive script (PR-B) lands and inlines defaults, every brand's tokens.css must declare every A2 token directly. The guard enforces this strictly. Why --font-mono lands in A2 (not A1): 149 brands' DESIGN.md files were surveyed: 87 (58%) declare a monospace stack, 62 (42%) do not — including major brands like bmw / nike / apple / notion / mastercard / meta. Agent paste cannot rely on the brand author having written it down; a defaultable A2 fallback (with CJK brands like kami overriding) is safer than forcing every brand author to add a field they may not realize their kbd / code-block components need. Five guard checks, each registered as its own entry in scripts/guard.ts so failures attribute to a specific contract: 1. token-fixture sync — components.html :root ↔ tokens.css :root byte-equivalent (existing) 2. A1 required tokens — every brand declares every A1 token 3. A2 required tokens — every brand declares every A2 token 4. unknown token allowlist — every declared token is in schema or brand-extension allowlist 5. A2 defaults parity — defaults.css ↔ tokens.schema.ts fallback byte-equivalent Verified on default + kami: - 26 A1 tokens declared in both brands - 26 A2 tokens declared in both brands - 129 total declarations, all match shared schema or brand extensions - defaults.css ↔ tokens.schema.ts parity holds - sanity test: drifting --motion-fast in defaults.css fails check 5 with a clear divergence message The PR description originally listed "Dedicated SCHEMA.md" as explicitly NOT in this PR ("Once 3+ brands ship, extracting a single source of truth becomes worthwhile"). That boundary moves: lefarcen's review surfaced the schema-generalization risk, and the schema must exist as a machine-enforced contract before the derive script can read it. The TS file replaces the markdown that was deferred. Co-authored-by: Cursor <cursoragent@cursor.com> * fix(web/tests): pass missing designTemplates prop to ProjectView Pre-existing typecheck regression on main: PR #955 ( |
||
|---|---|---|
| .. | ||
| _schema | ||
| agentic | ||
| airbnb | ||
| airtable | ||
| ant | ||
| apple | ||
| application | ||
| arc | ||
| artistic | ||
| atelier-zero | ||
| bento | ||
| binance | ||
| bmw | ||
| bmw-m | ||
| bold | ||
| brutalism | ||
| bugatti | ||
| cafe | ||
| cal | ||
| canva | ||
| cisco | ||
| claude | ||
| clay | ||
| claymorphism | ||
| clean | ||
| clickhouse | ||
| cohere | ||
| coinbase | ||
| colorful | ||
| composio | ||
| contemporary | ||
| corporate | ||
| cosmic | ||
| creative | ||
| cursor | ||
| dashboard | ||
| default | ||
| discord | ||
| dithered | ||
| doodle | ||
| dramatic | ||
| duolingo | ||
| editorial | ||
| elegant | ||
| elevenlabs | ||
| energetic | ||
| enterprise | ||
| expo | ||
| expressive | ||
| fantasy | ||
| ferrari | ||
| figma | ||
| flat | ||
| framer | ||
| friendly | ||
| futuristic | ||
| github | ||
| glassmorphism | ||
| gradient | ||
| hashicorp | ||
| hud | ||
| huggingface | ||
| ibm | ||
| intercom | ||
| kami | ||
| kraken | ||
| lamborghini | ||
| levels | ||
| linear-app | ||
| lingo | ||
| loom | ||
| lovable | ||
| luxury | ||
| mastercard | ||
| material | ||
| meta | ||
| minimal | ||
| minimax | ||
| mintlify | ||
| miro | ||
| mission-control | ||
| mistral-ai | ||
| modern | ||
| mongodb | ||
| mono | ||
| neobrutalism | ||
| neon | ||
| neumorphism | ||
| nike | ||
| notion | ||
| nvidia | ||
| ollama | ||
| openai | ||
| opencode-ai | ||
| pacman | ||
| paper | ||
| perspective | ||
| playstation | ||
| posthog | ||
| premium | ||
| professional | ||
| publication | ||
| raycast | ||
| refined | ||
| renault | ||
| replicate | ||
| resend | ||
| retro | ||
| revolut | ||
| runwayml | ||
| sanity | ||
| sentry | ||
| shadcn | ||
| shopify | ||
| simple | ||
| skeumorphism | ||
| slack | ||
| sleek | ||
| spacex | ||
| spacious | ||
| spotify | ||
| starbucks | ||
| storytelling | ||
| stripe | ||
| supabase | ||
| superhuman | ||
| tesla | ||
| tetris | ||
| theverge | ||
| together-ai | ||
| totality-festival | ||
| trading-terminal | ||
| uber | ||
| urdu | ||
| vercel | ||
| vibrant | ||
| vintage | ||
| vodafone | ||
| voltagent | ||
| warm-editorial | ||
| warp | ||
| webex | ||
| webflow | ||
| wired | ||
| wise | ||
| x-ai | ||
| xiaohongshu | ||
| zapier | ||
| README.md | ||
Design Systems
Each subfolder is a portable design system in DESIGN.md
format. Pick one in the top-bar Design system dropdown and every skill
will read it as part of its system prompt.
What's bundled
default/— Neutral Modern. Hand-authored starter for the OD spec.warm-editorial/— Warm Editorial. Hand-authored serif starter.atelier-zero/— Atelier Zero. Hand-authored magazine-grade collage system: warm paper canvas, plaster-and-architecture imagery, oversized italic-mixed display type, Roman-numeral section markers, side rails of rotated micro-text, coordinate annotations, single coral accent. Pairs withskills/open-design-landing/andskills/open-design-landing-deck/for the canonical landing-page and slide-deck renderings.kami/— 紙 / 纸. Editorial paper system distilled fromtw93/kami(MIT). Warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool grays. Pairs with thetemplates/kami-deck.htmlstarter for slide work.- 57 design skills, sourced from
bergside/awesome-design-skillsand added directly as normalized 9-sectionDESIGN.mdfiles. - 72 product systems, including 70 imported from
VoltAgent/awesome-design-md(thegetdesign@latestnpm package, MIT-licensed), plus two hand-authored additions (cisco,webex). This table covers that imported product-system subset only; the full bundled catalog is larger once you include the hand-authored starters and the separate design-skill systems listed above. One folder per brand:Category Systems AI & LLM claude · cohere · elevenlabs · minimax · mistral-ai · ollama · opencode-ai · replicate · runwayml · together-ai · voltagent · x-ai Developer Tools cursor · expo · lovable · raycast · superhuman · vercel · warp Productivity & SaaS cal · intercom · linear-app · mintlify · notion · resend · webex · zapier Backend & Data cisco · clickhouse · composio · hashicorp · mongodb · posthog · sanity · sentry · supabase Design & Creative airtable · clay · figma · framer · miro · webflow Fintech & Crypto binance · coinbase · kraken · mastercard · revolut · stripe · wise E-Commerce & Retail airbnb · meta · nike · shopify · starbucks Media & Consumer apple · ibm · nvidia · pinterest · playstation · spacex · spotify · theverge · uber · vodafone · wired · xiaohongshu Automotive bmw · bugatti · ferrari · lamborghini · renault · tesla
Folders use ASCII slugs — dotted brands are normalized (linear.app →
linear-app, x.ai → x-ai, etc.).
File shape
The first H1 is the title shown in the picker. The line immediately after
the H1 is parsed for > Category: <name> and used to group the dropdown:
# Design System Inspired by Cohere
> Category: AI & LLM
> Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic.
## 1. Visual Theme & Atmosphere
...
Both the boilerplate prefix Design System Inspired by and the
> Category: ... line are stripped from the dropdown label and the summary
preview at runtime — they're only metadata.
Adding your own
Drop a new folder containing a DESIGN.md and it shows up on next refresh.
Add a > Category: <Group> line to slot it under an existing group, or use
any new label and it lands at the bottom of the dropdown.
Refreshing the bundled set
The 70 imported product systems are pulled from the upstream npm package. To re-sync to the latest hashes:
curl -sL $(npm view getdesign dist.tarball) -o /tmp/getdesign.tgz
tar -xzf /tmp/getdesign.tgz -C /tmp
node --experimental-strip-types scripts/sync-design-systems.ts
For now, the original importer lives at the top of the
excessive-climb branch — re-run it against a fresh tarball.
Attribution
The 70 imported product systems are sourced from
VoltAgent/awesome-design-md
(MIT, © VoltAgent contributors). They are aesthetic inspirations — none
of them are official assets of the brands they reference.
The cisco/ and webex/ systems are hand-authored additions based on the
current public Cisco and Webex / Momentum visual languages.
The kami/ system adapts tokens, type rules, and the "ten invariants" from
tw93/kami (MIT, © Tw93 and contributors),
a Claude skill for typesetting professional documents and slide decks.
The 57 design skills are sourced from
bergside/awesome-design-skills.