skills.rest
norbert-pap
norbert-papCOMMUNITY
Explore all skills by this author →
GitHub

design-doc

Extract design tokens, patterns, and brand decisions from a codebase into a DESIGN.md file.

Updated Apr 7, 2026
Search Tags:#design#documentation#patterns#tokens#design-system#design-doc
One-click install
npx skills add https://github.com/norbert-pap/claudebert --skill design-doc-norbert-pap
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-doc
Source: https://github.com/norbert-pap/claudebert/tree/main/design-doc
Command: npx skills add https://github.com/norbert-pap/claudebert --skill design-doc-norbert-pap

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

DESIGN.md serves as the single source of truth for a project's design decisions, collecting tokens, component patterns, anti-patterns, and brand decisions to keep design and implementation aligned.

Core Features & Use Cases

  • Extract design tokens (colors, typography, spacing) directly from the live codebase.
  • Identify component patterns and anti-patterns to guide frontend work.
  • Capture brand decisions and interaction guidelines to inform reviews and shipping.
  • Provide a reference point for design-review, code-review, and ship workflows.

Quick Start

Run this skill at the repository root to generate or refresh DESIGN.md using the current codebase.

Frequently Asked Questions about design-doc

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

FAQPage Schema
How do I generate design documentation from an existing codebase?▼

Generate design documentation by extracting design tokens, patterns, and brand decisions directly from live code to create a DESIGN.md file at the repository root. This serves as the single source of truth for project design decisions.

What is a DESIGN.md file and why do I need one for my design system?▼

A DESIGN.md file is a single source of truth collecting design tokens, component patterns, anti-patterns, and brand decisions to keep design and implementation aligned across a project. It guides code-review and ship workflows.

Can I extract design tokens like colors and typography automatically from live code?▼

Yes, you can extract design tokens such as colors, typography, and spacing automatically from the live codebase. The process analyzes repository code to identify these tokens and compiles them into DESIGN.md.

When should I create or update design documentation for my project?▼

Create or update design documentation during design-system inception or updates. Refreshing the documentation across code-review, design-review, and ship workflows ensures extracted patterns and brand decisions remain aligned with the live codebase.

Does generating a DESIGN.md require direct repository access?▼

Yes, generating a DESIGN.md requires repository access to extract design tokens and component patterns directly from the live codebase. The tool outputs the generated file at the repository root.

Related Skills

Explore More Design & Creative Skills→
Higashi-KotaHigashi-Kota

styling

Standardize CSS styling with design tokens and grid-first layouts.

Community
Basic
MayMustAIMayMustAI
1

self-review

Analyze pull requests to verify declared intent against actual code changes.

Official
Intermediate
JoniSirvioJoniSirvio

normalize

Align typography, color, spacing, and components with design-system tokens.

Community
Advanced
RenyEnnosRenyEnnos
1

design-md

Generate DESIGN.md design-system documentation from Stitch project assets.

Community
Advanced