Tooluck logoTooluck
SKILL.md

create-design-md

Agent skill fromibelick/ui-skills

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.

How to install create-design-md

install create-design-md
# install the ui-skills pack with the skills CLI
npx skills add ibelick/ui-skills

# or add only this skill to Claude Code: copy the folder

skills/create-design-md/

# into

~/.claude/skills/create-design-md/ (all projects)

.claude/skills/create-design-md/ (one project)

skills/create-design-md/SKILL.md

MITFull file
1# Create DESIGN.md
2
3Create a `DESIGN.md` for one product or coherent website. Record the design language that governs it, not every value that happens to exist.
4
5## Boundaries
6
7- Modify only `DESIGN.md`. Do not change product source, dependencies, configuration, or generated files.
8- Use the DESIGN.md format contract below. Do not invent a competing schema.
9- Do not copy every discovered token or component into the document.
10- Do not convert repetition, local styling, or visual preference into product intent.
11
12## 1. Choose the mode
13
14### Repository mode
15
16Use when a local product repository is available. Create or update `DESIGN.md` at the root of the selected product.
17
18If 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.
19
20Repository evidence may establish normative values, token names, component ownership, and documented rationale.
21
22### URL mode
23
24Use when the user provides a public URL without its source repository. Create a reconstructed `DESIGN.md` draft in the current workspace.
25
26URL 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.
27
28Inspect the supplied page and shared chrome. For a site-wide request, sample up to three same-origin pages that represent distinct templates.
29…

Excerpt shown under the repository's MIT license.

More skills in ui-skills

Keep exploring

Similar skill repositories

thedotmack /

claude-mem
116k

Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More

CCCXGHGM+135 skills

Newsletter

Join the Community

Subscribe to our newsletter for the latest news and updates