mcpField
W
wireframer

wireframer

github.com/podoDesign & UI30171 installsUpdated 4d ago
Repository

About wireframer

wireframer is an installable design skill that turns plain descriptions into clickable, low-fidelity single-page prototypes in vanilla HTML/JS or React. It helps teams establish layout, content hierarchy, and navigation before visual design begins.

Key features

  1. 01Clickable single-page prototypes
  2. 02Vanilla HTML/JS or React output
  3. 03Grayscale, hand-drawn visual style
  4. 04Realistic copy instead of placeholder text
  5. 05Installs style rules in project instructions

Use cases

  1. 01Sketching UI structure from a plain description
  2. 02Reviewing content hierarchy and navigation
  3. 03Exploring layouts before visual design

Install

Copy the command and run it in a terminal.

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

After installing, type/wireframerin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

wireframer

Catalogue stub — full skill: agilek/wireframer-skill

Decision tree

  1. Is the full skill already installed?

    • Global: f=~/.agents/skills/wireframer/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • Project: f=.agents/skills/wireframer/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → the skill is installed as wireframer, invoke it and proceed
    • pointer → go to step 2

  2. Detect scope, then install:

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

    Global:

    npx skills add agilek/wireframer-skill --skill wireframer -g -y

    Project:

    npx skills add agilek/wireframer-skill --skill wireframer -y

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

Claude Code plugin route:

/plugin marketplace add agilek/wireframer-skill
/plugin install wireframes-designer@wireframer

Heads-up

  • Requires: permission to edit your project's agents.md, CLAUDE.md or .cursorrules (on first use the skill appends its style rules there, or creates agents.md if none exists); network access for the Google Fonts, wired-elements and react-doodle-icons that generated prototypes load
  • License: no LICENSE file in the repo

Invoke after install

  • Skill name: wireframer
  • Trigger phrases: "wireframe", "low fidelity", "lo-fi mockup", "UI structure"

What it does

Generates a clickable, Balsamiq-style prototype from a plain description: a single-page app (vanilla HTML/JS or React) with strict grayscale styling, hand-drawn wired-elements components, doodle icons and sketchy borders, plus realistic copy instead of lorem ipsum. It establishes layout, content hierarchy and navigation before any visual design decisions, which forces content-first thinking and prevents premature pixel-pushing. Use before bringing in design skills like impeccable or ui-craft.

Side effect to know about: on first use in a project the skill writes its style rules into your AI instruction file (it appends to an existing agents.md, CLAUDE.md, .cursorrules or similar, or creates agents.md) and tells you it did so. Check the diff if you do not want that.

Comments

Markdown supported