Description
Ask an AI to build a UI and it tends to produce the same page: cream background, serif headline, terracotta accent. Anthropic's Frontend Design skill pushes the agent to act like a studio design lead and settle on a distinctive visual direction before building.
It first makes the agent work out what the product is, who it is for and its main job, then covers type, line length, the hero and motion, and names the usual tells of generated pages: one accented word in a headline, all-caps labels, numbered markers everywhere. It ends with a plan, review, build, critique loop.
Subject first: Without a clear brief, propose a concrete subject, audience and job.
Typography: One or two families, line length under 80 characters.
Avoid template tells: Lists common generated-design patterns to steer around.
Restrained motion: One orchestrated moment beats scattered fades.
Four-step process: Plan, review, build, critique.
It first makes the agent work out what the product is, who it is for and its main job, then covers type, line length, the hero and motion, and names the usual tells of generated pages: one accented word in a headline, all-caps labels, numbered markers everywhere. It ends with a plan, review, build, critique loop.
Features
Subject first: Without a clear brief, propose a concrete subject, audience and job.
Typography: One or two families, line length under 80 characters.
Avoid template tells: Lists common generated-design patterns to steer around.
Restrained motion: One orchestrated moment beats scattered fades.
Four-step process: Plan, review, build, critique.
