A SKILL.md for AI coding agents that instructs them to build dense, technical, schematic UI — inspired by industrial product labels, hardware spec sheets, care instructions, and Swiss modernist typography.

Think Maison Margiela's inner labels, Virgil Abloh's Off-White graphics, and Wim Crouwel's grid systems — as a production-ready design system your agent follows automatically.

This is not minimalism. Minimalism removes. Micrographic compresses.
Every element earns its place. Information becomes decoration.

Install

Run inside any project. The installer auto-detects which agent you have set up and drops the skill in the right place.

npx micrographic-skill

Target a specific agent:

npx micrographic-skill --cursor      # → .cursor/skills/micrographic/SKILL.md
npx micrographic-skill --claude      # → .claude/skills/micrographic/SKILL.md
npx micrographic-skill --all         # → all detected agents at once

Optional — install as a Cursor always-on rule (applies to every UI task in the project):

npx micrographic-skill --rules       # → .cursor/rules/micrographic.mdc

Preview without writing:

npx micrographic-skill --dry-run

Use as DESIGN.md

The same system ships as a DESIGN.md in Google Labs' open DESIGN.md format: machine-readable tokens in YAML front matter plus the rules as prose, read by any DESIGN.md-aware agent or tool from your project root. No skill loader required.

npx micrographic-skill --design-md               # → ./DESIGN.md only
npx micrographic-skill --claude --design-md      # skill + DESIGN.md
npx micrographic-skill --design-md --force       # overwrite an existing ./DESIGN.md

The installer never overwrites a DESIGN.md you already have unless you pass --force. Or fetch the file directly:

curl -O https://raw.githubusercontent.com/albegosu/micrographic-skill/main/DESIGN.md

Validate it, or turn the tokens into a theme, with the official CLI:

npx @google/design.md lint DESIGN.md                                      # 0 errors · 0 warnings
npx @google/design.md export --format css-tailwind DESIGN.md > theme.css  # Tailwind v4 @theme

Inside: the light-mode label palette (ink on warm paper, one signal accent) with the dark/HUD values in its Colors table, 11 type tokens on the two scales (display 80px+ / micro 7–11px), the 4px grid, radius ≤ 2px, and 26 component tokens (spec-card, meta-strip, chip, button, data-table-*, status-dot, …). The color tokens export as --color-ink, --color-accent, … — the same variable names the skill's CSS uses.

SKILL.md stays the source of truth. npm run check:design lints DESIGN.md and fails if any token drifts from SKILL.md.

Usage

After installing, prompt your agent naturally. The skill activates when it detects relevant intent:

"build me a micrographic product card"
"create a dashboard — dense, technical, spec-sheet style"
"I want the UI to feel industrial, like a hardware label"
"use the micrographic skill for this landing page"

What your agent will produce

The skill encodes a complete design system — your agent follows it to generate CSS and HTML that is consistent across every component it builds.

| Token | Value | Purpose | |---|---|---| | --text-micro | 8px | Decorative annotations only | | --text-xs | 10px | Tags, meta labels | | --text-xl | 32px | Display numerals | | --text-2xl | 56px | Hero figures | | --color-accent | #CC2200 (signal orange; #0033FF HUD variant) | One hit per screen | | --border | 1px solid #D4D4D4 | Zone skeleton | | --border-dark | 1px solid #2A2A2A | Component boundary | | border-radius | 0–2px | Angular only |

Typography: Barlow Condensed (display) + IBM Plex Mono (data, annotations)
Palette: Near-monochromatic — black, white, five grays, one accent
Spacing: 4px micro-grid (4 / 8 / 12 / 16 / 24 / 32px)
Decoration: Registration marks +, reference codes REF-0042-A, serial number strips, grid coordinates A1

Supported agents

| Agent | Skills path | Rules path | |---|---|---| | Cursor | .cursor/skills/micrographic/ | .cursor/rules/micrographic.mdc | | Claude Code | .claude/skills/micrographic/ | — | | Codex | .codex/skills/micrographic/ | — | | Windsurf | .windsurf/skills/micrographic/ | — | | Gemini CLI | .gemini/skills/micrographic/ | — |

Install paths at a glance

your-project/
├── .cursor/
│   ├── skills/
│   │   └── micrographic/
│   │       └── SKILL.md       ← loaded dynamically when relevant
│   └── rules/
│       └── micrographic.mdc   ← always-on (--rules flag)
├── .claude/
│   └── skills/micrographic/SKILL.md
├── DESIGN.md                  ← tokens + rules (--design-md flag)
└── ...

Aesthetic references

The micrographic aesthetic has deep roots — from Swiss Modernism to contemporary fashion branding:

• Maison Margiela — inner garment labels as typographic art
• Virgil Abloh / Off-White — industrial graphics as high fashion
• Raf Simons — dense label typography as branding
• Wim Crouwel — Swiss grid systems and schematic type
• Josef Müller-Brockmann — information design as visual structure
• Daily Dialogue Studio — contemporary micro-graphic branding

Releases

Every npm version has a matching Git tag vMAJOR.MINOR.PATCH on this repository.

npm run release:patch   # or release:minor / release:major — bumps version, commits, creates tag v…
git push --follow-tags origin main
npm publish           # add --otp=… if you use 2FA

Contributing

Pull requests are welcome. Please read CONTRIBUTING.md for language expectations (English), branch workflow, and a short checklist.

git clone https://github.com/albegosu/micrographic-skill.git
cd micrographic-skill
# edit SKILL.md (and DESIGN.md when tokens change)
# test locally: node bin/install.mjs --dry-run && node bin/install.mjs --cursor
npm install && npm run check:design   # DESIGN.md lint + drift guard against SKILL.md

License

MIT — [email protected]