Prefer the built-in image generation tool when it is available in the current agent/runtime. It is usually simpler, avoids provider drift, and produced landing page mockups at the same quality level as ZenMux in our comparison.
Use scripts/ask_draw.sh only when built-in image generation is unavailable, when the user explicitly asks to use ZenMux, or when you need scripted local output paths. The script uses ZenMux. Default model: openai/gpt-image-2.
Onboarding: Ask the user these questions before starting
If the user only says something vague like "design a page," first guide them with the questions below, and only start once you have collected enough information. When the user has already given a specific page, style, or reference image, you can proceed directly; do not keep asking follow-up questions just for the sake of process.
Must-ask (missing any one of these will affect quality)
1. Which page do you want to design? What is the core function of this page? You cannot guess the function from the page name alone—if the business understanding is wrong, the AI will draw something completely wrong.
2. Do you have existing App screenshots or design mockups you can upload? With screenshots → you can maintain visual consistency of the navigation/sidebar. Without them, generation is still possible, but the results will differ each time.
3. If there are screenshots, are there any areas in them that you do not want the AI to change (such as the sidebar or top navigation)? This determines which reference image strategy to use (see below).
Optional questions (depending on the situation)
What style do you prefer? For example: analytical tool, warm brand feel, minimalist, game-like… Do you need to generate multiple screens that stay consistent?
Based on the user's answers, choose a reference image strategy
Core principle: whatever content is in the reference image, the AI will tend to imitate—including the parts you do not want it to imitate.
| User situation | Strategy |
|---|---|
| No screenshots, pure creative exploration | Do not upload a reference image; generate completely freely |
| Has screenshots, but only wants to lock the navigation/sidebar ⭐ | Have the user provide or create aclean border image(paint the content area a solid color), and upload only the border |
| Has screenshots, needs precise overall style alignment | Upload the full screenshot, but tell the user that creativity in the content area will be affected |
How to make a clean border image: Take a screenshot of the App when it first opens with a blank content area, or use any tool to cover the content area with a solid color.
If you need to generate multiple consistent screens:You must execute serially(start the next one only after one is complete); do not run them in parallel.
Material strategy for converting design mockups to HTML
When the user wants to convert generated images, screenshots, or design mockups into HTML/CSS, first read references/html-reconstruction.md. Core principle: page structure should be coded first; difficult-to-replicate visual elements such as logos, brand symbols, complex illustrations, 3D/glass textures, and semi-transparent gradients should be turned into assets. Cropped images serve only as image-to-image references and positioning basis; the complex assets ultimately placed into the HTML must be redrawn with image-to-image, then edge-cropped, cut out, and edge-cleaned.
Transparent asset strategy: vendor logos, dark wordmarks, and small dark icons should preferably be generated as large-size pure white background assets, then converted to alpha with a conservative white background; complex color illustrations, hero decorations, and product images should preferably use green screen or true transparent output. Do not cram small logos and large illustrations onto the same asset board.
Build the prompt
Two proven effective approaches
Analogy method (best creative effect) Say "what this tool is like," so the AI borrows the design language of that reference, rather than describing the layout.
像乐谱一样解码爆款视频——Think Notion's calm focus meets a music producer's session notes.
Checklist method (most stable, suitable for pages that need accurate implementation) List what information is on the page, without saying how to arrange it, and let the AI decide the layout itself.
页面包含：用户名和头像、近30天数据趋势图、活跃 Campaign 列表（名称/状态/触达数）、快捷操作入口。
Quality rules
- Do not write layout specifications(pixels, number of columns, padding) — the more specific the description, the more the AI seems to be executing instructions rather than doing design, and the result is actually worse
- Provide real example data, do not use placeholder —
"2.3M views, 180K saves"is"显示播放量"ten times more effective than - Use HEX for colors, not HSL —
#f9f5f0ishsl(28 25% 97%)more accurate for the model than - If a reference image is passed, clearly state at the beginning of the prompt which areas need to remain unchanged
- Keep the prompt within 800 characters — overly long prompts will cause server disconnect
Execution command
Priority:
- When a built-in image generation tool is available, prioritize using the built-in image generation tool directly.
- Use it again when the user explicitly requests ZenMux, or when scripted batch generation or a fixed local output path is needed,
scripts/ask_draw.sh。 - When the built-in tool and ZenMux are close in quality, choose the built-in tool to reduce additional provider dependencies.
# 无参考图
scripts/ask_draw.sh --type wide --name "screen-name" --prompt "..."
# 传参考图（--frame 自动作为第一个参考）
scripts/ask_draw.sh \
--frame /path/to/reference.png \
--type wide \
--name "screen-name" \
--prompt "..."
Multiple screens: must be executed serially (finish one before starting the next), cannot be parallel. Occasional disconnect is normal, just retry.
Options
| Flag | Description | Default |
|---|---|---|
--type |
wide(16:9) / square(1:1) / portrait(3:4) / classic(4:3) |
wide |
--prompt |
Prompt | Required |
--frame |
Reference image path | — |
--ref |
Additional reference images (repeatable) | — |
--name |
Output file name | auto |
-o |
Custom output path | ~/.local/share/draw/outputs/YYYY-MM-DD/ |
Successful output:output_path=<path>
API Key lookup order:ZENMUX_API_KEY environment variable → .env.local(search upward from the current directory) → ~/.config/see/api_key