skills.rest
Yaugourt
YaugourtCOMMUNITY
Explore all skills by this author →
𝕏@YaugourtGitHub

design-consultation

Creates a DESIGN.md with typography, color, spacing, and motion.

2|2|Updated Dec 1, 2024
Search Tags:#typography#branding#design-system#design-docs#color-palette#ui-guidelines#design-consultation
One-click install
npx skills add https://github.com/Yaugourt/LiquidTerminal_Back --skill design-consultation-yaugourt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/Yaugourt/LiquidTerminal_Back/tree/main/.agents/skills/gstack/design-consultation
Command: npx skills add https://github.com/Yaugourt/LiquidTerminal_Back --skill design-consultation-yaugourt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The design process often starts without a cohesive system. This skill guides teams to understand a product's design needs, research landscapes, and propose a complete design system that covers typography, color, layout, spacing, and motion. It also creates DESIGN.md as the single source of truth for the project.

Core Features & Use Cases

  • Propose a complete design system including typography, color tokens, spacing scales, and motion guidelines.
  • Generate font+color preview pages and output DESIGN.md that documents the system for future work.
  • When starting from scratch or updating an existing site, provide guidance for branding, design decisions, and practical implementation.

Quick Start

Describe your project and I will generate a complete DESIGN.md with typography, color, spacing, and motion tokens.

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 cohesive design system for a new web app from scratch?▼

Creating a cohesive design system from scratch involves defining typography, color tokens, spacing scales, and motion guidelines. This skill guides you through the process and outputs a DESIGN.md file as the single source of truth for your project.

What is a DESIGN.md file and how does it work as a design system source of truth?▼

A DESIGN.md file documents your entire design system, including typography, color, layout, spacing, and motion. It serves as the single source of truth, ensuring teams and projects stay aligned when starting from scratch or updating existing sites.

Can I use this to update an existing design system for a marketing site?▼

Yes, you can update an existing design system for marketing sites, web apps, and dashboards. It provides guidance for branding, design decisions, and practical implementation whether you are starting from scratch or refining current UI guidelines.

What's the best way to document UI guidelines, color palettes, and typography scales?▼

The best way to document UI guidelines is to generate a comprehensive DESIGN.md file. This includes your color palette, typography scales, spacing tokens, and motion guidelines, accompanied by generated font and color preview pages for visual reference.

How do I define color tokens and spacing scales for a production-ready design system?▼

Defining color tokens and spacing scales involves proposing a complete design system tailored to your product. This skill researches your design needs and outputs production-ready tokens within a DESIGN.md file, ensuring practical implementation across teams.

Do I need an existing DESIGN.md file to generate design system documentation?▼

No, you do not need an existing DESIGN.md file. You can start from scratch by simply describing your project, and the skill will generate a complete DESIGN.md with typography, color, spacing, and motion tokens for your product.

Related Skills

Explore More Design & Creative Skills→
bfree-trainerbfree-trainer
60

teach-impeccable

Capture project design context and persist it to AI configuration.

Official
Intermediate
tsenseitsensei
3

design-consultation

Generate a complete design system with typography, color, layout, spacing, and motion guidelines in DESIGN.md.

Community
Advanced
Likas07Likas07

ui-designer

Generate UI design systems with design tokens and WCAG AA accessibility.

Community
Advanced
aditisharma0204aditisharma0204

creative-director

Define visual direction and create Figma design systems with moodboards, color palettes, and typography tokens.

Community
Advanced