Templates · since v1.0.0
AI website design generator
The interactive-website template builds pages that do things — scroll scenes, live data views, small tools — as plain files you can host anywhere.
Web page · Devin · swe-2-medium · 9 min
Sóng Festival — A beach festival site whose headline type pulses at 120 BPM. Schedule builder, site map, tickets.
▸ the prompt that made it▾ the prompt that made it
“Build a website for a fictional beach music festival 'Sóng' in Quy Nhơn. Hero: kinetic typography of the headliners using a variable font (weight and width animate to a 120 BPM pulse), over a bold color-block background. Sections: full lineup by day, a personal schedule builder (tap sets to add; conflicts highlighted), an illustrated site map with stages, food, first aid, and shuttle stops, ticket tiers with remaining-capacity bars, and a FAQ. Studio-bold direction: giant type, thick borders, one electric accent plus one secondary. Bilingual labels for key info. Reduced motion freezes the type in its boldest readable state.”
Why it matters
Site generators are great until the design fights back — then you're editing tokens in a panel someone else designed. Here the output is the code: an HTML file, a stylesheet, a script. Host it, hand it to a dev, or let the agent keep iterating on it; there's no export cliff.
How it works
- 1Describe the siteWhat it's for, who it's for, what it should do — a landing, a microsite, an interactive explainer.
- 2The direction sets the voiceYour design direction decides type, color, spacing and motion budget before a line is written — the agent designs inside it.
- 3Steer on the live pagePick the hero and say 'quieter', tweak the palette live, or request a variant — the page is real the whole time.
- 4Take the filesExport a ZIP or a single-file HTML. Nothing about the output is locked to 1DesignTool — it's your site.
Capabilities
- Interactive pages — scroll scenes, tools, live visualizations — not just static landings
- Real responsive output checked at device sizes on the stage
- Design-system-gated: every page conforms to the chosen direction
- Single-file HTML export for instant sharing
- This site was built with the same loop — the demos below are outputs, not mockups
Interactive website · Devin · subagent · gate PASS · clay + beauty
Ferry & Wren — A two-person kayak workshop — editorial serif, a clay hull on the shop floor, and a 'strip the hull' reveal.
▸ the prompt that made it▾ the prompt that made it
“Add the scene: a clay-material kayak hull on a workshop floor, composed with the real headline at desktop and narrow widths. Give it one signature interaction, 'strip the hull' (peel layers back to show strip construction), with a button, keyboard keys, and a close that restores the camera. No orbit on the landing story.”
FAQ
Is the output a real website I can host?
Yes — HTML, CSS and JS in a folder. Export a ZIP or a single inlined HTML file and put it on any static host.
Can it redesign my existing site?
Two ways: mock the redesign as a project, or adopt the site's repo in codebase mode and have the agent edit the real code in a worktree.
Does it do e-commerce or CMS backends?
The output is front-end — pages, components, motion. It can mock a checkout or design one against your stack; the backend stays yours.
In the docs
Related features
Design with the agent you already have.
Free to try, buy once — the studio and your own coding CLIs do the rest.
Download