AI Design Generation in Windframe
Step-by-step guide: write prompts, choose styles and colors, generate, refine with follow-up prompts, and add to canvas.
Use this page as a practical walkthrough for generating and refining designs with Windframe AI.
Before you begin
- Open your project in the Windframe editor.
Step 1: Open the AI input bar
Click the AI input at the top of the editor.
After you click it, the AI generation panel opens.
Type the prompt for the section you want to generate in the input field.
Example prompt:
Landing page hero for a B2B SaaS with headline, short subtext, 2 CTAs, and trust logos.
Step 2: Choose a style and color direction
Pick your visual direction before generating.
In Windframe, styles are design directions. They control how your result looks: typography feel, spacing density, button/card treatment, and overall tone.
Style chips: Choose a style (for example Linear, Enterprise, Notion, ShadCN, Pandora, Autumn).Preview strip: See what that style looks like before you generate.Color swatches: Set the accent/color direction for the result.
If you keep the same prompt and switch styles, your generated layout style will change.
If you want style references, use:
Step 3: Generate your design
Click the generate arrow button in the AI panel.
After you click it, Windframe generates designs from your prompt and shows them on the left side as design thumbnails.
From there, you can either click Re-Generate for more options or continue refining with follow-up prompts.
Step 4: Refine with follow-up prompts
Use the follow-up input to request targeted edits to the generated result.
Examples:
Make the heading smaller and increase spacing above buttons.Keep this layout but switch to a cleaner enterprise tone.Add a 3-card testimonial row below this hero.
Step 5: Select designs and add to canvas
After refining, select one or more designs using the checkboxes in the left thumbnail list.
Once you start selecting designs, the Add to Canvas button appears at the bottom.
Click Add to Canvas to insert selected designs into your page for visual editing.
From canvas, you can continue editing and then export to your framework.
Continue here:
Step 6: Reuse history anytime
You can always return to AI history to reopen older generations, continue refining, or add previous designs to canvas.
Related workflows
Screenshot to Code
If you already have a screenshot/mockup and want to turn it into editable UI, use:
AI Chat History
For a focused history walkthrough, use: