generate-and-verify

name	generate-and-verify
license	Apache-2.0
description	Turns a Design_Brief into verified frontend code via a manual closed loop: hands the brief to GLM 5.2 (code author), renders the result, screenshots it, and verifies on three lenses (visual compare, Pre-Flight tell-scan, and motion compare), sending design-only feedback until the result matches the source (or brief intent for inspiration briefs), avoids the generic-AI look, and moves like the source. Use when a Design_Brief exists or when a raw design needs the full pipeline (runs image-to-prompt, video-to-prompt, or inspiration-to-prompt first), for example "verify this against the mockup" or "run the generate-and-verify loop." Manual loop, no API keys required.
compatibility	Requires a vision-capable agent that can view images; browser/screenshot tools recommended. Video sources need clip + key-frame viewing.
metadata	{"author":"mihneaptu","version":"0.1.0-beta.6"}

generate-and-verify

The heart of the collection. Take a Design_Brief, get code from GLM 5.2, and visually verify the result in a guided loop until it matches. ("Generate" is the GLM-delegated step; this skill orchestrates the loop and does not write code.)

Manual loop. The human bridges the two roles. No API keys, no MCP, no CLI. Paste the brief into GLM 5.2 and bring its code back; the Orchestrator does the seeing and design feedback.

Requirements

Must be able to view images (and video/clips for motion). Browser/screenshot tools are ideal. The Orchestrator keeps the original design and does the comparison. Render helpers only produce screenshots; they do not judge the match unless they also hold the original.

Upstream: produce the brief first

If the user attached a raw design but no Design_Brief yet, run the matching input skill first:

Input	Run first
Still image / screenshot / mockup	image-to-prompt
Video / screen recording	video-to-prompt
Inspiration gallery link or screenshot	inspiration-to-prompt
Brief already provided	Skip; resolve target_stack and continue

Confirm handoff gates from ../_shared/handoff-gates.md passed.

The two roles

• Orchestrator = design lead and verifier. Reads the design, writes or receives the brief, compares the render, sends design-only feedback. Never writes frontend code.
• GLM 5.2 = sole code author. Ranks highly on the Design Arena code leaderboard (check current standings); text-only, cannot see the design.

Verify mode (branch on inspiration_only)

inspiration_only	Visual lens compares against	Motion lens compares against
false (image/video)	Original design (still image, or video key frame), pixel fidelity	Source clip or brief motion
true (inspiration)	Brief intent: layout rhythm, palette, typography feel, component structure described in the brief; not 1:1 clone of the inspiration screenshot	Brief motion section (direction, not source pixels)

For inspiration briefs, the goal is a new design in the described direction, not reproducing the reference site's brand assets or exact layout.

The manual loop

Full detail: references/verification-loop.md (includes the on-disk workspace layout: design/, glm-5.2/, screenshots/).

Copy this checklist each run:

Verify loop progress:
- [ ] Brief ready (handoff gates passed)
- [ ] Verify mode resolved (inspiration_only true/false)
- [ ] Brief + fidelity + anti-tell rules pasted to GLM 5.2
- [ ] Code saved verbatim
- [ ] Screenshot captured at correct viewport width
- [ ] Original / key frame freshly loaded this turn
- [ ] Three lenses run (skip motion if not applicable)
- [ ] Feedback self-check passed (each finding moves toward source/brief)
- [ ] Feedback merged into one design-words message (if mismatch)

In short:

1. Produce or receive the Design_Brief; resolve target_stack.
2. Paste the brief into GLM 5.2 with references/fidelity-rules.md and references/anti-tell-rules.md. Tip: load glm-codegen on the GLM side once so only the brief is needed each round.
3. Save GLM's code verbatim in glm-5.2/; never hand-edit.
4. (Optional) Preview locally (HTML/CSS → open file; React+Tailwind → dev server).
5. Screenshot the result at the same viewport width as the source (note width in brief notes if needed).
6. Compare on three lenses in parallel (skip motion when motion: not applicable):
   • Visual. See the verify mode table above. Re-load the original/key frame in this turn. Use the element checklist in references/verification-loop.md.
   • Pre-Flight. Scan the code with references/pre-flight-checklist.md (read-only tell-scan).
   • Motion. Short result clip vs. source clip (or brief motion for inspiration).
7. Merge findings into one design-feedback message (template in pre-flight checklist). The Orchestrator views the reference and screenshot to write the feedback; send GLM 5.2 only that text, never images. Use the inspiration template when inspiration_only: true.
8. Repeat from step 2 until all applicable lenses pass, stop manually, or hit the iteration limit (default 5; user-overridable, see verification-loop).

The boundary: design words only

Everything sent to GLM 5.2 is design language, never code, never images, and never code-level instructions. Keep GLM's code verbatim. Be precise in visual terms; see references/verification-loop.md.

Handling problems

See the Error Handling table in references/verification-loop.md.

Worked examples

Under assets/:

• three-icon-example.md + three-icon-source.jpg
• awwwards-landing-example.md + awwwards-landing-source.jpg → awwwards-landing-result.html

Manual eval scenarios: references/evals.json and references/golden-path-eval.md.