01 — GENERATE & VIEW
A command. A real canvas.
Your agent generates the page and pushes it through the CLI. See what it built, right inside your project.
# give your work a place to land
$ refira push homepage
✓ Streamed to Refira Canvas
The AI design workspace
From a loose idea to a page that feels right. Give your agent a canvas, a design language, and a little direction.
Your agent. Your CLI. Your creative direction.
Now, take the wheel
Switch the palette. Run an iteration.
See what a little direction can do.
Ready.
Thoughtfully grown plants.
For the spaces you call your own.
Example page inside the Terrarium demo project.
Fits the way you already build.
Bring an agent that can run your CLI.
01 / A shorter feedback loop
Keep your agent in its flow and your feedback in context. Refira connects the two.
Your agent generates the page and pushes it through the CLI. See what it built, right inside your project.
Leave a note on the exact page element. Your agent gets actionable feedback for the next iteration.
Share pages from one project for review. Export a page when you’re ready for the next step.
02 / Give the agent a system
Refira keeps an active layout reference at the project level. Your agent uses it when creating the next page, alongside reusable components from the project catalog.
Choose the page archetype. Your agent sees the intended regions and the components that belong in them.
The agent references project components by name. Refira expands them into real HTML when the page reaches the canvas.
<x-landing-header active="home" /><x-landing-footer />Your agent still writes each page. Refira provides the project's active layout reference when a new page is created, plus reusable components to keep shared UI consistent.
03 / Creativity, with continuity
Your agent shouldn’t have to guess what “on brand” means. Give it a shared foundation before it writes the first line.
COLOR PALETTE
TYPOGRAPHY
LAYOUT REFERENCES / try a reference
Landing page reference selected in this demo.
04 / Bring people into the picture
Keep your pages together in one project. Give people a page they can explore, then export the work when it’s ready to move forward.
A few things, clarified
Your agent still generates and updates the code. Refira gives that work a visual workspace: a canvas to inspect, annotations to act on, and project context to guide the next iteration.
Connect the Refira CLI to your project. Your agent can read the design context, generate a page, and run a push command to send it to the canvas.
Set the project’s design context and use layout references as the starting point. Your agent can read the same tokens, typography, and structural guidance whenever it builds or updates a page.
Yes. Refira supports sharing pages within a project and exporting pages for your next step. The workspace above is an interactive example; use your own project for real sharing and exports.
Your next idea starts here
Bring your agent. Give your ideas a canvas.
Make the next iteration count.