Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one, covering aesthetic direction, typography, and making choices that avoid templated defaults.
Tasks
Build a compact design token system with 4-6 named hex colors, 2+ typeface roles, layout concepts with ASCII wireframes, and a single signature element
Review the design plan against the brief for default-looking choices and revise before writing any code
Inputs
the human's design brief
any available information about the subject, its audience, and the page's single job
Outputs
a design token plan including color palette, type scale, layout concept, and signature element
the final UI code deriving every color and type decision from the revised plan
Limitations and checks
does not provide executable automation or tooling
avoid three common default looks unless the brief explicitly requests one: warm cream backgrounds with serif and terracotta, near-black with acid-green or vermilion accent, or broadsheet-style with hairline rules
Confirm the hero opens with the most characteristic thing in the subject's world rather than a default template pattern
Verify copy uses active voice with action names that stay consistent through the entire flow, such as Publish producing Published
Check that numbered markers and structural devices only appear when the content is actually a sequence where order carries information
Confirm CSS selector specificities do not cancel each other out, especially between type-based and element-based selectors
Ensure responsive layout down to mobile, visible keyboard focus, and reduced motion are all respected
AI Search
Find projects, verify facts, compare options, or turn a complex need into an actionable plan
Try a searchA click only fills the search box; you stay in control