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.