skills.rest
GenEducation
GenEducationOFFICIAL
Explore all skills by this author →
GitHub

design-consultation

Create a design system and DESIGN.md with typography, color, layout, spacing, and motion.

Updated Mar 30, 2026
Search Tags:#typography#design system#color palette#design.md#ui consistency#preview pages#design consultation
One-click install
npx skills add https://github.com/GenEducation/GenedUIProject --skill design-consultation-geneducation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/GenEducation/GenedUIProject/tree/main/.gemini/skills/design-consultation
Command: npx skills add https://github.com/GenEducation/GenedUIProject --skill design-consultation-geneducation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns a vague or inconsistent UI into a clear design source of truth, helping teams define the visual rules before they ship more screens. It creates the structure needed to stop guesswork around typography, color, spacing, layout, and motion.

Core Features & Use Cases

  • Complete design system generation: Produces a cohesive system for aesthetic direction, typography, color, layout, spacing, and motion.
  • Design documentation: Creates DESIGN.md as the project’s reference point for future UI work.
  • Preview pages: Generates font and color preview pages so the system can be reviewed visually.
  • Best for: New product UIs with no existing design system, or existing sites that need a consistent visual language.

Quick Start

Ask the design-consultation skill to review your product and generate a complete design system with a DESIGN.md file, including typography, color, layout, spacing, motion, and preview pages.

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 a new application?▼

To create a complete design system, review your product repository context to generate cohesive typography, color, layout, spacing, and motion rules alongside a DESIGN.md file. This provides a clear visual direction and reference point for consistent UI development.

What is the best way to establish UI consistency across an existing web project?▼

Establishing UI consistency requires generating a unified design system that defines typography, color palettes, and motion guidelines. Creating a DESIGN.md file serves as the project source of truth to eliminate visual guesswork for future screens.

How do I generate a DESIGN.md file with typography and color palettes?▼

Generate a DESIGN.md file by prompting the skill to review your product context, which produces coherent design documentation including typography rules, color palettes, and layout specifications for your application.

Can I visually preview color palettes and typography before applying them to my UI?▼

Yes, you can visually preview color palettes and typography. The design system generation includes creating dedicated preview pages so you can review the visual language and aesthetic direction before implementing the rules in your UI.

Does building a design system require existing design assets or repository context?▼

Building a design system requires repository context review to understand your product, but does not require existing design assets. It can define a complete visual language from scratch for new applications lacking a clear design direction.

What is included in a complete design system for product UI development?▼

A complete design system includes typography, color palettes, layout grids, spacing rules, and motion guidelines. It also generates a DESIGN.md reference file and visual preview pages to guide future UI implementation.

Related Skills

Explore More Design & Creative Skills→
ketanswebsiteketanswebsite

ui-ux-design-advisor

Analyze project structure and design system to propose UI/UX design options.

Community
Advanced
Jesse-L-MJesse-L-M

design-consultation

Generate a complete design system with typography, color, layout, and motion tokens.

Community
Advanced
atrislabsatrislabs

design

Enforce frontend aesthetic policies for UI, component, and landing page development.

Official
Intermediate
saranskumarsaranskumar

uiux-designer

Generate design system tokens and guidelines for React, Vue, Next.js, Flutter, and SwiftUI.

Community
Intermediate