SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsdesign-md-generator

design-md-generator

Design & creation

View repository

Updated 10-15 22:15

About this skill

DESIGN.md Generator

A skill that generates DESIGN.md for AI coding agents (Claude Code / Cursor / v0, etc.) from any site URL, reference image, or text requirement.

What is DESIGN.md

A design specification format for AI coding agents. It describes colors, typography, components, spacing, and tone in plain text (Markdown). Place it in the project root and reference it with @DESIGN.md , enabling AI to generate a consistent UI.

This skill outputs in compliance with the 9-section structure widely used in getdesign.md / awesome-design-md .

Three input patterns

1. URL → DESIGN.md (CSS analysis-based)

Receive a site URL, extract colors, fonts, border radii, and shadows from CSS, and compile them into DESIGN.md.

Example user instruction:

Steps:

python {SKILL_DIR}/scripts/extract_css.py <URL>

Claude applies the JSON returned by the script (color frequency, fonts, border radii, shadows, breakpoints) to references/template.md to assemble DESIGN.md. The output destination is user-specified or ./DESIGN.md。

2. Image → DESIGN.md (visual extraction)

Receive images such as thumbnails, screenshots, or mocks, and have Claude visually extract them via vision into DESIGN.md.

Example user instruction:

  • "Turn this thumbnail into a DESIGN.md" (image attached)
  • "Create a DESIGN.md with the same tone as this screenshot"

Steps:

  1. Have Claude read the image directly (open the image path with the Read tool)
  2. references/template.md Fill in the elements readable from the image according to the 9 sections of
  3. For elements that cannot be obtained from CSS (such as HEX values), propose approximations and add要確認 marks
  4. The output destination is user-specified or ./DESIGN.md

3. Text requirements → DESIGN.md (generate from requirements)

Generate DESIGN.md from text requirements such as "a cool and pop LP" or "a Japanese modern corporate site."

Example user instruction:

  • "Create a DESIGN.md for a cool and pop LP"
  • "I want a DESIGN.md for a Japanese modern professional-services site"

Steps:

  1. Break down the user's requirements as follows:
    • Atmosphere, industry, target
    • Desired tone (pop / luxury / flat / retro, etc.)
    • Required elements (color specifications or desired fonts)
  2. references/template.md according to the requirements
  3. Propose combinations for the color palette, fonts, and border-radius policy that are consistent with the requirements
  4. Output destination is user-specified or ./DESIGN.md

The 9 sections of the DESIGN.md to output

references/template.md . Conforms to the 9-section structure of getdesign.md / awesome-design-md. For all outputs, strictly adhere to the following section order and section names:

Required Sections

  1. Visual Theme & Atmosphere — Mood / density / aesthetic philosophy (Brand Voice is also consolidated here)
  2. Color Palette & Roles — Descriptive Name + Hex + Functional Role (grouped by Primary / Surface / Text / Accent)
  3. Typography Rules — Font Family + Hierarchy table + Principles
  4. Component Stylings — Buttons / Cards / Inputs / Navigation / Image・Iconography / Microinteractions
  5. Layout Principles — Spacing / Container / Grid / Whitespace philosophy
  6. Do's and Don'ts — Rules to follow and prohibitions (Required: the most important section for preventing AI from going off track)

Recommended Sections (if input information exists, always fill them in)

  1. Depth & Elevation — Shadow Scale + Border Radius Scale + Shadow philosophy
  2. Responsive Behavior — Breakpoints / Touch Targets / Collapsing Strategy
  3. Agent Prompt Guide — Quick Reference + Component Prompts examples + Iteration Guide

Maintain the chapter numbering order from 1 to 9 (the Required/Recommended distinction does not change the chapter order). For chapters that cannot be filled due to insufficient information, do not omit them; instead, add a(要確認) mark and leave the field blank.

Tips

  • Determining Input Type: If the user's instructions contain a URL (a string starting with http/https), treat it as URL mode; if they contain an image path (.png/.jpg/.webp, etc.), treat it as image mode; otherwise, treat it as text requirements mode
  • Mixing Multiple Inputs: For mixed instructions such as URL + "add a pop atmosphere," use a two-stage process: generate DESIGN.md in URL mode, then adjust it with the text requirements
  • Annotate Estimated Values: When outputting estimated values (HEX values, rem values, etc.) in image mode or requirements mode, append "(estimated value, needs confirmation)" at the end
  • Source line at the end of the output: Clearly state at the end which input it was generated from (e.g., **Source**: https://example.com/ (CSS解析, 2026-04時点)）

Required dependencies

  • Python 3.9+
  • requests(for CSS retrieval)
pip install requests