skills.rest
gaspanik
gaspanikCOMMUNITY
Explore all skills by this author →
Website𝕏@cipherGitHub

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
One-click install
npx skills add https://github.com/gaspanik/vanilla-tailwind4-starter --skill create-design-md
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
lalaABClalaABC

figma-code-connect-components

Connect Figma design components to code components using Code Connect mapping tools.

Community
Advanced
john-data-chenjohn-data-chen
2

design-md

Create, validate, and export Google DESIGN.md token specifications.

Community
Intermediate
anderson-0anderson-0
4

architecture-map

Generate Mermaid architecture diagrams from source code with dependency analysis.

Community
Advanced
LuminaVaultLuminaVault

design-md

Generate and validate Google DESIGN.md files with YAML front matter and Markdown body.

Official
Intermediate