Build Pages with AI

Overview

StretchPages includes AI assistance powered by StretchGPT. You can describe the page you want in plain language and get a real, editable page back; generate a single section; restyle a selected element by describing the change; and clean up imported designs. The AI produces structured page content that lands directly on your canvas, ready to refine.

What the AI can do

• Generate a full page from a prompt — describe the page and get a complete layout.
• Generate a section from a prompt — add a described section at a chosen spot.
• Edit the selected element — describe a change and the AI restyles or rewrites that element.
• Repair an import — after importing a design, use AI to fix parts that didn't convert cleanly.

Everything the AI creates is normal StretchPages content — you can edit, restyle, and rearrange it exactly like anything you built by hand.

Generate a full page

1. Open the AI action to generate a page.
2. Write a clear prompt describing the page — its purpose, audience, sections, and tone. For example: "A landing page for a productivity app called PulseFit: hero with a signup button, three feature highlights, a testimonial, pricing, and a footer. Friendly, modern tone."
3. Run it. The AI returns a complete page that opens on your canvas.
4. Refine it — rewrite copy, apply your brand globals, and adjust layout.

Generate a section

1. Place your cursor / selection where you want the new section.
2. Open the AI action to generate a section and describe it — for example, "A three-column pricing section with Starter, Pro, and Team plans and a highlighted Pro plan."
3. The AI inserts the section at your chosen point.

Restyle or edit the selected element

1. Select an element on the canvas.
2. Open the AI action to edit the selected element.
3. Describe the change — for example, "Make this button larger, rounded, and use the brand accent color," or "Rewrite this headline to be punchier."
4. The AI applies the change to that element. Review and keep or adjust.

Repair an import

When you import a design (HTML, React, CSS, tokens, or a ZIP), some parts may not convert perfectly. The AI can help:

1. After importing, review the import report of what was recognized.
2. Run the repair import AI action, describing what should be fixed.
3. The AI proposes corrections to bring the imported design closer to your intent.

See Import designs and export to code for the import basics.

Example: from idea to draft in minutes

You need a page for a webinar by tomorrow. You prompt the AI: "Landing page for a free 45-minute webinar on email marketing; hero with date and a register button, agenda with four topics, speaker bio, FAQ accordion, and a footer." The AI generates the full page. You apply your brand colors from Globals, point the register button at your form, tweak the agenda wording, and publish. What would have been an afternoon becomes twenty minutes.

Tips

• Be specific. Name the sections, the audience, and the tone. Precise prompts produce better structure.
• Generate, then brand. Let AI handle structure, then apply your globals so the result matches your identity.
• Use section generation to fill gaps in a page you've already started, rather than regenerating the whole thing.
• Edit elements conversationally. Selecting an element and describing a tweak is often faster than adjusting many style fields.
• Treat AI output as a draft — always review copy and links before publishing.

Troubleshooting

The AI result isn't what I described. Rerun with a more specific prompt — list the exact sections and details you want. You can also generate section-by-section for more control.

An AI edit changed too much. Use undo to revert, then describe a narrower change. The edit action targets the selected element, so make sure the right element is selected.

AI generation didn't complete. Try again with a slightly shorter, clearer prompt. If it keeps failing, continue building manually and report the issue via support.

FAQ

Is AI output editable? Yes — it's standard StretchPages content you can freely edit, restyle, and rearrange.

Can AI use my brand automatically? Generate the structure with AI, then apply your design globals so colors and fonts match. Describe brand details in your prompt to steer the result closer up front.