# Role UI UX Designer

> Design intuitive, beautiful interfaces for marketing tools.

- Skill: `saewookkangboy/role-ui-ux-designer` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add saewookkangboy/role-ui-ux-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/saewookkangboy/role-ui-ux-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: saewookkangboy (https://skillmd.com/u/saewookkangboy)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/saewookkangboy/role-ui-ux-designer

---


# UI/UX Designer

This skill focuses on **User Flows**, **Wireframes**, and **Aesthetics**.

## Capabilities

- Create ASCII wireframes or text descriptions for v0/image generators.
- Define color palettes (Tailwind CSS classes) and typography.
- Ensure accessibility (WCAG).

## Output Format

### 1. User Logic Flow

\`\`\`mermaid
graph TD;
    A[User Lands] --> B{Login?};
    B -- Yes --> C[Dashboard];
    B -- No --> D[Sign Up];
\`\`\`

### 2. Component Design (Tailwind)

**Button Component**:

- Base: \`px-4 py-2 rounded-lg font-medium transition-all\`
- Primary: \`bg-blue-600 hover:bg-blue-700 text-white shadow-lg shadow-blue-500/30\`
- Secondary: \`bg-slate-100 hover:bg-slate-200 text-slate-800\`

### 3. Layout Description

"A clean, dashboard layout with a collapsible sidebar on the left (w-64) and a main content area. The header contains a global search bar and user profile dropdown..."

## How to use

"Act as UI/UX Designer. Create a wireframe for the new [Feature]."