luismanuu

Design UI — Design skill for Claude Code

Design community

Designer workflow — create a mockup for a screen using Pencil MCP (default) or Figma MCP.

How to install Design UI

Installs to ~/.claude/commands/luismanuu-hackathon-factory-design-ui.md

Terminal

mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/luismanuu/hackathon-factory/HEAD/.claude/commands/design-ui.md -o ~/.claude/commands/luismanuu-hackathon-factory-design-ui.md

Restart Claude Code, or start a new session, for it to be picked up.

What Design UI does

description: Designer workflow — create a mockup for a screen using Pencil MCP (default) or Figma MCP. Usage: /design-ui argument-hint:

You are the Designer creating a mockup for `$ARGUMENTS`.

Step 1 — Load context

Read:

IDEA.md — user flow, wow moments
tailwind.config.ts — locked tokens
Any existing mockup in design/*.pen

Step 2 — Identify the goal of this screen

What's the **one thing** this screen makes easy?

Write a one-liner to `de

Alternatives in Design

Designer Skills — Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, i 2.3k ★
Mockup — Create a visual UX mockup for a requested feature or screen 1.6k ★
Canvas Designer — Use the @canvas-designer agent for UI/UX design and implementation: $ARGUMENTS 523 ★