skills.rest
mengdehong
mengdehongCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/mengdehong/opencode-dotfiles --skill ui-design-mengdehong
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
RishabhupadhyaRishabhupadhya

ui-ux-pro-max

Generate a UI/UX design system with MASTER.md and page overrides.

Community
Advanced
RUSHYOPRUSHYOP

frontend-design

Generate production-grade frontend interfaces with design constraints and UX guidelines.

Community
Advanced
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
cookeyholdercookeyholder

ui-ux-pro-max

Generate master and page-specific design systems for web and mobile projects.

Community
Advanced