sigil-design

Skill — sigil-design

Generate, parse, and compile a unified DESIGN.md that serves as the single source of truth for a project's visual identity. One file. 33 categories. 519 tokens. Compiles to CSS + Tailwind v4 + W3C JSON.

When to Use

• Creating a new design reference for a project
• Extracting a design system from an existing site
• Switching a project's entire visual identity
• Generating compiled token output (CSS, Tailwind, JSON)
• Auditing a design against the spec

CLI Commands

sigil design generate          # Create DESIGN.md from current preset + overrides
sigil design compile           # Parse DESIGN.md → output CSS, Tailwind, JSON files
sigil design sync              # Update Compile sections in-place from token tables
sigil design extract <url>     # Extract full DESIGN.md from a reference URL

---

Format Specification

File: DESIGN.md

The file is a Markdown document with a strict heading hierarchy. Every section uses GitHub-flavored pipe tables parseable by parseDesignMarkdown(). The file compiles to three output formats from a single source.

---

Header Block

# {Brand Name} — Style Reference
> {One-line personality tagline.}

**Theme:** light | dark | adaptive
**Preset:** {preset-name} | custom
**Density:** compact | balanced | editorial

{2-4 sentence description of the brand's design language, mood, and aesthetic intent.}

Metadata fields are extracted by regex from bold-label lines.

---

Section Index (required order)

#	Heading	Sigil Category	Table Format
1	## Tokens — Colors	colors	Token | Light | Dark | Role
2	## Tokens — Typography	typography	Token | Value | Role
3	## Tokens — Spacing	spacing	Token | Value | Role
4	## Tokens — Layout	layout	Token | Value | Role
5	## Tokens — Sigil Grid	sigil	Token | Value | Role
6	## Tokens — Radius	radius	Token | Value | Role
7	## Tokens — Shadows	shadows	Token | Value | Role
8	## Tokens — Motion	motion	special (subsections)
9	## Tokens — Borders	borders	Token | Value | Role
10	## Tokens — Backgrounds	backgrounds	Token | Value | Role
11	## Block Tokens — Buttons	buttons	Token | Value | Role
12	## Block Tokens — Cards	cards	Token | Value | Role
13	## Block Tokens — Headings	headings	Token | Value | Role
14	## Block Tokens — Navigation	navigation	Token | Value | Role
15	## Block Tokens — Inputs	inputs	Token | Value | Role
16	## Block Tokens — Code	code	Token | Value | Role
17	## Block Tokens — Hero	hero	Token | Value | Role
18	## Block Tokens — CTA	cta	Token | Value | Role
19	## Block Tokens — Footer	footer	Token | Value | Role
20	## Block Tokens — Banner	banner	Token | Value | Role
21	## Block Tokens — Sections	sections	Token | Value | Role
22	## Composition — Page Rhythm	pageRhythm	Token | Value | Role
23	## Composition — Grid & Alignment	alignment	Token | Value | Role
24	## Composition — Dividers	dividers	Token | Value | Role
25	## Composition — Grid Visuals	gridVisuals	Token | Value | Role
26	## Composition — Cursor & Scrollbar	cursor, scrollbar	Token | Value | Role
27	## Composition — Focus & Overlays	focus, overlays	Token | Value | Role
28	## Composition — Data Visualization	dataViz	Token | Value | Role
29	## Composition — Media	media	Token | Value | Role
30	## Composition — Controls	controls	Token | Value | Role
31	## Composition — Component Surfaces	componentSurfaces	Token | Value | Role
32	## Components	—	prose (not compiled)
33	## Surfaces	—	Level | Name | Value | Purpose
34	## Do's and Don'ts	—	prose (not compiled)
35	## Imagery	—	prose (not compiled)
36	## Layout	—	prose (not compiled)
37	## Similar Brands	—	prose (not compiled)
38	## Compile — CSS	—	fenced css block
39	## Compile — Tailwind v4	—	fenced css block
40	## Compile — W3C Design Tokens	—	fenced json block