Custom flows

Once you’ve completed your first flow, you can adapt the plan-then-build pattern for different kinds of tasks. This guide shows common flow patterns and how to get the most out of each agent mode.

Flow patterns

Explore, then build

Use @@explore to understand existing code before making changes:

@@explore How does the module system work in this project? Walk me through the lifecycle.

The agent reads your code and explains it without modifying anything. Once you understand the structure, follow up with @@build to make targeted changes.

Webflow-first flow

When your project is connected to Webflow, use @@webflow to work across code and the Designer:

@@webflow Create a testimonial slider component — build the structure in Webflow and wire it to a module

The agent creates elements and styles in the Webflow Designer via MCP, then writes the corresponding module JS in your project. This is the fastest path when you need both Designer work and code in sync.

Figma-to-code flow

With Figma MCP connected, use @@figma to translate designs into code:

@@figma Build the pricing card component matching the selected Figma frame

The agent reads your Figma design specs and generates code that matches the layout, spacing, and typography.

Research and multi-step

Use @@general for broader tasks that span multiple concerns:

@@general Audit the project for accessibility issues and fix them

This mode gives the agent more room for multi-step reasoning — it may read, analyze, and then edit across several files.

Working with multiple conversations

Complex projects benefit from parallel conversations. Each conversation slot is independent, so you can:

1. Keep a @@plan conversation in one slot for architecture decisions.
2. Run @@build in another slot for implementation.
3. Use @@explore in a third to investigate bugs.

Press ⌘N / Ctrl+N to create a new conversation slot. Switch between them using the carousel dots at the top of the AI panel. Each slot keeps its own model selection and prompt history.

Iterative refinement

The most effective flows are iterative:

1. Plan — Ask the AI to analyze before committing to an approach.
2. Build — Implement the plan with @@build.
3. Test — Run the dev server and check the result.
4. Refine — Describe what needs fixing in a follow-up prompt. The AI has conversation context and can build on previous work.

If a conversation gets long or veers off track, archive it (⌘W) and start fresh (⌘N). You can always restore archived conversations from the Past Conversations drawer.

Tips for effective prompts

• Be specific — “Add a 200ms ease-out fade to the .card elements on scroll” works better than “add some animations.”
• Reference files — Type @ to mention specific files in your prompt, giving the agent focused context.
• Use follow-ups — Don’t restart from scratch; tell the AI what to adjust in the current result.
• Match the mode — Use @@plan for thinking, @@build for code changes, @@explore for understanding.

Next

• Your first flow — Run through the basic flow if you haven’t yet.
• Quick start tutorial — Broader project setup from scratch.
• AI edits — Full reference for agent modes, models, and conversations.