design

Implement a 9-phase design system for dashboards, SaaS UIs, and admin interfaces.

77|11|Updated Dec 26, 2025

Search Tags:#typography #design #ui #layout #design-system #motion #color-system

Ready to run

npx skills add https://github.com/mcouthon/agents --skill design-mcouthon

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design consistency and speed across complex products. Aligns product vision with visual language for dashboards, SaaS UIs, and admin interfaces, reducing rework and design drift.

Core Features & Use Cases

Establish design direction before implementation.
Translate direction into craft principles (typography, color, layout, motion).
Apply a 9-phase implementation to deliver polished interfaces for enterprise apps and consumer tools.

Quick Start

Begin by selecting a design direction for your product and work through Part 1 to set typography, color, and motion guidelines.

Frequently Asked Questions about design

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

FAQPage Schema

How do I create a consistent design system for a SaaS dashboard?▼

A 9-phase design system method establishes premium UI direction for SaaS dashboards by defining typography, color, shadows, motion, and layout guidelines. This aligns product vision with visual language to reduce rework and design drift.

What is the best way to define UI design direction before implementation?▼

The best way to define UI design direction is to select a visual style and translate it into concrete craft principles for typography, color, layout, and motion. This establishes a reusable foundation for fast, consistent interface delivery across complex products.

Can I use this 9-phase design method for admin interfaces and enterprise apps?▼

Yes, the 9-phase design method applies directly to admin interfaces and enterprise apps. It guides layout, typography, color, shadow, and motion decisions specifically for dashboards, SaaS UIs, and admin consoles, ensuring polished, consistent delivery.

How do I translate design direction into craft principles for typography and color?▼

Translate design direction into craft principles by working through a structured framework that sets explicit typography, color, and motion guidelines. This ensures visual language decisions are concrete, reusable templates rather than isolated choices.

Why does my dashboard UI suffer from design drift and inconsistent styling?▼

Dashboard UI design drift occurs when product vision lacks an aligned visual language and defined craft principles. Establishing a structured 9-phase design system before implementation prevents inconsistent styling and reduces rework across complex products.