83.3K+Download
Skip to the usage guide
frontend-designby Anthropic

Frontend Design Skill.

A Claude Code and Codex skill for distinctive UI design: typography, color and layout chosen on purpose.

  • Web & UI
  • Websites
  • UI redesign
  • Typography
Download OpenDesignView usage guide
DESIGN DIRECTION / 01BRIEF → INTERFACE
AaTYPE WITH INTENT
A quieter palette.
A clearer hierarchy.
● ● ●homepage.html ↗
scope®Made for independent designers
LESS ADMIN. MORE MAKING.Good work.
Clear scope.

A considered space for your next project, from the first quote to the final yes.

Create your quote ↗
YOUR NEXT PROJECTBrand &
website design
01 Define the work
02 Agree on the scope
03 Get the go-ahead
Ready when you are. ↗
THE STARTING POINT

“A quoting tool for freelance designers.
Make the next step feel clear.”

Illustrative composition · not a recorded skill output

01 From brief to interface

A Frontend Design Task, from Brief to Interface.

Give Claude Code or Codex the product, the audience and the content; the frontend-design skill makes the visual decisions.

Example briefIllustrative workflow · not a recorded run

A Homepage for a Quoting Tool

Help freelance designers understand how to create quotes, agree on scope changes, and get client approval.

Brand assetsPricingFAQ copy
See the full prompt ↗

What the Skill Guides

  1. 01
    Find the visual direction

    A palette, type hierarchy, and layout tied to the product.

  2. 02
    Review the plan

    Check the direction against the brief before building.

  3. 03
    Build and refine

    A responsive interface with clear actions and accessible states.

02 Find your fit

When to Use the frontend-design Skill

Use the frontend-design skill when visual decisions are part of the work — a new page built in Claude Code or Codex, or a redesign of an interface that looks templated.

Good Fit

  • A new page or site from a briefLanding pages, product sites, portfolios, small apps — anything where the first question is “what should this look like?”
  • A visual redesign of an existing interfaceYou have working UI that looks templated and want a direction rooted in the product's subject matter.
  • Fixing typography and hierarchyType scale, line length, weight, and spacing set with intent rather than framework defaults.
  • Briefs that come with real contentThe skill builds with the brief's actual copy and subject matter; the more real material you give it, the more specific the result.

Know the Boundaries

  • You already have a design systemSupply its rules and components. The skill should follow your brief and work within the visual choices that remain open.
  • The work is logic, data, or backendIts focus is visual design. Application logic, APIs, and functional testing need their own implementation work.
  • You want a component library or templatesIt provides design instructions, rather than a ready-made component library or page template.
  • You need a review of a finished UIIts self-critique is aimed at its own plan. For auditing someone else's interface, see the related skills below.

What to Provide

  • Product subjectWhat the product is and the industry it lives in. If you leave this out, the skill will propose one and ask you to confirm.
  • Target usersWho the page is for. This drives the visual register more than anything else.
  • Page goalThe one job the page has to do, and the primary action.
  • Real contentHeadlines, copy, prices, FAQ answers. Placeholder text produces placeholder-looking design.
  • Brand assets & constraintsLogo, palette, fonts, and anything already decided. The brief's own words always win.

03 Design with intention

What the Skill Brings to UI Design

Four things the frontend-design skill instructs Claude Code or Codex to do, and what each one turns your input into.

  1. A Visual Direction Grounded in the Subject

    The agent works out what the product is, who it serves, and what its world looks like before choosing anything. A toy for eight-year-olds and a dashboard for analysts should not share a look.

    You give
    product subject, audience
    You get
    a direction you can accept or redirect before code is written

  2. Type, Color, and Layout Chosen on Purpose

    One or two typefaces with a real scale, a 4–6 color palette named in hex, and a layout concept with alignment rules. Structural devices — rules, numbering, labels — are used only where they carry information.

    You give
    brand assets, constraints
    You get
    a compact token system the page is built from

  3. A Plan, Reviewed Against the Brief, Before the Build

    The skill works in two passes. It drafts the plan, then checks each part against the question “would I produce this for any similar page?” and revises what reads as a default — stating what changed and why. Code comes after that.

    You give
    the brief
    You get
    a written plan and a short self-review you can read in the transcript

  4. Baseline Quality Without Being Asked

    Responsive down to mobile, visible keyboard focus, reduced motion respected, accessible color, and copy written from the user's point of view in plain, active language.

    You give
    your accessibility requirements
    You get
    guidance for mobile and keyboard use

04 Put it to work

Install frontend-design in Claude Code or Codex

One npx skills add command, then a brief in your agent and a checklist for the first result.

Add frontend-design to Claude Code, Codex or Your Agent

Run the command in your project, follow the installer’s agent selection, then check that your agent can discover frontend-design.

Terminal
npx skills add https://github.com/anthropics/skills --skill frontend-design

Command source: skills.sh entry for frontend-design. Follow the installer and confirm the skill appears in your agent.

Give the Skill a First UI Design Task

Adapt this brief with your product details, attach the brand assets and copy it refers to, and run it in Claude Code or Codex.

Example prompt
Use the frontend-design skill to design the homepage for a project-quoting tool for freelance designers. Goal: visitors should understand three things — how quotes are built, how scope changes are confirmed, and how clients approve — and then start creating a quote. Content: use the attached brand colors and logo. Include a hero, how it works, features, pricing, and FAQ. Use the real pricing tiers and FAQ answers I have provided; do not invent numbers or testimonials. Process: propose a visual direction that fits freelance designers and this product first, then build the desktop and mobile pages. Keep clear calls to action, visible keyboard focus, and a reduced-motion experience.

Check the First Result

A good first run is easy to recognise. Before accepting the page, look for these in the transcript and the output:

  • The plan came before the code, with named palette values and typeface roles.
  • The self-review names at least one default it replaced, and why.
  • Your real copy, prices, and brand assets appear unchanged.
  • One element is memorable; the rest of the page stays quiet.
  • The page works at 390px, tabbing shows a visible focus ring, and motion respects the OS setting.
  • If something reads generic, say which part — the skill is written to take that critique and revise.

Using OpenDesign? frontend-design ships inside OpenDesign: open Plugins → Skills, pick it in the top bar, and its SKILL.md is composed into the prompt with your DESIGN.md. Claude Code, Codex, Cursor or OpenCode does the work.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Anthropic
Repository
github.com/anthropics/skills Branch main
Skill file
skills/frontend-design/SKILL.md Content checksum recorded at verification; commit 34040c9
License
Apache-2.0 From skills/frontend-design/LICENSE.txt; SKILL.md says “Complete terms in LICENSE.txt”. The repository root does not declare a separate license.
Repository stars
176,183 GitHub snapshot taken 2026-09-14 for the whole anthropics/skills repository, which contains many skills. Not a rating or usage count for frontend-design.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run in OpenDesign has not been recorded on this page yet.
The Skill's Own Description
“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.”

Front-matter description from SKILL.md. The full instructions are about 9,400 characters and cover subject grounding, design principles, a plan → review → build → critique process, restraint, and writing in design. Read the full file on GitHub.

Frontend Design

Give Your Agent a Brief Worth Designing For.

The frontend-design skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the example prompt, and read the plan before the code.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/anthropics/skills --skill frontend-design