Skip to content
Frontend UI
Public upstreamAnthropicPublic source

Frontend design

Choose a deliberate visual direction and build distinctive production interfaces.

Read SKILL.md

Workflow

Anthropic’s frontend design skill covers typography, composition, visual identity and implementation decisions for new or existing interfaces.

Use when

  • Build a website, landing page or application interface.
  • Reshape an existing UI around a specific visual identity.

Required inputs

  • Product brief and audience
  • Repository, framework and design constraints

Expected outputs

  • Implemented interface
  • Coherent typography, layout and interaction choices

Prerequisites

  • Access to the project source files.
  • Read the upstream skill and its license terms.

Installation

Run this command in your project after reviewing the instructions and access terms. Install complete upstream directories to keep referenced rules and scripts.

npx skills add https://github.com/anthropics/skills/tree/683bc88e56f3e09ba94f7055977f3d3aa499f202/skills/frontend-design --skill frontend-design --agent claude-code

Project file: .claude/skills/frontend-design/SKILL.md

Read the setup guide

Selection brief

This brief helps you choose the skill. Read the complete upstream SKILL.md and companion files for its actual instructions.

# Frontend design (anthropic-frontend-design)
Anthropic’s frontend design skill covers typography, composition, visual identity and implementation decisions for new or existing interfaces.

## Use when
- Build a website, landing page or application interface.
- Reshape an existing UI around a specific visual identity.

## Required inputs
- Product brief and audience
- Repository, framework and design constraints

## Prerequisites
- Access to the project source files.
- Read the upstream skill and its license terms.

## Expected outputs
- Implemented interface
- Coherent typography, layout and interaction choices

Source: https://github.com/anthropics/skills/blob/683bc88e56f3e09ba94f7055977f3d3aa499f202/skills/frontend-design/SKILL.md
Full SKILL.md: https://agenttaste.dev/skills/anthropic-frontend-design/SKILL.md

Related skills

Browse all skills →
AgentTasteFree

Linear Dark UI Standard

Silicon Valley grade dark-mode design system with crisp micro-borders and zero visual bloat.

Claude Code · Cursor · Codex · Antigravity

SKILL.md
AgentTasteFree

Anti-Generic UI Guardrails

Hard restrictions that ban AI from generating repetitive 3-column cards and cliché stock layouts.

Claude Code · Cursor · Codex · Antigravity

SKILL.md