ui-design

Original：🇺🇸 English

Translated

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, selecting colour palettes and fonts, establishing layout patterns, starting a new UI design system, theming a web application, or asking "make this look good", "design the UI for", or "pick a visual style".

2installs

Sourcemblode/agent-skills

Added on2026-03-20

NPX Install

npx skill4agent add mblode/agent-skills ui-design

SKILL.md Content

View Translation Comparison →

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.

References

Low-fi planning: See design-in-code.md
Anti-patterns and calibration: See aesthetic-direction.md

Related skills

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