skills.rest
luisgustavooliveira
luisgustavooliveiraCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-consultation

Generate a comprehensive design system with preview pages and a DESIGN.md file.

Updated Feb 27, 2026
Search Tags:#design system#brand guidelines#DESIGN.md#preview pages#design system creation
One-click install
npx skills add https://github.com/luisgustavooliveira/skills --skill design-consultation-luisgustavooliveira
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/luisgustavooliveira/skills/tree/main/design-consultation
Command: npx skills add https://github.com/luisgustavooliveira/skills --skill design-consultation-luisgustavooliveira

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps you create a complete design system for your product, including aesthetic, typography, color, layout, spacing, and motion. It generates preview pages and a DESIGN.md file as your project's design source of truth.

Core Features & Use Cases

  • Design System Creation: Propose a complete design system for your product.
  • Preview Pages: Generate font+color preview pages.
  • DESIGN.md Generation: Create a DESIGN.md file as the project's design source of truth.
  • Use Case: When starting a new project with no existing design system or DESIGN.md, or when asked to design a system, guidelines, or preview pages.

Quick Start

Run the design-consultation skill to create a design system 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 create a design system for a new project from scratch?▼

Creating a design system requires defining typography, color, layout, spacing, and motion guidelines, then generating preview pages and a DESIGN.md file to serve as your project's source of truth.

What should brand guidelines include for a comprehensive product design system?▼

Brand guidelines should include rules for typography, color palettes, layout structures, spacing scales, and motion, all documented within a DESIGN.md file and visual preview pages.

Can I generate preview pages for typography and color without an existing DESIGN.md file?▼

Yes, you can generate font and color preview pages without an existing DESIGN.md. The system proposes a complete design system and creates both the preview pages and the DESIGN.md file simultaneously.

When do I need a DESIGN.md file for my project?▼

You need a DESIGN.md file when starting a new project with no existing design system or when establishing brand guidelines. It acts as the central source of truth for your product's aesthetic decisions.

Does design system creation work for an existing product with no brand guidelines?▼

Yes, design system creation works for an existing product lacking brand guidelines. It proposes a complete aesthetic framework including typography, color, layout, and motion to retroactively standardize your design.

What is the best way to document brand guidelines and design tokens?▼

The best way to document brand guidelines and design tokens is by generating a DESIGN.md file as your project's source of truth, accompanied by visual preview pages for immediate color and typography reference.

Related Skills

Explore More Design & Creative Skills→
GeneralJerelGeneralJerel
6

setup-chalk

Initialize a standardized .chalk folder and chalk.json with PROFILE docs.

Community
Advanced
dev-mirzabicerdev-mirzabicer

frontend-ui-ux

Translate design briefs into production-ready frontend UI components.

Community
Advanced
eboodyeboody

ui-expert

Audit UI designs for visual hierarchy, spacing, typography, and design-system consistency.

Community
Advanced
Nir-BhayNir-Bhay
19

brand-guidelines-doc

Generate brand guideline documents with logo, color, typography, and voice specifications.

Community
Intermediate