prototype-first

A prototyping workflow for visual or design work that creates inexpensive draft versions before production code is changed.

In plain words
What is it for?
Use it for interfaces, dashboards, landing pages, design directions, video concepts, and other work judged mainly by how it looks.
Why use it?
It helps reveal a user's visual preferences early, when changing a rough prototype is cheaper than revising a finished implementation.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/orenluxy/fable-method/prototype-first
Any agent
npx skills add orenluxy/fable-method --skill prototype-first
Clone the repo
git clone --depth 1 https://github.com/orenluxy/fable-method

Made for: Claude Code, Codex.

Per session 74 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 537 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00074 $0.00537
Opus 5 $0.00037 $0.00269
Sonnet 5 $0.00015 $0.00107
Haiku 4.5 $0.00007 $0.00054

Measured yesterday against content hash e1be8eca8c9a, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

prototype-first scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/prototype-first/SKILL.md · 30 lines

How it starts

The opening of the file, as written. The whole thing — 30 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Prototype First

Purpose: the user's aesthetic and product taste is an unknown known — they have it, but cannot write it down. Words are a lossy channel for taste. Prototypes are a high-bandwidth channel. Spend cheap tokens on throwaway artifacts to extract taste before spending expensive tokens on real implementation.

Procedure

  1. Confirm this is a taste-driven task. Signals: the request contains words like "nice", "clean", "modern", "premium", or the deliverable is something the user will judge by looking at it. If the task has an objective spec (an API contract, a data transform), this skill does not apply — skip it.

  2. Generate divergent variations, not increments. Produce ONE self-contained HTML file containing 3–4 genuinely different directions side by side (or navigable via tabs). "Different" means different layout philosophy, density, typography, and mood — not the same design with four accent colors. Each variation gets a short label and one sentence on what it optimizes for.

  3. Use realistic data. Prototypes with lorem ipsum and fake numbers hide layout problems. Pull real or plausible data shapes from the actual project when available.

  4. Ask for a reaction, not a selection. Prompt the user: "Which parts of which variation feel right? You can mix." The goal is extracting taste vectors, not picking a winner.

  5. Converge once, then implement. After feedback, produce ONE refined prototype. When approved, implement it in the real codebase — and only then. Keep the prototype file around as the visual spec; reference it in IMPLEMENTATION_NOTES.md.

For non-UI visual work (video, images, documents)

Same principle, adapted medium: for video, render a short low-quality proof-of-concept segment before the full pipeline; for documents/reports, produce a one-page structural mock before the full document.

Anti-patterns

  • Building variation 1 inside the real codebase "to save time" — it contaminates the code with an unvalidated direction and makes the other variations feel expensive.
  • Four near-identical variations. If the user can't tell them apart at a glance, the pass was wasted.

Read the full file on GitHub · 30 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. yesterday First seen · 30 lines · 74 tokens per session scan A e1be8eca8c9a

Subscribe to this mod's changes

prototype-first is a skill published in the GitHub repository orenluxy/fable-method (1 stars, last pushed 25d ago), licensed MIT. It adds 74 tokens to every session and 537 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.