design-consultation

Create a complete design system and generate DESIGN.md with typography, color, spacing, and motion.

Updated Feb 28, 2026
One-click install
npx skills add https://github.com/Analog-Labs/pixelport-launchpad --skill design-consultation-analog-labs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/Analog-Labs/pixelport-launchpad/tree/main/.agents/skills/gstack/design-consultation
Command: npx skills add https://github.com/Analog-Labs/pixelport-launchpad --skill design-consultation-analog-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview pages. Creates DESIGN.md as your project's design source of truth. For existing sites, use /plan-design-review to infer the system instead.

Core Features & Use Cases

  • Proposes a complete design system including aesthetic, typography, color, layout, spacing, and motion
  • Generates DESIGN.md as the design source of truth for the project
  • For existing sites, uses /plan-design-review to infer the system and align with current work
  • Produces font+color preview pages to illustrate the system

Quick Start

Tell me about your product and I will draft a complete design system and DESIGN.md, including typography, color, spacing, and a preview page.

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 my web app?

A design system provides a coherent visual language for your product by defining typography, color, layout, spacing, and motion. It serves as a central source of truth to maintain consistency across web apps, dashboards, and marketing sites.

What is a DESIGN.md file and why do I need one for my project?

A DESIGN.md file acts as the source of truth for your project's design system, documenting product context, typography, color, spacing, motion, and decisions logs. It locks in design guidelines to ensure consistent visual implementation.

Can I generate a color palette and typography preview for my dashboard?

Yes, you can generate a color palette and typography preview for your dashboard. The system produces an optional preview page that visually illustrates the proposed font and color choices to verify the aesthetic direction.

How do I infer an existing design system from a live website?

To infer an existing design system from a live website, you can use a design review process to analyze the current visual elements. This aligns the inferred system with your existing work instead of starting from scratch.

Does this design consultation tool work for internal tools and marketing sites?

Yes, this design consultation works for internal tools, marketing sites, web apps, and dashboards. It proposes a complete design system tailored to your specific product context and generates the corresponding documentation.

How do I lock design decisions for QA mode in my development workflow?

To lock design decisions for QA mode, you write specific guidance into your project's configuration file. This ensures that typography, color, spacing, and motion choices are strictly enforced during the quality assurance process.