create-design-md

Generate DESIGN.md files from codebase, Figma, or pasted content.

Updated May 18, 2026

Search Tags:#automation #design #documentation #lint #design-doc #design-md

Ready to run

npx skills add https://github.com/gaspanik/vanilla-tailwind4-starter --skill create-design-md

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-design-md
Source: https://github.com/gaspanik/vanilla-tailwind4-starter/tree/main/.claude/skills/create-design-md
Command: npx skills add https://github.com/gaspanik/vanilla-tailwind4-starter --skill create-design-md

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates the creation of a DESIGN.md file in the project root following Google's design.md specification, reducing manual drafting time.

Core Features & Use Cases

Generate DESIGN.md from one of four sources: codebase exploration, a Figma URL, an existing DESIGN.md URL, or pasted design spec content.
Lint and validate the DESIGN.md against the design.md specification before saving.

Quick Start

Provide a source (codebase, Figma URL, existing DESIGN.md URL, or pasted content) and generate DESIGN.md, then run the linter to verify conformance.

Frequently Asked Questions about create-design-md

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

FAQPage Schema

How do I auto-generate a DESIGN.md file from a Figma URL?▼

You can auto-generate DESIGN.md from a Figma URL by passing the link to the workflow, which extracts design data, builds YAML frontmatter, renders the body, and validates the output against the design.md linter.

What is the design.md specification and why do I need it for my project?▼

The design.md specification is a Google standard for structuring project design documentation. You need it to ensure consistency, and this Skill automates drafting by generating a linted DESIGN.md from your codebase, Figma, or pasted specs.

Can I generate design documentation directly from pasted design spec content?▼

Yes, you can generate design documentation from pasted content. The Skill accepts raw design spec text as a source, transforming it into a properly formatted DESIGN.md file complete with YAML frontmatter and lint validation.

Does the DESIGN.md linter validate YAML frontmatter and body content?▼

Yes, the DESIGN.md linter validates both YAML frontmatter and body content. The multi-step workflow explicitly confirms lint conformance against the design.md specification before finalizing and saving the file to your project root.

What is the best way to create a DESIGN.md file from an existing design doc URL?▼

The best way to create DESIGN.md from an existing URL is to feed the link into this automated workflow. It fetches the remote design doc, restructures the content into the Google design.md format, and runs the linter to ensure full compliance.