Codex native
OK
👍 0 · Vote
frontend-design
Anthropic's official front-end design skill. It asks the agent to commit to a design direction (palette, type, layout, principles) and to check it against common AI defaults before writing code. Instructions only, no scripts.
- Source
- anthropics/skills
- Path
skills/frontend-design· SKILL.md- Pinned commit
dbd4588f9e- License
- Apache-2.0
Each prompt shows a fixed 2×2: Codex native, Codex + skill, Claude Code native, Claude Code + skill. Click a screenshot to see the full page. Install and use ↓
Strengths
What the skill's own documentation says it is good at, with a link to where it says so. These are claims, not results: compare them with the pages below.
- Distinctive, intentional visual design that doesn't read as templated defaults source
- Deliberate, opinionated palette, typography and layout choices specific to the brief, giving each client a distinct visual identity source
- Typography carries the personality of the page source
Test scope: SaaS landing page, Data dashboard, Personal blog and portfolio. Prompts outside this list are marked “Out of scope”, not pending.
Checked against the skill text after the v0 runs (not decided in advance); the text names no excluded page types.
SaaS landing page
landing-saas
Data dashboard
dashboard
Personal blog and portfolio
blog-portfolio
Install and use
Project-level install: copy the skill folder (the one that contains SKILL.md) into your project at the pinned commit. The gallery runs installed it the same way.
Claude Code
Install
Copy the folder to <project>/.claude/skills/frontend-design/.
git clone https://github.com/anthropics/skills.git /tmp/frontend-design-src
git -C /tmp/frontend-design-src checkout dbd4588f9e1033efb41dad4bef2f7947c8993d44
mkdir -p .claude/skills
cp -R /tmp/frontend-design-src/skills/frontend-design .claude/skills/frontend-designUse
# interactive
/frontend-design <your task>
# or end any request with
Use the frontend-design skill.
# headless, as in the gallery runs
claude -p '<your task> Use the frontend-design skill.'To make it available in every project, put the folder in ~/.claude/skills/frontend-design/ instead. Claude Code can also load the skill by itself when a request matches the skill's description.
Codex
Install
Copy the folder to <project>/.agents/skills/frontend-design/.
git clone https://github.com/anthropics/skills.git /tmp/frontend-design-src
git -C /tmp/frontend-design-src checkout dbd4588f9e1033efb41dad4bef2f7947c8993d44
mkdir -p .agents/skills
cp -R /tmp/frontend-design-src/skills/frontend-design .agents/skills/frontend-designUse
# interactive: mention it, or pick it from /skills
$frontend-design <your task>
# headless, as in the gallery runs
codex exec -s workspace-write '<your task> Use the $frontend-design skill.'To make it available in every project, put the folder in ~/.agents/skills/frontend-design/ instead. Codex can also pick the skill by itself, based on its description.
Notes
- The same SKILL.md is also published in anthropics/claude-plugins-official and anthropics/claude-code; this gallery uses anthropics/skills.
- Upstream rewrote this skill several times in 2026, so always use the pinned commit.
Metadata: skills/frontend-design/meta.yaml