design-consultation

Plan a complete design system and generate a DESIGN.md source of truth.

10|3|Updated Mar 25, 2026

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

Ready to run

npx skills add https://github.com/olaafrossi/FoamPilot --skill design-consultation-olaafrossi

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to align on a cohesive design system. This skill understands your product, researches the landscape, and proposes a complete design system spanning aesthetic, typography, color, layout, spacing, and motion, then generates a DESIGN.md as the project's single source of truth.

Core Features & Use Cases

Full system proposal: delivers typography, color, layout, spacing, and motion guidelines.
DESIGN.md as truth: produces a central design source of truth to guide implementation.
For existing sites: can infer design-system improvements via a /plan-design-review workflow.

Quick Start

Describe your product goals and constraints and I will deliver a complete design system proposal and DESIGN.md.

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?▼

Generate a complete design system by providing your product goals and constraints to produce a central DESIGN.md file. This document serves as the project's source of truth, detailing typography, color, layout, spacing, and motion guidelines.

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

You can infer a design system for an existing website by initiating a plan-design-review workflow. This evaluates your current UI and proposes cohesive typography, color, and layout guidelines to establish a structured source of truth.

What should a design system include for scaling across multiple screens?▼

A scalable design system must include typography, color, layout, spacing, and motion guidelines. It should provide clear guardrails to adapt to brand constraints, support onboarding new teams, and ensure consistency across multiple screens.

How do motion guidelines fit into a UI design system?▼

Motion guidelines integrate into a UI design system by standardizing animation behaviors alongside typography, color, and layout rules. Documenting these within your DESIGN.md ensures cohesive and predictable user interactions across the product.

Does a design system proposal help with onboarding new teams?▼

A design system proposal accelerates onboarding new teams by providing a definitive DESIGN.md source of truth. With clear guardrails and predefined typography and layout rules, new members can quickly align with brand constraints and project standards.