skills.rest
esopian
esopianCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-consultation

Create visual and interaction design systems with colors, typography, and layout.

2|Updated Apr 10, 2026
Search Tags:#typography#design#layout#UI#style guide#color
One-click install
npx skills add https://github.com/esopian/blue-oak-audit --skill design-consultation-esopian
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/esopian/blue-oak-audit/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/esopian/blue-oak-audit --skill design-consultation-esopian

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Navigating the complex process of establishing a complete design system or brand guidelines can be overwhelming and time-consuming for teams lacking expert input.

Core Features & Use Cases

  • Complete Design System Development: Understands product goals, researches visual trends, proposes color schemes, typography, layout, and motion standards, and generates preview pages.
  • Design Documentation: Creates DESIGN.md as the central source of truth for project designers and developers.
  • Use Case: When starting a new website or app, use this Skill to generate a consistent, branded design system from scratch, or analyze an existing site to infer its design principles.

Quick Start

Ask the AI to develop a full design system for my new e-commerce website.

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 UI design system from scratch for a new product?▼

A complete UI design system covers colors, typography, layout, and motion standards to ensure aesthetic consistency and usability. It generates a central style guide and reference pages, serving as the source of truth for project designers and developers.

Can I generate a style guide for an existing website redesign?▼

For an existing website redesign, you can analyze the current site to infer its design principles. This reverse-engineers existing UI layout and color choices into a comprehensive, documented style guide for the redesign.

What is the best way to document UI typography and color standards for developers?▼

The best way to document UI typography and color standards is by generating a central DESIGN.md file. This serves as the source of truth for developers, detailing the visual and interaction design systems alongside generated reference pages for quick review.

Does generating a comprehensive visual design system require prior design research?▼

Generating a comprehensive visual design system does not require prior manual design research. The process researches visual trends and proposes color schemes, typography, and layout standards directly based on your stated product goals.

Why do I need a style guide when launching a new app interface?▼

You need a style guide when launching a new app interface to ensure aesthetic choices and usability standards are applied consistently. It prevents visual fragmentation by providing a clear reference for colors, typography, and layout across all screens.

Related Skills

Explore More Design & Creative Skills→
greencmgreencm
1

design-consultation

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

Community
Advanced
keshav55keshav55

atris-design

Enforce frontend aesthetics policies for UI components and design systems.

Community
Basic
EdwinFerminEdwinFermin

frontend-tailwind-best-practices

Standardize Tailwind CSS patterns for layouts, colors, and typography.

Community
Intermediate
kk20300113-pngkk20300113-png

design-consultation

Generate a complete design system and DESIGN.md for new web and mobile applications.

Community
Advanced