frontend-design

KO | EN

gitlite — search

#python #typescript #golang #go #machine-learning #deep-learning #linux #docker #macos #cli #awesome-list #pytorch #ios #open-source

frontend-design

(★ 104)

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.

frontend-design Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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 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`](SKILL.md).

## Repository structure

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

## License

MIT.

frontend-design

frontend-design Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

frontend-design

frontend-design Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README