design-ui

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.

mblode 39 2 Updated 3mo ago

Resources

4

Install

npx skillscat add mblode/agent-skills/design-ui

Install via the SkillsCat registry.

SKILL.md

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

Categories

Animation Processing Design UI Components