frontend-design

Frontend design skill for Claude Code, Codex, and Gemini CLI. Eight aesthetic anchors, each locking palette, typography, and texture to specific CSS tokens. Pick one per brief.

Install

Claude Code

git clone https://github.com/Ilm-Alan/frontend-design.git ~/.claude/skills/frontend-design

Codex

git clone https://github.com/Ilm-Alan/frontend-design.git ~/.codex/skills/frontend-design

Gemini CLI

Enable experimental skills in ~/.gemini/settings.json:

{ "experimental": { "skills": true } }

Then:

git clone https://github.com/Ilm-Alan/frontend-design.git ~/.gemini/skills/frontend-design

Verify with /skills list.

How it works

Each anchor locks specific palette, typefaces, and texture tokens. Picking an anchor commits to those tokens, not to a vibe. Before any code, the skill asks for:

1. An anchor, picked with a bias toward unexpected pairings.
2. A memorable anchor-internal move.
3. CSS that matches the chosen anchor's tokens.

If the rendered tokens drift outside the anchor's range, the anchor didn't hold.

The eight anchors

| Anchor | Tokens | |---|---| | Swiss | Pure white, Akzidenz/Helvetica/Söhne sans, Swiss Red or International Orange accent, visible grid | | Industrial | Pitch black, IBM Plex Mono / JetBrains Mono throughout, one semantic signal color, flat | | Brutalist | Pure primary colors, system fonts (Times, Helvetica, Courier), hard offset shadows Xpx Xpx 0 #000, native browser controls | | Aurora Maximalism | Dark saturated gradient base, Inter/PP Neue Machina, mesh gradient surface, neon glow | | Chaotic Maximalism | Clashing pastels + neons, mixed typefaces, patterns on every surface, oversized display | | Retro-Futuristic | Pitch black + neon, period typefaces (VT323, Orbitron, Space Mono, Monoton), CRT scanlines or chromatic aberration | | Organic | Earth tones (sage, clay, terracotta, ochre) — never cream, humanist serif or warm sans, rounded corners, subtle grain | | Lo-Fi | Paper-yellow (not cream), mixed system fonts, rotated elements, halftone dots, Risograph misregistration |

Full token specs are in SKILL.md.

Repository structure

frontend-design/
├── SKILL.md
├── README.md
└── LICENSE.txt

License

MIT.