skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

create-design-md

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

3|Updated Apr 20, 2026
Search Tags:#typography#documentation#design system#design tokens#tailwind#frontmatter#ui audit
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill create-design-md-langgenius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-design-md
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/create-design-md
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill create-design-md-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/design.md.

What problem does it solve? Design systems often live implicitly in code or rendered pages, leaving coding agents and new team members without a single source of truth for tokens, typography, and component rules. This Skill produces a validated DESIGN.md that captures the governing design language without modifying product source. ## Core Features & Use Cases - Repository mode: Audits tokens, themes, shared primitives, and routes in a local codebase to extract normative design values with source traceability. - URL mode: Reconstructs a draft DESIGN.md from a public website using rendered DOM inspection, computed styles, and loaded stylesheets across desktop and mobile viewports. - Schema validation and export: Normalizes frontmatter into the DESIGN.md schema, then runs lint and compatibility export (css-tailwind, json-tailwind, or dtcg) before reporting. - Use Case: Point the Skill at a Tailwind v4 repository to generate a DESIGN.md with flat color tokens, named typography scales, and rounded values, verified by npx @google/design.md lint and export. ## Quick Start Create a DESIGN.md for this repository by auditing its tokens, shared components, and global styles, then validate it with the design.md lint and export commands.

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 from an existing repository?▼

Run the Skill in repository mode: it audits existing DESIGN.md files, tokens, themes, shared primitives, and representative routes in order, then writes normalized frontmatter and prose. Validate the result with npx @google/design.md lint and a compatibility export before reporting.

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

Use URL mode, which inspects the rendered DOM, computed styles, and loaded stylesheets at desktop and mobile widths across up to three same-origin pages. Values are promoted only when computed styles and loaded declarations agree or recur across samples, and the output is labeled a reconstructed draft.

Does the Skill support Tailwind CSS design tokens?▼

Yes. It selects css-tailwind as the export target for Tailwind v4 and json-tailwind for Tailwind v3, verifying that colors, typography, rounded, and spacing categories emit the corresponding --color-*, --font-*, --text-*, --radius-*, and --spacing-* families.

Why does DESIGN.md validation fail after generation?▼

Failures usually come from invalid frontmatter shapes, such as scalar typography entries, nested source-style keys, or token names that fail the export target's naming rules. Rewrite the frontmatter into canonical mappings and rerun lint and export until every populated category is emitted.

What are the limitations of URL-mode design reconstruction?▼

URL mode cannot establish internal token names, component ownership, or design rationale, and requires rendered browser access. Without computed styles or loaded CSS evidence, values are omitted rather than guessed, and the document must be labeled a reconstructed draft.

Related Skills

Explore More Design & Creative Skills→
gagandeepgillgagandeepgill
1

create-design-md

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

Community
Advanced
AradotsoAradotso
3

figma-design-md-generator

Generate DESIGN.md and SKILL.md from Figma design tokens and component families.

Official
Intermediate
gballer77gballer77

gspec-audit

Audits gspec documents against codebase to detect orphan capabilities.

Community
Advanced
gkswls5006-webgkswls5006-web

moai-design-tools

Automate design-to-code workflows from Figma to React and Tailwind.

Community
Advanced