design-consultation

Define and implement a complete design system with a DESIGN.md source of truth.

Updated Mar 22, 2026
One-click install
npx skills add https://github.com/jm199seo/lostark-accessory-viewer --skill design-consultation-jm199seo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/jm199seo/lostark-accessory-viewer/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/jm199seo/lostark-accessory-viewer --skill design-consultation-jm199seo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a structured design consultation that understands your product, researches the landscape, and proposes a complete design system (aesthetic, typography, color, layout, spacing, motion). It generates a DESIGN.md as the project’s design source of truth and helps you plan design decisions for new projects or infer systems for existing sites.

Core Features & Use Cases

  • Understands your product goals, audience, and context to define a cohesive design system.
  • Conducts landscape research and proposes design directions tailored to your product.
  • Outputs a DESIGN.md that codifies the design system and provides concrete guidance for implementation, plus a ready-to-use preview page workflow.

Quick Start

Provide a complete design system for my project and draft DESIGN.md based on the given product context.

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

To create a complete design system, this Skill gathers your product context, researches the design landscape, and proposes cohesive rules for UI, typography, color, layout, spacing, and motion. It outputs a DESIGN.md as your project's authoritative source of truth.

What is a design system and how does it guide product UI?▼

A design system guides product UI by codifying aesthetic, typography, color, layout, spacing, and motion into a single DESIGN.md. It acts as the authoritative source of truth to maintain coherence across web apps, dashboards, and marketing pages.

Can I use a design system consultation for an existing site?▼

Yes, you can use this design system consultation for existing sites. It infers and structures your current design system by analyzing the site's context, then generates a DESIGN.md to standardize your UI, typography, and color moving forward.

How do I define typography and color rules for a dashboard?▼

To define typography and color rules for a dashboard, this Skill analyzes your product goals and audience. It then proposes a tailored design system that establishes coherent color palettes and typography scales, documented within a ready-to-use DESIGN.md file.

What's the best way to document a design system for a new product?▼

The best way to document a design system is generating a DESIGN.md file. This Skill produces a full design proposal and a ready-to-use preview page workflow, ensuring your UI, layout, and motion decisions are codified as an authoritative source of truth.

Does a design system consultation include a preview page workflow?▼

Yes, this design system consultation includes a ready-to-use preview page workflow. Alongside the DESIGN.md that codifies your color, typography, and layout rules, it delivers a practical preview to visualize and implement the proposed system.