ZeroZ-lab/cc-design

"author": {     "name": "ZeroZ-lab",     "url": "https://github.com/ZeroZ-lab/cc-design"

"name": "ZeroZ-lab",     "url": "https://github.com/ZeroZ-lab/cc-design"   },

"url": "https://github.com/ZeroZ-lab/cc-design"

},   "homepage": "https://github.com/ZeroZ-lab/cc-design",   "compatibility": {

"homepage": "https://github.com/ZeroZ-lab/cc-design",

"author": {     "name": "ZeroZ-lab",     "url": "https://github.com/ZeroZ-lab"

"name": "ZeroZ-lab",     "url": "https://github.com/ZeroZ-lab"   },

"url": "https://github.com/ZeroZ-lab"

},   "homepage": "https://github.com/ZeroZ-lab/cc-design",   "repository": "https://github.com/ZeroZ-lab/cc-design",

"homepage": "https://github.com/ZeroZ-lab/cc-design",

"repository": "https://github.com/ZeroZ-lab/cc-design",

"Write"     ],     "websiteURL": "https://github.com/ZeroZ-lab/cc-design",

],     "websiteURL": "https://github.com/ZeroZ-lab/cc-design",     "defaultPrompt": [

"websiteURL": "https://github.com/ZeroZ-lab/cc-design",

cc-design now supports progressive loading of design systems from [getdesign.md](https://getdesign.md) — a curated collection of 68+ brand design specifications.

Visit [getdesign.md](https://getdesign.md) to see all 68+ available brands and their design characteristics before requesting.

A: getdesign.md is community-maintained. If you notice outdated styles, you can contribute updates to the [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md) repository.

[Demo](https://cc-design-demo.vercel.app) · [Examples](./EXAMPLES.md) · [Report Bug](https://github.com/ZeroZ-lab/cc-design/issues)

| **Design outputs** | Landing pages, slide decks, interactive prototypes, interactive explainers (flow, compare, decision tree), wireframes, animations, design systems, motion studies | | **Design thinking** | 8-layer framework (Goal → Val

| **Design thinking** | 8-layer framework (Goal → Validation), 10 core principles, 20 philosophy schools | | **Brand cloning** | Progressive loading of 68+ brand design systems from [getdesign.md](https://getdesign.md) | | **Quality guardra

| **Brand cloning** | Progressive loading of 68+ brand design systems from [getdesign.md](https://getdesign.md) |

sudo apt install ffmpeg      # Ubuntu/Debian

Bash

"social_media": {     "github": {       "url": "https://github.com/yourname",

"github": {       "url": "https://github.com/yourname",       "username": "yourname"

"url": "https://github.com/yourname",

},     "youtube": {       "url": "https://www.youtube.com/@YourChannel",

"youtube": {       "url": "https://www.youtube.com/@YourChannel",       "channel_name": "Channel name"

"url": "https://www.youtube.com/@YourChannel",

"websites": {     "main_site": {       "url": "https://yoursite.com",

"main_site": {       "url": "https://yoursite.com",       "description": "Website description",

"url": "https://yoursite.com",

ŀ R1��*��<U+0006>��0�9P�#nc ��2�C|�L�Ug��?r�2�m����<U+0005>���

R1��*��<U+0006>��0�9P�#nc ��2�C|�L�Ug��?r�2�m����<U+0005>��� ��)����Ε2���?��s�#m��DKH<U+0004>�@�<U+0004>!F�J�Rq_I�z��<U+0001><U+0019>�{�`<U+0002>���b�ח&%<U+000F><U+0011><U+0017>���A���<U+0008>�<U+0003>��<U+0010>���<U+0008>Ae�(rar�A��'<U+0018><U+0018>n˙8(<U+000E>]5n1� �<U+000E>�<U+000F><U+0006>��z0�<U+0010>t ;��0<U+0018>

| python3 unavailable on user machine | Hook outputs `{}`, exits 0 — graceful degradation | | CLAUDE_PLUGIN_ROOT points to wrong dir | Validate plugin.json presence; fall back to dirname | | SessionStart blocks startup on slow network | upd

| CLAUDE_PLUGIN_ROOT points to wrong dir | Validate plugin.json presence; fall back to dirname | | SessionStart blocks startup on slow network | update-check.sh has 60-min cache TTL + 5s curl timeout | | Iron Law injection duplicates SKILL.

| SessionStart blocks startup on slow network | update-check.sh has 60-min cache TTL + 5s curl timeout |

| Ref ID | Statement | Source | |--------|-----------|--------| | L2-01 | WCAG 2.1 SC 1.4.3: normal text 4.5:1 contrast minimum, large text (>=18pt or 14pt bold) 3:1 | https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html |

|--------|-----------|--------| | L2-01 | WCAG 2.1 SC 1.4.3: normal text 4.5:1 contrast minimum, large text (>=18pt or 14pt bold) 3:1 | https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html | | L2-02 | WCAG 2.2 SC 1.4.11: non-te

| L2-01 | WCAG 2.1 SC 1.4.3: normal text 4.5:1 contrast minimum, large text (>=18pt or 14pt bold) 3:1 | https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html |

| L2-02 | WCAG 2.2 SC 1.4.11: non-text/UI components 3:1 contrast minimum | https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html |

| L2-03 | WCAG 2.1 SC 1.4.1 Use of Color: color must not be the only visual means of conveying information | https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html |

| L2-04 | ~8% of men and 0.5% of women have color vision deficiency; red/green pairing is the most problematic for CVD | Various accessibility research; WebAIM | | L2-05 | W3C SVG accessibility: minimum 4px stroke width, 12px minimum font, 

| L2-05 | W3C SVG accessibility: minimum 4px stroke width, 12px minimum font, >=8px padding around interactive hit-test areas | https://www.w3.org/TR/svg-aam-1.0/ |

|--------|-----------|--------| | L3-01 | 72% of top e-commerce sites offer comparison; 68% of users prefer "only differences" toggle; users spend 72% of comparison time on first 5 feature rows | Baymard Institute comparison UX research | |

| L3-01 | 72% of top e-commerce sites offer comparison; 68% of users prefer "only differences" toggle; users spend 72% of comparison time on first 5 feature rows | Baymard Institute comparison UX research | | L3-02 | NN/g: 5-7 columns is op

| L3-02 | NN/g: 5-7 columns is optimal max for side-by-side; beyond 3-4 products cognitive overload increases | https://www.nngroup.com/articles/comparison-shopping-ux/ |

| L3-04 | Hover cross-column highlighting: on hover over row/column, entire row/column gets subtle background highlight for visual scanning | Material Design data tables spec; UX Collective | | L3-05 | Verdict badges ("Best for X") have mat

| L3-05 | Verdict badges ("Best for X") have matured into formalized interaction-rich components in 2025: hover reveals rationale, click filters/highlights relevant rows, pill-shaped with semantic colors | Design Systems Weekly; UX Collecti

| L3-06 | Mobile comparison: card/accordion transformation at <640px, never simply shrink the table | https://developer.mozilla.org; UX Collective; Adrian Roselli |

| L3-07 | D3 d3.tree() implements Reingold-Tilford with nodeSize([dx,dy]) and separation() for spacing control; community guidelines: horizontal 80-120px, vertical 60-100px | https://d3js.org/api/d3-hierarchy; Observable tree demos |

| L3-08 | dtreeviz provides rich interactive decision tree viz with hover-highlighted decision paths from root to leaf, showing class distribution at terminal nodes | https://github.com/parrt/dtreeviz |

| L3-15 | Radial/polar layout for wide trees (>8 siblings per level) is more compact and readable than vertical layout | D3 radial tree examples; Observable demos | | L3-16 | Sticky header + frozen first column is universal best practice fo

| L3-17 | Distill.pub "Interactive Explanations" (2017): hover annotations + progressive disclosure as interaction backbone | https://distill.pub/2017/interactive-explanations/ |

| # | Statement | Source | |---|---|---| | F-01 | WCAG 2.1 SC 1.4.3 requires **4.5:1 contrast** for normal text, **3:1 for large text** (>=18pt or 14pt bold). Comparison table cell text, row separators, and hover-state backgrounds all fall 

|---|---|---| | F-01 | WCAG 2.1 SC 1.4.3 requires **4.5:1 contrast** for normal text, **3:1 for large text** (>=18pt or 14pt bold). Comparison table cell text, row separators, and hover-state backgrounds all fall under this rule. | https://

| F-01 | WCAG 2.1 SC 1.4.3 requires **4.5:1 contrast** for normal text, **3:1 for large text** (>=18pt or 14pt bold). Comparison table cell text, row separators, and hover-state backgrounds all fall under this rule. | https://www.w3.org/WAI

| F-02 | WCAG 2.2 SC 1.4.11 (Non-Text Contrast) requires **3:1 minimum contrast** for UI components and graphical objects -- relevant for table borders, checkmark/X icons, hover-state backgrounds, and interactive toggle controls in comparis

| F-03 | Baymard Institute research: **72% of top e-commerce sites** offer product comparison; **68% of users** prefer a "only differences" toggle; users spend **72% of comparison time on the first 5 feature rows**. | https://baymard.com/re

| F-04 | NN/g research: **5-7 columns** is the optimal maximum for side-by-side comparison tables; beyond 3-4 products, cognitive overload increases significantly. | https://www.nngroup.com/articles/comparison-shopping-ux/ |

| F-05 | Versus.com uses a **"X wins" verdict summary** pattern with visual progress-bar ratings per spec category. G2 uses **star ratings + feature grid** with review-centric approach. StackShare uses **tool/stack adoption counts** with ov

| F-06 | Hover tooltips in comparison tables should appear **within 300ms** and be dismissible; hover-only content is inaccessible on touch devices and must have a tap-to-expand alternative. | https://baymard.com/research/comparison-ux; htt

| # | Pattern | Description | Source | |---|---|---|---| | P-01 | **Feature Matrix / Side-by-Side Table** | Classic grid: rows = attributes, columns = products. Dominant pattern across Versus.com, G2, SaaS pricing pages. | https://ui-patter

|---|---|---|---| | P-01 | **Feature Matrix / Side-by-Side Table** | Classic grid: rows = attributes, columns = products. Dominant pattern across Versus.com, G2, SaaS pricing pages. | https://ui-patterns.com/patterns/Comparison; https://sma

| P-01 | **Feature Matrix / Side-by-Side Table** | Classic grid: rows = attributes, columns = products. Dominant pattern across Versus.com, G2, SaaS pricing pages. | https://ui-patterns.com/patterns/Comparison; https://smashingmagazine.com/

| P-02 | **Sticky Header + Frozen First Column** | Product names/images stay visible while scrolling vertically through attributes or horizontally through columns. Universal best practice. | https://css-tricks.com/responsive-data-tables/; h

| P-03 | **Differences-Only Toggle** | Filter that hides rows where all compared items have identical values. Highly requested by users. | https://baymard.com/research/comparison-ux; https://smashingmagazine.com/2024/02/designing-better-com

| P-04 | **Hover Cross-Column Highlighting** | On hover over a row or column, that entire row/column gets a subtle background highlight to aid visual scanning. | https://uxdesign.cc/anatomy-product-comparison-page-2023; Material Design data

| P-05 | **"Best For" / Verdict Badges** | Recommendation labels ("Best for Budget", "Best Overall", "X wins") placed above the detailed breakdown to reduce decision fatigue. | https://versus.com; https://www.nngroup.com/articles/comparison

| P-06 | **Mobile: Card/Accordion Transformation** | Responsive breakpoint (<640px) transforms table into stacked cards per product, or accordion per feature category. Never simply shrink the table. | https://developer.mozilla.org/en-US/doc

| P-07 | **Category Grouping + Collapsible Sections** | Features grouped into collapsible categories (Performance, Design, Battery) to reduce vertical scroll. | https://uxdesign.cc/anatomy-product-comparison-page-2023 |

| P-08 | **Interactive Comparison Slider** | Draggable slider overlaying two visual representations (images, code, data sets). Used for before/after and visual-quality comparisons. | `react-compare-slider` npm; https://github.com/NicholasBu

| P-09 | **Progressive Disclosure on Hover/Tap** | Brief summary visible by default; full specs revealed on hover (desktop) or tap (mobile). | https://smashingmagazine.com/2024/02/designing-better-comparison-tables-ux/ |

| P-10 | **Visual Indicator Rows** | Checkmarks/X-marks, star ratings, progress bars, or color-coded badges replace raw text for quick scanning. | https://www.nngroup.com/articles/comparison-shopping-ux/; https://versus.com |

| # | Statement | Source | |---|---|---| | F-07 | The **Reingold-Tilford "tidy" tree algorithm** (original 1981, improved by Buchheim et al. 2006) computes compact tree layouts in **O(n) time**. D3.js `d3.tree()` implements this algorithm. 

|---|---|---| | F-07 | The **Reingold-Tilford "tidy" tree algorithm** (original 1981, improved by Buchheim et al. 2006) computes compact tree layouts in **O(n) time**. D3.js `d3.tree()` implements this algorithm. | https://github.com/d3/d3-

| F-07 | The **Reingold-Tilford "tidy" tree algorithm** (original 1981, improved by Buchheim et al. 2006) computes compact tree layouts in **O(n) time**. D3.js `d3.tree()` implements this algorithm. | https://github.com/d3/d3-hierarchy; htt

| F-08 | D3 `d3.tree()` provides `tree.size([w,h])` and `tree.nodeSize([dx,dy])` for layout control, plus `tree.separation()` for customizing spacing between adjacent siblings. | https://d3js.org/api/d3-hierarchy |

| F-09 | Common node spacing guidelines for SVG tree diagrams: **horizontal: 80-120px** (2x node-width minimum), **vertical: 60-100px** (1.5x node-height minimum). | D3 community guidelines; https://observablehq.com/@d3/tree |

| F-10 | W3C SVG accessibility: minimum **4px stroke width** for borders, **12px minimum font** for labels, **>=8px padding** around interactive hit-test areas. | https://www.w3.org/TR/svg-aam-1.0/ |

| F-11 | IEEE/ACM graph drawing standards: **minimum edge crossings** is the #1 aesthetic criterion; **uniform edge lengths** and **symmetry** are secondary. | Purchase et al., "Graph Drawing Aesthetics"; IEEE standards | | F-12 | `dtreeviz

| F-12 | `dtreeviz` (Python) provides rich interactive decision tree visualization with hover-highlighted decision paths from root to leaf, showing class distribution at terminal nodes. | https://github.com/parrt/dtreeviz |

| F-13 | React Flow (`reactflow`) has **~1M+ weekly npm downloads** and supports animated edges, custom node rendering, and interactive flow diagrams. It is the most popular React library for node-based diagrams. | https://reactflow.dev; ht

| # | Pattern | Description | Source | |---|---|---|---| | P-11 | **Collapsible/Expandable Subtrees** | Click on a node to expand or collapse its children. The most common interaction pattern for decision trees in D3 (d3noob collapsible tre

|---|---|---|---| | P-11 | **Collapsible/Expandable Subtrees** | Click on a node to expand or collapse its children. The most common interaction pattern for decision trees in D3 (d3noob collapsible tree) and React (react-d3-tree). | https:/

| P-11 | **Collapsible/Expandable Subtrees** | Click on a node to expand or collapse its children. The most common interaction pattern for decision trees in D3 (d3noob collapsible tree) and React (react-d3-tree). | https://bl.ocks.org/d3noo

| P-12 | **Hover Path Highlighting** | On hover over any node, the full decision path from root to that node is highlighted (edges bolded, ancestor nodes emphasized, non-path branches dimmed). | dtreeviz; Observable decision tree demos; ECh

| P-13 | **Terminal Conclusion Display** | Leaf nodes display final outcome (classification label, probability, recommendation) either inline or in a tooltip/panel. | dtreeviz; scikit-learn Plotly wrappers | | P-14 | **Radial Tree Layout** 

| P-14 | **Radial Tree Layout** | For wide/broad trees, a radial/polar layout (mapping node.x to angle, node.y to radius) is more compact and readable than vertical layout. | https://bl.ocks.org/mbostock/4063550; D3 radial tree examples |

| P-15 | **Decision Node vs. Leaf Node Visual Distinction** | Decision (branch) nodes rendered differently from leaf (terminal) nodes -- typically: decision = diamond/rectangle with split criteria; leaf = rounded rectangle with conclusion t

| P-16 | **Animated Transitions on Expand/Collapse** | D3 transitions (300-500ms duration) animate node positions and link paths when subtrees expand/collapse, maintaining spatial orientation. | https://bl.ocks.org/d3noob/8375092; D3 transi

| P-17 | **Step-through / Stepper Navigation** | Alternative to full-tree view: a forward/back stepper that walks users through one decision at a time, showing only the current node and its options. | Bret Victor's "Up and Down the Ladder o

| P-18 | **Mermaid.js Text-to-Tree** | Markdown-like DSL syntax (`graph TD; A-->B; B-->C`) renders flowcharts/trees. Widely supported in GitHub, VS Code, Notion. | https://mermaid.js.org; GitHub Mermaid support |

| P-19 | **flowchart.js DSL-to-SVG** | Text definition syntax (`st=>start: Start; cond=>condition: Yes or No?`) renders interactive SVG flowcharts with clickable nodes. | https://github.com/adrai/flowchart.js |

| F-14 | Layered architecture diagrams conventionally arrange layers **top-to-bottom**: Presentation/UI at top, Business Logic in middle, Data/Infrastructure at bottom. Dependency arrows point **downward only**. | Martin Fowler layered arch

| F-15 | **Strict layering**: arrows only to immediately adjacent lower layer. **Relaxed (skip-layer)**: arrows may skip layers, typically shown with dashed/different styling. | Martin Fowler; ArchiMate specification | | F-16 | ArchiMate (T

| F-16 | ArchiMate (The Open Group, ISO/IEC 42010-aligned) standardizes **6 layers**: Strategy, Business, Application, Technology, Physical, Implementation & Migration. Elements connected by standard relationships (serving, realization, ass

| F-17 | Kruchten's **4+1 View Model** (1995) defines Logical, Process, Development, Physical views + Scenarios. C4 model (Simon Brown) evolved from 4+1 for modern agile/cloud contexts: Context, Container, Component, Code. | Kruchten, "Arch

| F-18 | Structurizr implements the C4 model as "architecture as code" -- define models in DSL/Java/TypeScript, auto-generate interactive navigable diagrams with zoom between C4 levels. | https://structurizr.com; https://docs.structurizr.co

| F-19 | Kiali (Istio observability console) provides **interactive service mesh topology** with animated traffic flow, real-time metrics overlay, and drill-down from macro to micro views. | https://kiali.io; Kiali documentation |

| F-20 | React Flow supports **animated edges** (`animated: true` property) with `strokeDashoffset` animation to simulate data flowing along edges. Custom edges can implement particle/gradient flow. | https://reactflow.dev/docs/api/edges/an

| F-21 | D3-sankey (`d3-sankey`) computes node/link positions for directed flow graphs. Nodes can be assigned to specific **layer/column depths** to enforce architectural tier ordering (e.g., UI=0, Service=1, Data=2). | https://github.com/d

| P-27 | **Dependency Direction Enforcement** | Visual rule: downward arrows only for dependencies. Upward calls shown as dotted arrows annotated "callback" or "event". Violations visually flagged. | Martin Fowler strict/relaxed layering; A

| P-28 | **Sankey Diagram for Quantitative Layer Flow** | When flow quantities matter (request volume, data throughput), Sankey diagram overlaid on layered layout shows bandwidth proportions. | d3-sankey; Observable architecture flow exampl

| P-29 | **Cloudcraft / Lucidchart Interactive Architecture** | Commercial tools with drag-and-drop architecture diagramming, live collaboration, and layer-aware layout. Not self-contained HTML -- require platform accounts. | https://cloudc

| # | Statement | Source | |---|---|---| | F-23 | **Scrollama** (by Russell Goldenenberg / The Pudding) is a lightweight, dependency-free JS library for scrollytelling. Uses `IntersectionObserver`. Can be embedded via CDN in a single HTML f

|---|---|---| | F-23 | **Scrollama** (by Russell Goldenenberg / The Pudding) is a lightweight, dependency-free JS library for scrollytelling. Uses `IntersectionObserver`. Can be embedded via CDN in a single HTML file. No build step required

| F-23 | **Scrollama** (by Russell Goldenenberg / The Pudding) is a lightweight, dependency-free JS library for scrollytelling. Uses `IntersectionObserver`. Can be embedded via CDN in a single HTML file. No build step required. | https://gi

| F-24 | **Idyll** (by Matthew Conlen) is an open-source markup language that compiles into self-contained interactive HTML documents with reactive variables. Specifically designed for data-driven storytelling/explainers. | https://idyll-la

| F-25 | **Distill.pub** published "Interactive Explanations" (2017) -- a formal framework combining hover annotations, progressive disclosure, and scaffolded exploration. Their GitHub template includes `dt-hover` annotation support. | http

| F-26 | **Bret Victor** coined "Explorable Explanations" and created **Tangle** (JS library for reactive documents where values can be dragged to recompute the entire document). Philosophy: "interactivity isn't decoration -- it's the expla

| F-27 | **ciechan.dev** (Bartosz Ciechanowski) produces deeply interactive, single-file HTML explainers (GPS, Light, Color, Shadows) with zero external dependencies -- hand-rolled math rendering, Canvas/SVG widgets, scroll-driven narrative

| F-28 | **The Pudding** (pudding.cool) publishes visual essay explainers combining narrative + data visualization + interactivity, built with Scrollama/D3/vanilla JS. Self-contained HTML output. | https://pudding.cool |

| F-29 | **Observable** (observablehq.com) provides notebook-style interactive explainer creation, publishable as standalone HTML pages. | https://observablehq.com |

| F-30 | **V0 by Vercel** (v0.dev) generates interactive UI components from natural language. Produces React/Next.js code, not self-contained single-file HTML. | https://v0.dev |

| F-31 | **Bolt.new** (StackBlitz) generates interactive web apps from NL prompts using browser-based WebContainers. Requires platform runtime; output is not a standalone HTML file. | https://bolt.new |

| F-32 | **Lovable** (formerly GPT Engineer) generates production-quality full-stack web apps from NL prompts. Requires Supabase backend integration; not self-contained single-file output. | https://lovable.dev |

| F-33 | **Claude Artifacts** generates self-contained HTML visualizations in a side-panel preview. Closest analog to cc-design's output format, but requires Claude platform -- not a standalone tool/template system. | https://anthropic.com 

| F-34 | **Create.xyz** generates interactive HTML components from text descriptions. Produces embeddable HTML/CSS/JS. | https://create.xyz |

| F-35 | **Mermaid.js** renders flowcharts, sequence diagrams, and trees from Markdown-like DSL. Widely integrated (GitHub, VS Code, Notion) but renders static diagrams without hover/expand interactivity. | https://mermaid.js.org |

| F-36 | **GoJS** (Northwoods Software) is a commercial diagramming library with LayeredDigraphLayout, animated data flow, swimlane diagrams. Requires license; not self-contained/free. | https://gojs.net |

| F-37 | **jsPlumb** connects DOM elements with SVG/Canvas lines; widely used for visual connectivity. jQuery-compatible; not a full layout engine. | https://jsplumbtoolkit.com |

| F-38 | **Drawflow** is a lightweight, vanilla-JS node editor with drag-and-drop. No layout algorithm; manual positioning. | https://github.com/jerosoler/Drawflow |

|---|---|---|---| | P-31 | **Self-Contained Single HTML File** | All CSS, JS, and assets inlined in one `.html` file. No build step, no external dependencies, no server required. Open directly in browser. This is the cc-design output format

| P-31 | **Self-Contained Single HTML File** | All CSS, JS, and assets inlined in one `.html` file. No build step, no external dependencies, no server required. Open directly in browser. This is the cc-design output format. | ciechan.dev; I

| P-32 | **Progressive Disclosure** | Show basics first; reveal complexity on interaction (hover, click, scroll). Universal pattern across Distill.pub, ciechan.dev, The Pudding, and all explainer platforms. | https://distill.pub/2017/intera

**Issue:** Both the existing template and the planned templates render CTA links as raw `<a href={cta.href}>` / `<a href={cta.target}>` without any URL sanitization. If AI-generated content produces `javascript:alert(1)` or `https://evil.co

Both the existing template and the planned templates render CTA links as raw `<a href={cta.href}>` / `<a href={cta.target}>` without any URL sanitization. If AI-generated content produces `javascript:alert(1)` or `https://evil.com/phishing?

Add a URL sanitization utility (inline, per v0.1 copy pattern) that: 1. Rejects `javascript:`, `data:`, `vbscript:` URI schemes 2. Optionally validates that the URL starts with `https://` or `http://` or is a relative path (`/` or `#`)

1. Rejects `javascript:`, `data:`, `vbscript:` URI schemes 2. Optionally validates that the URL starts with `https://` or `http://` or is a relative path (`/` or `#`) 3. Defaults to `#` on rejection

2. Optionally validates that the URL starts with `https://` or `http://` or is a relative path (`/` or `#`)

**Recommendation:** 1. Add an explicit verification item to T0, T1, T4, T5: "CDN script tags include valid SRI integrity hashes (SHA-384) and crossorigin=anonymous" 2. Document the pinned CDN versions and hash computation method (e.g., `cur

1. Add an explicit verification item to T0, T1, T4, T5: "CDN script tags include valid SRI integrity hashes (SHA-384) and crossorigin=anonymous" 2. Document the pinned CDN versions and hash computation method (e.g., `curl | openssl dgst -sh

2. Document the pinned CDN versions and hash computation method (e.g., `curl | openssl dgst -sha384 -binary | openssl base64 -A`) in a comment in the test HTML files or in a reference doc

<meta http-equiv="Content-Security-Policy"       content="default-src 'self'; script-src 'self' https://unpkg.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'none';">

content="default-src 'self'; script-src 'self' https://unpkg.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'none';">

Security notes:   - cta.href must be a valid URL (https://, http://, /relative, or #). javascript: and data: URIs are rejected.

- cta.href must be a valid URL (https://, http://, /relative, or #). javascript: and data: URIs are rejected.

"name": "Your Team"   },   "homepage": "https://github.com/your-org/your-repo",

},   "homepage": "https://github.com/your-org/your-repo",   "plugins": [

"homepage": "https://github.com/your-org/your-repo",

Run: `git rm references/verification.md`

Expected: `rm 'references/verification.md'`

"author": {     "name": "ZeroZ-lab",     "url": "https://github.com/ZeroZ-lab/cc-design"

"name": "ZeroZ-lab",     "url": "https://github.com/ZeroZ-lab/cc-design"   },

"url": "https://github.com/ZeroZ-lab/cc-design"

},   "homepage": "https://github.com/ZeroZ-lab/cc-design",   "compatibility": {

"homepage": "https://github.com/ZeroZ-lab/cc-design",

"author": {     "name": "ZeroZ-lab",     "url": "https://github.com/ZeroZ-lab"

"name": "ZeroZ-lab",     "url": "https://github.com/ZeroZ-lab"   },

"url": "https://github.com/ZeroZ-lab"

},   "homepage": "https://github.com/ZeroZ-lab/cc-design",   "repository": "https://github.com/ZeroZ-lab/cc-design",

"homepage": "https://github.com/ZeroZ-lab/cc-design",

"repository": "https://github.com/ZeroZ-lab/cc-design",

"Write"     ],     "websiteURL": "https://github.com/ZeroZ-lab/cc-design",

],     "websiteURL": "https://github.com/ZeroZ-lab/cc-design",     "defaultPrompt": [

"websiteURL": "https://github.com/ZeroZ-lab/cc-design",

cc-design now supports progressive loading of design systems from [getdesign.md](https://getdesign.md) — a curated collection of 68+ brand design specifications.

Visit [getdesign.md](https://getdesign.md) to see all 68+ available brands and their design characteristics before requesting.

A: getdesign.md is community-maintained. If you notice outdated styles, you can contribute updates to the [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md) repository.

[Demo](https://cc-design-demo.vercel.app) · [Examples](./EXAMPLES.md) · [Report Bug](https://github.com/ZeroZ-lab/cc-design/issues)

| **Design outputs** | Landing pages, slide decks, interactive prototypes, interactive explainers (flow, compare, decision tree), wireframes, animations, design systems, motion studies | | **Design thinking** | 8-layer framework (Goal → Val

| **Design thinking** | 8-layer framework (Goal → Validation), 10 core principles, 20 philosophy schools | | **Brand cloning** | Progressive loading of 68+ brand design systems from [getdesign.md](https://getdesign.md) | | **Quality guardra

| **Brand cloning** | Progressive loading of 68+ brand design systems from [getdesign.md](https://getdesign.md) |

sudo apt install ffmpeg      # Ubuntu/Debian

"social_media": {     "github": {       "url": "https://github.com/yourname",

"github": {       "url": "https://github.com/yourname",       "username": "yourname"

"url": "https://github.com/yourname",

},     "youtube": {       "url": "https://www.youtube.com/@YourChannel",

"youtube": {       "url": "https://www.youtube.com/@YourChannel",       "channel_name": "Channel name"

"url": "https://www.youtube.com/@YourChannel",

"websites": {     "main_site": {       "url": "https://yoursite.com",

"main_site": {       "url": "https://yoursite.com",       "description": "Website description",

"url": "https://yoursite.com",

ŀ R1��*��<U+0006>��0�9P�#nc ��2�C|�L�Ug��?r�2�m����<U+0005>���

R1��*��<U+0006>��0�9P�#nc ��2�C|�L�Ug��?r�2�m����<U+0005>��� ��)����Ε2���?��s�#m��DKH<U+0004>�@�<U+0004>!F�J�Rq_I�z��<U+0001><U+0019>�{�`<U+0002>���b�ח&%<U+000F><U+0011><U+0017>���A���<U+0008>�<U+0003>��<U+0010>���<U+0008>Ae�(rar�A��'<U+0018><U+0018>n˙8(<U+000E>]5n1� �<U+000E>�<U+000F><U+0006>��z0�<U+0010>t ;��0<U+0018>

Native implementation reference: https://aerotwist.com/blog/flip-your-animations/

<script src="https://unpkg.com/popmotion@11.0.5/dist/popmotion.min.js"></script>

**Pitfall avoidance:** Local curl with proxy TLS will fail, Python urllib works directly.

# Compliant User-Agent is mandatory, otherwise 429 UA = 'ProjectName/0.1 (https://github.com/you; you@example.com)'

UA = 'ProjectName/0.1 (https://github.com/you; you@example.com)'

# Use MediaWiki API to query real URL api = 'https://commons.wikimedia.org/w/api.php'

api = 'https://commons.wikimedia.org/w/api.php'

url = api + '?' + urllib.parse.urlencode(params) req = urllib.request.Request(url, headers={'User-Agent': UA})

req = urllib.request.Request(url, headers={'User-Agent': UA})

with urllib.request.urlopen(req) as response:

**Direct download:** - Unsplash: `https://unsplash.com/photos/[photo-id]/download?force=true`

- Unsplash: `https://unsplash.com/photos/[photo-id]/download?force=true`

- Chrome DevTools: Color picker shows contrast ratio - Figma: Plugin "Contrast" (by Figma) - WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/

- WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/

- Chrome DevTools: Rendering → Emulate vision deficiencies - Figma: Plugin "Sim Daltonism" - WebAIM: https://webaim.org/resources/contrastchecker/

- WebAIM: https://webaim.org/resources/contrastchecker/

**Color picker & conversion:** - OKLCH picker: https://oklch.com/

- OKLCH picker: https://oklch.com/

- Color converter: https://www.littlewebtools.com/color-converter/

- Contrast checker: https://webaim.org/resources/contrastchecker/

**Design tools:** - Figma: Native OKLCH support (2024+) - Adobe Color: https://color.adobe.com/

- Figma: Native OKLCH support (2024+) - Adobe Color: https://color.adobe.com/ - Coolors: https://coolors.co/

- Adobe Color: https://color.adobe.com/

- Coolors: https://coolors.co/

**Inspiration:** - Refactoring UI: https://refactoringui.com/

- Refactoring UI: https://refactoringui.com/

- Tailwind CSS Colors: https://tailwindcss.com/docs/customizing-colors

- Radix Colors: https://www.radix-ui.com/docs/colors

- OKLCH specification: https://oklch.com/

- WCAG 2.1 contrast requirements: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

- Refactoring UI (Adam Wathan & Steve Schoger): https://refactoringui.com/

- A List Apart: Color theory for web design: https://alistapart.com/article/living-in-a-browser/

- MDN: CSS Color Module Level 4: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Use contrast checker: https://webaim.org/resources/contrastchecker/

# Use Playwright to screenshot a public URL npx playwright screenshot https://example.com screenshot.png --viewport-size=1920,1080

npx playwright screenshot https://example.com screenshot.png --viewport-size=1920,1080

### 2. Choose a known design system as the skeleton - Use Radix Colors for color (https://www.radix-ui.com/colors)

- Use Radix Colors for color (https://www.radix-ui.com/colors)

- Use shadcn/ui for component vocabulary (https://ui.shadcn.com)

**For UI Screenshots:** - Use Playwright to screenshot the live product: `npx playwright screenshot https://product.com screenshot.png --viewport-size=1920,1080`

- Use Playwright to screenshot the live product: `npx playwright screenshot https://product.com screenshot.png --viewport-size=1920,1080`

figma.connect(Button, 'https://figma.com/file/abc123', {

design: {       type: 'figma',       url: 'https://figma.com/file/abc123/Design?node-id=1:456',

type: 'figma',       url: 'https://figma.com/file/abc123/Design?node-id=1:456',       props: {

url: 'https://figma.com/file/abc123/Design?node-id=1:456',

],       links: [         { name: 'Documentation', url: 'https://docs.example.com/button' },

links: [         { name: 'Documentation', url: 'https://docs.example.com/button' },       ],

{ name: 'Documentation', url: 'https://docs.example.com/button' },

- **Figma Dev Mode:** https://help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode

- **Figma Code Connect:** https://www.figma.com/developers/code-connect

- **Design Tokens W3C:** https://tr.designtokens.org/

- **Salesforce UX Design Tokens:** https://www.lightningdesignsystem.com/design-tokens/

- **Storybook Documentation:** https://storybook.js.org/docs/react/writing-docs/introduction

Load from Google Fonts: `<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Source+Serif+4:wght@400;600&display=swap" rel="stylesheet">`

This reference enables cc-design to progressively load design systems from https://getdesign.md — a curated collection of 68+ DESIGN.md files capturing the visual DNA of popular brands (Stripe, Vercel, Notion, Apple, Tesla, etc.).

WebFetch("https://getdesign.md", "Extract all available brand names and their categories. Return as a structured list.")

GetDesign.md hosts files at: `https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/designs/{brand-slug}.md`

WebFetch("https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/designs/stripe.md",

**Your workflow:** 1. Detect brand: Vercel 2. Fetch: `https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/designs/vercel.md`

1. Detect brand: Vercel 2. Fetch: `https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/designs/vercel.md` 3. Extract: Black background, white text, geist font, subtle gradients

2. Fetch: `https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/designs/vercel.md`

<html> <head>   <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>

<head>   <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>   <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>

<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

**Inspiration:** - Grid systems in nature: https://bernhardt-zimmer.com/grid-systems/

- Grid systems in nature: https://bernhardt-zimmer.com/grid-systems/

- 8pt grid system: https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632

- CSS Grid tricks: https://css-tricks.com/snippets/css/complete-guide-grid/

**Generators:** - CSS Grid Generator: https://cssgrid-generator.netlify.app/

- CSS Grid Generator: https://cssgrid-generator.netlify.app/

- Flexbox Froggy: https://flexboxfroggy.com/ (interactive learning)

- Grid Garden: https://cssgridgarden.com/ (interactive learning)

<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>

<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>

<!-- First React+Babel --> <script src="https://unpkg.com/react@18.3.1/..."></script>

<script src="https://unpkg.com/react@18.3.1/..."></script>

<script src="https://unpkg.com/react-dom@18.3.1/..."></script>

<script src="https://unpkg.com/@babel/standalone@7.29.0/..."></script>

async complete(prompt) {     const key = document.getElementById('api-key').value;     const res = await fetch('https://api.anthropic.com/v1/messages', {

const key = document.getElementById('api-key').value;     const res = await fetch('https://api.anthropic.com/v1/messages', {       method: 'POST',

const res = await fetch('https://api.anthropic.com/v1/messages', {

<!-- React + Babel pinned -->   <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>

<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>

<!-- Preconnect to font domain --> <link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Load fonts with font-display --> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

**Code examples:** - MDN Responsive Design: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

- MDN Responsive Design: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

<meta charset="UTF-8"> <title>P05 · Chapter Title</title> <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">

<title>P05 · Chapter Title</title> <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet"> <link rel="stylesheet" href="../shared/tokens.css">

<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">

Only fall back to Popmotion (`https://unpkg.com/popmotion@11.0.5/dist/popmotion.min.js`) if the starter genuinely can't cover the use case.

- Tschichold, J. (1928). "Die neue Typographie" - Brown, T. (2011). "More Meaningful Typography" (A List Apart) - https://www.modularscale.com/

- https://www.modularscale.com/

### Modern Design Systems 10. **Material Design Typography:** https://m3.material.io/styles/typography — Google's 8dp grid system.

10. **Material Design Typography:** https://m3.material.io/styles/typography — Google's 8dp grid system.

### Tools 13. **Modular Scale:** https://www.modularscale.com/ — Calculator for type scales.

13. **Modular Scale:** https://www.modularscale.com/ — Calculator for type scales.

14. **Type Scale:** https://typescale.com/ — Visual type scale tool.

15. **Fluid Type Scale:** https://utopia.fyi/type/calculator — Fluid responsive type calculator.

- **NN/g:** Usability Testing 101: https://www.nngroup.com/articles/usability-testing-101/

- **Jakob Nielsen:** Why You Only Need to Test with 5 Users: https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/

- **Rolf Molich:** What Does a Usability Test Cost?: https://www.dialogdesign.dk/cost-usability-test/

- **NN/g:** UX Writing Articles: https://www.nngroup.com/articles/ux-writing/

- **Mailchimp:** Content Style Guide: https://styleguide.mailchimp.com/

- **Google Developer Documentation Style Guide:** https://developers.google.com/tech-writing

- **Shopify Polaris:** Content: https://polaris.shopify.com/content/content-guidelines

- **Writing for the Web:** A List Apart: https://alistapart.com/article/writing-for-the-web/

#!/usr/bin/env bash

#!/usr/bin/env bash

#!/usr/bin/env bash

#!/bin/bash

rm -f "$PAL"

#!/usr/bin/env node

#!/usr/bin/env node

#!/usr/bin/env node

Executable file

Executable file

Executable file

Executable file

Executable file

#!/usr/bin/env node

Executable file

#!/usr/bin/env node

Bash

Executable file

Executable file

Executable file

Executable file

const promise = fetch(path)

Executable file

*  * Usage:  *   <BrowserWindow url="https://example.com" title="Example">

* Usage:  *   <BrowserWindow url="https://example.com" title="Example">  *     <YourWebPage />

*   <BrowserWindow url="https://example.com" title="Example">

function BrowserWindow({   title = 'New Tab',   url = 'https://example.com',

title = 'New Tab',   url = 'https://example.com',   width = 1200,

url = 'https://example.com',

Executable file

// Kind icon       React.createElement('div', { style: iconStyle },         React.createElement('svg', { viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg', width: 16, height: 16 }, kindIcon)

React.createElement('div', { style: iconStyle },         React.createElement('svg', { viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg', width: 16, height: 16 }, kindIcon)       ),

React.createElement('svg', { viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg', width: 16, height: 16 }, kindIcon)

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

Native implementation reference: https://aerotwist.com/blog/flip-your-animations/

<script src="https://unpkg.com/popmotion@11.0.5/dist/popmotion.min.js"></script>

**Pitfall avoidance:** Local curl with proxy TLS will fail, Python urllib works directly.

# Compliant User-Agent is mandatory, otherwise 429 UA = 'ProjectName/0.1 (https://github.com/you; you@example.com)'

UA = 'ProjectName/0.1 (https://github.com/you; you@example.com)'

# Use MediaWiki API to query real URL api = 'https://commons.wikimedia.org/w/api.php'

api = 'https://commons.wikimedia.org/w/api.php'

url = api + '?' + urllib.parse.urlencode(params) req = urllib.request.Request(url, headers={'User-Agent': UA})

req = urllib.request.Request(url, headers={'User-Agent': UA})

with urllib.request.urlopen(req) as response:

**Direct download:** - Unsplash: `https://unsplash.com/photos/[photo-id]/download?force=true`

- Unsplash: `https://unsplash.com/photos/[photo-id]/download?force=true`

- Chrome DevTools: Color picker shows contrast ratio - Figma: Plugin "Contrast" (by Figma) - WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/

- WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/

- Chrome DevTools: Rendering → Emulate vision deficiencies - Figma: Plugin "Sim Daltonism" - WebAIM: https://webaim.org/resources/contrastchecker/

- WebAIM: https://webaim.org/resources/contrastchecker/

**Color picker & conversion:** - OKLCH picker: https://oklch.com/

- OKLCH picker: https://oklch.com/

- Color converter: https://www.littlewebtools.com/color-converter/

- Contrast checker: https://webaim.org/resources/contrastchecker/

**Design tools:** - Figma: Native OKLCH support (2024+) - Adobe Color: https://color.adobe.com/

- Figma: Native OKLCH support (2024+) - Adobe Color: https://color.adobe.com/ - Coolors: https://coolors.co/

- Adobe Color: https://color.adobe.com/

- Coolors: https://coolors.co/

**Inspiration:** - Refactoring UI: https://refactoringui.com/

- Refactoring UI: https://refactoringui.com/

- Tailwind CSS Colors: https://tailwindcss.com/docs/customizing-colors

- Radix Colors: https://www.radix-ui.com/docs/colors

- OKLCH specification: https://oklch.com/

- WCAG 2.1 contrast requirements: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

- Refactoring UI (Adam Wathan & Steve Schoger): https://refactoringui.com/

- A List Apart: Color theory for web design: https://alistapart.com/article/living-in-a-browser/

- MDN: CSS Color Module Level 4: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Use contrast checker: https://webaim.org/resources/contrastchecker/

# Use Playwright to screenshot a public URL npx playwright screenshot https://example.com screenshot.png --viewport-size=1920,1080

npx playwright screenshot https://example.com screenshot.png --viewport-size=1920,1080

### 2. Choose a known design system as the skeleton - Use Radix Colors for color (https://www.radix-ui.com/colors)

- Use Radix Colors for color (https://www.radix-ui.com/colors)

- Use shadcn/ui for component vocabulary (https://ui.shadcn.com)

**For UI Screenshots:** - Use Playwright to screenshot the live product: `npx playwright screenshot https://product.com screenshot.png --viewport-size=1920,1080`

- Use Playwright to screenshot the live product: `npx playwright screenshot https://product.com screenshot.png --viewport-size=1920,1080`

figma.connect(Button, 'https://figma.com/file/abc123', {

design: {       type: 'figma',       url: 'https://figma.com/file/abc123/Design?node-id=1:456',

type: 'figma',       url: 'https://figma.com/file/abc123/Design?node-id=1:456',       props: {

url: 'https://figma.com/file/abc123/Design?node-id=1:456',

],       links: [         { name: 'Documentation', url: 'https://docs.example.com/button' },

links: [         { name: 'Documentation', url: 'https://docs.example.com/button' },       ],

{ name: 'Documentation', url: 'https://docs.example.com/button' },

- **Figma Dev Mode:** https://help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode

- **Figma Code Connect:** https://www.figma.com/developers/code-connect

- **Design Tokens W3C:** https://tr.designtokens.org/

- **Salesforce UX Design Tokens:** https://www.lightningdesignsystem.com/design-tokens/

- **Storybook Documentation:** https://storybook.js.org/docs/react/writing-docs/introduction

Load from Google Fonts: `<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Source+Serif+4:wght@400;600&display=swap" rel="stylesheet">`

This reference enables cc-design to progressively load design systems from https://getdesign.md — a curated collection of 68+ DESIGN.md files capturing the visual DNA of popular brands (Stripe, Vercel, Notion, Apple, Tesla, etc.).

WebFetch("https://getdesign.md", "Extract all available brand names and their categories. Return as a structured list.")

GetDesign.md hosts files at: `https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/designs/{brand-slug}.md`

WebFetch("https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/designs/stripe.md",

**Your workflow:** 1. Detect brand: Vercel 2. Fetch: `https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/designs/vercel.md`

1. Detect brand: Vercel 2. Fetch: `https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/designs/vercel.md` 3. Extract: Black background, white text, geist font, subtle gradients

2. Fetch: `https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/designs/vercel.md`

<html> <head>   <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>

<head>   <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>   <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>

<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

**Inspiration:** - Grid systems in nature: https://bernhardt-zimmer.com/grid-systems/

- Grid systems in nature: https://bernhardt-zimmer.com/grid-systems/

- 8pt grid system: https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632

- CSS Grid tricks: https://css-tricks.com/snippets/css/complete-guide-grid/

**Generators:** - CSS Grid Generator: https://cssgrid-generator.netlify.app/

- CSS Grid Generator: https://cssgrid-generator.netlify.app/

- Flexbox Froggy: https://flexboxfroggy.com/ (interactive learning)

- Grid Garden: https://cssgridgarden.com/ (interactive learning)

<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>

<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>

<!-- First React+Babel --> <script src="https://unpkg.com/react@18.3.1/..."></script>

<script src="https://unpkg.com/react@18.3.1/..."></script>

<script src="https://unpkg.com/react-dom@18.3.1/..."></script>

<script src="https://unpkg.com/@babel/standalone@7.29.0/..."></script>

async complete(prompt) {     const key = document.getElementById('api-key').value;     const res = await fetch('https://api.anthropic.com/v1/messages', {

const key = document.getElementById('api-key').value;     const res = await fetch('https://api.anthropic.com/v1/messages', {       method: 'POST',

const res = await fetch('https://api.anthropic.com/v1/messages', {

<!-- React + Babel pinned -->   <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>

<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>

<!-- Preconnect to font domain --> <link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Load fonts with font-display --> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

**Code examples:** - MDN Responsive Design: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

- MDN Responsive Design: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

<meta charset="UTF-8"> <title>P05 · Chapter Title</title> <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">

<title>P05 · Chapter Title</title> <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet"> <link rel="stylesheet" href="../shared/tokens.css">

<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">

Only fall back to Popmotion (`https://unpkg.com/popmotion@11.0.5/dist/popmotion.min.js`) if the starter genuinely can't cover the use case.

- Tschichold, J. (1928). "Die neue Typographie" - Brown, T. (2011). "More Meaningful Typography" (A List Apart) - https://www.modularscale.com/

- https://www.modularscale.com/

### Modern Design Systems 10. **Material Design Typography:** https://m3.material.io/styles/typography — Google's 8dp grid system.

10. **Material Design Typography:** https://m3.material.io/styles/typography — Google's 8dp grid system.

### Tools 13. **Modular Scale:** https://www.modularscale.com/ — Calculator for type scales.

13. **Modular Scale:** https://www.modularscale.com/ — Calculator for type scales.

14. **Type Scale:** https://typescale.com/ — Visual type scale tool.

15. **Fluid Type Scale:** https://utopia.fyi/type/calculator — Fluid responsive type calculator.

- **NN/g:** Usability Testing 101: https://www.nngroup.com/articles/usability-testing-101/

- **Jakob Nielsen:** Why You Only Need to Test with 5 Users: https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/

- **Rolf Molich:** What Does a Usability Test Cost?: https://www.dialogdesign.dk/cost-usability-test/

- **NN/g:** UX Writing Articles: https://www.nngroup.com/articles/ux-writing/

- **Mailchimp:** Content Style Guide: https://styleguide.mailchimp.com/

- **Google Developer Documentation Style Guide:** https://developers.google.com/tech-writing

- **Shopify Polaris:** Content: https://polaris.shopify.com/content/content-guidelines

- **Writing for the Web:** A List Apart: https://alistapart.com/article/writing-for-the-web/

#!/usr/bin/env bash

#!/usr/bin/env bash

#!/usr/bin/env bash

#!/bin/bash

rm -f "$PAL"

#!/usr/bin/env node

#!/usr/bin/env node

#!/usr/bin/env node

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

#!/usr/bin/env node

Executable file

Executable file

Executable file

#!/usr/bin/env node

Executable file

Bash

Executable file

Executable file

Executable file

Executable file

const promise = fetch(path)

Executable file

*  * Usage:  *   <BrowserWindow url="https://example.com" title="Example">

* Usage:  *   <BrowserWindow url="https://example.com" title="Example">  *     <YourWebPage />

*   <BrowserWindow url="https://example.com" title="Example">

function BrowserWindow({   title = 'New Tab',   url = 'https://example.com',

title = 'New Tab',   url = 'https://example.com',   width = 1200,

url = 'https://example.com',

Executable file

// Kind icon       React.createElement('div', { style: iconStyle },         React.createElement('svg', { viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg', width: 16, height: 16 }, kindIcon)

React.createElement('div', { style: iconStyle },         React.createElement('svg', { viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg', width: 16, height: 16 }, kindIcon)       ),

React.createElement('svg', { viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg', width: 16, height: 16 }, kindIcon)

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file