design-consultation

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

Updated Jun 16, 2026
One-click install
npx skills add https://github.com/miko06/MedicineSimulator --skill design-consultation-miko06
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/miko06/MedicineSimulator/tree/main/.opencode/skills/gstack-design-consultation
Command: npx skills add https://github.com/miko06/MedicineSimulator --skill design-consultation-miko06

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenge of creating a complete design system from scratch, including aesthetic, typography, color, layout, spacing, and motion guidelines.

Core Features & Use Cases

  • Design System Creation: Automatically generates a full design system based on provided criteria.
  • Aesthetic Consistency: Ensures all design elements align with the desired aesthetic.
  • Typography and Color Management: Provides guidance on typography and color choices.
  • Layout and Spacing: Offers recommendations for layout and spacing for a cohesive look.
  • Motion Guidelines: Includes motion design considerations for interactive elements.
  • Use Case: When starting a new project and need to establish a consistent design language across your product.

Quick Start

Use the design-consultation skill to create a design system for your project.

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 from scratch for a new project?

To create a design system from scratch, define your project's criteria and use the tool to generate aesthetic, typography, color, layout, spacing, and motion guidelines. It provides a consistent design language across your product based on your specified requirements.

What is included in an automated design system generation?

An automated design system includes comprehensive guidelines for aesthetic consistency, typography management, color palettes, layout structures, spacing rules, and motion design for interactive elements. This ensures all visual and interactive components align with a unified design language.

When do I need to establish a design system with typography and color guidelines?

You need a design system with typography and color guidelines when starting a new project that requires a consistent design language across multiple screens. It prevents visual fragmentation and ensures aesthetic consistency from the beginning.

Can I generate motion guidelines and layout spacing rules in a single step?

Yes, you can generate motion guidelines and layout spacing rules in a single step by providing your aesthetic criteria. The system outputs a complete design framework that integrates layout, spacing, and motion considerations for interactive elements.

What is the best way to ensure aesthetic consistency across a new product?

The best way to ensure aesthetic consistency is to generate a comprehensive design system before building interfaces. This establishes unified typography, color, and layout rules, ensuring all design elements align with the desired aesthetic across the product.