Working React projects
Every result is a structured Vite, React, and TypeScript project—not a flattened image or proprietary page format.
AI website builder for real code
From prompt to a website you can keep.
FrameHatch turns plain-language ideas into working React websites—with a live preview, conversational editing, and the complete codebase ready to export.
- Vite + React + TypeScript
- No local setup
- Downloadable source code
01 / The studio
Describe it. Watch it take shape.
The agent plans the project, writes each file, and updates your browser preview while it works.
Build conversation
Create a refined landing page for a sustainable homeware brand. Editorial type, warm neutrals, and a clear shop call-to-action.
I’ll establish the visual system, build the page structure, and connect the responsive states.
- created /package.json
- wrote /src/App.tsx
- wrote /src/components/Hero.tsx
- styling /src/index.css
- final responsive pass
Live preview
STILL / HOMEShop the edit
OBJECTS FOR SLOWER LIVING
Useful things, made to stay.
A considered collection of everyday objects crafted from honest materials by independent makers.
Explore the collection →TableQuiet rituals, daily
TextileNatural fibres only
ObjectMade with purpose
editable code · not a screenshot
02 / What you get
A website builder with an escape hatch.
Live browser preview
See the site run as files change. No local environment, build command, or deployment step required.
Conversational refinement
Ask for a tighter layout, a warmer palette, or a new pricing section. The agent edits the existing project in place.
Complete code export
Download the whole codebase as a ZIP, run it locally, commit it to Git, or hand it to your engineering team.
Briefs become builds
Upload a PDF, DOCX, Markdown, or text brief. FrameHatch reads the requirements and turns them into a working page.
Work that resumes
Refresh, reconnect, or switch devices while a project is being generated. Your files and progress remain available.
03 / Selected builds
One prompt. Many directions.
Start from a blank brief or use a finished example as your foundation. Every example becomes a live, editable project in the studio.
Landing pages, portfolios, content sites, dashboards, and product interfaces—all built with the same portable React foundation.
BUILD 01
Specialty coffee
Warm editorial commerce landing page
BUILD 02
Designer portfolio
Minimal showcase with project stories
BUILD 03
SaaS pricing
Conversion page with interactive tiers
BUILD 04
Project management
Dark workspace for product teams
04 / How it works
A shorter path from idea to interface.
Describe the outcome
Write a prompt or upload your brief. Include the audience, sections, content, brand cues, and interactions you care about.
Watch the build
The agent creates the project file by file while the live preview turns your requirements into a working interface.
Refine and export
Keep shaping the design through chat, then download the production-ready project and make it entirely yours.
Built for ownership
Your idea should not end in a locked canvas.
FrameHatch gives non-technical makers a fast start and gives developers a familiar place to continue.
✓
Readable project structureComponents and styles live in ordinary source files.
✓
Portable by defaultDownload the ZIP and run it wherever Node.js runs.
✓
Designed through conversationIterate on the project without rebuilding from scratch.
✓
Transparent progressSee files change while the agent works.
05 / Questions
The useful details.
FrameHatch is built for founders, designers, marketers, and developers who want to move from a written idea to editable web code.
What does FrameHatch generate?
A complete Vite, React, and TypeScript project with editable files. The result is a working website, not a screenshot or a locked template.
Can I export the code?
Yes. Download the complete project as a ZIP and continue in your own editor, repository, and deployment workflow.
Do I need to know how to code?
No. Plain-language prompts and conversational edits are enough to create and refine a site. Developers can take over the exported code whenever they want.
Can FrameHatch work from a product brief?
Yes. You can attach Markdown, text, PDF, and DOCX documents. The document is parsed in your browser and used as context for the build.
How does pricing work?
Usage is metered based on the AI work required for each generation. New accounts receive trial credit so you can test the workflow before adding more.
Ready when you are
Start building ↗