Learn by Directing AI
All materials

design-decisions-template.md

Design Decisions

Record each major technical choice. The point is not to justify everything -- it is to make the reasoning visible so future you (or a teammate) understands why the project looks the way it does.

1. Framework Choice

What did you choose? What alternatives did you consider? Why this one?

Example:

  • Chosen: Vue 3 with Composition API
  • Considered: React, Svelte, vanilla JS
  • Rationale: Client's existing admin panel uses Vue 2. Staying in the Vue ecosystem means the team can maintain both without context-switching. Composition API over Options API for better TypeScript support.

2. Styling Approach

What did you choose for CSS? Why does it fit this project?

Example:

  • Chosen: CSS Modules
  • Considered: Tailwind CSS, styled-components, plain CSS
  • Rationale: Small team, component-scoped styles prevent conflicts. No utility framework needed for a form-heavy interface with minimal custom layout.

3. Build Tooling

What builds and serves the project? Why?

Example:

  • Chosen: esbuild via tsup
  • Considered: Webpack, Vite, Rollup
  • Rationale: Library output (npm package), not an app. tsup handles TypeScript compilation and bundling in one step with minimal config.

4. Deployment Target

Where does this run in production? Why that platform?

Example:

  • Chosen: Railway
  • Considered: Heroku, Render, self-hosted VPS
  • Rationale: Client needs a backend with a database. Railway supports Node.js + PostgreSQL with zero-config deploys and a free tier for staging.