👁️

Code Gen · Site Review

What the Code Gen UI looks like — layout, sections, and a live preview of the generator page.

👁️What the Code Gen UI looks like

A quick review of the Code Gen page layout and sections, plus a live preview below.

Inspired by tools like Open Lovable— one input, clear options, instant result.

01
Sub-navigation — Generate (main flow) and Site Review (this page) so you can switch between building and reviewing the Code Gen UI.
02
Generate a project card — One prompt input, framework pills (React, Next.js, Streamlit, Node, Python, Vue, Svelte), and a primary “Generate project” button — like a single place to describe and go.
03
Generated project result — After generation: “How to run” instructions (e.g. Vercel Sandbox), a file list (click to select), and a code viewer with “Copy file.” Split panel: files left, editor right.