design-consultation

Generate a design system plan and DESIGN.md with font and color previews.

Updated Aug 23, 2026

Search Tags:#typography #branding #layout #design-system #motion #color-palette

Ready to run

npx skills add https://github.com/bananaduck1/storylab --skill design-consultation-bananaduck1

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/bananaduck1/storylab/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/bananaduck1/storylab --skill design-consultation-bananaduck1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent visuals and design drift slow product teams. This skill understands your product, researches the landscape, and proposes a complete design system—covering aesthetic, typography, color, layout, spacing, and motion—and generates a DESIGN.md as the project’s design source of truth. For existing sites, use /plan-design-review to infer the system.

Core Features & Use Cases

Proposes a full design system that defines aesthetic, typography, color, layout, spacing, and motion.
Generates font and color preview pages to visualize the system.
Creates DESIGN.md as your project's design source of truth and supports a plan-design-review for existing sites.
Boots design work for new products with actionable guidelines that teams can implement quickly.

Quick Start

Provide a product overview and I will generate a complete design system and a DESIGN.md as the single 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 complete design system for a new product?▼

To create a complete design system for a new product, provide a product overview to generate actionable guidelines covering typography, color, layout, spacing, and motion, resulting in a DESIGN.md as the single source of truth.

Can I infer a design system from an existing website?▼

Yes, you can infer a design system from an existing website by using a plan-design-review process to extract typography, color, spacing, and motion guidelines, producing a comprehensive design system plan and DESIGN.md.

What is a DESIGN.md file for design systems?▼

A DESIGN.md file serves as a project's single source of truth for design, documenting the complete design system including aesthetic, typography, color, layout, spacing, and motion guidelines to prevent visual inconsistency and design drift.

How do I generate typography and color palette guidelines for my UI?▼

Generate typography and color palette guidelines by inputting your product overview to produce a design system that includes visual font and color preview pages, ensuring consistent UI implementation across your team.

What is the best way to document motion and layout guidelines for a design system?▼

The best way to document motion and layout guidelines is to research the product landscape and output a DESIGN.md file, capturing all spacing and motion rules to serve as the definitive design source of truth.

Can I use this to fix inconsistent visuals and design drift in my project?▼

Yes, you can fix inconsistent visuals and design drift by generating a comprehensive design system that defines typography, color, layout, spacing, and motion, establishing a DESIGN.md to align your product team.