ui-ux-builder

/ui-ux-builder — Full-Lifecycle UI/UX Builder

Full-lifecycle UI/UX skill: requirements gathering -> design plan -> user alignment -> implementation -> visual validation using Playwright.

When to Use

• Build or redesign UI for a web application
• Validate web app appearance against design specs
• Take screenshots of web pages
• Navigate and inspect page structure
• Compare implemented UI against design plans
• Check responsive layouts across breakpoints

Prerequisites

• Python 3.10+ (system python3 or any project virtual environment)
• Playwright + Chromium: pip install playwright && python -m playwright install chromium
• The screenshot tool is at ${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-builder/scripts/screenshot.py
• The UX plan template is at ${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-builder/template.md
• A sample completed plan is at ${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-builder/examples/sample.md

Resolving Paths

NEVER hardcode absolute paths. Always resolve dynamically:

1. Set TOOL="${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-builder/scripts/screenshot.py"
2. Find Python by searching the project root in order:
   • venv/bin/python
   • .venv/bin/python
   • Any venv_*/bin/python
   • Fall back to system python3
3. Set PYTHON to the first match found
4. Use $PYTHON $TOOL in all commands

Example:

# Auto-detect python
if [ -f "venv/bin/python" ]; then PYTHON="venv/bin/python"
elif [ -f ".venv/bin/python" ]; then PYTHON=".venv/bin/python"
else PYTHON="python3"; fi

TOOL="${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-builder/scripts/screenshot.py"
$PYTHON $TOOL http://localhost:3000 -o homepage.png

---

Workflow

Follow this 6-phase lifecycle:

digraph ui_ux_lifecycle {
    rankdir=LR;
    node [shape=box, style=rounded];

    gather [label="1. Gather\nRequirements"];
    plan [label="2. Create\nUX Plan"];
    align [label="3. Align\nwith User"];
    implement [label="4. Implement\nFrontend"];
    validate [label="5. Validate with\nPlaywright"];
    review [label="6. Review\nwith User"];

    gather -> plan -> align -> implement -> validate -> review;
    review -> implement [label="iterate", style=dashed];
    align -> plan [label="revise", style=dashed];
}