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.
npx skills add orenluxy/fable-method --skill prototype-firstgit clone --depth 1 https://github.com/orenluxy/fable-methodWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/orenluxy/fable-method/prototype-first)<a href="https://agentmods.dev/skills/orenluxy/fable-method/prototype-first"><img src="https://agentmods.dev/badge/skills/orenluxy/fable-method/prototype-first/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/orenluxy/fable-method/prototype-first"><img src="https://agentmods.dev/badge/skills/orenluxy/fable-method/prototype-first.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00074 | $0.00537 |
| Opus 5.5 | $0.00030 | $0.00215 |
| Sonnet 5.5 | $0.00015 | $0.00107 |
| Haiku 4.5 | $0.00007 | $0.00054 |
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 1mo ago.
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.
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
-
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.
-
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.
-
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.
-
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.
-
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.
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.
- 1mo ago First seen · 30 lines · 74 tokens per session scan A e1be8eca8c9a
prototype-first is a skill published in the GitHub repository orenluxy/fable-method (2 stars, last pushed 16d ago), licensed MIT. It adds 74 tokens to every session and 537 once invoked, about $0.0003 per session on Opus 5.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.
Other skills, from other repositories
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
theme-factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
image-to-code
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards…
imagegen-frontend-web
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not…
redesign-existing-projects
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.