Documentation

Getting started

Sign up, then describe the screen you want in plain English on the home page — for example, "a booking page for a yoga studio." FlowGen plans the layout, picks a theme and writes a working Next.js and Tailwind screen, which opens in the builder canvas.

For a walkthrough with real captures of each step, see How it works.

Building screens

• Describe it plainly. Name the business, the audience and what the page must do. Name colors, fonts or a theme if you have a preference — FlowGen follows them.
• Brand it. Add your logo, colors and fonts with a Brand Kit, or pull them from your existing site.
• Refine it. Ask for changes in the builder, switch themes, or add more screens to the same project.
• Preview it. Check desktop, tablet and phone sizes before you export.

Exporting your project

Exporting is a Pro feature. The export buttons sit in the builder's dock:

• Export project — download the complete Next.js project to run or host anywhere.
• Export to GitHub — create a new repository in your GitHub account containing the project.
• Deploy to Vercel — publish the project to your Vercel account and get a live link, with or without GitHub.

The exported code is yours. Projects that include licensed curated images are pushed to a private repository automatically; everything else is public unless you change it on GitHub.

Connect GitHub

1. In the builder, click Export to GitHub.
2. Click Connect GitHub. A GitHub window opens.
3. Review the request and click Authorize. The window closes and FlowGen shows GitHub as connected.
4. Enter a repository name and click Push to GitHub.

FlowGen asks for repository access because it creates the new repository and, for projects with licensed images, needs to make it private. It only acts when you click Push.

If your browser blocks the window, allow pop-ups for flowgen.design and click Connect again.

Deploy to Vercel

1. In the builder, click Deploy to Vercel (or deploy from the GitHub export window after pushing).
2. Click Connect Vercel. A Vercel window opens.
3. Choose the personal account or team to deploy into and approve the FlowGen integration.
4. Pick a project name and click Deploy to Vercel. The build usually takes one to three minutes, and FlowGen shows the live link when it finishes.

The FlowGen integration uses these Vercel permissions:

• Projects — create the project for your design and warn you before deploying over a project with the same name.
• Deployments — upload your project's files, start a production deployment and report build status.
• Integration configuration — remove the integration when you click Disconnect.

Deploying from a GitHub export links the Vercel project to that repository, so later pushes redeploy automatically. Your Vercel account must be connected to GitHub for that option.

Disconnecting an account

Open either export window and click Disconnect next to the connected account. FlowGen deletes its stored credential and revokes its access — the GitHub authorization is withdrawn and the Vercel integration is uninstalled.

You can also revoke access yourself at any time: on GitHub under Settings → Applications → Authorized OAuth Apps, and on Vercel under your account's Integrations page. If you connected earlier by pasting a personal token, revoke that token on GitHub or Vercel as well.

Plans and limits

The free plan lets you generate and preview screens with a monthly generation limit. Pro raises the limits and unlocks exporting, GitHub and Vercel. Your current usage is shown in the builder. Billing terms are in the Terms of Service.