skills.rest
garrytan
garrytanCOMMUNITY
Explore all skills by this author →
Website𝕏@garrytanGitHub

design-consultation

Generate a design system proposal with typography, color, layout, and motion elements.

127k|19.1k|Updated Mar 11, 2026
Search Tags:#typography#design system#color scheme#design consultation#aesthetic proposal
One-click install
npx skills add https://github.com/garrytan/gstack --skill design-consultation-garrytan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/garrytan/gstack/tree/main/design-consultation
Command: npx skills add https://github.com/garrytan/gstack --skill design-consultation-garrytan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the process of creating a comprehensive design system proposal, which includes aesthetic, typography, color, layout, spacing, and motion elements, and provides a font+color preview.

Core Features & Use Cases

  • Automated Design System Proposal: Generates a full design system proposal based on the user's product and research findings.
  • Customization Options: Allows users to adjust the aesthetic direction, colors, typography, and layout to fit their specific needs.
  • Visual Preview: Generates AI mockups or HTML preview pages of the proposed design system for realistic visualization.
  • Design Documentation: Outputs the approved design system as a DESIGN.md file, providing a detailed guide for implementation.

Quick Start

Use the /design-consultation command to generate a design system proposal for your project.

Frequently Asked Questions about design-consultation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a complete design system proposal for my project?▼

You can generate a complete design system proposal by using the /design-consultation command, which automates aesthetic, typography, color, layout, spacing, and motion elements into a comprehensive output. It provides a font and color preview for visualization.

What is included in an automated design system proposal?▼

An automated design system proposal includes aesthetic direction, typography, color schemes, layout, spacing, and motion elements. It also provides visual previews through AI mockups or HTML pages and outputs a DESIGN.md file for implementation guidance.

Can I customize the typography and color scheme in the generated design system?▼

Yes, you can customize the aesthetic direction, colors, typography, and layout to fit your specific needs. The system generates a font and color preview alongside the full design system proposal to help visualize your customizations.

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

The best way to document a design system for implementation is to output the approved aesthetic, typography, and color decisions into a DESIGN.md file. This provides a detailed, structured guide for developers to follow during implementation.

How do I get a visual preview of a proposed color scheme and typography?▼

You can get a visual preview of a proposed color scheme and typography by generating AI mockups or HTML preview pages. The design consultation process creates these realistic visualizations to help you evaluate the aesthetic direction before implementation.

Related Skills

Explore More Design & Creative Skills→
abhishekmmgnabhishekmmgn

design-consultation

Translate product context into a design system proposal with typography, color, spacing, layout, and motion.

Community
Advanced
anonymouswhite07anonymouswhite07

stitch-design-taste

Generate DESIGN.md specifications for Google Stitch from design taste rules.

Community
Advanced
sajalsuhanesajalsuhane

design-html

Convert approved AI mockups into Pretext-native HTML/CSS with dynamic layouts.

Community
Advanced
ECFN15ECFN15

technical-sans

Create visual design systems with typography, color, layout, and components.

Community
Advanced