create-design-md

Create a DESIGN.md documenting a product's design language from repository or URL evidence.

Updated Aug 13, 2026
One-click install
npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill create-design-md-mjlike123
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-design-md
Source: https://github.com/Mjlike123/ui-prototype-workbench/tree/main/.agents/skills/create-design-md
Command: npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill create-design-md-mjlike123

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/design.md.

What problem does it solve? Coding agents lack persistent, trustworthy UI context, so generated interfaces drift from the product's actual design language. This Skill produces a single DESIGN.md that records normative tokens, typography, and component guidance grounded in real evidence rather than guesswork. ## Core Features & Use Cases - Dual evidence modes: Extract design decisions from a local product repository, or reconstruct a draft design system from a public website using rendered DOM and computed styles. - Schema-gated output: Normalize findings into a strict DESIGN.md frontmatter schema (colors, typography, rounded, spacing, components) with flat token names and canonical typography fields. - Validation pipeline: Lint the document and run a compatibility export (css-tailwind, json-tailwind, or dtcg) before reporting, rejecting invalid shapes and missing token categories. - Use Case: Point the Skill at your Next.js app repository and ask it to document the design system; it traces tokens, themes, and shared primitives, then writes a validated DESIGN.md that coding agents can follow on future tasks. ## Quick Start Ask the agent to create a DESIGN.md for this repository documenting its design tokens, typography, and component guidance.

Frequently Asked Questions about create-design-md

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a DESIGN.md for my repository?▼

Run the Skill in repository mode against the selected product. It inspects existing guidance, tokens, themes, shared primitives, and representative routes, then writes a validated DESIGN.md at the product root without modifying any source code.

How to document a website's design system without source code?▼

Use URL mode with a public URL. The Skill inspects the rendered DOM, computed styles, and loaded stylesheets at desktop and mobile widths, then produces a reconstructed draft DESIGN.md containing only values that pass its three-proof evidence gate.

Does create-design-md support Tailwind CSS projects?▼

Yes. It selects css-tailwind as the export target for Tailwind v4 and json-tailwind for Tailwind v3, resolving framework utilities through the active theme before writing exact token values into the frontmatter.

Can it handle light and dark theme tokens?▼

It checks the installed @google/design.md specification first. If themes and default-theme are supported it uses theme-aware syntax; otherwise it records default values in canonical tokens and preserves alternate-theme values in a fallback Themes table.

Why does the Skill omit some values it finds?▼

Candidates are omitted when they are uncertain, page-local without a contract, or not implementation-relevant. Only named shared tokens, explicit guidance, or patterns recurring across audited surfaces are promoted into the document.

Will it modify my product source code?▼

No. The Skill's boundary is strictly DESIGN.md. It never changes product source, dependencies, configuration, or generated files, and it reports conflicts with explicit guidance outside the document.