skills.rest
Innei
InneiCOMMUNITY
Explore all skills by this author →
Website𝕏@__oQueryGitHub

generate-design-md

Extract a brand's design system into a standards-compliant DESIGN.md document.

61|1|Updated Apr 2, 2026
Search Tags:#branding#documentation#design-system#web-design#design-token#design-md
One-click install
npx skills add https://github.com/Innei/SKILL --skill generate-design-md
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-design-md
Source: https://github.com/Innei/SKILL/tree/main/skills/writing/generate-design-md
Command: npx skills add https://github.com/Innei/SKILL --skill generate-design-md

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps product teams and agencies transform a brand's design language into a complete DESIGN.md document that documents tokens, typography, color, spacing, components, and responsive behavior for cross-team reference.

Core Features & Use Cases

  • Automated extraction of design tokens, color palette, typography hierarchy, spacing, and component styles from a live website.
  • Generates a DESIGN.md that follows the official template, including sections for Visual Theme, Color Roles, Typography Rules, Component Stylings, Layout Principles, Depth & Elevation, Do's & Don'ts, Responsive Behavior, and Agent Prompt Guide.
  • Useful for design auditing, design system documentation, and handoff to engineers or designers who need a canonical reference.

Quick Start

Provide a brand name or URL to generate a complete DESIGN.md matching the site’s design system.

Frequently Asked Questions about generate-design-md

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

FAQPage Schema
How do I document a design system from an existing website?▼

To document a design system from an existing website, provide the brand URL to automatically extract design tokens, color palettes, typography, and spacing, generating a complete DESIGN.md file.

What is a DESIGN.md document used for in web design?▼

A DESIGN.md document is used to standardize a brand's design language, documenting tokens, typography, color roles, and component styles for cross-team reference during design auditing and engineering handoff.

Can I extract design tokens like typography and spacing directly from a live brand site?▼

Yes, you can extract design tokens directly from a live brand site by providing the URL, which allows automated synthesis of color, typography hierarchy, spacing, and component styles into documentation.

What sections are included when generating design system documentation?▼

Generated design system documentation includes sections for Visual Theme, Color Roles, Typography Rules, Component Stylings, Layout Principles, Depth & Elevation, Responsive Behavior, and an Agent Prompt Guide.

Does generating a DESIGN.md require any prerequisite design files?▼

No prerequisite design files are required to generate a DESIGN.md; you only need to provide a brand name or a live URL to automatically extract and synthesize the design system.

Related Skills

Explore More Design & Creative Skills→
anyreachaianyreachai
1

brand-style-extractor

Extract brand identity details from website HTML and CSS into a Markdown style guide.

Official
Advanced
tktcorporationtktcorporation
2

ui-craft

Implement UI components using reference libraries and design tokens.

Community
Intermediate
khalidouhdanekhalidouhdane

firecrawl

Automates web data collection and browser actions via the Firecrawl CLI.

Community
Advanced
jitenkr2030jitenkr2030

visual-design-foundations

Define typography, color, spacing, and iconography design tokens for UI systems.

Community
Advanced