Add design-system skill: agent-driven design-system snapshot of any URL#145
Add design-system skill: agent-driven design-system snapshot of any URL#145shubh24 wants to merge 2 commits into
Conversation
Teaches an agent the full Browserbase Agents API lifecycle — create reusable agents (systemPrompt + resultSchema), trigger runs with %variable% placeholders and browserSettings, poll to terminal state, stream run messages, and retrieve downloads. Includes a zero-dependency Python CLI (scripts/bb_agents.py), a condensed API reference, and a prompt/schema patterns guide distilled from the docs plus 11 live production runs (outcome enums, appliedFilters echo-back, variable date-drift mitigations, anti-bot settings). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Explores a site with the browse CLI on a Browserbase remote session and reverse-engineers its design system. Deterministic probes measure (computed styles, breakpoints, per-viewport layout, hover/focus states, motion, iconography, WCAG contrast); the agent decides everything else — overlay dismissal, component selection, sub-page theming diffs, semantic naming. Output is three strictly-separated tiers: measured (probe output verbatim), proposedTokens/proposedComponents (inferred, every entry machine-linked to a measurement via evidenceRefs JSON paths), and notProvided (what a real design system adds that isn't on the page). Validated end-to-end on theguardian.com (Sourcepoint consent wall, pillar accent diffing across 5 section fronts, focus-ring recovery from raw CSS text) and launchdarkly.com (scroll-reveal animations, next/font alias resolution). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 4 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want higher recall? High effort reviews run extra passes and find more bugs. A team admin can switch effort levels in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit fdd8ca7. Configure here.
| const aria = el.getAttribute('aria-label') || el.getAttribute('title') || ''; | ||
| const s = styleOf(el); | ||
| // keep only elements that look styled (bg, border, or radius) OR have aria/text | ||
| if (s.background === 'transparent' && s.border === 'none' && s.borderRadius === '0px' && !aria) continue; |
There was a problem hiding this comment.
Modern colors dropped as transparent
High Severity
toHex only parses rgb()/rgba(). On sites where computed styles are lab()/oklch(), it returns null, styleOf coerces background to transparent, and the interactive filter then drops real styled controls that lack border, radius, or aria.
Reviewed by Cursor Bugbot for commit fdd8ca7. Configure here.
| const bs = getComputedStyle(bgEl); | ||
| if (bs.backgroundColor && !/rgba?\(\d+[,\s]+\d+[,\s]+\d+[,\s]+0\)/.test(bs.backgroundColor) && bs.backgroundColor !== 'transparent') { | ||
| bg = toHexQuick(bs.backgroundColor); | ||
| } |
There was a problem hiding this comment.
Transparent backgrounds misdetected
Medium Severity
The ancestor-background walk only treats transparent or comma-form rgba(..., 0) as empty. Space-separated forms like rgb(0 0 0 / 0) and alphas such as 0.0 are treated as opaque, so contrast pairs can use the wrong background.
Reviewed by Cursor Bugbot for commit fdd8ca7. Configure here.
| const [r, g, b, a255] = _ctx.getImageData(0, 0, 1, 1).data; | ||
| if (a255 > 0) out = '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join(''); | ||
| } | ||
| _colorCache.set(cssColor, out); |
There was a problem hiding this comment.
Canvas color fallback contaminates cache
Medium Severity
When canvas rejects a fillStyle value, the prior fill style is kept. After clearRect, fillRect paints that previous color, and the wrong hex is cached for the unsupported input, corrupting later color frequency results.
Reviewed by Cursor Bugbot for commit fdd8ca7. Configure here.
| }); | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
CSS-in-JS fallback too narrow
Medium Severity
Raw <style> parsing for nested :hover/:focus rules runs only when the CSSOM walk found zero state rules. Any same-origin stylesheet with a few state selectors suppresses the fallback, so CSS-in-JS hover/focus rules stay missing.
Reviewed by Cursor Bugbot for commit fdd8ca7. Configure here.
1 participant
What
New skill:
design-system— point it at a URL and it reverse-engineers the site's design system using the browse CLI on a Browserbase remote session.How it works
Bitter-lesson split: deterministic code only measures; the agent decides.
browse eval):harvest-styles.js— colors (canvas-normalized, handleslab()/oklch()), type scale, @font-face inventory, CSS variables, buttons, logo candidatesharvest-structure.js— breakpoints from @media rules, containers/grids per viewport, hover/focus states (with raw-CSS-text fallback for CSS-in-JS sites), motion, iconography, WCAG contrastharvest-components.js— interactive elements with accessible names (so carousel arrows can't masquerade as CTAs), named regions, section titles, kickers/badges, typography by structural contextOutput contract — three strictly-separated tiers in
design-system.json:measured— probe output verbatimproposedTokens/proposedComponents— inferred semantics, every entry carryingevidenceRefs(JSON paths intomeasured), under a_status: INFERREDbannernotProvided— what a real design system adds that isn't on the page (never fabricated)Validation
Run end-to-end on two sites:
0 0 0 3px #0077B6) from raw CSS text, and reconstructed the five-pillar accent system (news/opinion/sport/culture/lifestyle) by diffing section fronts. Extracted breakpoints match Guardian Source's published scale (480/740/980/1140/1300).--animations disabled), resolved next/font aliases through the @font-face inventory, and corrected a vision-guessed CTA color to the measured#ddff46.The SKILL.md gotchas encode every failure mode hit during those runs (page-coordinate clips, blank off-screen captures, daemon-relative paths, CSS-in-JS nested rules, session expiry).
node scripts/validate-skills.mjs --skill design-systempasses.🤖 Generated with Claude Code
Note
Low Risk
Documentation and additive skill assets only; the Python CLI calls Browserbase APIs with the user’s API key but does not change existing plugin runtime behavior.
Overview
Adds two new Claude Code skills and lists them in the root README skills table.
browserbase-agentsdocuments the Browserbase Agents API end-to-end: create/update agents, trigger runs with%variables%, poll, messages, downloads, and delete. It ships a stdlib-onlyscripts/bb_agents.pyCLI, condensedreferences/api_reference.mdandprompt_patterns.md, an Amazon searchexample_agent.json, andevals/evals.json.design-systemis an agent-driven workflow to snapshot a site’s look via thebrowseCLI on Browserbase. Deterministicbrowse evalprobes (harvest-styles.js,harvest-structure.js,harvest-components.js) only measure;SKILL.mddefines navigation, overlays, responsive re-probes, component crops, and adesign-system.jsoncontract withmeasured,proposedTokens(withevidenceRefs), andnotProvidedtiers. Output goes undersnapshots/<hostname>/with HTML, full-page PNG, and per-component assets.Both skills include MIT
LICENSE.txtand eval fixtures.Reviewed by Cursor Bugbot for commit fdd8ca7. Bugbot is set up for automated code reviews on this repo. Configure here.