# Frontend Design

> Use when: build or reshape UI with distinctive, intentional visual design instead of generic defaults.

- Skill: `kimtth/frontend-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kimtth/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kimtth/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kimtth (https://skillmd.com/u/kimtth)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kimtth/frontend-design

---


Goal: create a UI with a specific visual point of view that fits the brief.

Use for:
- new frontend screens, landing pages, or app surfaces
- visual redesigns that need stronger taste and identity
- avoiding templated palettes, typography, and layout defaults

Workflow:
1. Ground the design in the subject, audience, and page job.
2. Define a compact token system: color, type, layout, signature element.
3. Check whether choices are specific to this brief or generic defaults.
4. Build from the chosen direction; derive every visual choice from it.
5. Use one memorable signature element, then keep surrounding UI disciplined.
6. Critique the result for responsiveness, focus states, reduced motion, and polish.

Design principles:
- typography carries personality; choose roles deliberately
- structure should encode real information, not decorate
- motion should serve the subject and be used sparingly
- copy is design material: plain, active, consistent, and useful

Rules:
- take one justified aesthetic risk
- avoid default AI-looking palettes and layouts unless the brief demands them
- spend boldness in one place, then remove excess decoration
- verify the design on mobile and desktop before calling it done