الصيف في حركة
Structure first, ink second, and the finished page is the same frame the plan was, grown up.
The AI website builder with no translation step
Describe the page and Shyne writes it as live HTML: nav, hero, sections, footer, every element an editable layer. There is no step where a picture of a site gets rebuilt as one.
Design in real HTML, so the page you approve is the site.
The shared live canvas: the launch a page ships with, deck, calendar and brand frames together. Click in and drag a section.
A website builder where the design is the site
Describe the page and Shyne writes it as real HTML on a live canvas: a nav, a hero with a photograph under a gradient, feature rows, a footer. What you are looking at is not a picture of a website. It already is one.
Every other flow ends in a handoff where someone rebuilds the mockup in the language it should have started in. Here there is nothing to rebuild, so approved means ready.
Real HTML, so pages behave like pages
Page frames use flow layout: sections stack, text wraps at a true measure, and narrowing the frame reflows the content instead of shrinking it. Put a 390 frame beside the 1440 and you review one design under two constraints.
Every element is promoted to an editable layer, so the gap under the headline is a number in the file, not a distance measured off a screenshot.
Approved is shippable, because it was never a picture.
Everything a real web page needs
Flow sections
Nav, hero, feature rows and footer that stack and reflow the way a browser lays them out.
Two widths
Desktop and mobile side by side on one canvas, one design under two constraints.
Design variables
Page, ink, accent and two type families restyle the whole site in one move.
Live link out
Publish the page as a live link, or export PNG and PDF for the approval trail.
One token pass rebrands the site, hero to footer, because sections read variables rather than pasted hex.
Every AI works on the same websites canvas.
Bring the agent you already use. It reads the brief, sees the work and writes the next editable frame — no exported file, no paste, no drift.
Build the landing page for our climbing gym: hero, three tiers, footer. build the complete working system.
shyne · canvas.read websites✓
shyne · page.write writes editable frames✓
shyne · canvas.write_html shared canvas✓
A full page of live, editable sections is now composed on the same live canvas.
Build the landing page for our climbing gym: hero, three tiers, footer. create three useful variants.
shyne · canvas.read websites✓
shyne · page.write writes editable frames✓
shyne · canvas.create_variants shared canvas✓
A full page of live, editable sections is now composed on the same live canvas.
Build the landing page for our climbing gym: hero, three tiers, footer. compose the visual direction.
shyne · canvas.read websites✓
shyne · page.write writes editable frames✓
shyne · media.compose shared canvas✓
A full page of live, editable sections is now composed on the same live canvas.
Build the landing page for our climbing gym: hero, three tiers, footer. turn the approved frame into code.
shyne · canvas.read websites✓
shyne · page.write writes editable frames✓
shyne · canvas.read_html shared canvas✓
A full page of live, editable sections is now composed on the same live canvas.
Build the landing page for our climbing gym: hero, three tiers, footer. prepare the publishing pass.
shyne · canvas.read websites✓
shyne · page.write writes editable frames✓
shyne · schedule.prepare shared canvas✓
A full page of live, editable sections is now composed on the same live canvas.
Build the landing page for our climbing gym: hero, three tiers, footer. run your own workflow on the canvas.
shyne · canvas.read websites✓
shyne · page.write writes editable frames✓
shyne · mcp.call shared canvas✓
A full page of live, editable sections is now composed on the same live canvas.
One shared canvas
Every websites frame stays visible to people and agents at the same time.
Always on brand
Your colors, type and reusable assets stay attached to every websites variation.
Editable output
The result lands as real frames and objects, ready for the next human decision.
Media in context
Generate or place imagery where the composition needs it, without leaving the working surface.
Open to every agent
Claude, ChatGPT, Gemini, Cursor, Grok and your own agent work through the same MCP surface.
Ready to ship
Move from the approved canvas to the useful file, link or published format without rebuilding it.
Ship changes by asking
The agent works on the same frames over MCP, so a request lands as edited sections rather than a regenerated site. The hero you tuned by hand holds through every ask.
- Add a pricing section with three tiers above the footerA new section lands in flow, in your variables, and the page reflows around it.
- Make the mobile version of this pageA 390 frame appears beside the desktop one, same content under a tighter constraint.
- Swap the palette for the rebrandThe variables change once and every section follows, hero to footer.
The approved page ships as a live link the moment the review ends, with stills for the paper trail.
From brief to a live page without a handoff
Draft with the agent, tune by hand on the same canvas, publish the live link. The site never passes through a rebuild, because it was HTML from the first move.
The design file and the web page were never two documents.
Questions
Does the AI website builder produce real HTML?
Yes. Frames are ordinary HTML with a stylesheet from the first move, which is why sections stack, text wraps at a real measure, and the spacing is a number in the file rather than a distance on a screenshot.
Can the site match my brand?
Save page, ink, accent and two type families once as design variables. Every section reads them, so a rebrand is one token change across the whole site.
How do I make the mobile version?
Add a narrow frame beside the desktop one. Flow layout reflows instead of rescaling, so the 390 width is the same design under a tighter constraint, not a second drawing to keep in sync.
How do I put the site in front of people?
Publish a live link straight from the canvas, or export PNG and PDF for approvals. What you send is the page itself, not a picture of it.
Build a page
Design in real HTML, so the page you approve is the site.
Open Shyne →