skills.rest
Intension-us
Intension-usOFFICIAL
Explore all skills by this author →
GitHub

design-consultation

Generate a DESIGN.md documenting typography, color, spacing, layout, and motion guidelines.

Updated Apr 3, 2026
Search Tags:#typography#branding#color#design-system#design-guidelines#component-architecture
One-click install
npx skills add https://github.com/Intension-us/attention-diagnostic --skill design-consultation-intension-us
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/Intension-us/attention-diagnostic/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/Intension-us/attention-diagnostic --skill design-consultation-intension-us

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams struggle to align visuals and interactions, leading to inconsistent experiences across products. This Skill delivers a complete design system plan, including typography, color, spacing, motion, and a DESIGN.md that becomes the single source of truth for the project.

Core Features & Use Cases

  • Complete design system: typography, color, spacing, layout, motion, and tokens.
  • DESIGN.md as source of truth: living artifact you reference across teams and branches.
  • For new or existing sites: infer an initial system or design from scratch and evolve it over time.

Quick Start

Draft a complete design system plan, including typography, color, spacing, and layout, and generate a DESIGN.md as the design source of truth.

Frequently Asked Questions about design-consultation

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

FAQPage Schema
How do I create a design system for a new website or app?▼

Create a design system by defining a scope, typography scale, color palette, spacing grid, and design-token workflow, then generating a DESIGN.md to document layout, motion, branding, and component architecture rules.

What is a DESIGN.md file and how does it work as a design source of truth?▼

A DESIGN.md is a living artifact that documents typography, color tokens, spacing, layout, and motion guidelines, serving as the single source of truth for design decisions across teams and branches.

Can I apply a design system to an existing product redesign?▼

You can apply this design system workflow to existing products by inferring the initial system from current visuals and evolving it to establish cohesive, scalable design guidelines over time.

What do I need to start building a scalable design system?▼

To start building a design system, you need a defined scope, typography scale, color palette, spacing grid, and a design-token workflow to ensure visual and interaction consistency across the product.

Why does my product need a design-token workflow for consistent UI?▼

A design-token workflow ensures consistent UI by centralizing typography, color, spacing, and motion values into reusable tokens, preventing visual drift and aligning interactions across all product surfaces.

Does this design system approach cover both branding and component architecture?▼

This design system approach covers branding decisions, component rules, typography, color, spacing, layout, and motion, providing a complete reusable framework for both new products and redesigns.

Related Skills

Explore More Design & Creative Skills→
KentoShimizuKentoShimizu
7

visual-design

Create a reusable visual spec with color, typography, spacing, and grid rules.

Community
Intermediate
ricoccricocc
268

rico-design-md

Convert a website into a design system with tokens, typography, and CSS artifacts.

Community
Advanced
Adelie-SquadAdelie-Squad
17

UI Designer Agent

Create UI systems with design tokens, component libraries, and handoff notes.

Official
Advanced
dthompsonfldthompsonfl

ui-ux-pro-max

Aggregate UI/UX guidance into a searchable design system knowledge base.

Community
Advanced