What is the anthropic-frontend-design skill?
The anthropic-frontend-design skill is a SKILL.md inside the frontend-design-skills plugin of fcakyon's settings repository. It tells an AI coding agent to ground a design in its subject, write a compact plan of colors, type and layout, test that plan against generic AI defaults, then build and critique the page.
The skill opens by casting your agent as the design lead at a studio known for distinct identities, working for a client who has already rejected cliché proposals. The brief's own words always win, but defaults do not.
It lives at plugins/frontend-design-skills/skills/anthropic-frontend-design in fcakyon's settings repository, and its frontmatter carries the Apache-2.0 license. The guidance covers visual direction, typography, motion and interface copy.
What changes in your agent's output
- A short design plan appears before any code: four to six named hex colors, type roles, a layout concept with ASCII wireframes and guiding principles.
- The plan is reviewed against the brief. Any part that matches what the agent would produce for any similar page gets revised, and the change is explained.
- The hero opens with the most characteristic thing in the subject's world, not a big number with a gradient accent.
- Copy is written for the end user, with specific button labels such as Save changes instead of Submit.
The generic defaults it calls out
- A warm cream background near #F4F1EA with a high-contrast serif and a terracotta accent.
- A near-black background with one acid-green or vermilion accent.
- A broadsheet layout with hairline rules, square corners and dense columns.
- The SaaS card kit: identical rounded cards, one radius, one soft grey shadow and gradient washes.
- Template chrome such as tracked-out all-caps eyebrows above every heading and arrows appended to links.
Who the anthropic-frontend-design skill is for
Best for
- Building a new landing page or marketing site where the brief leaves color, type and layout open.
- Reshaping an existing interface that reads as templated.
- Teams who want the agent to review its own token plan against the brief before it writes CSS.
- A second voice next to frontend-design when you want to compare approaches.
Not for
- Auditing finished code for accessibility or metadata. Use fixing-accessibility or fixing-metadata for that.
Use it with UiChemy
The skill directs how a page should look, and your agent produces the code. Taking that design into WordPress is a separate step: UiChemy Figma to WordPress or UiChemy Composer can carry it into Elementor or Gutenberg. Click Get Started on uichemy.com.
How to install Anthropic Frontend Design Skill: Avoid Templated UI
git clone https://github.com/fcakyon/claude-codex-settings.gitClone the repository
Run
git clone https://github.com/fcakyon/claude-codex-settings.git. The skill sits at plugins/frontend-design-skills/skills/anthropic-frontend-design inside it.Copy the skill folder
Copy the anthropic-frontend-design folder into the directory your agent loads skills from. The README does not give a skills path for this skill, so check your agent's documentation.
Or use the plugin marketplace
The README documents adding the repository as a marketplace with
claude plugin marketplace add fcakyon/claude-codex-settings, then installing a plugin by name. This skill ships in the frontend-design-skills plugin folder.Add the writing skill if you have one
SKILL.md tells the agent to apply an installed writing-guidelines skill for interface copy. The file also carries its own writing section, so the page copy guidance still applies without it.
Check that it loaded
Ask the agent to design a landing page for a named product. It should return a short plan with named hex colors, type roles, a layout concept and principles, and revise any generic part before it writes code.
Key features
- Ground in the subjectIf the brief names no subject, the agent proposes one concrete subject, audience and primary job, confirms it, and then draws color, type and content from that world.
- Characteristic heroThe first screen opens with what is most characteristic of the subject, such as a headline, image, animation, live demo or interactive moment, chosen deliberately.
- Deliberate typographyUse one or two clearly distinct families, set a type scale following The Elements of Typographic Style, keep lines under 80 characters and give serif text more line height.
- Typographic tells to avoidAccenting a single headline word, all-caps labels and unnecessary labels above content are named as the commonest tells of a generated page.
- Structure as informationBorders, numbering, eyebrows and dividers must encode something. Numbered markers such as 01, 02 and 03 appear only when the content is a true sequence.
- Sparing motionMotion that nobody triggered is limited to one orchestrated moment, such as a page load or a reveal. Motion that answers a user action is welcome.
- Plan, review, build, critiqueA compact token plan comes first, then a review against the brief, then code. The agent critiques its own work as it builds and takes screenshots when it can.
- Spend boldness onceOne element becomes the memorable thing while everything around it stays quiet, and the agent removes one accessory before finishing, in the spirit of Chanel's advice.
- Quality floorResponsive down to mobile, visible keyboard focus, reduced motion respected, accessible and harmonious color, all built without announcing it.
- Interface writing rulesActive voice, plain verbs, sentence case, one name per action through the whole flow, and errors that explain the fix without apologizing.
Frequently asked questions
What is the anthropic-frontend-design skill?
It is a design guidance skill in the frontend-design-skills plugin of fcakyon's settings repository. It helps an AI coding agent choose aesthetic direction, typography and layout that fit the brief, and it works in two passes: a short design plan reviewed against the brief, then the build.
How do I install the anthropic-frontend-design skill?
Clone the fcakyon settings repository and copy plugins/frontend-design-skills/skills/anthropic-frontend-design into your agent's skills directory. The README also documents a plugin marketplace route. Then ask for a new interface or a redesign, and the agent should present a design plan before it writes code.
Which AI coding agents can use the anthropic-frontend-design skill?
The repository README documents plugin installs for Claude Code, Codex CLI, Gemini CLI and Cursor. The skill itself is a plain SKILL.md folder with Apache-2.0 in its frontmatter, so any agent that loads SKILL.md folders can use it. The README does not list a per-agent path for this particular skill.
Does the skill need another skill installed?
SKILL.md asks the agent to read and apply an installed writing-guidelines skill for interface copy and supporting text. You can still use this skill alone, because it also includes a section on writing in design with guidance on voice, button labels and error messages.
How does it stop designs looking templated?
It lists five clusters of AI defaults, from cream and terracotta palettes to the SaaS card kit and template chrome, and tells the agent to check its plan against them. If the brief pins down one of those looks, the brief wins. Otherwise the agent revises the generic parts.
What does the skill say about motion?
Non-user-triggered motion should be sparing and used only to draw attention, ideally as one orchestrated page-load sequence or reveal. Fade-and-slide-up entrances on every section and hover transitions on every card are called out as generic. Motion answering a user action is welcome.
How is it different from the frontend-design skill?
This one emphasizes a token plan with named hex colors, ASCII wireframes and a review against listed AI defaults before code. Compare it with frontend-design and see stitch-design-taste for another take on design taste.
What license does the skill use?
The SKILL.md frontmatter declares Apache-2.0, and GitHub reports Apache-2.0 for the repository as a whole. The two sources agree, so the skill folder is covered by that license wherever you copy it.