Skills

Create Design Md

Create or update a DESIGN.md from an existing product repository or public website.

Install

npx skills add ibelick/ui-skills --skill create-design-md -g -a claude-code -y
Repository
ibelick/ui-skills10.5k
Category
Design
Updated
3d ago
License
MIT
Context cost
Mediumabout 3,000 tokens
Runs scripts
No, instructions only

What it does

Create or update a DESIGN.md from an existing product repository or public website. Use when asked to document an interface's design language, reconstruct its visual system, extract design tokens and guidance from current evidence, or give coding agents persistent UI context. Do not modify product source or promote accidental implementation patterns into design decisions.

Create DESIGN.md

Create a DESIGN.md for one product or coherent website. Record the design language that governs it, not every value that happens to exist.

Boundaries

  • Modify only DESIGN.md. Do not change product source, dependencies, configuration, or generated files.
  • Use the DESIGN.md format contract below. Do not invent a competing schema.
  • Do not copy every discovered token or component into the document.
  • Do not convert repetition, local styling, or visual preference into product intent.

1. Choose the mode

Repository mode

Use when a local product repository is available. Create or update DESIGN.md at the root of the selected product.

If the repository contains multiple deployable products, select the one named by the user. If the request does not identify one and ownership is ambiguous, ask before writing.

Repository evidence may establish normative values, token names, component ownership, and documented rationale.

URL mode

Use when the user provides a public URL without its source repository. Create a reconstructed DESIGN.md draft in the current workspace.

URL mode requires rendered browser access. Inspect the DOM, computed styles, and publicly loaded stylesheets at desktop and mobile widths. Screenshots may support interpretation but cannot establish exact values by themselves.

Inspect the supplied page and shared chrome. For a site-wide request, sample up to three same-origin pages that represent distinct templates.

URL evidence may establish only observable visual patterns and computed values. It cannot establish internal token names, component ownership, undocumented rationale, or whether a pattern is intentionally canonical.

If rendered inspection is unavailable, ask for screenshots or source files. Do not create a DESIGN.md from copy, metadata, or HTML structure alone.

Read the whole SKILL.md on GitHub

More in Design