Product
As developers, we often know exactly what we want to build. The bottleneck isn't understanding—it's communication.
When I'm polishing UI details in Cursor or Windsurf, I can see precisely what needs adjustment: this shadow needs 2px more blur, that spacing is 4px too tight, this hover state needs a subtle lift animation. I know the exact CSS properties. I know the design rationale.
But typing all of that out? Describing which element I'm referring to, its location, the surrounding context? That's where time gets wasted.
Architect mode exists to eliminate that friction.
The Problem: Context Is Expensive to Type
Consider a typical refinement task: adjusting a button's visual weight.
Without Architect mode, I'd write something like:
"In the hero section, there's a primary CTA button with the text 'Get Started'. It currently has a subtle shadow. I want to increase the shadow to make it more prominent—something like 0 4px 12px rgba(0,0,0,0.15). Also add a hover state that lifts it slightly, maybe translateY(-1px) with a transition..."
That's 60+ words just to describe what I could point at in 2 seconds.
The Solution: Point, Speak, Execute
Architect mode combines screen capture with voice input:
- Double-tap Option → Overlay appears
- Draw a box around the exact element (no ambiguity about "which button")
- Speak your intent: "Stronger shadow, subtle lift on hover, 200ms ease-out"
- Double-tap Option → Structured spec generated
The output is precise and actionable:
"Update the primary CTA button in the hero section: > - box-shadow: 0 4px 12px rgba(0,0,0,0.15) > - hover: translateY(-1px), box-shadow: 0 6px 16px rgba(0,0,0,0.18) > - transition: all 200ms ease-out > - Verify WCAG AA contrast ratio maintained"
This drops directly into Cursor. No reformatting. No clarification needed.
Implementation Challenges
Building this required solving several hard problems:
1. Latency budget: Multimodal LLMs (GPT-4V, Claude 3.5 Sonnet) are slow. I implemented aggressive image compression and streaming responses to keep the interaction feeling snappy.
2. Prompt precision: Early iterations produced generic suggestions. The final system prompt (~300 words) enforces specific output: exact CSS values, component identification, and accessibility considerations.
3. Context preservation: The LLM needs to understand not just what you're pointing at, but the surrounding design system context. I extract color palettes and spacing patterns from the visible UI.
Why This Matters
This isn't about replacing technical knowledge—it's about removing the translation layer between vision and execution.
When you're deep in a polishing session, iterating on micro-interactions and visual details, the last thing you want is to context-switch into "prompt writing mode." Architect mode keeps you in flow.
The best tools don't change how you think. They just remove the friction between thinking and doing.