aesthetic — Claude Code skill: UI design in four stages

What aesthetic does

The skill gives the agent a four-stage frame. BEAUTIFUL comes first: study existing work and pull out the principles — visual hierarchy, typography, colour, white space. Then RIGHT: component systems and accessibility requirements. SATISFYING covers micro-interactions, with 150–300ms timing and ease-out on entry, ease-in on exit. PEAK closes it out with parallax, particles and scroll-driven narrative, tempered by a note about restraint.

Two workflows ship with it. The first captures a screenshot of an inspiration site using the chrome-devtools skill, then hands it to ai-multimodal for analysis: style, grid, typography with an attempt to name the actual Google Font rather than defaulting to Inter or Poppins, hex palette, component patterns, and a 1–10 rating. The second generates design images through the Gemini API, scores them with ai-multimodal, and rewrites the prompt until the score reaches 7/10. Image edits go through media-processing; implementation leans on ui-styling and web-frameworks.

The constraint is baked into the skill itself: AI has no aesthetic sense, so the standard has to come from human examples. Skip that step and you get something average. Image generation needs a Gemini API key, and screenshot capture depends on chrome-devtools. Findings land in ./docs/design-guideline.md and ./docs/design-story.md — if your project already keeps a design guideline, decide which one wins before you run it.