scaffold

Scaffold

Structure before pixels. Scaffold is an agent skill for designers that refuses to draw anything until a screen's purpose, hierarchy, and constraints are established — then generates four genuinely different structural directions, critiques them honestly, and hands you an annotated wireframe brief you can carry into Figma or any other design tool.

What you get

Scaffold walks a screen or flow through six phases:

1. Define the screen's job — a plain-language brief: who the user is, what "done" means, what information and actions are required.
2. Hierarchy and constraints — primary action, what's deferrable, what must always be visible, plus design-system, accessibility, device, content, and technical constraints.
3. Exploration plan — which structural variables the directions will stress-test, and which invariants every direction must honor.
4. Four directions — four low-fidelity concepts, each built on a distinct hypothesis about the user or task. Not one layout shuffled four ways.
5. Comparative critique — honest trade-offs across clarity, cognitive load, accessibility, confidence, speed, org goals, and build complexity. No auto-picked winner; you decide.
6. Final wireframe brief — a self-sufficient blueprint: hierarchy, annotated layout, interaction notes, required states, edge cases, accessibility notes, and open questions to validate.

Two ways to use it

Full Interview (default). Say something like "help me wireframe the checkout confirmation screen" and Scaffold interviews you one question at a time, confirming each answer before building on it. Best when you're starting from a blank page.

Quick Start. Already have a brief, PRD, feature spec, or research notes? Paste them in (optionally with the words "quick start"). Scaffold extracts every answer the material actually supports, shows you the pre-filled brief with each line tagged [from brief] or [gap], asks only about the gaps, and jumps straight to generating directions once you confirm. It will never invent an answer to fill a gap.

What Scaffold is not

• Not user research. It surfaces what you already know or believe about your users; it doesn't generate evidence. Anything unsupported gets labeled as an assumption and carried into the final brief as a question to validate — not presented as a finding.
• Not a design critique tool. Scaffold works before fidelity. If you want feedback on an existing high-fidelity design or shipped screen, use a dedicated design-critique workflow instead.
• Not visual design. No color, type, spacing, or styling opinions at any point. Structure, order, disclosure, and sequence only.

Installation

Scaffold is a standard agent skill: a folder containing a SKILL.md file. Install it wherever your agent looks for skills.

One-line install (most agents)

npx skills add UntidyOctopus35/scaffold

This detects your agent and places the skill in the right directory automatically.

Claude.ai (web, desktop, mobile)

1. Download this skill as a .skill file (or the raw SKILL.md).
2. In a chat, attach the file and ask Claude to save it — the file card shows a Save skill button when your plan/org allows custom skills. Alternatively, upload it through your skills/capabilities settings.
3. Once saved, just describe your screen problem in plain language ("how should this onboarding flow be structured?") — the skill triggers automatically.

For current upload steps on your plan, see the Claude Help Center: https://support.claude.com

Claude Code (manual)

Clone and copy the folder into one of the skill directories:

git clone https://github.com/UntidyOctopus35/scaffold.git

# Personal — available in every project
mkdir -p ~/.claude/skills
cp -r scaffold ~/.claude/skills/

# Or project-scoped — committed to the repo, shared with your team
mkdir -p .claude/skills
cp -r scaffold .claude/skills/

Restart your session (or reload skills), then either mention it (use the scaffold skill) or just describe the screen you're planning.

Other agents

SKILL.md is an open format. Many agents (Cursor, Codex CLI, Gemini CLI, and others) read skills from their own directories or from the shared .agents/skills/ path — drop the scaffold/ folder there and check your agent's docs for specifics.

Verify it's working

Ask: "Help me wireframe a settings screen." If installed correctly, the agent should start asking discovery questions one at a time instead of proposing a layout. If it draws boxes immediately, the skill isn't loaded.

Customizing

Everything lives in SKILL.md — plain markdown. Common tweaks:

• Change the number of directions in Phase 4 (four is the default because it forces real divergence).
• Add domain-specific questions to Phases 1–2 (e.g., compliance questions for fintech, clinical-safety questions for health).
• Adjust Phase 5 criteria to match what your organization actually weighs.

Credits

Created by Ash Lundy — UX designer focused on humane, human-centered technology.

• Writing on design: Design With a Pulse
• LinkedIn: in/ashleyklundy

If Scaffold helped you ship better structure, a star on the repo helps other designers find it.

License

MIT — see LICENSE. Use it, fork it, adapt it to your team's process; just keep the copyright notice.