# Frontend Design > Writes production-grade, distinctive interface code — one strong art direction (editorial, brutalist, soft-depth, retro-terminal), a real typographic scale, custom details (cursor, selection, focus states), semantic HTML, delivered as a single file or as components. Ships with an anti-AI-slop checklist so nothing leaves looking template-made. Use when the user says "build this page", "code the UI", "make me a beautiful front-end", or "this looks like every AI site — redo it". - Skill: `alebgl77/frontend-design` (Agent Skill) - Install (CLI): `npx skillmds@latest add alebgl77/frontend-design` - Raw SKILL.md: https://api.skillmd.com/api/skills/alebgl77/frontend-design/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: alebgl77 (https://skillmd.com/u/alebgl77) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/alebgl77/frontend-design --- # Frontend Design — Front of House > "Build front-end UIs" ## When to use - It is time to write real interface code — "build the landing page", "code this dashboard UI". - An existing front-end looks generic — "this screams AI-generated, give it a point of view". - A design system exists and needs its first consumer — pairs with `ui-ux-pro-max` tokens. - The user wants craft, not scaffolding — "make it feel expensive", "no template energy". ## Workflow 1. **Commit to one art direction before writing a line.** Editorial (serif display, generous whitespace, hairline rules), brutalist (raw borders, mono, hard shadows), soft-depth (layered surfaces, tinted shadows), retro-terminal (phosphor palette, restraint with the scanlines), industrial (dense, technical, visible grid) — or argue for another. Write the direction as one sentence; every later decision must serve it. 2. **Set the typographic reality.** Two families max; display size at least 3x body — no 14/16/18 mush. Tighten letter-spacing on large sizes, widen it on small caps and labels. Load one hosted family at most; fall back to a deliberate system stack. 3. **Structure in semantic HTML first.** Landmarks (header/nav/main/section/footer), heading order without skips, buttons are `