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

Understand, then build

Use /plan to analyze existing code before making changes:

/plan How does the module system work in this project? Walk me through the lifecycle.

In plan mode the agent reasons about your code and proposes an approach without editing files. Once you understand the structure, follow up with /build to make targeted changes.

Webflow-first flow

When your project is connected to Webflow, the agent automatically gets Webflow MCP tools — there’s no separate mode. Use /build and describe the cross-surface task:

/build 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, the agent can read your designs while it works. Use /build and reference the design:

/build 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. Keep the relevant file open in Figma Dev Mode.

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 a third /plan slot to investigate bugs without touching files.

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 and analysis, /build for code changes, /general for broader multi-step work.

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.