Design Before Build — Stop Agents Coding the Wrong Thing

The problem

LLMs often rush straight into writing code, resulting in architecture that misses edge cases or UI that doesn't match the client's vision. These mistakes are cheap to make but expensive to fix once implementation is underway.

What it does

• Drafts a technical design doc covering UX, data flow, security, and explicit out-of-scope boundaries.
• Performs a blunt adversary-style critique to surface hidden race conditions and unstated assumptions.
• Builds clickable, non-functional HTML mockups to get user sign-off before a single line of production code is written.
• Generates a granular ticket breakdown where each task has defined outcomes and constraints.

Why this beats prompting it yourself

Getting an agent to slow down and think critically requires a specific multi-step sequence that most users skip. This skill enforces a "design gate" that treats your tokens as a design budget, catching "that is not what I meant" errors while they are still free to fix.

Use cases

• Creating scope documents for freelance client work to prevent feature creep.
• Planning complex automations where race conditions or API timeouts are likely.
• Prototyping UI layouts to verify user flow before committing to a framework.
• Breaking down large feature requests into executable tickets for other agents.

Known limitations

This skill explicitly forbids writing production implementation code. It produces design artifacts and throwaway HTML mocks only.