Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
Tasks
Design or reshape a web UI with a distinctive visual identity by first drafting a token plan (4-6 named hex colors, typefaces and roles, layout concept, principles), reviewing it against the brief for generic defaults, then building to the revised plan
Critique a page's copy and microcopy: rewrite from the end user's perspective with active voice, specific CTAs, and consistent naming across a flow
Inputs
A design brief describing the product, subject matter, or client context (if absent, the designer proposes a subject, audience, and primary job and confirms with the client)
Any client preferences or project context available in memory
Outputs
A compact design plan with color palette (4-6 named hex values), typography roles, layout concept with ASCII wireframes, and design principles
Frontend code implementing the revised plan, with attention to CSS selector specificity
Limitations and checks
Screenshot-based self-critique applies only if the environment supports taking screenshots
The skill provides guidance only; it does not include executable tooling
Hero section opens with something characteristic of the subject's world rather than the default big-number-with-small-label treatment
Avoided the listed generic tells: single-word headline accents, all-caps labels, unnecessary eyebrow labels, and numbered markers where the content is not actually a sequence
Non-user-triggered motion is limited to a single orchestrated moment; fade-and-slide entrances on every section and hover transitions on every card are absent
Search
Find projects, verify facts, compare options, and filter by your requirements
Try a searchA click only fills the search box; you stay in control