How do I install the UI Design skill?

Run npx skillmds@latest add majiayu000/ui-design-6 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.

What does the UI Design skill do?

Create HTML UI mockups stored in ideas/[project]/docs/ui-designs/ It is listed under Web & Frontend on SkillMD.

Is UI Design safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with UI Design?

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 UI Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published UI Design?

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

UI Design by majiayu000 — Agent Skill

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

File contents

/ui-design

Generate HTML UI mockups with optional parallel variant exploration.

Usage

/ui-design yourbench "login screen"
/ui-design yourbench "dashboard" --variants 3
/ui-design coordinatr "project list" --tech shadcn
/ui-design yourbench list                    # Show existing designs

Where Designs Live

ideas/yourbench/docs/ui-designs/
├── login-screen-v1.html
├── login-screen-v2a.html      # Variant A
├── login-screen-v2b.html      # Variant B (approved)
├── dashboard-v1.html
└── components/
    └── button-variants.html

Why in ideas/? Designs are planning artifacts, not code.

Execution Flow

1. Parse Request

Project (yourbench)
Design name (login screen)
Variant count (--variants 3)
Technology (--tech shadcn)

2. Load Context

Glob: ideas/[project]/docs/ui-designs/*.html
Read: shared/docs/style-guide.md
Read: ideas/[project]/project-brief.md

3. Generate Design(s)

Single design:

→ ideas/yourbench/docs/ui-designs/login-screen-v1.html

Multiple variants (parallel ui-ux-designer agents):

→ login-screen-v1a.html
→ login-screen-v1b.html
→ login-screen-v1c.html

4. Present Options

Created 3 login screen variants:

1. v1a.html - Minimal, centered form
2. v1b.html - Split screen with illustration
3. v1c.html - Card-based with social logins

View: open ideas/yourbench/docs/ui-designs/login-screen-v1a.html

Which direction? (a/b/c/iterate/combine)

5. Iterate

User requests changes:

"Move OAuth buttons below the form"
"Try a darker color scheme"

6. Approve

User: approve v1b

AI: ✓ Marked login-screen-v1b.html as APPROVED

    Reference in TASK.md:
    "Implement login per docs/ui-designs/login-screen-v1b.html"

Technology Options

Option	Description
`--tech vanilla`	Plain HTML/CSS/JS (default)
`--tech shadcn`	Styled for shadcn/ui with implementation hints
`--tech chakra`	Styled for Chakra UI

HTML Structure

Self-contained with embedded CSS/JS:

CSS variables from style-guide.md
Responsive breakpoints
Interactive behaviors
Metadata block at end (status, decisions, related specs)

Listing Designs

/ui-design yourbench list

UI Designs for yourbench:
├── login-screen-v1b.html [APPROVED]
├── dashboard-v1.html [DRAFT]
└── settings-v1a.html [DRAFT]

Integration with Implementation

/implement yourbench 001 1.3  # "Implement login UI"

AI: Found approved design: login-screen-v1b.html
    Implementing to match design...

Reference in TASK.md:

## Acceptance Criteria
- [ ] Matches docs/ui-designs/login-screen-v1b.html
- [ ] Responsive at 320px, 768px, 1280px

Best Practices

Start with variants - Explore before converging
Approve explicitly - Clear handoff to implementation
Include metadata - Future you will thank you
Test responsiveness - Check 320px, 768px, 1280px
Document decisions - Why this approach?

---name: ui-design-6description: Create HTML UI mockups stored in ideas/[project]/docs/ui-designs/--- # /ui-design Generate HTML UI mockups with optional parallel variant exploration. ## Usage ```bash /ui-design yourbench "login screen" /ui-design yourbench "dashboard" --variants 3 /ui-design coordinatr "project list" --tech shadcn /ui-design yourbench list # Show existing designs ``` ## Where Designs Live ``` ideas/yourbench/docs/ui-designs/ ├── login-screen-v1.html ├── login-screen-v2a.html # Variant A ├── login-screen-v2b.html # Variant B (approved) ├── dashboard-v1.html └── components/ └── button-variants.html ``` **Why in ideas/?** Designs are planning artifacts, not code. ## Execution Flow ### 1. Parse Request - Project (yourbench) - Design name (login screen) - Variant count (--variants 3) - Technology (--tech shadcn) ### 2. Load Context ```bash Glob: ideas/[project]/docs/ui-designs/*.html Read: shared/docs/style-guide.md Read: ideas/[project]/project-brief.md ``` ### 3. Generate Design(s) **Single design:** ``` → ideas/yourbench/docs/ui-designs/login-screen-v1.html ``` **Multiple variants (parallel ui-ux-designer agents):** ``` → login-screen-v1a.html → login-screen-v1b.html → login-screen-v1c.html ``` ### 4. Present Options ``` Created 3 login screen variants: 1. v1a.html - Minimal, centered form 2. v1b.html - Split screen with illustration 3. v1c.html - Card-based with social logins View: open ideas/yourbench/docs/ui-designs/login-screen-v1a.html Which direction? (a/b/c/iterate/combine) ``` ### 5. Iterate User requests changes: - "Move OAuth buttons below the form" - "Try a darker color scheme" ### 6. Approve ``` User: approve v1b AI: ✓ Marked login-screen-v1b.html as APPROVED Reference in TASK.md: "Implement login per docs/ui-designs/login-screen-v1b.html" ``` ## Technology Options | Option | Description | |--------|-------------| | `--tech vanilla` | Plain HTML/CSS/JS (default) | | `--tech shadcn` | Styled for shadcn/ui with implementation hints | | `--tech chakra` | Styled for Chakra UI | ## HTML Structure Self-contained with embedded CSS/JS: - CSS variables from style-guide.md - Responsive breakpoints - Interactive behaviors - Metadata block at end (status, decisions, related specs) ## Listing Designs ```bash /ui-design yourbench list UI Designs for yourbench: ├── login-screen-v1b.html [APPROVED] ├── dashboard-v1.html [DRAFT] └── settings-v1a.html [DRAFT] ``` ## Integration with Implementation ```bash /implement yourbench 001 1.3 # "Implement login UI" AI: Found approved design: login-screen-v1b.html Implementing to match design... ``` Reference in TASK.md: ```markdown ## Acceptance Criteria - [ ] Matches docs/ui-designs/login-screen-v1b.html - [ ] Responsive at 320px, 768px, 1280px ``` ## Best Practices 1. **Start with variants** - Explore before converging 2. **Approve explicitly** - Clear handoff to implementation 3. **Include metadata** - Future you will thank you 4. **Test responsiveness** - Check 320px, 768px, 1280px 5. **Document decisions** - Why this approach?

Frequently asked questions

UI Design