glm-design-to-code — vision to frontend code

vision opus

Caution

GLM-5V-Turbo is an external vision API — not Claude. The skill calls Z.ai or OpenRouter directly. You need a ZAI_API_KEY or OPENROUTER_API_KEY before the first run. On first use, the skill walks you through key validation and storage interactively.

Tip

GLM-5V-Turbo scores 94.8 on the Design2Code benchmark — outperforming general-purpose multimodal models for pixel-accurate frontend generation. Average cost per conversion: ~$0.03 with glm-5v-turbo, or free with glm-4.6v-flash for development iterations.

Quick reference

Field	Value
Command	`/brewui:glm-design-to-code`
Modes	CREATE (default), REVIEW, FIX
Input types	Image file, text description, HTML file, URL (auto-detected)
Frameworks	`html` (default), `react`, `flutter`, `custom`
Quality profiles	`max` (32K tokens), `optimal` (16K), `efficient` (8K)
Providers	`zai` (default, Z.ai direct), `openrouter`
Model	opus (Claude orchestrates) + GLM-5V-Turbo (vision API)

When to use

Screenshot to code — export a Figma frame or take a browser screenshot, get working HTML/CSS in seconds
Mockup to React — convert a design file to component-based JSX with CSS Modules
Flutter UI — generate Dart widget hierarchy from any visual reference
Clone a live page — pass a URL and Playwright auto-screenshots before conversion
Iterative improvement — REVIEW scores the generated result 1-10, FIX applies targeted edits

Examples

# Image → HTML/CSS (default)
/brewui:glm-design-to-code screenshot.png

# Image → React with optimal quality
/brewui:glm-design-to-code mockup.png --framework react --profile optimal

# Text description → Flutter
/brewui:glm-design-to-code "Dark dashboard with sidebar and data tables" --framework flutter

# URL → HTML (Playwright auto-screenshots)
/brewui:glm-design-to-code https://example.com/landing

# Review generated result against original design
/brewui:glm-design-to-code --review original.png result-screenshot.png

# Fix issues from a previous review
/brewui:glm-design-to-code --fix "sidebar too narrow, wrong green color #3a9"

Modes

Mode	Trigger	What it does
CREATE	Default (no flag)	Converts input to multi-file frontend code, builds, verifies with Playwright screenshot
REVIEW	`--review original.png result.png`	Sends both images to GLM for visual diff, returns score 1-10 with actionable feedback
FIX	`--fix "feedback"` or `--fix --review-file review.json`	Applies targeted edits to existing generated code without regenerating

Flow

Parse and classify
Arguments are parsed for input type (image / text / HTML / URL), framework, profile, provider, and mode. Input type is auto-detected from file extension or URL pattern. For ambiguous HTML input, the skill asks one clarifying question.
API key setup (first run only)
Checks for ZAI_API_KEY or OPENROUTER_API_KEY. If missing, asks for a key, validates it against the real API using a cheap test call, then saves to .env (gitignored). Offers to persist to CLAUDE.local.md or ~/.zshrc.
Prepare input
Images are base64-encoded. URLs are screenshotted via Playwright (npx playwright screenshot). HTML files are optionally screenshotted for dual input (image + source). Text descriptions go directly into the request body.
Send to GLM vision API
Payload is built with the quality profile prompt, framework context, and user intent instruction. Sent to glm-5v-turbo via Z.ai or OpenRouter with a 10-minute timeout. Before every API call, the resolved configuration table is printed so you always see what was sent.
Extract and build
Response is parsed for ===FILE: path=== markers. Files are written to ./d2c-output/. Framework-appropriate build runs: npm run build for React, flutter build web for Flutter, no build for HTML. Auto-fix loop (max 3 attempts) corrects compilation errors — layout and colors are never touched.
Verify with Playwright
The output is served locally and screenshotted. Screenshot is read and checked for blank pages. Server is killed after capture. Final report lists all files, build status, and cost estimate.

Provider matrix, models, and API internals

Providers

Provider	Endpoint	Auth variable	Notes
Z.ai (default)	`https://api.z.ai/api/paas/v4/chat/completions`	`ZAI_API_KEY`	System message caching — 80% discount on repeated prompts
OpenRouter	`https://openrouter.ai/api/v1/chat/completions`	`OPENROUTER_API_KEY`	Model IDs prefixed with `z-ai/` (e.g. `z-ai/glm-5v-turbo`)

GLM models

Model	Vision	Price (in/out per 1M)	Context	Best for
glm-5v-turbo	Image + Video	$1.20 / $4.00	202K	Production quality
glm-4.6v-flash	Image	Free	131K	Development iterations
glm-4.6v	Image + Video	$0.30 / $0.90	131K	Budget production

Quality profiles

Profile	Max tokens	Quality requirements	Typical cost
`max` (default)	32 768	13 — pixel-perfect colors, spacing, typography	~$0.05–0.08
`optimal`	16 384	8 — correct proportions, balanced detail	~$0.03–0.05
`efficient`	8 192	4 — basic layout and colors	~$0.01–0.03

API parameters

temperature: 0.2, top_p: 0.85 — low randomness for reproducible output
File markers: ===FILE: path=== … ===END_FILE===
Thinking mode is NOT supported on glm-5v-turbo — never send thinking parameters
System message: quality profile prompt; user message: context + image + intent instruction

Benchmark results (internal research)

Framework	Score	Files	Build time	Cost
HTML/CSS	9.5/10	3	N/A	~$0.032
React 18	8.0/10	19	Vite 218ms	~$0.035
Flutter Web	9.0/10	10	flutter build web	~$0.032

Same mockup, frozen prompts, temperature 0.2, dual evaluation by Claude Opus + GLM-4.6v-flash.

🖼️

Updating plugins

Use /brewtools:plugin-update to check and update the brewcode plugin suite in one command. See the FAQ for details.