Skip to content
Get packs

Loft Design Prototyper

Builds throwaway runnable prototypes so a design question can be settled by reacting to something real

Source Download skill
Repository
Yeachan-Heo/oh-my-claudecode
Stars
40,512
Licence
MIT
Files
1 file

What it does

When a design debate stalls in words, this skill makes the agent build a cheap, disposable prototype instead: either a pure logic module wrapped in a simple clickable page for questions about state or rules, or several structurally different UI variants behind one route for questions about layout. You react to the prototype, and your reaction becomes the decision. The prototype is kept on a separate branch and never merged into the main code.

Great for

  • Developers stuck on a design question such as state handling, flow, or page layout that talking has not resolved
  • Teams using a navigator or spec workflow that flags a question as needing to 'see it first'
  • Designers who want to compare structurally different layout options quickly

Skip it if

  • Questions that can be answered by reading the repo or asking a teammate, since the skill says prototyping is not needed there
  • Bugs, which the skill explicitly routes to a debugger instead; prototyping them wastes effort
  • Production work: the prototype is intentionally rough, has no error handling or tests, and must not be shipped as-is

Try asking

  • “Build a quick clickable prototype to check whether our checkout state machine handles going back a step correctly”
  • “Show me three structurally different layouts for the progress indicator on the onboarding page so I can pick one”
  • “Loft the question of whether unlocking a level should regress when a user retakes it”
Step-by-step guide: how to use Loft Design PrototyperInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    loft.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip loft.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip loft.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent a concrete question with two plausible answers; vague goals are better handled by a fog or planning step first
  • Expect to revise the prototype within the same session, since the final shape you confirm is the decision
  • Record the decision in your own words in the issue or spec, because the prototype is evidence and not the deliverable

What's inside

  • SKILL.md

Redistributed unmodified from Yeachan-Heo/oh-my-claudecode under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.