frontend-design (Anthropic)

Review

Codex CLI 0.166 (gpt-6-astra, low reasoning), a fresh temporary project per run, skill installed or absent, two runs per group, network off. We never mentioned the skill in the prompt, so this also tests auto-triggering. Three tasks: a landing page for an invented seaweed-snack subscription (Tidepool), a water-quality monitoring dashboard with sample data, and a redesign of a deliberately bland climbing-gym homepage that had to keep all its content. We rendered every page with Playwright (desktop 1440 px and mobile 390 px) in a network-less sandbox and scored them blind from screenshots, 0 to 5. We also counted specific features in the HTML.

Three-arm comparison

Measured with Codex CLI over 18 runs, scored by rule-based checks with no LLM judge. Total 25.5 / 30, verdict Situational.

Verdict: Situational (25.5 / 30, the highest of our first three). Source: anthropics/skills, skills/frontend-design, pinned at commit ca45fc4. Install: npx skills@latest add anthropics/skills --skill frontend-design. Apache-2.0.

What it is

A single prose file, no scripts. It tells the agent to act like the design lead at a studio that has already rejected cliché proposals: choose a palette, typefaces and layout specific to the brief, avoid common "AI-generated" defaults (a cream background with a terracotta accent, an all-caps eyebrow label above every heading, numbered 01/02/03 markers that do not mark a sequence), work in two passes (plan, review the plan against the brief, then build), and finish with a self-critique. It also lists quality floors: responsive to mobile, visible keyboard focus, reduced motion respected.

How we tested

Codex CLI 0.166 (gpt-6-astra, low reasoning), a fresh temporary project per run, skill installed or absent, two runs per group, network off. We never mentioned the skill in the prompt, so this also tests auto-triggering. Three tasks: a landing page for an invented seaweed-snack subscription (Tidepool), a water-quality monitoring dashboard with sample data, and a redesign of a deliberately bland climbing-gym homepage that had to keep all its content. We rendered every page with Playwright (desktop 1440 px and mobile 390 px) in a network-less sandbox and scored them blind from screenshots, 0 to 5. We also counted specific features in the HTML.

What happened

It triggers on its own. The skill file was read in all six treatment runs, with no prompting. Nobody had to type a command.

The tells it names do disappear. Per page, control pages used 3.2 all-caps labels and 1.5 numbered markers on average; pages made with the skill used 0.3 and 0. That is the skill's own advice showing up in the output. Neither group used the cream and terracotta hex values it warns against, and gradient use was identical (0.17 per page). Font families were limited to system fonts in both groups because the sandbox was offline, which hurts a skill that cares about typography. We expect different results with web fonts.

Overall quality was about the same. Blind scores averaged 3.75 with the skill and 3.5 without. The landing pages did better with the skill (4.0 vs 3.25), the dashboard and redesign tied. With two runs per cell that is noise. All the pages were competent: clear hierarchy, sensible spacing, no broken layouts.

The sameness is untouched. Three of the four landing pages, with and without the skill, used the same headline, "A little ocean. A lot of crunch."; the fourth (a treatment run) wrote "A little sea." with different copy. All four shared the same overall layout: product pouches and a mid-page pricing card. The skill asks for "a distinctive point of view specific to this brief", but one model run twice from the same prompt still converges on its own default. The skill removes surface clichés; it does not diversify the underlying idea. The redesign task produced a little more variety in typography: control runs used Arial/Helvetica and Courier, treatment runs picked Impact-style display type with Helvetica Neue or Avenir Next. That is system-font variety only.

Quality floors were met equally. Viewport meta tag, @media queries and :focus styles appeared in every page in both groups. Reduced-motion handling was missing on both dashboards in both groups. Mobile overflow was zero in 10 of 12 pages; one landing page in each group overflowed by 2 to 6 pixels.

No cost. Runs with the skill used 87,900 tokens on average against 93,000 without (0.95x) and took 155 seconds against 189. Reading the file is cheap compared with the pages themselves.

A caveat about our own checks

Our automated check for "keeps the $22 / $79 / $720 prices" failed on three of four redesign runs, in both groups. This is a flaw in our regex, not in the pages: the prices were split across <span> tags, and the screenshots show all three prices present. We did not use that check in the scores.

Safety review

One markdown file and a licence file. The scanner found nothing; the only domain is apache.org inside the licence text. No scripts, binaries, hidden characters or instructions about secrets. See security.md.

Scores

Who should use it

If your agent's pages keep arriving with the same all-caps eyebrow labels and 01/02/03 markers, this skill reliably stops that, at no extra token cost, so there is little reason not to keep it installed. If you are hoping it will make an average model produce visibly more original design, we did not see that: you will still get a competent page that looks like what the model usually makes. The reliable fix for sameness is a stronger brief from you (a palette, a reference, a mood), which the skill says the brief's own words always override.

Limits of this test

Two runs per cell, one model, offline sandbox with system fonts, three tasks, scored by one blind reviewer rather than a panel. Design judgement is subjective. The Codex tier counts for Codex and Claude Code under the site's rule.

Update (2 Nov 2026): one-sentence group added

We added a third group: no skill, but one sentence appended to the prompt that carries the skill's core rule ("Give the page one specific, bold visual point of view ... avoid generic AI-design tells such as purple gradients, uppercase eyebrow labels, numbered 01/02 markers and identical three-card grids"). 6 runs, run on a Windows machine with the same Codex build, network off.

The one sentence matches the skill (gain of the skill over it: 0.00) and beats no skill by 0.25, all inside noise at n=2. The one-liner runs spent about 1.4x the control's tokens; the skill did not. The best-looking page of the whole set (a serif dashboard headline, "A clear view of your water.") came from a one-liner run, and the one clearly buggy page (a garbled ticker with literal ?/b> text) came from the other one-liner run on the redesign task. Scores for the new group were given in a separate blind session from the original six-run comparison, so a small drift is possible (the same landing page scored 4.5 in one session and 3.25 on average in the other). The cost-free part of the skill is still the same: it removes the specific tells it names. A one-sentence prompt does most of that too.