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

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

More

Summary

Cole Medin presents a complete, open-source workflow that mixes two AI providers — Google’s Gemini 3.5 Flash for front-end UI design and Anthropic’s Opus 4.8 for planning, page copy, and back-end integration — to build full-stack web applications in a single shot. The core insight driving the workflow is that Gemini 3.5 Flash consistently generates polished, human-looking interfaces at low cost ($1.50 per million input tokens), while Opus 4.8’s stronger reasoning prevents hallucinated content and handles the integrations that make an app actually function. Rather than picking one model, the workflow routes each step to the model best suited for it.

The workflow is structured as a series of discrete coding agent sessions, each invoked as a named skill within Pi or Claude Code via OpenRouter for Gemini access. Medin walks through every node in the pipeline — from an initial exploration phase that consumes a spec document, through front-end design with Gemini, to Opus-driven planning and back-end implementation. For fully autonomous one-shot execution, an Archon workflow chains all skills together. The full repository, including a README that a coding agent can use to self-configure the setup, is linked in the video description.

Key practical takeaways include when to switch models mid-workflow using Claude Code’s `/model` command, how to balance token cost against reasoning depth at each pipeline stage, and why separating UI and logic responsibilities across providers improves both output quality and economics — principles applicable to any multi-provider agentic coding setup.


📺 Source: Cole Medin · Published June 04, 2026
🏷️ Format: Hands On Build

1 Item

Channels

1 Item

People