Anthropic frontend-design: one-page trial
We applied the pinned frontend-design instructions to one fixed brief: make a small repair guide that helps a phone visitor find useful steps. The resulting page passed our desktop, mobile, keyboard, and link checks. This is a one-output trial, not proof that the skill improves design quality over an unassisted run.
dbd4588f9e10. The upstream skill folder contains a SKILL.md and an Apache 2.0 license; it declares no bundled scripts or runtime. We did not test the CLI installer, Claude Code activation, or a no-skill control.The task we gave it
Build a self-contained page for a fictional repair guide. The visitor should choose from three small hand-sewing jobs on a phone. The page needed real steps, a working route from the first screen to those steps, no external assets, and no fake form or playback. The source brief and checks are in the test record.
What following the skill changed in this run
Before coding, we wrote down a palette, type roles, a left-aligned layout, and one sewing-thread illustration. We rejected the first generic craft direction and used numbered markers only where the repair steps actually form a sequence. That plan-review-build order comes from the skill. It made our choices explicit; this single run cannot tell us whether the final design would have been worse without it.
What we verified
- One clear heading, three repair choices, and nine actionable steps rendered at 1440px and 390px.
- The first-screen “Find a repair” link reached the repair section on both viewport sizes.
- No horizontal page overflow, external requests, or browser errors appeared in the two browser runs.
- Keyboard focus was visible and reduced-motion preference disabled smooth scrolling.
We also inspected both full-page screenshots. The illustration gives this brief a subject-specific visual anchor, and the instructions remain legible on a narrow phone.
Where the evidence stops
This was one Codex-authored prototype. We did not install the package through npx skills, test automatic triggering in Claude Code, compare blinded outputs, ask users which version they preferred, or have a sewing expert verify the repair guidance. Treat the sample as evidence that the instruction workflow can lead to a usable page in this setting, not as an effect score or a general design recommendation.
For a different job, see our earlier design-skill comparison of a generator, a scanner, and an image/video brief writer. The official source folder is the place to inspect the skill itself.