Build your own Webflow.

# Build an original app inspired by Webflow

You are an experienced product designer and full-stack engineer. Build a working, polished MVP from the brief below. Implement the core journeys end to end; a static mockup is not sufficient. Inspect the current environment, make sensible implementation decisions, and get started. Ask a question only if a missing answer genuinely blocks implementation.

Starting platform: Web. Explicit customized Product & audience and Tech stack requirements take precedence over this starting target.

## Product & audience
Build an original visual website builder called Pageframe, inspired by Webflow. A solo creator assembles a small site from supported elements, styles it at defined breakpoints, binds a simple content collection, and exports working static HTML/CSS. Keep the editor bounded rather than trying to reproduce a complete browser design environment.

## Design
Create an original workspace with a page tree, element navigator, isolated canvas preview, and a style inspector. Show the selected element and active breakpoint clearly. Provide keyboard-based element placement, readable field labels, and a preview that accurately matches exported pages.

## Features
1. Page and element model: create pages with stable paths and a typed tree of sections, containers, text, images, links, buttons, and grids. Move/nest elements only where the schema permits; prevent cycles and duplicate IDs.

2. Responsive styling: edit spacing, typography, colors, alignment, and layout through validated controls. Define explicit base/tablet/mobile inheritance and reusable classes so one breakpoint does not silently overwrite another.

3. Small CMS: define one or two collections with text/image/URL fields, edit records, and bind a repeatable list or detail template. Validate slugs and missing required fields before publishing.

4. Editing history: support undo/redo, autosave with conflict detection, duplicate page/element, and bounded original assets. Keep editing controls outside the sandboxed preview document.

5. Publishing and export: validate internal links, generate static routes and assets from the same model as preview, and download an HTML/CSS ZIP with a working index. Support an optional authenticated publish target only when configured.

## Tech stack
Use TypeScript, a schema-driven element/style model, an isolated iframe canvas, and IndexedDB for a personal MVP. Implement one deterministic static renderer shared by preview and export. Generate sanitized HTML/CSS and safe ZIP paths; do not execute arbitrary user JavaScript inside the editor.

## Data & behavior
Project; Page {slug, rootNodeId}; Node {type, parentId, position, props, classIds}; StyleClass {base, tablet, mobile}; Asset {blobId, mimeType}; Collection; CollectionField; CollectionItem; Binding; ProjectRevision. Persist the model rather than serialized editor DOM.

Acceptance checks and scope:
Test nested movement, undo after deletion, breakpoint inheritance, missing CMS records, duplicate slugs, asset export, and opening the ZIP locally with working links. Compare export to preview at three widths. Exclude arbitrary code embeds, commerce, simultaneous collaboration, a general plugin runtime, and claims of complete Webflow compatibility.

## Originality and assets
The named product is a reference for general workflows only. Use an original product name, visual identity, wording, layout, and assets. Do not copy proprietary code, branded logos, distinctive screens, private APIs, paid templates, or protected media. Use original or appropriately licensed sample data and assets. Build from this brief rather than scraping the reference service. Do not imply affiliation with the referenced company.

## Implementation quality
- Make every visible control work, with clear loading, success, empty, validation, and failure states. Remove controls for unimplemented features.
- Support the target platform and responsive or resizable layouts where appropriate. Use platform-appropriate accessibility semantics, labels, keyboard operation, visible focus, sufficient contrast, and reduced-motion preferences. Provide alternatives for drag-only interactions.
- Validate inputs at the relevant boundary. Treat imported or user-generated content as untrusted; render it safely. Confirm destructive actions or offer undo.
- Keep state changes reliable across navigation and reloads. Never silently lose edits. Handle persistence and network errors with an actionable message.
- Keep the scope realistic. Prioritize the complete primary journey. If a custom Features section differs from the baseline, update the data model, design, and acceptance checks to match it; explicit custom requirements take precedence over baseline assumptions.
- Provide realistic original sample content and a useful empty state. Keep sample data clearly separate from user-created data.

## Delivery and verification
1. Inspect the repository and outline the implementation in a few sentences.
2. Implement the app and connect its actual data flow. Continue until the primary journey works.
3. Run appropriate checks and test the acceptance cases above on the target platform. Verify responsive layouts and keyboard navigation when browser tools are available. For native projects, build with the available SDK and test an emulator or device when possible; report any missing native verification honestly. For games, verify the rules and gameplay loop, not only the menus.
4. Fix observed failures, then provide the runnable result, setup/run instructions, a brief explanation of what is implemented, and any specific configuration or verification limits.

This is a focused MVP. Do not add billing, AI services, or unrelated features unless explicitly requested in the brief. Start building now.