Setup and context: AI-Powered Design Workflows
"I want to build a landing page but don't know how to code." "I don't have time to learn a complex design tool." If this sounds familiar, AI-assisted design workflows can change everything.
By combining Gemini's Canvas mode (with Thinking enabled) and Figma, you can produce a polished, functional landing page in under an hour — once your assets are ready. This guide walks through a real-world LP creation workflow, using a cherry blossom latte promotion as the example, so you can reproduce the same process for your own projects.
Tools in This Workflow
Here's what you'll need:
- Gemini (Canvas mode + Thinking mode): Primary tool for generating HTML/CSS code
- ChatGPT (image generation): For generating product photos or mock-ups if needed
- html.to.design: A Figma plugin that converts HTML into editable Figma layers
- Figma: Final design refinement and polish
All of these have free tiers, but enabling Thinking mode in Gemini Advanced (included in Google One AI Premium) significantly improves code quality and consistency.
Step 1: Gather Your Assets First
Before prompting Gemini, collect the following. Having concrete assets in hand lets you include specifics in your prompt, which dramatically improves output quality.
Asset checklist:
- Copywriting: headline, 3 key features, CTA text
- Product photo or mock-up (generate with ChatGPT or Midjourney if needed)
- Brand colors (hex codes)
- Logo (PNG with transparent background preferred)
If assets are missing: Ask ChatGPT to generate product imagery, or have Gemini itself write your copy first ("Write a landing page copy for a cherry blossom latte targeting women in their 20s–30s").
Step 2: Open Gemini's Canvas Mode
- Go to gemini.google.com and sign in
- Click the Canvas panel on the right side to enable Canvas mode
- In settings, turn on "Enable Thinking mode"
Why Thinking mode matters: In standard mode, Gemini answers immediately. In Thinking mode, it reasons through the structure before generating code — resulting in better layout coherence and fewer structural issues. The visual difference is noticeable, especially for multi-section pages.
Step 3: Write a Detailed Prompt
Your prompt quality is the biggest single factor in landing page quality. Use this template as a starting point:
Create a landing page for a Cherry Blossom Milk Latte product using HTML and CSS.
[Product Info]
Product name: Cherry Blossom Milk Latte
Headline: Spring in every sip.
Key features:
1. Made with domestic cherry blossom petal syrup
2. Rich, creamy finish using Hokkaido fresh cream
3. Caffeine-free — perfect for daily enjoyment
[Design Requirements]
- Main color: #F4A7B9 (cherry pink), Accent: #FFFFFF, Text: #333333
- Target: Women aged 20–35, café enthusiasts, Instagram-conscious
- Style: Clean, elegant, spring-inspired
- Layout: Mobile-first (smartphone-optimized)
[Page Sections]
1. Hero section (headline + CTA button)
2. 3 key features (icon cards)
3. Product detail section (2-column layout)
4. Customer reviews (2–3 testimonials)
5. Purchase CTA
[Technical Requirements]
- Pure HTML5 + CSS3 (no external libraries)
- Google Fonts allowed (Noto Sans or similar recommended)
- Animations: subtle only (fade-in on scroll)
- Use placeholder images where product photos aren't available
Prompt Design Tips
Use specific values, not vague descriptors. "Pretty pink" → #F4A7B9. Concrete hex codes and measurements prevent ambiguity.
Define your audience. Age, gender, lifestyle — these clues help Gemini calibrate the tone, font choices, and visual style.
Include your section structure upfront. This reduces the chance of Gemini missing key content areas or inventing sections you don't want.
Step 4: Iterate in Canvas Mode
In Canvas mode, you see the rendered preview alongside the code in real time. Once Gemini generates the initial version, review it and send targeted revision instructions:
The headline in the hero section is too small — increase it to 2.5rem.
Make the CTA button more rounded with border-radius: 30px.
Add a subtle gradient background to the hero section going from #F4A7B9 to #FFF0F5.
Keep revisions specific: name the section, describe what to change, and state the desired value. Vague requests like "make it look better" tend to produce unpredictable changes.
Step 5: Import into Figma with html.to.design
When you're satisfied with the HTML output, bring it into Figma for final polish.
How to Use html.to.design
- Open Figma and search for "html.to.design" in the Plugin store
- Install and launch the plugin
- Paste your Gemini-generated HTML code (or enter a URL if you've hosted it)
- Click "Import" — the HTML is automatically converted into Figma frames and editable layers
The converted design is fully editable in Figma, with layers named by their HTML elements.
Final Adjustments in Figma
After import, focus on these areas:
Line height and letter spacing. Japanese fonts (and some Google Fonts) may render slightly differently in Figma than in a browser. Select text layers and adjust manually if needed.
Image replacement. Swap out placeholder images for your actual product photos by dragging them directly onto the placeholder layers.
Alignment and spacing. Auto-conversion can sometimes shift elements slightly. Use Figma's alignment tools to realign buttons, cards, and icons.
Consistent spacing. Standardize section padding and margins. Using multiples of 24px or 32px gives your layout a professional, intentional feel.
What You Can Accomplish in 1 Hour
Here's a realistic time breakdown:
- Asset prep + copywriting: 15 minutes
- Gemini code generation + revisions: 20 minutes
- html.to.design import: 5 minutes
- Figma final adjustments: 20 minutes
- Total: ~1 hour
As you get familiar with the workflow, it gets faster. And if you're publishing the page directly, you can skip Figma entirely and export the HTML straight from Gemini.
The Skill That Separates Good from Great
The most important insight from this workflow: AI output starts at about 80% quality. The remaining 20% — font readability, button accessibility, information hierarchy — requires human judgment.
The designers and developers who will thrive going forward aren't necessarily those who can use AI the most, but those who can refine what AI produces. Knowing where Gemini's output falls short, and how to correct it, is the skill that creates the gap.
Summary
The Gemini + Figma LP creation workflow:
- Gather your assets (copy, images, brand colors) before starting
- Enable Canvas mode and Thinking mode in Gemini
- Write a detailed prompt with target audience, design requirements, and section structure
- Iterate in real time using Canvas mode
- Import into Figma with html.to.design
- Finalize spacing, images, and alignment in Figma
No coding skills required. This workflow makes professional-grade LP creation accessible to anyone willing to spend an hour with AI. Gemini's Canvas mode is still underused by most — now is a great time to get ahead of the curve.
For advanced techniques — bulk-generating A/B test variants, automating LP creation with the Gemini API, and building reusable component libraries with AI — see the premium guide.