AIWebApp

Edit visually without losing your code changes

A photographer’s portfolio with gallery and contact pages. Reorder sections in the Plan tab and restyle it in the Design tab.

Lena OrtizPortfolioExample — not saved until you change it

Runs on this device in under a second. Ctrl+Enter also generates.

What the planner understood

Confidence100%
  • portfolioPortfolio template
  • photographerPortfolio template
  • Lena Ortizapp name
  • contact“Contact” page
Feasibility, templates and prompt history

Feasibility

  • NATIVELight and dark theme
  • NATIVEResponsive layout

Start from a template

Picking a template keeps the name, colours and fields from your description.

Prompt history

Off by default. Prompts are only kept in this browser if you turn this on.

Sandboxed · network off · fits 772px

Theme preset

Colours and type

Adjusted per mode if needed to keep 4.5:1 contrast.

Colour mode

Contrast check

PairLightDarkBody text17.0:1 pass15.5:1 passButton text7.9:1 pass5.2:1 passLinks7.5:1 pass5.2:1 passMuted text5.5:1 pass6.7:1 pass

WCAG AA needs 4.5:1 for normal text.

Name and copy

Also used for the page title, icon monogram and web manifest.

Visual edits and code edits together

Visual changes update the plan and regenerate the affected files. If you have hand-edited a file that a visual change would overwrite, nothing happens silently: you see a diff of exactly what would change and choose to overwrite or keep your version of each conflicting file.

Undo and Redo cover both kinds of change — typing in the editor, reordering sections, switching themes — so experimenting is safe.

Sections as a tree

The Plan tab shows the component hierarchy: pages, then sections, then the app component. Drag a section to reorder it, or use the up and down buttons, which work with the keyboard and announce the new position. Add sections from the library or remove them.

Frequently asked questions

Can I click on the preview to edit text?

Not yet. Edit copy in the Design tab or directly in the HTML. In-preview editing is on the roadmap.

What if I only want to change one file?

Edit it in the Code tab. Visual changes that do not touch that file leave your edits alone.