Loading...

design-ui

Original：🇺🇸 English

Translated

Provides design direction and visual system for web UI. Defines layout, typography, colour, and overall aesthetic for product (SaaS/admin/data-heavy) or marketing/brand experiences. Use when choosing visual direction, selecting colour palettes and fonts, establishing layout patterns, or starting a new UI design system.

1installs

Sourcemblode/agent-skills

Added on2026-02-07

NPX Install

npx skill4agent add mblode/agent-skills design-ui

Tags

Translated version includes tags in frontmatter

ui-design-system product-ui-design marketing-ui-design web-ui-visual design-guidance

SKILL.md Content

View Translation Comparison →

UI Design

Choose the right track and follow its guidance.

Tracks

Product UI (SaaS/admin/data-heavy): See product-ui.md
Marketing/brand/creative: See marketing-ui.md

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 reduced-motion behaviour
```
audit-ui
```
for accessibility and final QA
```
implement-frontend
```
for React/TypeScript implementation standards