Skill: UI/UX Design Implementation

> **Skill ID**: `SKILL_DESIGN`

23 stars

Best use case

Skill: UI/UX Design Implementation is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

> **Skill ID**: `SKILL_DESIGN`

Teams using Skill: UI/UX Design Implementation should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/design/SKILL.md --create-dirs "https://raw.githubusercontent.com/wangjianjq/Skill/main/.agents/skills/design/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/design/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How Skill: UI/UX Design Implementation Compares

Feature / Agent	Skill: UI/UX Design Implementation	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

> **Skill ID**: `SKILL_DESIGN`

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Skill: UI/UX Design Implementation

> **Skill ID**: `SKILL_DESIGN`
> **Tags**: `ui-ux`, `design-gate`, `ue-ux-standard`
> **Version**: 1.0
> **Related Knowledge**: `KNOWLEDGE_DESIGN.md`

## 1. The Design Gate (Mandatory Protocol)

**Trigger**: Every time a UI-related request is made (Creating pages, components, or entire apps).

### 1.1 Design Audit (Pre-Execution)

Before writing any UI code, the AI must perform an internal audit:

- **Visual Hierarchy Check**: Is the "Primary Action" the most prominent?
- **Cognitive Load Check**: Are there too many choices? (Apply Hick's Law).
- **Premium Check**: Does the design use modern palettes and effects (Glassmorphism/Shadows)?

### 1.2 Implementation Rules

- **Rule 1**: ALWAYS use a consistent spacing system (4px grid). Ad-hoc pixel values are FORBIDDEN.
- **Rule 2**: ALWAYS implement a Dark Mode strategy (even if not requested, use CSS Variables).
- **Rule 3**: ALWAYS add micro-interactions (hover states, subtle transitions `transition: all 0.2s ease`).
- **Rule 4**: Use professional SVGs (Lucide style) for all icons. No emojis in pro-UI unless specified for a "playful" brand.

## 2. Advanced Aesthetics Protocol

### 2.1 Glassmorphism & Depth

When the user asks for a "Premium" or "Modern" feel, the AI SHOULD:

1. Apply `backdrop-filter: blur`.
2. Use multiple layered shadows to simulate depth.
3. Use high-quality gradients over flat colors.

### 2.2 Typography & Alignment

- Use responsive font sizes (rem/em).
- Maintain line-height of 1.5 - 1.6 for body text.
- Ensure 4.5:1 contrast ratio for accessibility.

## 3. Interaction Design (UE)

- **Feedback**: Every interaction MUST have visual feedback (Button clicks = active state).
- **Skeleton Screens**: For data-heavy pages, implement skeleton loaders to reduce perceived latency.
- **Error States**: UI must transition gracefully into error states with clear recovery actions.