skills.rest
moogieon
moogieonCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-consultation

Create complete design systems covering typography, color, layout, spacing, and motion with Markdown documentation.

Updated Jun 19, 2026
Search Tags:#design system#UX design#UI design#preview generation#design proposal
One-click install
npx skills add https://github.com/moogieon/kadera --skill design-consultation-moogieon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/moogieon/kadera/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/moogieon/kadera --skill design-consultation-moogieon

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill assists in creating a comprehensive design system for a product, providing a structured approach to aesthetic, typography, color, layout, spacing, and motion, ensuring a consistent and user-friendly interface.

Core Features & Use Cases

  • Complete Design System Proposal: Proposes an entire design system with aesthetics, typography, color schemes, layout, spacing, and motion.
  • Visual Preview Generation: Generates AI-rendered mockups or HTML preview pages for the proposed design system.
  • Design System Documentation: Writes a DESIGN.md file with all design decisions and rationale for future reference.

Quick Start

To initiate the design consultation process, use the following command: /start-design-consultation.

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 product?▼

Creating a design system involves defining aesthetics, typography, color, layout, spacing, and motion. This Skill generates a complete proposal with visual previews and Markdown documentation detailing all design decisions and rationale.

Can I generate visual mockups for a UI design proposal?▼

Yes, you can generate visual mockups for a UI design proposal. This Skill creates AI-rendered mockups and HTML preview pages reflecting your design system to provide a tangible visual representation of the proposed user interface.

What is the best way to document UX design decisions for future reference?▼

Documenting UX design decisions is best handled by generating a DESIGN.md file. This Skill outputs a Markdown file containing all design decisions and rationale, ensuring a cohesive and engaging user experience is maintained.

Do I need prior knowledge of design principles to use this design system generator?▼

Yes, prior knowledge of design principles and best practices is required. The Skill requires this understanding to assist effectively in creating a comprehensive design system with appropriate typography, color, and layout decisions.

How does AI assistance help ensure a cohesive UI design system?▼

AI assistance helps ensure a cohesive UI design system by structuring aesthetics, typography, color, layout, and spacing. It generates comprehensive proposals and visual previews to maintain a consistent, engaging, and user-friendly interface.

Related Skills

Explore More Design & Creative Skills→
jimiryquaijimiryquai

teach-impeccable

Analyze codebase and branding assets to write design context to .impeccable.md.

Community
Intermediate
tsenseitsensei
3

design-consultation

Generate a complete design system with typography, color, layout, spacing, and motion guidelines in DESIGN.md.

Community
Advanced
Tommy-ywTommy-yw
539

adversarial-ux-test

Simulate an adversarial user experience to identify usability issues.

Community
Intermediate
gaoqiongxiegaoqiongxie
1

screenshot-to-prototype

Convert UI design screenshots into interactive HTML prototypes.

Community
Intermediate