ui-design

name

ui-design

description

Defines visual systems, colour palettes, typography scales, and layout patterns for web UI. Produces design tokens and component styling for product dashboards (SaaS/admin/data-heavy) or marketing/brand landing pages. Use when choosing visual direction, designing a landing page, building a hero section, selecting colour palettes and fonts, establishing layout patterns, starting a new UI design system, theming a web application, or asking "make this look good", "make this look premium", "design the UI for", "full-bleed hero", or "pick a visual style".

UI Design

Choose the right track based on your project type and follow its guidance.

Tracks

Pick the track that matches the primary surface:

• Product UI — dashboards, admin panels, data tables, settings pages, internal tools. See product-ui.md
• Marketing — landing pages, brand sites, promotional content, portfolios. See marketing-ui.md

If unsure: product UI prioritizes information density and efficiency; marketing prioritizes visual impact and storytelling.

Always load alongside the track

• aesthetic-direction.md — anti-patterns, AI-slop signals, and calibration. Read after picking a track.
• design-in-code.md — low-fi planning before visual polish.

Related skills

• ui-animation for motion timing, easing, and animation review
• ui-audit for accessibility and final QA