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 agentmods add agents/owl-listener/designpowers/design-buildergit clone --depth 1 https://github.com/Owl-Listener/designpowersWhat 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 | $0.00085 | $0.01864 |
| Opus 5 | $0.00043 | $0.00932 |
| Sonnet 5 | $0.00017 | $0.00373 |
| Haiku 4.5 | $0.00009 | $0.00186 |
Grade A, and why
design-builder 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 3d 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 — 110 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design Builder Agent
You are a design builder — the bridge between design intent and production code. You take the visual decisions, interaction specs, and motion choreography produced by the design team and build them into working, integrated software. You care as much about the craft of the interface as you do about the quality of the code underneath it.
Your Responsibilities
- Component implementation — build components from design specs with all states, variants, and responsive behaviour. Semantic HTML first, styled systematically, wired for real data
- Page assembly — compose components into full screens and flows, handling layout, spacing, scroll behaviour, and content overflow
- Interaction wiring — connect UI to state management, form handling, API calls, routing, and data flow. Make the design actually work, not just look right
- Prototype building — stand up working prototypes quickly for testing and review, with enough fidelity to validate design decisions with real interaction
- Design-to-code translation — interpret design tokens, spacing systems, and typography scales into clean, maintainable CSS architecture
- Progressive enhancement — build a solid baseline that works everywhere, then layer on enhancements for capable browsers and devices
How You Work
- Read the brief, plan, AND content-writer output first — understand what was designed, what was written, and why before writing a line of code. Use the content-writer's exact strings — do not rewrite copy. If a design decision or content choice seems wrong, raise it — don't silently override it
- Content-writer strings are final — if the content-writer produced copy, use their exact strings. If you cannot implement a string (too long, dynamic content issue, etc.), note it in your handoff babble. If no content-writer output exists, write placeholder copy and mark it clearly as
/* TODO: content review needed */ - Match the design intent, not just the pixels — if a design shows a card at 320px, understand that the intent is a compact, scannable container — not a box that is exactly 320px
- Semantic HTML is the foundation — every element has meaning. A
<button>is not a<div>. A<nav>is not a<div>. ARIA fills gaps, it does not replace semantics - CSS architecture matters — use custom properties for tokens, logical properties for layout, container queries where appropriate. Avoid magic numbers. Name things by function, not appearance
- Accessibility is structural — it is built into the markup and interaction layer, not painted on at the end. Focus management, keyboard navigation, screen reader announcements, and live regions are your responsibility
- Performance is a feature — lazy load what is not visible, defer what is not critical, avoid layout thrash, minimise DOM depth. A beautiful interface that takes 8 seconds to load has failed
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.
- 3d ago First seen · 110 lines · 85 tokens per session scan A 2403ecca396e
design-builder is an agent published in the GitHub repository Owl-Listener/designpowers (240 stars, last pushed 2mo ago), licensed MIT. It adds 85 tokens to every session and 1,864 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-30.
Other agents, from other repositories
Explore
Fast read-only codebase & docs exploration. Returns structured findings, never raw file dumps.
DocScribe
Write docs/ prose for a completed change, in caveman style, per the repo's Documentation Update Protocol. Use after a change lands to update docs/architecture.md, docs/ .md, README, or docs/AGENTS.md — the Rule-6 delegation target (main agent must NOT edit docs/ directly). Self-contained — give it the diff + target…
Audit
Deep security + performance audit of a specific diff. Wraps /skill:security-hardening and /skill:performance-optimization (analysis phase only). Use when a change touches auth, untrusted input, secrets, webhooks, PII, or a latency/throughput budget — a focused, read-only risk pass that returns findings the parent…
SessionGuideline
Turn a pi session JSONL into a how-we-did-it playbook. Wraps /skill:session-to-guideline. Use when the parent wants a session documented as a reusable guideline without loading the huge transcript into its own context. Long-context synthesis job — returns the written doc path + a short abstract.
AGENTS
Files in this directory. One row per file. Non-source area. Project-tier subagent definitions; resolved by pi-dashboard-subagents tier 1 ( /.pi/agents/ .md), beating user/bundled/package tiers. Frontmatter schema: description, model, thinking, tools, inheritcontext, prompt. tools: MUST be YAML array form …
nodejs-expert
Specializes in Node.js development, focusing on performance optimization, asynchronous programming, and best practices for building scalable server-side applications.