micrographic-skill

Dense, technical, schematic UI for AI coding agents. Industrial product labels, hardware
spec sheets, care tags and Swiss grids, as a design system your agent follows by default.
One system, two formats: a SKILL.md for Cursor, Claude Code, Codex, Windsurf and Gemini,
and a DESIGN.md in Google Labs' format for any DESIGN.md-aware tool.

npx micrographic-skill              # the skill, into the agent you use
npx micrographic-skill --design-md  # the same system as ./DESIGN.md

_{An agent built this panel from DESIGN.md alone, without SKILL.md (source).}

This is not minimalism. Minimalism removes. Micrographic compresses.
Every element earns its place. Information becomes decoration. Think Maison Margiela's inner
labels, Virgil Abloh's Off-White graphics and Wim Crouwel's grids.

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.

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

Supported agents

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]