skills.rest
cegit27
cegit27OFFICIAL
Explore all skills by this author →
GitHub

design-consultation

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

3|14|Updated Mar 10, 2026
Search Tags:#typography#design system#color palette#brand guidelines#product design#ui design#design.md
One-click install
npx skills add https://github.com/cegit27/moodle-proctor --skill design-consultation-cegit27
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/cegit27/moodle-proctor/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/cegit27/moodle-proctor --skill design-consultation-cegit27

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of inconsistent or missing visual design in new projects. Instead of manually picking fonts, colors, and spacing rules, it researches your product and proposes a complete, coherent design system that becomes your project's single source of truth.

Core Features & Use Cases

  • Complete Design System Proposal: Generates aesthetic direction, typography scales, color palettes, layout grids, spacing systems, and motion principles tailored to your product.
  • Landscape Research: Analyzes competitors and industry patterns to inform design decisions.
  • Preview Generation: Creates font and color preview pages so you can visualize the system before committing.
  • Use Case: You're starting a new SaaS dashboard with no existing brand guidelines. Use this Skill to generate a DESIGN.md that defines your typography, colors, and spacing, ensuring every subsequent UI decision stays consistent.

Quick Start

Use the design-consultation skill to generate a complete DESIGN.md design system for this 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 for a new SaaS product?▼

A design system centralizes typography, color palettes, layout grids, and motion principles into a single source of truth. It ensures consistent UI design across new project initialization and resolves design debt in existing sites lacking established brand guidelines.

What's the best way to create brand guidelines for a UI without existing design rules?▼

Creating a design system for an existing site requires auditing current UI elements and establishing a coherent structure. It generates a DESIGN.md file defining typography scales, color palettes, and spacing rules to remediate design debt and align future interface updates.

Can I preview typography and color palettes before committing to a design system?▼

Yes, generating a design system includes creating preview pages for typography and color palettes. This allows you to visualize the proposed aesthetic direction, layout grids, and motion principles before committing them to your final DESIGN.md source of truth.

Does generating a design system require existing brand guidelines or competitor research?▼

Generating a design system does not require existing brand guidelines as it performs landscape research to analyze competitors. This research informs the creation of typography scales, color palettes, and layout grids tailored specifically to your digital product.

When do I need to remediate design debt in an existing web application?▼

You need to remediate design debt when your existing site lacks established brand guidelines and visual consistency. Generating a unified design system establishes a DESIGN.md source of truth to align typography, color palettes, and spacing across all subsequent UI updates.

Related Skills

Explore More Design & Creative Skills→
SwimmingLiuSwimmingLiu
1

teach-impeccable

Gather and persist project design context into a configuration file.

Community
Intermediate
DaviRain-SuDaviRain-Su

design-consultation

Generate a design system with typography, colors, layout, spacing, and motion.

Community
Advanced
fengjutianfengjutian

stitch-design-taste

Generate DESIGN.md files defining visual and interaction standards for Google Stitch.

Community
Advanced
rwHiveAquarwHiveAqua

design-advisor

Translate brand strategy into visual identity assets with typography, color, and layout specs.

Community
Basic