skills.rest
g4rcez
g4rcezCOMMUNITY
Explore all skills by this author →
Website𝕏@garcez_allanGitHub

design-consultation

Generates a complete design system specification and live preview page from a product context.

48|2|Updated Dec 23, 2017
Search Tags:#typography#prototype#color#design-system#motion#design-consultation
One-click install
npx skills add https://github.com/g4rcez/dotfiles --skill design-consultation-g4rcez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/g4rcez/dotfiles/tree/main/.ai/skills/design-consultation
Command: npx skills add https://github.com/g4rcez/dotfiles --skill design-consultation-g4rcez

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a guided, end-to-end design-system workflow that captures product context, defines aesthetic decisions, and produces a DESIGN.md as a single source of truth. It also generates CLAUDE.md for design QA guidelines and sets up a repeatable process for future iterations.

Core Features & Use Cases

  • Phase-driven design system creation covering aesthetic, typography, color, spacing, layout, and motion.
  • Generates DESIGN.md as your project's design source of truth and CLAUDE.md with decision governance.
  • Produces a live preview page to visualize fonts, colors, and components before implementation.

Quick Start

Describe your product goals and constraints, and I’ll draft a complete design system and generate 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 specification for my project?▼

To create a design system specification, you define product context, aesthetic decisions, typography, color, spacing, layout, and motion principles. This Skill generates a DESIGN.md as the source of truth, a CLAUDE.md for QA governance, and a live preview page for visualization.

What is the best way to document design decisions for future iterations?▼

Documenting design decisions requires generating a DESIGN.md as a single source of truth alongside a CLAUDE.md for decision governance. This establishes a repeatable process for future iterations, capturing typography, color, spacing, layout, and motion principles.

Can I generate a live preview page to visualize my design system before implementation?▼

Yes, you can generate a live preview page to visualize fonts, colors, and components before implementation. The system applies typography, color, spacing, layout, and motion principles to produce a coherent visual output for review.

What do I need to start building a design system from product goals?▼

To start building a design system, provide your product goals and constraints. The workflow identifies the product context and produces a complete design system specification, outputting DESIGN.md and CLAUDE.md at the project root with a concise decisions summary.

Does this design system workflow handle motion and spacing principles?▼

Yes, the design system workflow handles motion and spacing principles. It covers a phase-driven process including aesthetic, typography, color, spacing, layout, and motion to create a coherent system specification for your project.

Related Skills

Explore More Design & Creative Skills→
unclecatvnunclecatvn
120

brainstorming

Clarifies user goals and constraints to transform ideas into concrete design concepts.

Community
Advanced
mrkhachaturovmrkhachaturov

design-consultation

Plan and implement a cohesive design system with DESIGN.md and visual guidelines.

Community
Advanced
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic
Arupbiswas09Arupbiswas09

ui-design-core

Generate UI design layouts and components with color schemes, typography, and motion effects.

Community
Advanced