Overview
A product-to-production design engineering guide for product designers, design engineers, and AI-assisted teams.
Design engineering turns product intent into production behavior — precise interfaces, accessible systems, tested and deployable code. This guide documents the full workflow used by design engineers and AI-assisted teams.
What This Guide Covers
Each section is a standalone reference — read linearly or jump to your current phase. Technology-agnostic at the conceptual level; uses React, TypeScript, and Next.js App Router for concrete examples. Patterns apply to Nuxt, Vite, Svelte, or any component-based framework.
Design & Architecture — requirements, IA, design system, component architecture, prototyping — is the most critical phase and most often skipped. Inadequate definition is the leading cause of rework.
The Four Phases
| Phase | Goal | Key Output | Common Failure |
|---|---|---|---|
| 1. Product Definition | Understand user, client goal, product promise, quality bar | Brief, requirements, IA map, tokens, component spec | Building before fully specifying product and interface |
| 2. Full-Stack Development | Build components, state, data, auth, API contracts | Working slice with real interaction and persistence | UI without agreed data, permissions, error contracts |
| 3. Quality Assurance | Verify correctness, accessibility, performance | Test suite, audit reports, Lighthouse scores, readiness checklist | Testing only at the end when fixes cost most |
| 4. Delivery | Ship, observe, hand off | CI/CD pipeline, monitoring, rollback path | Manual deploys without environment parity |
Choose Your Framework Path
Apply the same lifecycle to every stack. See Tech Decisions for deeper comparison.
| If you are building... | Prefer... | Because... |
|---|---|---|
| SaaS, docs site, dashboard, Vercel-hosted app | Next.js | Routing, rendering, metadata, caching, deployment built in |
| Vue-first app, content site | Nuxt | Vue templates, composables, modules, content workflows |
| Interactive tool, prototype, embedded app, SPA | React + Vite | Fast feedback loop, lightweight until you add what you need |
The design-engineer skill: know which decisions belong in tokens, component APIs, routing, data fetching, QA — not treating everything as a visual mockup.
Product-to-Production Additions
| Section | Why it matters |
|---|---|
| Product Designer First | Product brief, client goals, user journey, prototype fidelity — gates before building |
| Full-Stack Product Understanding | Backend, data, auth, API, deployment — determines demo vs. pilot vs. production |
AI teams move fastest when product intent, design systems, data contracts, and quality gates are explicit. Agents accelerate execution — not invention of strategy, architecture, and quality bar simultaneously.
Phase Gate Checklist
| Before moving from... | Confirm that... |
|---|---|
| Product Definition → Development | Brief, user journeys, data states, interaction states, a11y expectations, responsive behavior documented |
| Development → Quality Assurance | Components, data contracts, auth-aware flows, loading/error/empty states exercisable locally |
| Quality Assurance → Delivery | Automated tests cover highest-risk flows, manual a11y checks complete, performance budgets measured |
| Delivery → Iteration | Monitoring, analytics, rollback, ownership clear enough for someone else to operate |
A phase is complete when risks are explicit, not when time runs out. If a risk is accepted, write down who accepted it and what signal triggers follow-up.
Core Principles
Define before you build
No component without spec: variants, states, props, behavior. A whiteboard decision takes minutes; the same decision during code review costs hours.
Design tokens are the contract
Colours, spacing, typography exist once in tokens. Hardcoded values (#3b82f6, 16px) are technical debt from day one.
Prefer composition over configuration
Five focused components that compose beat one component with 20 boolean props.
Accessibility is not a feature
Semantic HTML, keyboard nav, screen reader support are quality requirements with legal standing — not optional additions.
How to Use This Guide
| If you are... | Start at |
|---|---|
| Beginning a new client/product engagement | Product Designer First |
| Starting implementation from scratch | Project Setup |
| Turning a prototype into a real app | Full-Stack Product Understanding |
| Joining a project mid-stream | Design Requirements |
| Building a component library | Design System → Component Architecture |
| Redesigning while others keep building | Collaborative Repository Workflow |
| Orchestrating AI agents | Agent Collaboration → Project Context Files |
| Debugging slow pages | Performance |
| Preparing for production launch | Testing Strategy → Deployment |
| Dealing with a11y audit failures | Accessibility |
| Implementing error handling | Error Handling |
| Building responsive layouts | Responsive Design |
| Setting up monitoring | Production Observability |
| Implementing dark mode | Dark Mode & Theming |
Each page has prev/next navigation and the sidebar tracks your position.