Stop Letting AI Guess Your Architecture: Plan First, Then Glue the Parts
AI coding tools lower the barrier to generating code but raise the ceiling on architectural mess when developers skip upfront design. The planning-first, glue-only workflow shown here is a repeatable pattern that prevents the most common failure mode of AI-assisted development: a working first draft that cannot be maintained or extended.
Handing AI a vague prompt like "build a to-do app" produces a 300-line monolithic file full of guessed field names and hand-rolled logic that breaks on the first refactor. The fix is a three-step discipline: define the tech stack, feature boundaries, component tree, and data types in a planning phase before allowing any code output; then apply glue programming, where the developer writes only the thin layer connecting mature, community-validated libraries like @hello-pangea/dnd to their own components.
A full React TodoList walkthrough demonstrates the method end-to-end. The planning phase locks down the Todo interface (`{ id, text, completed }`) and component split (TodoInput, TodoItem, TodoList, TodoEmpty) before a single JSX line appears. The implementation phase then glues these pieces together: App.tsx becomes a pure state-and-callback hub, drag-and-drop is delegated entirely to @hello-pangea/dnd with zero hand-written mouse-event logic, and even an 8-line empty-state component gets its own file because "what to show when empty" is a separate concern from list rendering.
The result is seven files, none exceeding 55 lines, with clear boundaries and no invented wheels. The core insight is that AI is an executor, not a decision-maker; when the developer abdicates architectural choices, the AI guesses, and the 10% it gets wrong is what makes the codebase unchangeable.
Most AI coding failures trace back to a single mistake: the developer delegates the "what" to the AI, not just the "how." The AI guesses field names, component splits, and library choices, and the 10% it gets wrong is what makes the codebase unchangeable.
The planning phase is effectively a lightweight specification document that constrains the AI the same way TypeScript types constrain function parameters — it removes degrees of freedom where the AI would otherwise improvise.
Glue programming inverts the typical instinct to ask AI to "build feature X." Instead of generating a drag-and-drop system, the prompt directs the AI to research a mature library and write only the adapter layer, which produces far less bug-prone code.
The empty-state component example (8 lines extracted to its own file) illustrates a principle that applies far beyond AI-assisted coding: separating "what to render when empty" from "how to render items" prevents future changes in one from breaking the other.