mcpField
W
wireframe-skill

wireframe-skill

github.com/podoDesign & UI29165 installsUpdated 1d ago
Repository

About wireframe-skill

wireframe-skill turns natural-language UI descriptions into structured wireframes for early-stage ideation. It provides machine-readable JSON and interactive, single-file HTML output with element reordering and undo/redo.

Key features

  1. 01Natural-language descriptions to wireframes
  2. 02Machine-readable .wireframe.json output
  3. 03Interactive single-file HTML output
  4. 04Drag-and-drop element reordering
  5. 05Undo and redo history

Use cases

  1. 01Turning a UI concept into a lo-fi wireframe
  2. 02Producing structured wireframe data for programmatic use
  3. 03Reordering elements while reviewing a wireframe

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill wireframe-skill

After installing, type/wireframe-skillin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

wireframe-skill

Catalogue stub — full skill: yhassy/wireframe-skill

Decision tree

  1. Is the full skill already installed? Check whether the skill at this location still has a das: block:

    • Global: grep -q "^das:" ~/.agents/skills/wireframe-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • Project: grep -q "^das:" .agents/skills/wireframe-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • No das: block → full skill installed, invoke it and proceed
    • das: block present → go to step 2

  2. Detect scope, then install:

    To detect scope:

    [ -e ~/.agents/skills/wireframe-skill ] && echo "global" || echo "project"

    Global (installed with -g):

    npx skills add yhassy/wireframe-skill --skill wireframe-skill -g -y

    Project (installed without -g):

    npx skills add yhassy/wireframe-skill --skill wireframe-skill -y

    Claude Code: send either command as a chat message starting with ! to run it without leaving the conversation.

Invoke after install

Skill name: wireframe-skill, triggers: "wireframe-skill", "yhassy wireframe", "JSON wireframe", "interactive wireframe HTML"

What it does

Converts natural language UI descriptions into structured wireframes in two output formats: machine-readable .wireframe.json for programmatic use and single-file interactive HTML with drag-and-drop element reordering and undo/redo history. Requires only Python 3 and a modern browser. Ideal for rapid lo-fi ideation before any visual design work begins.

When NOT to use

  • High-fidelity mockups with color and typography — use wireframer instead
  • Excalidraw-format output — use excalidraw-diagram instead
  • When 5 parallel UX variants are needed — use claude-wireframe-skill instead

Comments

Markdown supported