# UI Designer > UI/UX design skill for creating wireframes, interactive HTML mockups, design specifications, and component patterns using Material UI (primary) and Tailwind CSS (secondary). Use when designing user interfaces, creating mockups for review, documenting design specs, or collaborating with frontend developers on implementation. - Skill: `majiayu000/ui-designer-7` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add majiayu000/ui-designer-7` - Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/ui-designer-7/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: majiayu000 (https://skillmd.com/u/majiayu000) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/majiayu000/ui-designer-7 --- # UI Designer ## Design Workflow ``` 1. Understand Requirements → 2. Wireframes → 3. Mockups → 4. Specs → 5. Handoff ``` | Phase | Deliverable | Tool | |-------|-------------|------| | Wireframes | Low-fi layouts | HTML skeleton | | Mockups | Interactive prototype | Standalone HTML or Next.js | | Specs | Developer documentation | Markdown + code snippets | | Components | Reusable patterns | MUI + Tailwind code | ## Deliverable Types ### 1. Wireframes (Low-Fidelity) Use for: Early exploration, layout decisions, user flow validation ```html
[Logo] [Nav Item] [Nav Item] [Avatar]
[Sidebar Nav]
[Page Title + Actions]
[Data Table / Content Area]
``` ### 2. Interactive Mockups (High-Fidelity) **Format Selection:** - **Standalone HTML** - Single page, simple interactions, quick review - **Next.js preview** - Multi-page flows, complex state, form interactions See [assets/mockup-template.html](assets/mockup-template.html) for standalone template. ```html Dashboard Mockup
``` ### 3. Design Specifications Document for developers with exact values: ```markdown ## Component: User Card ### Structure ┌─────────────────────────────────────┐ │ [Avatar] User Name │ │ user@email.com │ │ ───────────────────────── │ │ Role: Admin │ │ Status: ● Active │ │ [Edit] [···]│ └─────────────────────────────────────┘ ### Spacing - Card padding: 16px (--spacing-4) - Avatar margin-right: 12px (--spacing-3) - Section gap: 8px (--spacing-2) ### Typography - Name: H6 (14px/600) - Email: Body2 (14px/400, text.secondary) - Role/Status: Caption (12px/400) ### Colors - Background: surface.main (#fff) - Border: 1px solid divider (#e0e0e0) - Active indicator: success.main (#2e7d32) ### Implementation ```tsx {user.name} {user.email} ``` ``` ## Design System (MUI Defaults) ### Color Palette ```tsx // Primary colors primary.main: #1976d2 // Buttons, links, active states primary.light: #42a5f5 // Hover states primary.dark: #1565c0 // Pressed states primary.contrastText: #fff // Secondary colors secondary.main: #9c27b0 // Accent elements secondary.light: #ba68c8 secondary.dark: #7b1fa2 // Semantic colors error.main: #d32f2f // Errors, destructive actions warning.main: #ed6c02 // Warnings success.main: #2e7d32 // Success states info.main: #0288d1 // Informational // Surface colors background.default: #fafafa background.paper: #fff text.primary: rgba(0,0,0,0.87) text.secondary: rgba(0,0,0,0.6) divider: rgba(0,0,0,0.12) ``` ### Typography Scale | Variant | Size | Weight | Line Height | Use | |---------|------|--------|-------------|-----| | h1 | 2.5rem (40px) | 700 | 1.2 | Page titles | | h2 | 2rem (32px) | 700 | 1.3 | Section headers | | h3 | 1.75rem (28px) | 600 | 1.3 | Subsections | | h4 | 1.5rem (24px) | 600 | 1.4 | Card titles | | h5 | 1.25rem (20px) | 600 | 1.4 | Dialog titles | | h6 | 1rem (16px) | 600 | 1.5 | Component headers | | body1 | 1rem (16px) | 400 | 1.5 | Primary text | | body2 | 0.875rem (14px) | 400 | 1.43 | Secondary text | | caption | 0.75rem (12px) | 400 | 1.5 | Labels, hints | | button | 0.875rem (14px) | 500 | 1.75 | Button text | ### Spacing Scale ```tsx // MUI spacing unit = 8px spacing(0.5) = 4px // Tight gaps spacing(1) = 8px // Default gap spacing(1.5) = 12px // Comfortable gap spacing(2) = 16px // Section padding spacing(3) = 24px // Card padding spacing(4) = 32px // Container padding spacing(5) = 40px // Large gaps spacing(6) = 48px // Section margins spacing(8) = 64px // Page margins ``` ### Component Patterns See [references/components.md](references/components.md) for detailed patterns. #### Buttons ```tsx // Primary action // Secondary action // Tertiary/Text action // Destructive action // With icon ``` #### Form Controls ```tsx // Text field // Select Role // Checkbox } label="I agree to terms" /> ``` ## Common Layout Patterns ### Dashboard Layout ```tsx {/* Sidebar */} {/* Main content */}
{children} ``` ### Form Layout ```tsx Create Account ``` ### Card Grid ```tsx {items.map((item) => ( {item.title} {item.description} ))} ``` ## Developer Handoff Checklist When handing off designs to frontend developers: - [ ] All colors from MUI theme or documented custom values - [ ] Typography variants specified (h1-h6, body1, body2, caption) - [ ] Spacing using MUI spacing scale (0.5, 1, 2, 3, 4...) - [ ] Responsive breakpoints noted (xs, sm, md, lg, xl) - [ ] Interactive states shown (hover, focus, disabled, loading) - [ ] Component code snippet provided - [ ] Edge cases documented (empty states, error states, long text) ## References - **Component Patterns**: See [references/components.md](references/components.md) for detailed MUI component examples - **Page Templates**: See [references/templates.md](references/templates.md) for common page layouts - **Tailwind Integration**: See [references/tailwind-mui.md](references/tailwind-mui.md) for combining both systems ## Assets - **Mockup Template**: Use [assets/mockup-template.html](assets/mockup-template.html) as starting point for standalone HTML mockups