ui-design

Generate cohesive UI/UX design systems with Master documents and page overrides.

Updated Aug 23, 2026

Search Tags:#typography #design #ui #responsive #color #ux #design-system

Ready to run

npx skills add https://github.com/mengdehong/opencode-dotfiles --skill ui-design-mengdehong

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/mengdehong/opencode-dotfiles/tree/main/skills/ui-design
Command: npx skills add https://github.com/mengdehong/opencode-dotfiles --skill ui-design-mengdehong

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

UI/UX design is complex and time-consuming when ensuring consistency across products. This Skill provides AI-driven design guidance to generate cohesive UI/UX design systems.

Core Features & Use Cases

Multi-domain design guidance across color, typography, layout, components, accessibility, and motion.
Pattern-based outputs that produce a Master design system plus page-specific overrides for scalable design.
Cross-platform applicability (web and mobile) with stacks support and design tokens for rapid implementation.

Quick Start

Ask the AI to generate a complete UI/UX design system for a given product and project.

Frequently Asked Questions about ui-design

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

FAQPage Schema

How do I generate a cohesive UI/UX design system for web and mobile apps?▼

To generate a UI/UX design system, define your product requirements and the AI produces an end-to-end system covering color, typography, layout, and components. It saves a Master design document with optional page overrides for scalable, cross-platform implementation.

What is included in a complete design system for a web dashboard or marketing page?▼

A complete design system includes multi-domain guidance across color palettes, typography, responsive layout, components, accessibility, and motion. It provides pattern-based outputs with a Master design document plus page-specific overrides to ensure consistency.

Can I customize design tokens for specific pages without breaking the overall design system?▼

Yes, you can customize design tokens for specific pages through hierarchical retrieval. The system saves a Master design document and allows optional page overrides under the project directory, enabling page-specific customization while maintaining global consistency.

Does this design guidance work for both responsive web and mobile platforms?▼

Yes, the design guidance applies to both responsive web and mobile platforms. It supports cross-platform applicability with stack support and generates design tokens for rapid implementation across websites, dashboards, and mobile apps.

Do I need design tokens to build a responsive UI with this approach?▼

Design tokens are generated as part of the output to ensure rapid implementation and consistency. The system produces these tokens alongside the Master design document, enabling developers to apply cohesive style selections, color palettes, and typography across platforms.