Skills Design

Frontend Design

Ship production UI with a point of view instead of the default purple-gradient look.

Claude Cursor Grok Codex UIfrontendtaste

What it is

Frontend Design is the skill teams reach for when generated pages look the same. It pushes typography, spacing, motion, and color away from stock AI chrome, and it refuses generic card grids unless the product actually needs them.

When to use

Use when the agent is about to design, restyle, or implement a user-facing interface.

How to install

Install as frontend-design/SKILL.md in the project or user skills folder.

# Claude Code
.claude/skills/frontend-design/SKILL.md

# Grok Build
.grok/skills/frontend-design/SKILL.md

# Codex
.agents/skills/frontend-design/SKILL.md

Example prompt

Redesign this marketing homepage. Follow Frontend Design. No purple gradients, no three-card feature row.

Source: Open Agent Skills ecosystem

Read the full install guide →

Related skills