01
Start with a conversation.
Describe your business, your style, and what you need. Your AI agent builds the pages and sections to get you moving.
Your next website.One conversation away.
Turn your idea into a website you can actually make your own.
Build with AI. Refine visually. Bring your content to life.
Try an idea
A little less imagining. A lot more making. THE WORKSPACE BEHIND YOUR NEXT BIG IDEA
Forma Studio Home / Design Publish
forma®Work Studio Contact ↗
INDEPENDENT DESIGN STUDIOGood ideas.
Good ideas.
Unmistakable
presence.
We turn ambitious brands into digital experiences that feel a little different.
Explore our work Hero section YouSTRATEGYDESIGNDEVELOPMENT© FORMA 2026
Example project Designed to keep you in control
From the first prompt to the final pixel.AI generation · Visual editing · CMS · Publishing
LESS HANDOFF. MORE MOMENTUM.
Everything your ideaneeds to become a website.
02
Make every detail yours.
Select anything on the canvas. Fine-tune layouts, typography, and responsive styles—or tell the agent what to change.
03
Give it a life online.
Connect your content, preview your pages, and publish. Keep improving your site in the same workspace.
YOUR SITE AGENT
Describe the change.Watch it happen.
The agent doesn’t hand you a first draft and walk away. It stays with your project — building sections, reworking layouts, rewriting copy — while you follow along on the canvas.
Website agentClaude
Add a pricing section with three plans and make the middle one stand out.
Read the site’s design tokensComposed section: PricingApplied heading and spacing scaleHighlighted the Pro plan
Make the headline bolder…
- Builds pages from plain language
- Works inside your design tokens
- Edits what exists — never starts over
VISUAL BUILDER
Click anything.Change everything.
Select any element on the canvas and shape it directly — layout, spacing, type, colour and responsive behaviour, with real controls.
- Layers tree and breadcrumbs
- Desktop, tablet and mobile breakpoints
- Live preview while you drag a value
Navigator
StyleSize56pxLine1.05Track−1.7pxWeight500
CLASS MANAGEMENT
Real classes.Real stylesheets.
- Name it once.A class carries the styling. Every element wearing it inherits the change.
- Override per breakpoint.Tablet only needs the values that differ — the rest keeps inheriting from Base.
- Keep the sheet honest.Rules nothing uses any more are findable, and clearable, in one place.
Classes3 in selector
Selection
Add class
.hero__titleall widthsfont-size3.5remline-height1.05letter-spacing-1.7px
2 unused rules Clear unused
COMPONENTS
Build it once.Reuse it everywhere.
Turn any section into a component and place it across your site. Update the component and every instance follows.
Explore components Pricing cardComponent
StarterProinstanceTeam
Version historyv3Raised the card radiuscurrentjust nowv2Added the badge slot2 days agov1First extractionlast week
3 instances · 2 pagesDetach instance
Extract
Promote a finished section to a component without rebuilding it.
Version
Roll back to any earlier version when a change doesn’t land.
Detach
Break one instance loose when it genuinely needs to differ.
LIQUID TEMPLATE ENGINE
Not ablack box.Your source.
Every section is real Liquid with its own schema — markup, styles and settings in one file.
- Schema-driven settings you can expose
- Edit HTML, CSS and Liquid directly
- Take the source with you
1
<section class="hero">2 <h1 class="hero__title">3 {{ section.settings.title }}4 </h1>5</section>6{% schema %}8{9 "name": "Hero",10 "settings": [11 { "id": "title", "type": "text" }12 ]13}14{% endschema %}MEET YOUR CMS AGENT
A beautiful site.With somethingto say.
Your website doesn’t stop at the design. Give your articles, projects, and products a home—with an agent that helps you structure and manage it all.
- Collections and fields that fit your content
- Dynamic pages connected to your data
- Content you can update as you grow
“Create a journal for our studio.
Give every story its own page.”
Journal collection4 fields
TTitle
▧Cover image
☷Category
¶Article content
COLLECTION → PAGE TEMPLATEGood stories deserve
a great place to live.Journal / The creative process
a great place to live.Journal / The creative process
FORMS
Collect what matters.No backend required.
Add a contact form, a waitlist or a lead capture and start receiving real submissions the moment you publish.
- Forms on any page or section
- Submissions stored with the website
- Review them without leaving the builder
Contact form12 new
NameEmailTell us about your projectSend enquiry
SubmissionsINTERACTIONS
Motion that earnsits place.
Entrance animations, hover states and scroll effects from a visual timeline. The row below is running the same kind of interaction you’d build.
Interaction — Hero
0s0.2s0.4s0.6sEyebrowHeadingParagraphButton
TriggerscrollEasingoutQuadDuration600ms
fade + rise, staggeredReduced motion respected
- Load, click, hover and scroll triggers
- Per-element timing and easing
- Honours reduced-motion preferences
MCP SERVER
Bring your own agent.Keep your website.
Connect an MCP-compatible client and let the agent you already use build, edit and publish your HTFlow site — without moving your project somewhere else.
MCP connectionshtflow-mcp
Claude CodeconnectedCursorconnectedYour own agentready
forma-studio
build_pagerender_sectioncms_create_itempublish
- Works with MCP-compatible clients
- Reads and writes the real project
- Plans once, then builds in batches
PUBLISH & OWN IT
Go live on yourown domain.
Preview, publish, and point your own domain at it. Or take the work elsewhere — export the site, or move your pages into Webflow.
- Publish with a preview you can check first
- Custom domains, certificates handled for you
- Export your build, or hand off to Webflow
forma.studio SSL active
Custom domainConnectedLast publish2 minutes agoPages live7
Export site To Webflow
THE REST OF THE PLATFORM
The parts you only noticewhen they’re missing.
Design tokens
One shared set of colours and type your whole site inherits, so a change lands everywhere at once.
Asset library
Upload once, reuse anywhere, served from edge storage.
Version history
Section and component history, so an experiment is never a one-way door.
Scheduled publishing
Queue CMS items to go live on their own schedule.
Webflow mode
Constrain what gets authored to what Webflow can actually import.
Site settings
Per-site config, custom code, and the metadata search engines read.
What can I build with HTFlow?
Create landing pages, business websites, portfolios, and sites with structured content. Start with a description, then refine your pages with the AI agent, visual controls, or source code.
How does the CMS agent help?
Work with the agent to create collections and fields, manage content, and connect it to your pages. Your articles, projects, and other content live in a CMS you can keep editing as your site grows.
Can I edit what the AI builds?
Yes. Select elements on the canvas to adjust layout, typography, spacing, and styles. You can also ask the agent for changes or edit HTML, CSS, and Liquid directly.
Can I use HTFlow with Webflow or my coding agent?
Yes. HTFlow includes Webflow export and an MCP server for compatible AI clients. Build in HTFlow, or connect your preferred agent to work with your website. Visit our MCP guide for setup instructions.
How do I publish my website?
Preview your site in the builder, then use its publishing flow. You can also export your work. See the pricing page for current plan details and available publishing options.
THE NEXT THING YOU MAKE STARTS HERE
Less blank canvas.More “look what I made.”
Let’s build your websiteStart with an idea. Make it your own.