claude-design

claude-design turns an ambiguous creative brief into a concrete, high-fidelity design artifact produced in HTML — landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visual explorations. Its premise is that HTML is the tool, not the genre: the identity the skill embodies shifts with the task (animator, UX designer, slide designer, prototyper, poster designer, brand strategist), and it defaults to web-design tropes only when the output is actually a web page. It exists to raise the quality bar on AI-produced design work and avoid generic, template-looking output.

The skill enforces a disciplined workflow: verify facts before assuming (its Priority #0 rule requires a WebSearch before assuming a product exists or its version, writing findings to a facts file first), gather real design context, declare the visual system up front (type scale, color logic, layout pattern), build iteratively with something in front of the user early, explore three or more variations mixing conservative and novel directions, and verify the artifact loads cleanly in a browser. It includes a Core Asset Protocol treating logos, product shots, and UI screenshots as first-class inputs, and a Design Direction Advisor that offers three differentiated directions drawn from ten design philosophies when the brief is too vague. It explicitly steers away from AI-design tropes like aggressive gradients, emoji bullets, and generic templates.

It is aimed at anyone who needs designed artifacts fast — founders, marketers, product teams, and designers — who want mockups, decks, prototypes, or brand explorations. Notably, the skill treats fetched web content as untrusted data and instructs the model to extract only structured facts and to stop and report instruction-like text, which is security-conscious guidance.