name: ui-design
description: Defines visual systems and design direction before code is written — colour palettes, typography scales, layout patterns, design tokens, and component styling for product dashboards (SaaS/admin/data-heavy) or marketing/brand landing pages. Includes CRO strategy, conversion benchmarks, persuasion psychology, A/B testing methodology, and social proof patterns. Use when choosing visual direction, selecting colour palettes and fonts, establishing layout patterns, starting a new design system, theming a web application, optimising landing page conversions, auditing social proof, or asking "make this look good", "make this look premium", "design the UI for", "full-bleed hero", "pick a visual style", "improve conversions", "landing page CRO", or "add social proof". Scope: design decisions and specs (tokens, palettes, CRO plans). For writing actual Tailwind markup or building/refining components from those decisions, use the ui skill instead.
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
Marketing / landing page references
Load these when working on landing pages, conversion pages, or marketing sites:
| File | What it covers |
|---|
| references/cro.md | Persuasion psychology (Cialdini), social proof patterns, conversion benchmarks, Voice of Customer research, page length decision |
| references/testing.md | A/B testing methodology, what to test first, heatmap/scroll map insights, CTA statistics |
| references/modern.md | AI personalisation, mobile-first conversion, page speed and Core Web Vitals, accessible copy, microcopy |
Boundary with ui (private)
This skill owns design decisions — the what and why of visual direction, before markup is written.
Use the private ui skill when the work is implementation: writing Tailwind classes, building components, cleaning up markup, adding dark mode or responsive behavior to existing code. Once ui-design has produced a direction or spec, hand it off to ui to build.
Rule of thumb: if the output is a palette, token set, CRO plan, or visual spec, use ui-design. If the output is .tsx/.html with Tailwind classes, use ui.
Related skills
copywriting for landing page copy — message match, persuasion frameworks, and copy qualityui-animation for motion timing, easing, and animation reviewui-audit for accessibility and final QAoptimise-seo for meta descriptions and page titlesui (private) for Tailwind implementation once design direction is decided
