Home
Softono
frontend-design

frontend-design

Open source MIT
GitHub
49
Stars
8
Forks
1
Issues
0
Watchers
1 month
Last Commit
AI Tools Design Systems & Tokens

About frontend-design

# 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 ```bash git clone https://github.com/Ilm-Alan/frontend-design.git ~/.claude/skills/frontend-design ``` ### Codex ```bash git clone https://github.com/Ilm-Alan/frontend-design.git ~/.codex/skills/frontend-design ``` ### Gemini CLI Enable experimental skills in `~/.gemini/settings.json`: ```json { "experimental": { "skills": true } } ``` Then: ```bash 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 ancho ...

Platforms

Web Self-hosted

Links

Source Code
i
Published by
ilm-alan
Visit View Profile

README.md

View on GitHub

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.