skills.rest
joyce820309
joyce820309COMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Create a design system with mockups and a DESIGN.md file.

Updated Jun 9, 2026
Search Tags:#branding#design system#UI design#AI design#mockup generation
One-click install
npx skills add https://github.com/joyce820309/holo-oahu --skill design-consultation-joyce820309
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/joyce820309/holo-oahu/tree/main/.skills/gstack/design-consultation
Command: npx skills add https://github.com/joyce820309/holo-oahu --skill design-consultation-joyce820309

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gbrain, design-system-generator, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the process of creating a design system, including proposing components, generating AI mockups, and writing the DESIGN.md file, thus saving time and reducing the risk of errors in design implementation.

Core Features & Use Cases

  • Automated Design System Proposal: Generates a comprehensive design system proposal based on user input and research findings.
  • AI Mockup Generation: Creates realistic AI-rendered mockups of the proposed design system applied to actual product screens.
  • DESIGN.md Generation: Outputs a complete DESIGN.md file that includes the design system details and rationale.

Quick Start

Invoke the design-consultation skill to start the design system creation process.

Frequently Asked Questions about design-consultation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate design system creation and mockup generation for UI development?▼

Automate design system creation by inputting product requirements to generate component proposals, AI-rendered visual mockups, and a complete DESIGN.md file. This streamlines UI development by applying researched design trends directly to product screens.

What is the process for generating a DESIGN.md file from product requirements?▼

Generating a DESIGN.md file involves analyzing product requirements, researching relevant design trends, proposing a comprehensive design system, and outputting the design rationale. This process ensures branding and UI development scenarios have structured design documentation.

Do I need a specific environment setup to generate AI design mockups for branding?▼

Generating AI design mockups requires specific dependencies, specifically the gbrain and design-system-generator components. These provide the necessary AI and design-related context processing environment to research trends and render visual mockups for branding scenarios.

Can I use automated design system proposals for existing product design screens?▼

Automated design system proposals apply to both new and existing product design scenarios. The system researches relevant design trends and generates realistic AI-rendered mockups applied directly to actual product screens to visualize the proposed UI components.

What are the limitations of using AI mockup generation for UI design?▼

AI mockup generation focuses on proposing components and rendering visual previews based on research findings, requiring AI and design-related context processing. It outputs a DESIGN.md file with design system details but does not implement the actual UI code for development.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
brolagbrolag
11

workflow-frontend-design

Convert mockups into frontend UI components with design standards and validation.

Community
Advanced
rungchan2rungchan2
2

design-system-generator

Generate design system documentation and color palettes from brand inputs.

Community
Intermediate
cegit27cegit27
3

design-shotgun

Generate multiple design variants from a brief and display them in a comparison board.

Official
Advanced