skills.rest
kk20300113-png
kk20300113-pngCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

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

Updated May 9, 2026
Search Tags:#product-design#ui-design#design-system#brand-guidelines#design-documentation#design-consultation#color-previews
One-click install
npx skills add https://github.com/kk20300113-png/my-claude-skills --skill design-consultation-kk20300113-png
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/kk20300113-png/my-claude-skills/tree/main/design-consultation
Command: npx skills add https://github.com/kk20300113-png/my-claude-skills --skill design-consultation-kk20300113-png

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Starting a new product UI without an existing design system or DESIGN.md leads to inconsistent visual design, repeated ad-hoc design decisions, and no single source of truth for brand and UI rules, wasting developer and designer time.

Core Features & Use Cases

  • Complete Design System Generation: Researches the design landscape and proposes a full design system covering aesthetic direction, typography, color palettes, layout rules, spacing standards, and motion guidelines.
  • Visual Preview Creation: Generates font and color preview pages to validate design choices before implementation.
  • Single Source of Truth Documentation: Creates a DESIGN.md file that serves as the project's authoritative reference for all design decisions, ensuring team alignment.
  • Use Case: For a new mobile app with no existing brand guidelines, use this skill to generate a consistent design system and DESIGN.md so all team members follow the same visual standards, eliminating inconsistent UI across screens.

Quick Start

Use the design-consultation skill to create a complete design system and DESIGN.md for my new SaaS product.

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 SaaS product from scratch?▼

To create a design system, research the landscape and define aesthetic direction, typography, color palettes, layout rules, spacing standards, and motion guidelines. This generates a single source of truth file and visual previews to ensure team alignment for new product UI development.

What is the best way to document brand guidelines for web and mobile applications?▼

Documenting brand guidelines involves generating a DESIGN.md source-of-truth file covering typography, color palettes, and layout rules. This eliminates inconsistent visual design and repeated ad-hoc design decisions for web and mobile applications without existing brand guidelines.

Can I generate color and font previews before implementing a UI design?▼

Yes, generating font and color preview pages validates design choices before implementation. This visual validation ensures your design system and typography selections work together before committing to frontend code for your new mobile or web application.

Why does my new mobile app have inconsistent UI across different screens?▼

Inconsistent UI across screens happens when starting product development without an existing design system or source-of-truth file. Generating a complete design system with standard spacing, typography, and color rules eliminates repeated ad-hoc design decisions and aligns team members.

Do I need existing brand guidelines to generate design documentation?▼

No, you do not need existing brand guidelines. This design consultation process researches the design landscape to propose a complete design system and documentation from scratch, specifically built for new projects lacking an established visual standard or DESIGN.md.

What should a complete design system include for product UI development?▼

A complete design system should include aesthetic direction, typography, color palettes, layout rules, spacing standards, and motion guidelines. It also generates font and color preview pages plus a DESIGN.md file serving as the authoritative reference for all design decisions.

Related Skills

Explore More Design & Creative Skills→
ibnuhalimmibnuhalimm

Architect

Gather project context and produce a detailed architecture plan.

Community
Advanced
nicholasgriffintnnicholasgriffintn
2

frontend-design

Design frontend interfaces with typography, color, motion, and layout guidelines.

Community
Intermediate
89jobrien89jobrien
4

design-docs

Create feature design specs and Architecture Decision Records for system architecture documentation.

Community
Advanced
RenyEnnosRenyEnnos
1

design-md

Generate DESIGN.md design-system documentation from Stitch project assets.

Community
Advanced