Workflow Guide
March 2026 • 5 min read
Building a product is no longer a straight line.
It’s a loop of ideas, iterations, and refinement. This guide walks you through how to use the system effectively, from your first idea in Canvas to a more complete build inside the Editor.
Whether you are starting from scratch or refining something existing, the goal is simple. Move fast, stay in control, and avoid starting over.
Step 1: Start messy in Canvas
Everything begins in Canvas.
This is where you should think freely. Don’t worry about being precise.
You can start with:
- A rough text idea
- A quick prompt
- A voice note
- An image or reference
The system is designed to handle imperfect inputs. In fact, the messier your starting point, the more useful Canvas becomes.
Tip: Focus on intent, not details. Describe what you want, not how it should be built.
Step 2: Generate your first version
Once you have an idea, generate your initial screens.
Instead of thinking in single pages, think in flows:
- What happens first
- What comes next
- How users move through the product
The system can generate multiple connected pages, so use that to your advantage.
Tip: Ask for structure, not just visuals. A clear flow leads to better results than a beautiful single screen.
Step 3: Refine visually inside Canvas
After generation, avoid the instinct to regenerate everything.
Instead, refine what you already have.
You can:
- Edit text directly
- Adjust spacing and layout
- Rearrange sections
- Replace or tweak components
This is faster and gives you more control than starting again.
Tip: Treat this like a design tool, not a prompt box.
Step 4: Guide with references and inputs
If something feels off, guide the system with better context.
You can:
- Upload inspiration images
- Attach PDFs or assets
- Use moodboards
- Speak your ideas instead of typing
The system understands whether to follow something exactly or take inspiration from it.
Tip: Showing is often better than explaining.
Step 5: Move into the Editor
Once your structure feels solid, move into the Editor.
This is where your project becomes more real.
You can:
- Continue refining layouts
- Work with structured components
- Prepare for implementation
Everything you built in Canvas carries forward, including your latest changes.
Tip: Move when you are confident in direction, not when everything is perfect.
Step 6: Use context-aware assistance
Inside the Editor, you can interact with the system more intelligently.
Ask questions like:
- “What does this section do?”
- “How is this page structured?”
- “Where should this feature go?”
You don’t always need to trigger full builds. Sometimes, understanding is enough.
Tip: Use the assistant as a collaborator, not just a generator.
Step 7: Let the system handle complexity
When your request becomes more technical or implementation-heavy, the system can step in.
It can:
- Modify structures
- Build features
- Transform layouts into working logic
You don’t need to manage every detail manually.
Tip: Be clear about intent. The better your instruction, the better the outcome.
Step 8: Iterate without restarting
The biggest advantage of this workflow is continuity.
You don’t need to:
- Regenerate everything for small changes
- Rebuild pages from scratch
- Lose progress when switching contexts
Instead, you refine, adjust, and move forward.
Tip: Think in iterations, not resets.
Step 9: Handle errors without friction
If something breaks or doesn’t behave as expected, the system is designed to recover.
- It retries when possible
- Falls back if needed
- Repairs structures before building
You will see clearer error states and guidance instead of raw failures.
Tip: If something feels off, adjust input or refine structure rather than starting over immediately.
Step 10: Build with consistency using templates
The system uses shared templates and reusable components.
This helps you:
- Maintain consistent design
- Build faster
- Avoid reinventing common patterns
You can reuse sections like:
- Hero areas
- Pricing blocks
- Dashboards
- Auth flows
Tip: Consistency improves both speed and quality.
Common mistakes to avoid
1. Over-prompting
Trying to perfect everything through prompts slows you down. Edit directly when possible.
2. Thinking in single screens
Focus on flows and user journeys instead of isolated pages.
3. Restarting too often
Most improvements come from refining, not regenerating.
4. Ignoring inputs like images or files
These often give better results than text alone.
A simple workflow to remember
1. Start rough in Canvas
2. Generate a structured flow
3. Refine visually
4. Add context with inputs
5. Move to Editor
6. Build and iterate
Repeat as needed.
Final thought
The system is designed to reduce friction, not replace thinking.
The more clearly you understand your idea, the better the system can help you shape it.
Start simple. Iterate quickly. Stay in flow.
That’s where the real advantage is.