ui-design

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, or theming a web application.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "ui-design" with this command: npx skills add mblode/agent-skills/mblode-agent-skills-ui-design

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 reduced-motion behaviour
ui-audit for accessibility and final QA

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Open in GitHub Open in ClawHub

Related Skills

Related by shared tags or category signals.

Web3

define-architecture

No summary provided by upstream source.

Repository SourceNeeds Review

-56

mblode

Automation

ui-animation

No summary provided by upstream source.

Repository SourceNeeds Review

-1.9K

mblode

Security

audit-ui

No summary provided by upstream source.

Repository SourceNeeds Review

-114

mblode