Skip to content
Agentmart
Submit a tool

ui-ux-designer

Create UI/UX designs including low-fidelity wireframes, Figma-first high-fidelity specifications, optional HTML/CSS fallback prototypes, and user journey maps.

Skill by x1chg956

IndexedApache-2.0
Write a review

Install

Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.

npx agentmarket install skill/x1chg956-ui-ux-designer

Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.

Get the weekly diff

The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.

We use your email only for this newsletter. Privacy

About

Create UI/UX designs including low-fidelity wireframes, Figma-first high-fidelity specifications, optional HTML/CSS fallback prototypes, and user journey maps. Use when the user asks for wireframes, mockups, prototypes, Figma designs, user flows, user journeys, or UI/UX design work.

Use cases: design, frontend

Reviews

Write a review

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.

Tools
No tools found
Secrets
None asked for
Install scripts
None found

Network hosts it talks to 1

  • codeload.github.com · found in install command

Files it touches

  • ~/.claude/skills/ui-ux-designer

What's inside

Skill name
ui-ux-designer
Description
Create UI/UX designs including low-fidelity wireframes, Figma-first high-fidelity specifications, optional HTML/CSS fallback prototypes, and user journey maps. Use when the user asks for wireframes, mockups, prototypes, Figma designs, user flows, user journeys, or UI/UX design work.
License
Apache-2.0
Metadata
owner: ux · domain: design · version: 1.0.0
Instructions
321 lines in SKILL.md · view on GitHub

Files (3)

  • SKILL.md
  • components.md
  • examples.md

SKILL.md (first lines)

# UI/UX Designer

You are a skilled UI/UX designer. Create designs following Material Design principles while adapting to web, mobile, and desktop contexts.

## Design Workflow

1. **Understand requirements** - Clarify user goals, target platform, and constraints
2. **Create user journey** - Map the user flow before designing screens
3. **Low-fidelity wireframes** - Quick structural layouts
4. **High-fidelity designs** - Figma-first output:
   - **Figma specification** - Primary deliverable for design and handoff
   - **HTML/CSS prototype (optional fallback)** - Use only when explicitly requested or needed for quick browser validation

## User Journey Maps

Create user journeys using Mermaid:

```mermaid
journey
    title User Login Journey
    section Discovery
      Visit homepage: 5: User
      Click sign in: 4: User
    section Authentication
      Enter credentials: 3: User
      Submit form: 3: User
      View dashboard: 5: User
```

For complex flows, use flowcharts:

```mermaid
flowchart TD
    A[Landing Page] --> B{Has Account?}
    B -->|Yes| C[Login]
    B -->|No| D[Sign Up]
    C --> E[Dashboard]
    D --> F[Onboarding]
    F --> E
```

## Low-Fidelity Wireframes

Create quick ASCII wireframes for rapid iteration:

```
┌─────────────────────────────────────┐
│  [Logo]              [Nav] [Login]  │
├─────────────────────────────────────┤
│                                     │
│     ┌─────────────────────────┐     │
│     │    Hero Section         │     │
│     │    [Headline]           │     │
│     │    [Subtext]            │     │
│     │    [  CTA Button  ]     │     │
│     └─────────────────────────┘     │
│                                     │
│  ┌───────┐ ┌───────┐ ┌───────┐     │
│  │Card 1 │ │Card 2 │ │Card 3 │     │
│  │       │ │       │ │       │     │
│  └───────┘ └───────┘ └───────┘     │
│                                     │
└─────────────────────────────────────┘
```

## High-Fidelity Prototypes (Optional HTML/CSS Fallback)

Use Figma specifications as the default high-fidelity output. Generate HTML/CSS prototypes only as an optional fallback when requested.

### Template Structure

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[Page Title]</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        /* CSS Reset & Base */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        
        :root {
            /* Material Design 3 Color Tokens */
            --md-sys-color-primary: #6750A4;
            --md-sys-color-on-primary: #FFFFFF;
            --md-sys-color-primary-container: #EADDFF;
            --md-sys-color-secondary: #625B71;
            --md-sys-color-surface: #FFFBFE;
            --md-sys-color-surface-variant: #E7E0EC;
            --md-sys-color-on-surface: #1C1B1F;
            --md-sys-color-outline: #79747E;
            --md-sys-color-error: #B3261E;
            
            /* Elevation shadows */
            --md-elevation-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
            --md-elevation-2: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
            --md-elevation-3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3);
            
            /* Typography */
            --md-type-scale-display-large: 500 57px/64px 'Roboto', sans-serif;
            --md-type-scale-headline-large: 400 32px/40px 'Roboto', sans-serif;
            --md-type-scale-title-large: 400 22px/28px 'Roboto', sans-serif;
            --md-type-scale-body-large: 400 16px/24px 'Roboto', sans-serif;
            --md-type-scale-label-large: 500 14px/20px 'Roboto', sans-serif;
        }
        
        body {
            font: var(--md-type-scale-body-large);
            background: var(--md-sys-color-surface);
            color: var(--md-sys-color-on-surface);
        }
        
        /* Component styles go here */
    </style>
</head>
<body>

From x1chg956/sdlc-skills, Apache-2.0.

More from x1chg956/sdlc-skills

Signals

Stars
0
Forks
1
Open issues
0
Last commit (this folder)
Apr 12, 2026 (6 months ago)

From GitHub (fetched Oct 24, 2026).

Details

Version
1.0.0
License
Apache-2.0
Repository
github.com/x1chg956/sdlc-skills
First seen
Oct 24, 2026
Last checked
Oct 24, 2026
Source
GitHubgithub-graphql

More from x1chg956

Cite this page

ui-ux-designer skill. Agent Mart. https://agentmart.dev/skills/x1chg956-ui-ux-designer (last updated 2026-10-24)