Art Director
Makes an agent art direct a page instead of assembling one.
Read this whenThe layout it built is competent and looks like everybody else's.
Ask an agent for a landing page and you get the same page every time. Centred hero, three cards, rounded corners, a soft shadow, one blue button. Nothing in it is wrong. Nothing in it was decided either, and you can feel that in the first second.
Art Director gives the agent the decisions an art director would have made. A type scale with real contrast rather than four sizes a step apart. A grid held by hairlines rather than by cards floating on shadows. One accent colour used with enough force to mean something, instead of five used politely. And motion treated as a size you pick once for the whole page, not an effect added per section.
What changes in the output
- Display type gets lighter and tighter as it gets bigger, which is what makes large type look drawn rather than typed.
- Layouts commit to a grid and then break it deliberately in one place, instead of centring everything and hoping.
- One signature move per page, chosen on purpose. The rest of the page holds still.
- The page still works with every animation switched off, because that is the same page with nothing moving.
If the page only makes sense while it is moving, it is not finished.
In the folder · 963 lines
- SKILL.md173 lines
- examples.md329 lines
- reference.md461 lines
SKILL.md is what the agent reads first. The others it opens only when it needs them, which is why the first file stays short and the detail lives beside it rather than inside it.
Installing it
Unzip it into your skills folder. Use the first path to have it in every project on your machine, or the second to keep it inside one project and commit it with the code.
~/.claude/skills/art-director/SKILL.md everywhere
.claude/skills/art-director/SKILL.md this project onlyThen type /art-director in Claude Code. It also loads on its own when what you are asking for matches what the skill is for.