The Four Phases
The workflow introduced in this course consists of four phases:
At first glance, these phases may appear obvious. Every software project goes through some form of planning, implementation, testing, and improvement.
The difference in Predictive Front-End Development is that each phase is treated as a distinct engineering activity with a specific purpose, deliverables, and responsibilities.
A common mistake when working with AI is collapsing all four phases into a single prompt:
Build me a customer management application.
The AI immediately begins generating code, even though:
- The problem may not be fully understood.
- The architecture may not be defined.
- Success criteria may not be clear.
- Validation rules may not exist.
As a result, the generated solution often requires significant rework.
By separating the process into four phases, we move from:
to:
This dramatically improves predictability, maintainability, and long-term scalability.
Phase 1: Define
Objective
Understand the problem before attempting to solve it.
Many software failures originate in this phase.
Teams often assume they know what needs to be built and immediately start generating code.
The Define phase forces the team to slow down and answer a more important question:
What system should exist?
Instead of asking:
How do we build this?
we ask:
What are we actually building?
Activities
During the Define phase the team identifies:
Business Capability
What capability is being added?
Examples:
Customer Management
Authentication
Order Processing
Product Catalog
Domain
Which business domain owns this capability?
Examples:
CRM
Commerce
Identity
Logistics
Subdomain
Where does the feature belong?
Examples:
Customer Administration
Product Management
User Registration
Actors
Who interacts with the system?
Examples:
Administrator
Customer
Sales Representative
Warehouse Employee
Use Cases
What actions must be supported?
Examples:
Create Customer
Edit Customer
Delete Customer
Search Customer
Data Models
What information must be stored and managed?
Examples:
Customer
Address
Order
Product
Services
What business operations are required?
Examples:
CustomerService
OrderService
InventoryService
State
What information must be maintained in the user interface?
Examples:
CustomerState
ShoppingCartState
AuthenticationState
Deliverables
At the end of the Define phase, the team should have:
Requirements
Domain Analysis
Subdomain Analysis
Use Cases
Models
Services
State Requirements
Success Criteria
No implementation should exist yet.
AI Usage
AI is extremely valuable during Define.
Ask AI to:
Identify domains.
Identify subdomains.
Suggest models.
Identify missing requirements.
Identify edge cases.
Review assumptions.
The AI acts as an analyst rather than an implementer.
Phase 2: Generate
Objective
Create the architecture and implementation required to satisfy the requirements.
This phase consists of two separate activities:
Architecture Generation
+
Implementation Generation
Many teams skip architecture generation and move directly to implementation.
Predictive Development treats architecture as a first-class deliverable.
Architecture Generation
The architecture should be generated before code.
Using Atomic Bomb, the team may generate:
Domains
Commerce
Subdomains
ProductManagement
Domain Assets
ProductModel
ProductService
ProductState
ProductApi
UI Assets
Button
Label
ProductPrice
ProductCard
ProductPage
The structure now exists.
The implementation becomes predictable.
Implementation Generation
Once the structure exists, AI can generate:
- Components
- Services
- Context Providers
- APIs
- Validation Schemas
- Tests
- Storybook Stories
At this stage, the AI is implementing architecture rather than inventing architecture.
Deliverables
The Generate phase should produce:
Architecture
Source Code
Tests
Stories
Documentation
AI Usage
AI is highly effective here.
Examples:
Implement ProductService.
Create ProductState.
Generate a Storybook story.
Create Vitest tests.
Because the architecture already exists, output becomes significantly more consistent.
Phase 3: Validate
Objective
Verify that the generated solution is correct.
Many teams stop after generation.
This is a mistake.
Generated code is not necessarily correct code.
Validation determines:
Did we build the right thing?
and
Did we build it correctly?
Validation Categories
Architectural Validation
Verify:
- Atomic Design compliance
- DDD compliance
- Folder structure
- Component hierarchy
Questions:
Does this follow the architecture?
Are responsibilities properly separated?
Technical Validation
Verify:
- TypeScript compilation
- Test execution
- Linting
- Build success
Questions:
Does the application run?
Do tests pass?
Business Validation
Verify:
- Requirements
- User stories
- Edge cases
Questions:
Can users complete required tasks?
UX Validation
Verify:
- Accessibility
- Usability
- Consistency
Questions:
Can users understand the interface?
Deliverables
Validation should produce:
Test Results
Review Notes
Architecture Review
Accessibility Review
Issue List
AI Usage
AI can review generated work.
Examples:
Review this feature for DDD compliance.
Review this feature for accessibility.
Review this feature for Atomic Design violations.
AI often provides more value as a reviewer than as a generator.
Phase 4: Refine
Objective
Improve the system after correctness has been established.
Validation ensures the system works.
Refinement ensures the system remains maintainable.
The key question becomes:
How can this be improved?
Areas of Refinement
Reusability
Can duplicated functionality be extracted?
Examples:
Shared Hooks
Shared Components
Shared Services
Simplicity
Can complexity be reduced?
Examples:
Simpler APIs
Cleaner Components
Smaller Functions
Performance
Can execution improve?
Examples:
Memoization
Code Splitting
Caching
Accessibility
Can more users successfully use the application?
Examples:
Keyboard Navigation
ARIA Labels
Screen Reader Support
Developer Experience
Can future development become easier?
Examples:
Documentation
Storybook Improvements
Better Typing
Deliverables
The Refine phase may produce:
Refactoring
New Skills
New Guidelines
Performance Improvements
Improved Documentation
AI Usage
AI can identify opportunities for improvement.
Examples:
Find duplication.
Suggest refactoring opportunities.
Identify performance bottlenecks.
Suggest reusable abstractions.
The Continuous Improvement Loop
The most important concept is that these phases are not linear. They form a cycle.
Each iteration improves:
- The application
- The architecture
- The skills
- The organizational knowledge
Over time, the organization becomes better at producing software because it becomes better at producing the knowledge required to produce software.
Mini Exercise
Split one feature from your own project into Define, Generate, Validate, and Refine.
Example
For a booking feature:
- Define: identify domain, actors, and use cases
- Generate: create structure and implementation
- Validate: review architecture, tests, and behavior
- Refine: improve reuse, naming, and accessibility