Skills
.Work. You
Rest

generate-design-md

Community

Turn brands into actionable DESIGN.md docs.

Design & Creative#branding#documentation#design-system#web-design#design-token#design-md
AuthorInnei
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: generate-design-md
Download link: https://github.com/Innei/SKILL/archive/main.zip#generate-design-md

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 510,000+ vetted skills library on demand.