What this workflow creates
Transform a UI sketch into a polished interface mockup. One image per request.
- Who it’s for
- Product designer, developer
- What it does
- Supplementary visual styles, components and device scenes
- Where to use it
- Product reviews, demonstrations
One image per request.
What you need
- Wireframes or screenshots of existing interfacesRequired · 1 image
- Preserve navigation, structure, components, and primary entry points
- Product types and immutable information architectureRequired · 1 item
- Limit changes to visual refinement without changing product structure
Provide every required input. Add optional inputs only when useful, and mark conditional inputs as applicable only when they apply to this request.
How to use this workflow
Open the generation form
Select “Use this workflow” to see the required inputs. You’ll need to sign in before generating.
Add the required inputs
Prepare: Wireframe or screenshot of existing interface + product type and immutable information architecture → Supplementary visual style, components and device scenarios → Current single UI concept map. Complete every required field, add optional inputs only when useful, and mark each conditional input as applicable or not applicable.
Review text and output settings
Check “Product types and immutable information architecture” for accuracy, then choose the aspect ratio, resolution, and quality that fit this use case. The generation form shows the available options.
Generate and review
Select “Generate image,” then review the result and open the full-size image. Check it against the detailed requirements below. One image per request.
Do I need to write a prompt?
No full prompt needed—just complete the required text fields.
Complete “Product types and immutable information architecture” to describe what this request should contain or create. You do not need to write generation instructions. Use the form fields to provide the images, exact copy, data, or description requested by this workflow.
Detailed result requirements
Wireframe or screenshot of existing interface + product type and immutable information architecture → Supplementary visual style, components and device scenarios → Current single UI concept map
Interface purpose, platform, page type, content, and frame of reference.
No universal public standard is available. Check the requirements of the platform or service you will use.
Set the output canvas from the selected platform placement or production template, not from a reference image. Choose the option that matches this request: UI concept working canvas — 4:3 (recommended). Use a different ratio only when a verified placement or production template requires it. If the platform does not require a fixed aspect ratio, use 4:3 as the recommended working canvas for UI concept. Compose the subject with appropriate breathing room. Create one aspect-ratio-specific deliverable per request; generate each additional placement as a separate output. Recompose for the selected ratio while preserving the complete subject, all text, and every required safe area. Never stretch the subject or treat cropping important content as adaptation.
No universal public standard is available. Check the requirements of the platform or service you will use.
Color, font, spacing and rounded corners.
No universal public standard is available. Check the requirements of the platform or service you will use.
No universal public standard is available. Check the requirements of the platform or service you will use.
No universal public standard is available. Check the requirements of the platform or service you will use.
No universal public standard is available. Check the requirements of the platform or service you will use.
No universal public standard is available. Check the requirements of the platform or service you will use.
More suitable for common website/mobile terminal models; currently First Draft cannot use its own design system, and special-shaped graphic design is prone to failure.
Official and platform requirements
No universal public standard is available. Check the requirements of the platform or service you will use.
FAQ
What can I create with this workflow?
Transform a UI sketch into a polished interface mockup. One image per request.
Do I need to write a prompt?
Complete “Product types and immutable information architecture” to describe what this request should contain or create. You do not need to write generation instructions. Use the form fields to provide the images, exact copy, data, or description requested by this workflow.
What do I need to upload?
“Wireframes or screenshots of existing interfaces”: 1 image; required. JPG, PNG, and WebP are supported, up to 10 MB per image.
What does one generation produce?
One image per request.
Common search terms
Public evidence and sources
1 directly relevant public source has been found, and 3 types of specific constraints have been extracted. The following content only restates information that appears clearly from the source; no filling in of blank fields will be made.
