Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIDeepSeekDeepSeekMuseMuse+22 more

    DESIGN.md Generator (Google design.md spec)

    2

    Generates a lint-clean DESIGN.md in Google's design.md format from your codebase, a Figma file, an existing DESIGN.md URL or a pasted spec, so every AI agent builds with the same colors, type and components.

    Free

    10 uses5.0 (1 review)
    DESIGN.md Generator (Google design.md spec)

    DESIGN.md Generator (Google design.md spec)

    Example session with this skill installed

    /create-design-md

    • Read your context and instructions
    • Compiled the design md generator
    • Generated the UI component

    Where should the design information come from? → Explore codebase

    Read src/styles/global.css (@theme), src/layouts/Layout.astro and all 7 section components. Heading weights were taken from the actual markup: no weight class on any heading, so they are recorded as 400, not an assumed bold.

    Generated DESIGN.md (frontmatter excerpt)

    ---
    version: alpha
    name: Minimufy
    description: Brand landing page for Minimufy, a minimal-luxury outdoor brand opening its flagship store in Jingumae, Tokyo.
    colors:
      primary: "#16150F"
      secondary: "#A9813D"
      secondary-soft: "#C9A668"
      surface: "#F4F1E9"
      surface-alt: "#EAE6D9"
      border: "#DDD6C4"
      muted: "#86816E"
    typography:
      display:
        fontFamily: Gen Interface JP Display
        fontSize: 89px
        fontWeight: 400
        lineHeight: 1.05
        letterSpacing: -0.025em
      body-md:
        fontFamily: Gen Interface JP
        fontSize: 15px
        fontWeight: 400
        lineHeight: 1.625
      eyebrow:
        fontFamily: Gen Interface JP
        fontSize: 9.6px
        fontWeight: 400
        lineHeight: 1.5
        letterSpacing: 0.35em
    
      # + h1, h2, h3, body-sm, label-md
    rounded:
      none: 0px
    components:
      button-primary:
        backgroundColor: "{colors.primary}"
        textColor: "{colors.surface}"
        rounded: "{rounded.none}"
        padding: 12px
      divider:
        backgroundColor: "{colors.border}"
        height: 1px
    
      # + button-primary-hover, button-outline, input, eyebrow,
      #   body-muted, section-alt, footer, footer-link-hover
    ---
    

    The body follows the spec's fixed section order: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts.

    Lint (@google/design.md lint DESIGN.md)

    SeverityCount
    Errors0
    Warnings3
    Info1

    All 3 warnings are real contrast problems in the existing site, not formatting issues:

    ComponentPairRatio
    body-mutedstone #86816E on paper #F4F1E93.46:1
    eyebrowbrass #A9813D on paper #F4F1E93.16:1
    button-primary-hoverpaper #F4F1E9 on brass #A9813D3.16:1

    These are below the WCAG AA minimum of 4.5:1. The brand colors were kept exactly as they are in the code. Changing a brand palette is a design decision, so they are reported for you to act on rather than silently adjusted.

    Summary

    DESIGN.md created at the project root.
    Lint: 0 errors, 3 warnings (contrast), 1 info.
    
    Colors: achromatic ink/paper base + one brass accent (7 tokens)
    Type:   Gen Interface JP Display (headings, all 400) / Gen Interface JP (body 15px),
            Major Third scale
    Shape:  square corners throughout, no shadows
    Next:   consider darkening `muted` and `secondary` for text use to reach 4.5:1.
    

    global.css

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    AI agents build UI from whatever they can infer, so every session invents slightly different colors, font sizes and button styles. DESIGN.md, Google's open format for describing a design system to agents, fixes that: one file in the project root with machine-readable tokens in YAML frontmatter and human-readable guidance below. This skill writes that file for you from the design you already have, then validates it with the official linter.

    What it does

    • Builds DESIGN.md from 4 kinds of source: your codebase (Tailwind v4 @theme, CSS and real markup), a Figma file, an existing DESIGN.md URL, or a spec you paste in
    • Reads font weights from the actual markup instead of assuming "headings are bold", so the file describes the design you really shipped
    • Writes colors, typography, rounded corners, spacing and components as proper design.md tokens, with the Markdown body in the spec's fixed section order
    • Wires every utility color (border, muted, surface-alt) into a component so none are flagged as orphaned, using only sub-tokens the linter accepts
    • Runs @google/design.md lint, fixes errors, and reports real contrast problems between text and background colors below WCAG AA
    • Never deletes or silently changes your brand colors to make a warning go away

    How it works

    1. Asks where the design information should come from (or detects a Figma or DESIGN.md URL passed as an argument)
    2. Collects tokens from that source. In codebase mode it reads the Tailwind entry CSS, layouts and components.
    3. Generates DESIGN.md in the project root
    4. Runs the linter, fixes errors and re-runs until none remain
    5. Reports the file path, the lint summary and the key tokens

    What it is not

    It documents an existing design; it doesn't invent one. If the codebase has no real palette yet, it asks you instead of making colors up. It also doesn't restyle your site: contrast problems are reported for you to decide on.

    Requirements

    Node.js, to run the linter through npx or pnpm dlx. Figma mode needs an agent connected to the official Figma MCP server. Works with any framework; codebase mode is strongest on Tailwind v4 projects.

    Find more skills like this on the Claude Skills Marketplace, the Codex Skills Marketplace and the Gemini Skills Marketplace, or browse Claude Skills for Frontend & Web Apps.

    Documents an existing design; it does not invent a palette when the codebase has none (it asks you instead). Codebase mode reads Tailwind v4 @theme tokens most reliably; other setups are read from CSS and markup. Figma mode needs the official Figma MCP server. The linter needs Node.js.

    How to use

    1. 1

      Connect your agent to the Agensi MCP

      Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup

    2. 2

      Sign in to Agensi

      Your agent shows a sign-in link. Sign in and click Allow.

    3. 3

      Ask for what you need

      Your agent loads this skill and uses it on your task. It always asks before buying a skill.

    Reviews

    5.0
    1 review
    5
    1
    4
    0
    3
    0
    2
    0
    1
    0

    This skill has been used 10 times.

    Trust & safety

    Security scan

    Security scan passed 1 month ago

    • Free with an Agensi account

    Accounts
    GitHub

    Permissions

    Terminal / Shell
    Read Files
    Write Files
    Network Access

    Allowed Hosts

    registry.npmjs.org
    raw.githubusercontent.com

    File Scopes

    DESIGN.md
    **/*.css
    src/**
    package.json
    tailwind.config.*
    vite.config.*

    Reads the project's CSS, layouts, components and package.json to extract design tokens, and writes a single file, DESIGN.md, in the project root. Runs the official @google/design.md linter through npx / pnpm dlx (downloaded from the npm registry). Network access is only for that package download and, in DESIGN.md URL mode, fetching the public DESIGN.md you provide. Figma mode uses the official Figma MCP server's read-only tools (https://www.figma.com/mcp-catalog/). No environment variables or credentials are read.

    Listed1 month ago

    What's inside

    Frequently Asked Questions

    An open format from Google for describing a design system to AI agents: design tokens in YAML frontmatter plus written guidance in Markdown, kept in the project root so every agent session uses the same colors, typography and components.

    Your codebase, a Figma file, the URL of an existing DESIGN.md, or a design spec you paste in. With no argument, it asks you which one to use.

    No. Errors are fixed, but contrast warnings are reported, not silently fixed by changing your palette. That decision stays with you.

    It asks before doing anything, and you can keep the existing file or regenerate it.

    No, but codebase mode gets the most out of a Tailwind v4 project because it reads the @theme tokens directly. Other projects work from their CSS and markup.

    An agent connected to the official Figma MCP server. The skill only reads from Figma and never edits the file. Connection steps differ by agent/client — see https://www.figma.com/mcp-catalog/ for setup guides.

    New in Frontend & Web Apps

    Free