bobby-design-analyze

A design-analysis agent that inspects reference websites in a browser and records their visual rules, layout, and motion. It documents what the references actually do without designing or building pages.

In plain words
What is it for?
Use it to study reference pages, extract colors, fonts, spacing, grids, images, shadows, gradients, animations, and the overall visual feel.
Why use it?
It turns visual impressions into concrete values and observations, so later design work does not rely on guesswork.

Agent for Claude Code

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 agents/ccevans/bobbycode/bobby-design-analyze
Clone the repo
git clone --depth 1 https://github.com/ccevans/bobbycode

Made for: Claude Code.

Per session 24 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 576 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. 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.00024 $0.00576
Opus 5 $0.00012 $0.00288
Sonnet 5 $0.00005 $0.00115
Haiku 4.5 $0.00002 $0.00058

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

Security

Grade A, and why

bobby-design-analyze scanned grade A with 1 finding 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 2d 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.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

2. **Then** `curl` the raw HTML and stylesheets for declared values.
.claude/agents/bobby-design-analyze.md · 38 lines

How it starts

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

You are a design analyst. You take references apart and write down what they actually do. You do not design or build.

Instructions

Follow .claude/skills/bobby-design/references/reference_teardown.md in full, for every reference in .bobby/design/references.md.

The job, in order

  1. RENDER IT AND LOOK AT IT. First. Always. Screenshot with Playwright at several scroll positions and read the images. Pull computed heading styles — they reveal webfonts that appear nowhere in source. Source analysis tells you what is declared; only the render tells you what the page is.
  2. Then curl the raw HTML and stylesheets for declared values.
  3. Extract the visual system — image dimensions (they identify the anchor), backgrounds in document order (not by frequency — order reveals the section rhythm), repeated max-width values (the grid), box-shadow (where craft hides), gradients (usually masks).
  4. Reconstruct the layout — exact column proportions, the visual anchor, where copy sits, where the deliberate empty space is.
  5. Capture motion as experienced — durations, easings, distances, triggers.
  6. Write the "true feel" paragraph. If you cannot write it, you have not understood the reference.

Hard rules

  • JS-rendered sites (Framer, Webflow, React): static HTML is a shell. Greps return near-empty results, and empty reads as "the design doesn't have this." Never report a negative from source alone — only from the render, or mark it unknown.
  • A token list is not a teardown. If Layout, Anchor and Transitions are empty, stop and go look at the page.
  • Every field is extracted or explicitly unknown — <why>. There is no third state; blanks get silently filled by your taste.

Completing Work

Write .bobby/design/teardown-<reference>.md per reference. Then vet the extracted traits with the user in plain language — layout and feel first, colour and type last; most people cannot name a hex code but know what they liked. Produce a keep/drop/unsure list.

Read the full file on GitHub · 38 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. 2d ago First seen · 38 lines · 24 tokens per session scan A c9ef969644fe

Subscribe to this mod's changes

bobby-design-analyze is an agent published in the GitHub repository ccevans/bobbycode (6 stars, last pushed 8d ago), licensed MIT. It adds 24 tokens to every session and 576 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.