Skip to content

fix(vibe): Get reference images to the writer and check against them - #293

Merged
shafty023 merged 6 commits into
mainfrom
fix/vibe-visual-cues
Oct 16, 2026
Merged

shafty023 merged 6 commits into
mainfrom
fix/vibe-visual-cues

Conversation

@shafty023

Copy link
Copy Markdown
Collaborator

A reference image now reaches the vibe writer as an image it reads, and its visual and UX properties become acceptance criteria (operator ruling, 2026-10-15: "we're missing visual cues"). A product-manager session built a page from two screenshots, one of another product, and missed a drop shadow, a larger text size and bold type. The writer got the saved path beside the orchestrator's own description and didn't read it before its first build. Reference mode was scoped to behaviors, every criterion was "met by source trace", and the first ready message said it matched.

  • Getting the image to the writer, in both harnesses. New scripts/reference-images.mjs. attached decodes the person's latest attached images from the harness's own transcript: the Codex rollout for CODEX_THREAD_ID, or the Claude Code transcript for CLAUDE_CODE_SESSION_ID. Images a tool returned are skipped. save --file stores an image file. Both record the image on the session as referenceImages in private Git metadata. The Claude launcher (claude-worker.mjs) adds the recorded paths to every writer, requirements and verify turn. Codex writer-state.mjs take-input returns them with the claimed input. The orchestrator forwards every saved path and never its own description in place of it.
  • Reading is required and recorded. The writer opens each image (Read in Claude Code, view_image in Codex) and logs a Reference read line before it plans or builds, including on a correction.
  • Reference mode on a screenshot. A screenshot of another product goes through reference mode whether or not the product is named. vibe-requirements-worker reads the image itself. It always returns visual requirements (elevation, type size and weight, color, spacing, radius, borders, icons, density) and UX requirements (hierarchy, emphasis, hover, selected, disabled, empty, loading and overflow), each mapped to a catalog component and token. The orchestrator may not scope the visual list out. Each requirement becomes an acceptance criterion. One with no equivalent takes the missing-primitive path. A surface without bundled tokens uses the named token's value and is logged for engineering.
  • The reference check before ready (operator ruling, 2026-10-15) is the one exception to the lean loop's no-visual-QA rule, and it runs only with a reference image. Before DONE on a UI change the writer screenshots each touched screen at the reference's viewport. It compares the properties the reference shows plus regressions on the touched element, such as a lost tap-target height. It fixes each difference with tokens and screenshots again. The result gates the ready message, and the orchestrator never says the result matches when it has seen a gap. It's not a design review. With no reference image there is no render or compare. environment.md covers capture in both harnesses: local Storybook or the control skill before the deploy, and the Codex in-app browser or Claude in Chrome after it.
  • No silent reverts. A path outside the allowed table isn't edited in the loop either; its criterion stays not met yet, and the person is told engineering must make it. When handoff removes such a path, it tells the person in one plain line, puts the criterion back to not met yet and renders the screen again.

Before this change, the image was not forwarded as an image in either harness. The Claude launcher's input is a text string on stdin, and Codex follow-ups were text. Reference mode ran only for a named product, researched public docs, and returned behaviors only.

Tests:

  • New test_vibe_visual_cues_contract.py: 13 cases, all fail on 1.0.39 and pass here. It pins both sides: the check runs with a reference image and never without one.
  • New reference-images.test.mjs (node): Claude Code and Codex transcripts decode, tool screenshots are skipped, and a non-image is refused.
  • New vitest reference-images.test.ts: the saved path reaches the Claude writer and requirements turns and Codex take-input. All three fail on the 1.0.39 bundles. Dist bundles rebuilt.
  • Four claude plugin eval cases tagged visual-cues (pm-reference-card, pm-outside-product-cards, pm-two-screenshot-page, exec-described-change-no-reference). They build in a stand-in repo with a Pillow screenshot tool, because the eval sandbox has no browser. Opus, three runs each: this branch 0.931, 1.0.39 0.745.

Bumps vibe to 1.0.40 (both manifests) with a CHANGELOG entry.

@shafty023
shafty023 merged commit 642d235 into main Oct 16, 2026
10 checks passed
@shafty023
shafty023 deleted the fix/vibe-visual-cues branch October 16, 2026 00:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant