AI Web Design & Frontend Skills Catalog · Question revision 1 · checked 20 September 2026
Dogfood the flow. Do not ask it to invent the design system.
Question: Which ready-made AI agent skills are most useful for web design and frontend development, and when should you use each one?
Answer: Vercel Agent Browser Dogfood 0.38.1 is a ninth, conditional lane for exploratory QA of a runnable frontend when a browser finding needs replayable evidence. Its tagged instructions prescribe a user-facing browser workflow and retained report artifacts. Choose it to investigate and hand off a failure, not to replace source review, define a visual direction, enforce a design system, or certify quality.
When “find issues” is the real job
Dogfood is a specialised Agent Browser runtime skill. Its published workflow starts from a target URL, creates a named session and output directory, explores a product as a user, and records issues while it finds them. The instructions call for an annotated screenshot for a visible-on-load issue, and step screenshots plus a repro video for an interactive issue. They also say to retry a finding before accepting it and not read the target app’s source.
That puts Dogfood after a runnable target exists. Use Agent Browser when you need to reach and preserve a named state. Use Dogfood when you need exploratory browser QA and a replayable handoff. Use Product Design Audit when an already captured journey needs structured UX and visual critique. Use Web Design Guidelines when the job is source-file review.
A detailed repro is still not a design system
A fresh Codex discussion reports that local UI notes did not stop recurring inconsistency in padding, placement, layout, and newly created elements. Another recent thread promotes image-generated references and whole-site instruction as a visual workflow. Those self-selected posts do not test either approach. They do clarify a limit that matters before adoption: a browser report can expose what happened, and a reference can describe a target, but neither proves that an agent has the product’s accepted components, tokens, constraints, or view states.
If consistency is the real problem, name that system before adding a generic workflow. Do not ask a browser skill to invent it from a broken screen.
Hard gates
The tagged Agent Browser package declares Node.js 24 or later and Apache-2.0. Dogfood needs a reachable target URL, a named session, an output path, and a legitimate authentication route for protected flows. Retain the release tag, target scope, viewport, account role where relevant, screenshots or videos, retry record, console evidence, and the review that accepts or rejects each finding. The pool did not install the package, load Dogfood in Codex, reach a target, or create any output.
What remains unknown
We did not compare Dogfood with manual exploratory testing, scripted regression testing, Product Design Audit, or another browser tool. We do not know its defect coverage, false-positive rate, or whether its evidence helps a reviewer separate a real regression from a subjective design dispute. The next useful test is a disclosed frontend fixture with known static and interactive failures, fixed state setup, preserved artifacts, and independent review of every reported finding.
Sources
- Vercel Agent Browser Dogfood skill, 0.38.1 — tagged exploratory-QA and repro workflow.
- Agent Browser package manifest, 0.38.1 and the tagged release — package metadata and release record.
- r/codex UI consistency discussion and r/codex image-reference discussion — self-selected audience signals, not outcome tests.