How do I install the Design Guidelines skill?

Run npx skillmds add majiayu000/design-guidelines in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Design Guidelines safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Design Guidelines?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Design Guidelines free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under Complete terms in LICENSE.

Who published Design Guidelines?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Design Guidelines by majiayu000 — Agent Skill

Name: Design Guidelines
Rating: 4.5 (4 reviews)
Author: majiayu000

Design Guidelines

Comprehensive UI/UX design guidelines covering visual design (typography, color, motion) and user experience (cognitive psychology, interaction patterns, mental models). Use when building frontend interfaces or evaluating design decisions.

majiayu000 d048e01 2 files · 3.0 KB Updated Sep 9, 2026 567 repo stars

File contents

This skill provides comprehensive design guidance for creating exceptional frontend interfaces that are both visually distinctive and cognitively intuitive.

When to Use

Apply these guidelines when:

Building web components, pages, or applications
Making UI/UX design decisions
Designing interaction patterns and information architecture
Evaluating existing interfaces for improvements
Ensuring production-grade design quality

Structure

This skill consists of two complementary perspectives:

ui-design.md

Visual design principles focused on aesthetics and brand:

Typography and color systems
Motion and micro-interactions
Spatial composition and layouts
Anti-patterns to avoid (generic AI aesthetics)
Creating memorable, distinctive interfaces

ux-design.md

User experience principles based on cognitive psychology and HCI:

Mental models and task flows
Interaction patterns and usability
Cognitive biases and perception
Accessibility and inclusive design
Making interfaces feel natural and effortless

IMPORTANT: Great design requires both perspectives. Visual beauty without usability is frustrating. Usability without aesthetics is forgettable. Use both documents together for complete design guidance.

Design Philosophy

Intentionality over intensity: Bold maximalism and refined minimalism both work - the key is executing with precision
Invisible interface: The best UX feels like no UX at all - users accomplish goals without thinking about the tool
Context-specific creativity: Avoid generic solutions - design for the specific problem, audience, and constraints
Cognitive respect: Every element costs mental effort - be ruthless about reducing unnecessary complexity

Reference the specific documents (ui-design.md or ux-design.md) as needed for detailed guidance.

---name: design-guidelinesdescription: Comprehensive UI/UX design guidelines covering visual design (typography, color, motion) and user experience (cognitive psychology, interaction patterns, mental models). Use when building frontend interfaces or evaluating design decisions.license: Complete terms in LICENSE.txt--- This skill provides comprehensive design guidance for creating exceptional frontend interfaces that are both visually distinctive and cognitively intuitive. ## When to Use Apply these guidelines when: - Building web components, pages, or applications - Making UI/UX design decisions - Designing interaction patterns and information architecture - Evaluating existing interfaces for improvements - Ensuring production-grade design quality ## Structure This skill consists of two complementary perspectives: ### ui-design.md Visual design principles focused on aesthetics and brand: - Typography and color systems - Motion and micro-interactions - Spatial composition and layouts - Anti-patterns to avoid (generic AI aesthetics) - Creating memorable, distinctive interfaces ### ux-design.md User experience principles based on cognitive psychology and HCI: - Mental models and task flows - Interaction patterns and usability - Cognitive biases and perception - Accessibility and inclusive design - Making interfaces feel natural and effortless **IMPORTANT**: Great design requires both perspectives. Visual beauty without usability is frustrating. Usability without aesthetics is forgettable. Use both documents together for complete design guidance. ## Design Philosophy - **Intentionality over intensity**: Bold maximalism and refined minimalism both work - the key is executing with precision - **Invisible interface**: The best UX feels like no UX at all - users accomplish goals without thinking about the tool - **Context-specific creativity**: Avoid generic solutions - design for the specific problem, audience, and constraints - **Cognitive respect**: Every element costs mental effort - be ruthless about reducing unnecessary complexity Reference the specific documents (ui-design.md or ux-design.md) as needed for detailed guidance.

Frequently asked questions