Skip to content
AI Dev Toolkit.
Esc
  • AI Token CounterCount tokens for GPT, Claude, Gemini, DeepSeek, Qwen and more.Tool
  • LLM API Cost CalculatorEstimate per-request, daily and monthly API costs.Tool
  • AI Model ComparisonCompare prices, context windows and features across models.Tool
  • AI Model Pricing PagesSpecs, real costs and cheaper alternatives for popular models.Tool
  • Context Window CheckerSee whether your text fits each model’s context window.Tool
  • Subscription vs API CalculatorFind out whether a chat plan or the API is cheaper for you.Tool
  • GPU / VRAM CalculatorCheck how much VRAM a local model needs and which GPUs fit.Tool
  • Prompt Caching CalculatorEstimate savings from prompt caching.Tool

Claude skill · Design and art · Anthropic

Frontend design skill for Claude

Guidance for distinctive web interfaces that don’t look like template defaults: grounding the design in its subject, then planning, building and self-critique.

Command
/frontend-design
Licence
Apache-2.0, copying allowed with attribution
Folder
2 files, 19 KB
Runs code
No scripts

Overview

What it does

A short, opinionated skill. It asks Claude to start from what the product is about rather than generic UI patterns, choose a clear aesthetic direction and typography, and avoid the look of AI-generated defaults.

The process is plan, check against the brief, build, then critique and remove what doesn’t earn its place. There is also guidance on writing the words in a design, which is often where generated interfaces feel weakest.

Triggers

When Claude uses it

  • Building a new interface or reshaping an existing one, where the visual direction matters.
Its description, which Claude matches against
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

What it needs

  • Nothing to install; a single SKILL.md.

Install

How to install it

Claude Code

Plugin (type in Claude Code)
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

The example-skills plugin installs 12 skills from this repository, including this one. Its skills are then namespaced, such as /example-skills:frontend-design.

Or copy the folder (shell)
git clone --depth 1 https://github.com/anthropics/skills.git
mkdir -p ~/.claude/skills
cp -r skills/skills/frontend-design ~/.claude/skills/

That makes it a personal skill, available as /frontend-design in all your projects. Copy it into .claude/skills/ in a repository instead to share it with your team.

claude.ai and the Claude API

Zip the skill folder, then in claude.ai open Customize > Skills, choose + and Create skill, then Upload a skill. Code execution must be turned on.

Upload with the Python SDK
from anthropic import Anthropic
from anthropic.lib import files_from_dir

client = Anthropic()
skill = client.skills.create(files=files_from_dir("frontend-design"))
print(skill.id)  # use as a custom skill_id with the code execution tool

Checks

SKILL.md validator results

Its SKILL.md (71 lines) run through our SKILL.md validator, with the folder’s file list, for both targets. These check the file’s format, not whether the skill works well.

Claude Code

0 errors, 0 warnings, 1 tip

  • tipName the specific tasks, file types and words a user would say. Phrases like “helps with” or “stuff” give Claude nothing to match.

claude.ai and the API

0 errors, 0 warnings, 2 tips

  • tipThe Claude Help Center’s upload guide gives a 200-character description limit for claude.ai, though the platform docs say 1,024. Keep it under 200 if you’ll upload it there.
  • tipName the specific tasks, file types and words a user would say. Phrases like “helps with” or “stuff” give Claude nothing to match.

Folder

What’s in the folder

  • LICENSE.txt9.9 KB
  • SKILL.md9.2 KB

SKILL.md sections

  1. Frontend Design
  2. Ground your designs in the subject matter
  3. Design principles
  4. Process: plan, review against the brief, build, critique
  5. Restraint and self-critique
  6. More on writing in design

Source

Licence and source

Related

More skills

All Claude skillsWrite your own skillSlash command builderGuide: subagents, skills and commands