design-ui

Define typography, color palettes, layout rules, and accessibility baselines for web application UI systems.

75|6|Updated Jan 12, 2026

Search Tags:#typography #design #ui #layout #aesthetics #color-palette #visual-system

Ready to run

npx skills add https://github.com/mblode/agent-skills --skill design-ui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-ui
Source: https://github.com/mblode/agent-skills/tree/main/skills/design-ui
Command: npx skills add https://github.com/mblode/agent-skills --skill design-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams establish a cohesive visual direction and a reusable UI system for web interfaces, ensuring brand consistency and faster product development.

Core Features & Use Cases

Define product UI direction, typography, color systems, spacing, and component patterns.
Provide reference guidance for product UI, marketing UI, and accessibility considerations.
Serve as a starting point for new UI design systems or design audits.

Quick Start

Describe your project context and brand goals to generate an actionable visual direction and UI system.

Frequently Asked Questions about design-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I establish a cohesive visual direction and UI design system for a web application?▼

To establish a cohesive visual direction and UI design system, define your project context and brand goals to generate typography, color palettes, spacing rules, and accessibility baselines for your web application.

What is included in a UI design system for SaaS dashboards and marketing sites?▼

A UI design system for SaaS dashboards and marketing sites includes defined typography, color palettes, layout rules, component patterns, and accessibility baselines to ensure brand consistency.

Can I use this to define UI direction for a project kickoff and design audit?▼

Yes, you can use it to define UI direction for a project kickoff or design audit by providing reference guidance for product UI, marketing UI, and accessibility considerations during initialization.

What's the best way to define typography and color palettes for a new design system?▼

The best way to define typography and color palettes is to describe your project context and brand goals, which generates an actionable visual direction with embedded brand-consistency guidelines.

Does setting up a visual system require any specific UI frameworks or dependencies?▼

Setting up a visual system requires no specific dependencies or frameworks, allowing you to define layout rules and visual direction directly within the frontmatter and markdown body.