Claude Plans, Gemini Designs: The Workflow to Build BEAUTIFUL Frontends

Key Concepts

• Model Mixing: A strategy of utilizing different LLMs for specific tasks based on their strengths (e.g., Gemini 3.5 Flash for UI/UX, Claude 3.5 Opus for reasoning/logic).
• Agentic Workflow: A multi-step, modular process where autonomous agents execute specific tasks and pass results via "handoff documents."
• Handoff Documents: Markdown files generated at the end of one agent session that serve as the input/context for the next, ensuring continuity across different model providers.
• Skill-Based Execution: Modular code snippets or instructions that agents follow to perform specific tasks (e.g., front-end-mix-explore, front-end-mix-plan).
• One-Shot Execution: The ability for an agentic harness to complete an entire project lifecycle (from planning to deployment) in a single autonomous run.
• Verification Layer: The use of security tools (like SonarQube) to scan AI-generated code and dependencies for vulnerabilities in real-time.

---

1. The "Model Mixing" Philosophy

The core argument is that no single LLM excels at every stage of software development.

• Gemini 3.5 Flash: Highly cost-effective ($1.50/1M input tokens) and superior at generating aesthetically pleasing, "human-like" front-end user interfaces.
• Claude 3.5 Opus: A "reasoning powerhouse" that excels at complex planning, writing accurate page copy, and managing back-end integrations.
• The Strategy: By splitting the workflow, the user leverages Gemini’s UI capabilities while avoiding its tendency to hallucinate information, relying instead on Opus for logic and data integrity.

2. Workflow Methodology: Step-by-Step

The workflow is designed as a series of isolated agent sessions to prevent context window overload and allow for provider swapping.

1. Exploration: Using Claude 3.5 Sonnet to survey the repository and project specifications. It outputs a context.md file.
2. Planning: Using Claude 3.5 Opus to ingest context.md and create a plan.md. This plan is strictly divided into:
   • Section A: Site content and intent (voice/mood).
   • Section B: Integration scope (back-end, database models).
   • Section C: Deployment strategy.
   • Constraint: Opus is explicitly instructed not to dictate UI structure, leaving that to Gemini.
3. UI Design: Using Gemini 3.5 Flash (via Pi or Anti-Gravity) to read Section A of the plan and generate the front-end code.
4. Integration & Validation: Returning to Claude to build the back-end, run unit tests, and perform linting.
5. Deployment & Smoke Testing: Final deployment (e.g., Vercel) followed by an automated "smoke test" using an agent browser skill to verify the site functions as a user would expect.

3. Technical Implementation & Tools

• Communication: Agents communicate exclusively through markdown handoff documents. This bypasses the technical limitation of not being able to pass a single context window between different model providers.
• Harnesses: The author utilizes Pi and Anti-Gravity as coding agent harnesses.
• OpenRouter: Used as the primary gateway to access Gemini 3.5 Flash within the Claude-centric environment.
• Security Integration: The author emphasizes the use of SonarQube Advanced Security as a "circuit breaker." It acts as a verification layer that scans dependencies for vulnerabilities (e.g., malicious NPM packages) before they are integrated into the codebase by the AI.

4. Key Arguments and Best Practices

• Avoid Over-Prompting: The author notes that when Opus was allowed to plan the UI, it "steamrolled" Gemini, resulting in inferior designs. The best results come from giving each model a narrow, focused task.
• Modularity: By keeping steps separate, the user can easily swap out models or tools (e.g., trying Gemini 2.6 or different deployment platforms) without rebuilding the entire pipeline.
• Verification at Machine Speed: As AI writes code at high velocity, manual security checks are insufficient. Automated verification (SAST, SCA, and secret detection) is mandatory for modern AI-assisted development.

5. Synthesis

The provided workflow demonstrates that the future of AI-assisted coding lies in orchestration rather than reliance on a single "god-model." By treating the development process as a modular pipeline—where Gemini handles the visual layer and Claude handles the logical layer—developers can produce high-quality, full-stack applications that are both cost-efficient and functionally robust. The inclusion of automated security verification ensures that this "machine-speed" development remains safe and production-ready.