GLM Design to Code

new opus

Vision model-powered design-to-code generator. Convert designs to working multi-framework code using GLM-5V-Turbo. Accepts images, text descriptions, HTML files, or URLs.

✏️

CREATE

Any input to working multi-file code. HTML/CSS, React 18, Flutter Web.

🔍

REVIEW

Compare original design with generated result. Score 1-10 with actionable feedback.

🔧

FIX

Apply review feedback to improve generated code automatically.

Input Types

⭐

Image

PNG, JPG, WebP, or GIF screenshot. The most common input — export from Figma, Sketch, or take a screenshot.

✏️

Text Description

Natural language description of the desired UI. Example: “Dark landing page with hero section and pricing cards”.

📄

HTML

Existing HTML file to convert or improve. Useful for migrating legacy pages to React or Flutter.

🔗

URL

Public URL — Playwright takes a screenshot automatically, then converts. Great for cloning existing pages.

Note

Input type is auto-detected from the argument: file extension for images/HTML, URL pattern for URLs, quoted text for descriptions.

Quick reference

Field	Value
Command	`/brewcode:glm-design-to-code`
Arguments	`<input> [--framework html\|react\|flutter\|custom] [--profile max\|optimal\|efficient]`
Input types	Image, text description, HTML file, URL (auto-detected)
Model	opus
Vision model	GLM-5V-Turbo (Z.ai / OpenRouter)

Quick Start

# From an image
/brewcode:glm-design-to-code screenshot.png

# From a text description
/brewcode:glm-design-to-code "Dark landing page with hero section and pricing cards"

# From an existing HTML file
/brewcode:glm-design-to-code existing-page.html --framework react

# From a URL (auto-screenshots via Playwright)
/brewcode:glm-design-to-code https://example.com/landing

Pipeline Flow

Parse input
Detect type (image/text/HTML/URL), framework, profile, provider from arguments
API key setup
Check .env, validate against provider API, save on success
Build payload
Base64-encode image + load system prompt (profile) + framework context into JSON
Send to GLM
glm-5v-turbo via Z.ai or OpenRouter, retry on transient failures, 10min timeout
Extract files
Parse ===FILE:=== markers from response, create directory structure
Build and verify
npm run build (React), flutter build web (Flutter), or serve static HTML
Review cycle
Optional: screenshot result, compare with original, score, fix, iterate

Benchmark Results

Our research tested GLM-5V-Turbo across three frameworks with the same design mockup:

Framework	Score	Files	Build	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 (Claude)	10	flutter build web	~$0.032

Tip

Average cost per design-to-code conversion: ~$0.03. Using the free glm-4.6v-flash model for development iterations costs nothing.

Design2Code Benchmark Comparison

⭐

GLM-5V-Turbo

94.8 Design2Code benchmark score. CogViT architecture, optimized for design-to-code conversion.

✏️

Claude Opus 4.6

77.3 Design2Code benchmark score. General-purpose multimodal model.

Warning

Design2Code scores are self-reported by Z.ai. No independent verification has been published as of April 2026. Treat as directional, not definitive.

Our Research Results

HTML/CSS

Score: 9.5/10 — 3 files generated, no build step needed.

Cost: ~$0.032 per conversion
Pixel-perfect colors, spacing, and typography
CSS custom properties for theming
Responsive layout out of the box

React 18

Score: 8.0/10 — 19 files generated, Vite build in 218ms.

Cost: ~$0.035 per conversion
Component decomposition into Header, Sidebar, Content
CSS Modules for scoped styling
Minor issues: some hardcoded values, missing hover states

Flutter Web

Score: 9.0/10 — 10 files generated, flutter build web.

Cost: ~$0.032 per conversion
Clean widget hierarchy with theme constants
Auto-fix needed: Color(xFF...) → Color(0xFF...)
Native-feel scrolling and layout

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 and testing
glm-4.6v	Image+Video	$0.30 / $0.90	131K	Budget production

Note

GLM-5V-Turbo uses CogViT architecture with 94.8 Design2Code benchmark score. Available via Z.ai direct API or OpenRouter.

Frameworks

HTML/CSS

Best score: 9.5/10 — Pure static output. No build step needed.

Semantic HTML5 with index.html entry point
CSS in separate files with custom properties
JS for interactive elements
Perfect for landing pages, dashboards, documentation

React 18

Score: 8.0/10 — Component-based architecture with CSS Modules.

JSX components in separate files
CSS Modules (.module.css) for styling
Vite build (218ms average)
App.jsx root component

Flutter Web

Score: 9/10 — Dart widgets with theme system.

StatelessWidget components
Theme constants in lib/theme.dart
flutter build web compilation
Auto-fix: Color(xFF...) to Color(0xFF...)

Quality Profiles

⭐

Maximum

Pixel-perfect reproduction. Exact colors, spacing, typography. 13 quality requirements. ~32K output tokens.

✅

Optimal

Good quality, balanced cost. Correct colors, proportions, layout. 8 requirements. ~16K tokens.

⚡

Efficient

Fast generation. Basic layout and colors. 4 requirements. ~8K tokens.

Providers

Z.ai (Direct)

Recommended. Direct API access with system message caching (80% discount on repeated prompts).

Endpoint: https://api.z.ai/api/paas/v4/chat/completions
Auth: ZAI_API_KEY environment variable
All GLM models available including free tier

OpenRouter

Alternative. Unified API with fallback routing.

Endpoint: https://openrouter.ai/api/v1/chat/completions
Auth: OPENROUTER_API_KEY environment variable
Model IDs prefixed with z-ai/ (e.g., z-ai/glm-5v-turbo)

Usage Examples

Image

# Basic -- HTML/CSS output from screenshot
/brewcode:glm-design-to-code screenshot.png

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

# Flutter via OpenRouter
/brewcode:glm-design-to-code design.png --framework flutter --provider openrouter

Text

# Generate from a description
/brewcode:glm-design-to-code "Minimalist dashboard with sidebar and dark theme"

# React component from description
/brewcode:glm-design-to-code "Pricing page with 3 tiers" --framework react

HTML

# Convert legacy HTML to React
/brewcode:glm-design-to-code old-page.html --framework react

# Improve existing HTML with max quality
/brewcode:glm-design-to-code landing.html --profile max

URL

# Clone a live page (Playwright auto-screenshot)
/brewcode:glm-design-to-code https://example.com/landing

# Clone as Flutter
/brewcode:glm-design-to-code https://stripe.com/pricing --framework flutter

REVIEW

# Compare original design with generated result
/brewcode:glm-design-to-code --review original.png result-screenshot.png

FIX

# Fix specific issues
/brewcode:glm-design-to-code --fix "sidebar too narrow, wrong green color"

# Fix from review file
/brewcode:glm-design-to-code --fix --review-file review.json

Options

Flag	Default	Description
`--framework`	`html`	Target: `html`, `react`, `flutter`, `custom`
`--profile`	`max`	Quality: `max`, `optimal`, `efficient`
`--provider`	`zai`	API: `zai`, `openrouter`
`--model`	auto	Override model ID
`--output`	`./d2c-output`	Output directory
`--review`	—	Enter REVIEW mode (accepts 2 images)
`--fix`	—	Enter FIX mode (accepts feedback text)
`--review-file`	—	Path to review JSON for FIX mode