diff --git a/.claude/commands/design-os/cost-estimator.md b/.claude/commands/design-os/cost-estimator.md
new file mode 100644
index 00000000..92b5fef6
--- /dev/null
+++ b/.claude/commands/design-os/cost-estimator.md
@@ -0,0 +1,164 @@
+# Cost Estimator & Optimizer
+
+You are helping the user estimate and optimize the infrastructure and service costs for their product. This creates a clear picture of what it will cost to run the product at different scales.
+
+## Step 1: Check Prerequisites
+
+First, verify that the product overview and tech stack exist:
+
+1. Read `/product/product-overview.md` to understand the product
+2. Read `/product/tech-stack/tech-stack.md` to understand the technology choices
+
+If the product overview is missing:
+
+"Before estimating costs, you'll need to establish your product vision. Please run `/product-vision` first."
+
+If the tech stack is missing:
+
+"Before estimating costs, you'll need to define your tech stack. Please run `/tech-stack` first so I know which services and infrastructure to estimate."
+
+Stop here if prerequisites are missing.
+
+## Step 2: Explain the Process
+
+"Let's estimate the monthly costs for running **[Product Name]** based on your tech stack.
+
+I'll create cost estimates for different usage tiers:
+1. **Starter** — Early stage, small user base
+2. **Growth** — Scaling up, moderate traffic
+3. **Scale** — Production-grade, high traffic
+
+I'll also suggest optimizations to reduce costs.
+
+Do you have a target budget or any pricing constraints I should know about?"
+
+Wait for their response.
+
+## Step 3: Analyze Tech Stack Costs
+
+Based on the tech stack choices, identify all cost-bearing services:
+
+- **Hosting/Compute** — Server instances, serverless functions, edge workers
+- **Database** — Managed database services, storage, backups
+- **Authentication** — Auth service pricing per MAU
+- **Storage** — File storage, CDN, media processing
+- **Email/Notifications** — Transactional email, push notifications
+- **Monitoring** — Error tracking, analytics, logging
+- **Domain/DNS** — Domain registration, DNS hosting
+- **Third-party APIs** — Any external services
+
+For each service, research typical pricing for the chosen technology.
+
+## Step 4: Build Cost Tiers
+
+Present cost estimates for each tier using the AskUserQuestion tool to refine:
+
+"Here's my estimate for the **Starter** tier (~[X] users):
+
+| Category | Item | Monthly Cost | Notes |
+|----------|------|-------------|-------|
+| Hosting | [Service] | $[X] | [Plan details] |
+| Database | [Service] | $[X] | [Plan details] |
+| Auth | [Service] | $[X] | [Plan details] |
+| ... | ... | ... | ... |
+
+**Estimated total: $[X]/mo**
+
+Does this look reasonable? Any services I'm missing?"
+
+Repeat for Growth and Scale tiers.
+
+## Step 5: Identify Optimizations
+
+Suggest ways to reduce costs:
+
+"Here are some cost optimizations to consider:
+
+1. **[Optimization]** — [How it saves money and estimated savings]
+2. **[Optimization]** — [How it saves money and estimated savings]
+3. **[Optimization]** — [How it saves money and estimated savings]
+
+Common optimizations:
+- Use free tiers where available (Vercel, Supabase, Clerk all have generous free tiers)
+- Use serverless instead of always-on servers for low-traffic stages
+- Self-host open-source alternatives for services with high per-user costs
+- Use CDN caching to reduce compute costs
+- Reserve instances for predictable workloads at scale
+- Consolidate services (e.g., Supabase for auth + database + storage)
+
+Which of these interest you?"
+
+## Step 6: Present Final Estimate
+
+"Here's your complete cost estimate for **[Product Name]**:
+
+**Starter ([X] users):** ~$[X]/mo
+**Growth ([X] users):** ~$[X]/mo
+**Scale ([X] users):** ~$[X]/mo
+
+**Top optimizations:**
+- [Optimization 1]
+- [Optimization 2]
+- [Optimization 3]
+
+Ready to save?"
+
+## Step 7: Create the File
+
+Once approved, create the file at `/product/cost-estimator/cost-estimate.md` with this exact format:
+
+```markdown
+# Cost Estimate
+
+## [Tier Name] ([User Count])
+
+| Category | Item | Monthly Cost | Notes |
+|----------|------|-------------|-------|
+| [Category] | [Item] | $[Amount] | [Notes] |
+| [Category] | [Item] | $[Amount] | [Notes] |
+
+## [Tier Name] ([User Count])
+
+| Category | Item | Monthly Cost | Notes |
+|----------|------|-------------|-------|
+| [Category] | [Item] | $[Amount] | [Notes] |
+| [Category] | [Item] | $[Amount] | [Notes] |
+
+[Add more tiers as needed]
+
+## Optimizations
+- [Optimization 1 with details]
+- [Optimization 2 with details]
+- [Optimization 3 with details]
+```
+
+**Important:** The format with `## Tier Name (User Count)` and the markdown table must match exactly for the app to parse it correctly. Cost values should include the dollar sign (e.g., `$50`).
+
+## Step 8: Confirm Completion
+
+Let the user know:
+
+"I've created your cost estimate at `/product/cost-estimator/cost-estimate.md`.
+
+**Summary:**
+- Starter ([X] users): ~$[X]/mo
+- Growth ([X] users): ~$[X]/mo
+- Scale ([X] users): ~$[X]/mo
+
+**Key optimizations identified:** [count]
+
+This gives you a clear picture of what it will cost to run your product. Review and adjust the estimates as you get more specific pricing from providers.
+
+Next step: Run `/qa-tests` to generate QA test cases for your product sections."
+
+## Important Notes
+
+- Use realistic pricing from actual service providers (as of your knowledge)
+- Always include free tier options where available
+- Round to reasonable numbers — don't give false precision
+- Include notes explaining what each line item covers
+- Costs should be monthly unless otherwise specified
+- Focus on infrastructure costs, not development costs
+- The Growth tier should represent a realistic near-term target
+- Include 3 tiers minimum — Starter, Growth, Scale
+- Optimizations should be actionable and specific
diff --git a/.claude/commands/design-os/figma.md b/.claude/commands/design-os/figma.md
new file mode 100644
index 00000000..78a04854
--- /dev/null
+++ b/.claude/commands/design-os/figma.md
@@ -0,0 +1,153 @@
+# Figma Integration
+
+You are helping the user link their Figma design files to their Design OS project. This creates a bridge between the design tool and the product planning workflow.
+
+## Step 1: Check Prerequisites
+
+First, verify that the design system exists:
+
+Read `/product/design-system/colors.json` or `/product/design-system/typography.json` to check if the design system has been set up.
+
+If neither exists:
+
+"Before linking Figma files, I'd recommend setting up your design tokens first with `/design-tokens`. This ensures your Figma designs align with the chosen color palette and typography.
+
+Would you like to proceed anyway, or run `/design-tokens` first?"
+
+Use AskUserQuestion to let the user choose. Proceed if they want to continue.
+
+## Step 2: Gather Figma Links
+
+"Let's connect your Figma files to **[Product Name]** (or 'your project' if no product overview exists).
+
+I'll need:
+1. **Main Figma file URL** — The primary design file for your product
+2. **Embed URL** (optional) — For an embedded preview in Design OS
+3. **Additional links** (optional) — Prototypes, component libraries, etc.
+
+Please share your main Figma file URL. It should look like:
+`https://www.figma.com/design/[file-id]/[file-name]`"
+
+Wait for the user to provide their Figma URL.
+
+## Step 3: Validate and Process URLs
+
+When the user provides a URL, validate it:
+
+- It should start with `https://www.figma.com/` or `https://figma.com/`
+- Common formats:
+  - Design file: `https://www.figma.com/design/[id]/[name]`
+  - Prototype: `https://www.figma.com/proto/[id]/[name]`
+  - Board/FigJam: `https://www.figma.com/board/[id]/[name]`
+  - File (legacy): `https://www.figma.com/file/[id]/[name]`
+
+If the URL doesn't look like a Figma URL, ask for clarification.
+
+## Step 4: Generate Embed URL
+
+Create the embed URL from the file URL:
+
+The Figma embed format is:
+`https://www.figma.com/embed?embed_host=share&url=[encoded-file-url]`
+
+Let the user know:
+
+"I'll set up an embedded preview so you can view the design directly in Design OS.
+
+Do you have any additional Figma links to add? For example:
+- A clickable **prototype**
+- A **component library** or design system file
+- Specific **frames** or pages to reference
+
+If not, we'll just use the main file."
+
+Use AskUserQuestion to gather additional links.
+
+## Step 5: Classify Links
+
+For each link provided, determine the type:
+
+- URLs containing `/proto/` → type: `prototype`
+- URLs containing `/board/` → type: `board`
+- URLs with `node-id=` parameter → type: `frame`
+- All other Figma URLs → type: `file`
+
+## Step 6: Ask About Access Token (Optional)
+
+"Do you have a Figma personal access token for API integration? This is optional and enables features like:
+- Fetching file metadata
+- Syncing component lists
+- Pulling design tokens directly from Figma
+
+If you don't have one, that's fine — the links and embedded preview will still work.
+
+You can generate a token at: Figma → Settings → Personal access tokens"
+
+Use AskUserQuestion with options:
+- "I have an access token" — Ask them to provide it
+- "Skip for now" — Leave accessToken empty
+
+**Important:** If they provide a token, remind them to keep it secure and not commit it to public repositories.
+
+## Step 7: Present Configuration and Confirm
+
+"Here's your Figma integration setup:
+
+**Main File:** [URL]
+**Embedded Preview:** Enabled
+**Linked Files:**
+- [Label] — [Type] — [URL]
+- [Label] — [Type] — [URL]
+**Access Token:** [Configured / Not configured]
+
+Ready to save?"
+
+## Step 8: Create the File
+
+Once approved, create the file at `/product/design-system/figma.json` with this format:
+
+```json
+{
+  "fileUrl": "[main-figma-file-url]",
+  "embedUrl": "https://www.figma.com/embed?embed_host=share&url=[encoded-file-url]",
+  "accessToken": "",
+  "links": [
+    {
+      "label": "[Descriptive Label]",
+      "url": "[figma-url]",
+      "type": "[file|prototype|board|frame]"
+    }
+  ]
+}
+```
+
+**Notes:**
+- The main file URL should always be included in the `links` array as well
+- Labels should be descriptive (e.g., "Main Design File", "Interactive Prototype", "Component Library")
+- `embedUrl` should URL-encode the file URL in the query parameter
+- `accessToken` should be an empty string if not provided — never store placeholder values
+
+## Step 9: Confirm Completion
+
+Let the user know:
+
+"I've set up the Figma integration at `/product/design-system/figma.json`.
+
+**What's configured:**
+- Embedded preview in the Design tab
+- [N] linked Figma files
+- Quick-access links to open files directly in Figma
+
+You can view the integration on the Design page in Design OS. The embedded preview will appear in the Figma Integration step.
+
+To update links or add more files, edit `product/design-system/figma.json` directly or run `/figma` again."
+
+## Important Notes
+
+- Always validate that URLs are actual Figma URLs before saving
+- The embed URL must use URL encoding for the file URL parameter
+- Never store sensitive tokens in plain text suggestions — warn the user about security
+- Include the main file in the links array so it appears in the linked files list
+- Labels should be user-friendly, not raw URLs
+- If the user has multiple Figma files (design + prototype), include all of them
+- The `accessToken` field is for future API integration — leave empty if not provided
diff --git a/.claude/commands/design-os/qa-tests.md b/.claude/commands/design-os/qa-tests.md
new file mode 100644
index 00000000..6591c645
--- /dev/null
+++ b/.claude/commands/design-os/qa-tests.md
@@ -0,0 +1,177 @@
+# QA Test Case Generator
+
+You are helping the user generate comprehensive QA test cases for their product. These test cases cover the main user flows and edge cases for each section, providing a testing blueprint for QA validation.
+
+## Step 1: Check Prerequisites
+
+First, verify that the required product files exist:
+
+1. Read `/product/product-overview.md` to understand the product
+2. Read `/product/product-roadmap.md` to get the list of sections
+3. Read any existing section specs at `/product/sections/*/spec.md`
+
+If the product overview is missing:
+
+"Before generating test cases, you'll need to establish your product vision. Please run `/product-vision` first."
+
+If the roadmap is missing:
+
+"Before generating test cases, you'll need to define your product roadmap. Please run `/product-roadmap` first."
+
+Stop here if prerequisites are missing.
+
+## Step 2: Explain the Process
+
+"Let's generate QA test cases for **[Product Name]**.
+
+I'll create test cases covering:
+- **Critical** — Core functionality that must work (login, primary actions)
+- **High** — Key user flows that affect daily usage
+- **Medium** — Important features and secondary flows
+- **Low** — Edge cases and nice-to-have validations
+
+I'll generate test cases for each of your sections:
+[List sections from roadmap]
+
+Should I focus on any specific sections first, or generate tests for all sections?"
+
+Wait for their response.
+
+## Step 3: Analyze Each Section
+
+For each section that has a spec, analyze:
+
+1. Read the section spec at `/product/sections/[section-id]/spec.md`
+2. Identify the user flows listed
+3. Identify the UI requirements listed
+4. Consider common edge cases and error states
+
+If a section doesn't have a spec yet, note it and generate basic test cases based on the roadmap description.
+
+## Step 4: Generate Test Cases
+
+For each section, generate test cases following this pattern:
+
+"Here are the test cases for **[Section Title]**:
+
+**TC-001: [Test Title]** (Critical)
+- Section: [Section Name]
+- Steps:
+  1. [Step 1]
+  2. [Step 2]
+  3. [Step 3]
+- Expected: [What should happen]
+
+**TC-002: [Test Title]** (High)
+...
+
+Should I adjust any of these test cases, or add more for specific scenarios?"
+
+Use AskUserQuestion to refine.
+
+### Test Case Coverage Guidelines
+
+For each section, aim to cover:
+
+1. **Happy path** — The main user flow works as expected (Critical)
+2. **Empty states** — What happens when there's no data (High)
+3. **Error handling** — Invalid inputs, failed operations (High)
+4. **Boundary conditions** — Max items, long text, special characters (Medium)
+5. **Navigation** — Can the user get to and from this section (Medium)
+6. **Responsive behavior** — Works on mobile and desktop (Low)
+7. **Loading states** — Appropriate feedback during operations (Low)
+
+## Step 5: Generate Coverage Summary
+
+After creating all test cases, provide a coverage summary:
+
+"**Coverage Summary:**
+
+Total test cases: [N]
+- Critical: [N] tests
+- High: [N] tests
+- Medium: [N] tests
+- Low: [N] tests
+
+Sections covered: [N]/[Total sections]
+- [Section 1]: [N] tests
+- [Section 2]: [N] tests
+
+Any gaps you'd like me to address?"
+
+## Step 6: Present Final Test Suite and Confirm
+
+Present the complete test suite for approval:
+
+"Here's your complete QA test suite with [N] test cases across [N] sections.
+
+Ready to save?"
+
+## Step 7: Create the File
+
+Once approved, create the file at `/product/qa-tests/qa-tests.md` with this exact format:
+
+```markdown
+# QA Test Cases
+
+## Coverage Summary
+[Summary paragraph describing what's covered, total test count, and any known gaps]
+
+## Test Cases
+
+### TC-001: [Test Title]
+**Section:** [Section Name]
+**Priority:** critical
+**Steps:**
+1. [Step 1]
+2. [Step 2]
+3. [Step 3]
+**Expected Result:** [What should happen when the test passes]
+
+### TC-002: [Test Title]
+**Section:** [Section Name]
+**Priority:** high
+**Steps:**
+1. [Step 1]
+2. [Step 2]
+**Expected Result:** [What should happen when the test passes]
+
+[Add more test cases as needed]
+```
+
+**Important:**
+- Test IDs must follow the `TC-XXX` format (e.g., TC-001, TC-002)
+- Priority must be one of: `critical`, `high`, `medium`, `low`
+- Steps must be numbered (1., 2., 3.)
+- Each test case must have Section, Priority, Steps, and Expected Result fields
+- The format must match exactly for the app to parse it correctly
+
+## Step 8: Confirm Completion
+
+Let the user know:
+
+"I've created your QA test suite at `/product/qa-tests/qa-tests.md`.
+
+**Summary:**
+- [N] total test cases
+- [N] critical, [N] high, [N] medium, [N] low priority
+- Covering [N] sections
+
+These test cases provide a comprehensive testing blueprint. You can use them for:
+- Manual QA testing during development
+- Writing automated tests (unit, integration, E2E)
+- Acceptance criteria for each section
+
+To regenerate or update test cases, run `/qa-tests` again."
+
+## Important Notes
+
+- Generate at least 3-5 test cases per section
+- Always include at least one critical test per section (happy path)
+- Include empty state and error handling tests for each section
+- Test steps should be specific and actionable — not vague
+- Expected results should be observable and verifiable
+- Use section names from the roadmap, not arbitrary names
+- Number test cases sequentially across all sections (TC-001, TC-002, etc.)
+- Keep test cases focused — one test per scenario, not mega-tests
+- Consider cross-section interactions where applicable
diff --git a/.claude/commands/design-os/tech-stack.md b/.claude/commands/design-os/tech-stack.md
new file mode 100644
index 00000000..55e26d9b
--- /dev/null
+++ b/.claude/commands/design-os/tech-stack.md
@@ -0,0 +1,182 @@
+# Tech Stack & Architecture
+
+You are helping the user define the technology choices and architecture for their product. This establishes the "how" — the tools, frameworks, and structural patterns that will power the product.
+
+## Step 1: Check Prerequisites
+
+First, verify that the product overview and roadmap exist:
+
+1. Read `/product/product-overview.md` to understand what the product does
+2. Read `/product/product-roadmap.md` to understand the planned sections
+3. Read `/product/data-model/data-model.md` if it exists, for entity context
+
+If the product overview is missing, let the user know:
+
+"Before defining your tech stack, you'll need to establish your product vision. Please run `/product-vision` first."
+
+Stop here if the prerequisite is missing.
+
+## Step 2: Gather Initial Input
+
+Review the product overview, roadmap, and data model, then present your initial analysis:
+
+"Based on your product — **[Product Name]** — I'll help you choose the right technologies and define the architecture.
+
+Let's cover:
+1. **Technology Choices** — Frontend, backend, database, hosting, etc.
+2. **Architecture Layers** — How the system is organized
+3. **Architecture Diagram** — A visual overview
+
+Do you already have preferences for any technologies (e.g., React, Node.js, PostgreSQL), or would you like me to suggest a stack based on your product requirements?"
+
+Wait for their response before proceeding.
+
+## Step 3: Define Technology Choices
+
+Walk through each category with the user. For each, suggest options based on the product type:
+
+**Categories to cover:**
+- **Frontend Framework** — React, Vue, Svelte, Next.js, etc.
+- **Backend/API** — Node.js, Python/Django, Go, serverless functions, etc.
+- **Database** — PostgreSQL, MongoDB, SQLite, Supabase, etc.
+- **Hosting/Infrastructure** — Vercel, AWS, Railway, Fly.io, etc.
+- **Authentication** — Auth0, Clerk, Supabase Auth, NextAuth, etc.
+- **Styling** — Tailwind CSS, CSS Modules, Styled Components, etc.
+
+For each category, use AskUserQuestion to ask:
+
+"For **[Category]**, I'd suggest **[Choice]** because [rationale based on product needs].
+
+Other options to consider:
+- [Alternative 1] — [brief rationale]
+- [Alternative 2] — [brief rationale]
+
+What would you prefer?"
+
+Only include categories that are relevant to the product. Skip categories that don't apply.
+
+## Step 4: Define Architecture Layers
+
+Based on the chosen technologies, propose architecture layers:
+
+"Here's how I'd structure your architecture:
+
+**[Layer 1 Name]** — [Description]
+- [Component 1]
+- [Component 2]
+
+**[Layer 2 Name]** — [Description]
+- [Component 1]
+- [Component 2]
+
+Common layers include:
+- **Presentation** — UI components, pages, routing
+- **Application** — Business logic, state management, API clients
+- **API** — REST/GraphQL endpoints, middleware, validation
+- **Data** — Database models, migrations, seed data
+- **Infrastructure** — Hosting, CI/CD, monitoring
+
+Does this structure make sense for your product?"
+
+Use AskUserQuestion to refine.
+
+## Step 5: Create Architecture Diagram
+
+Create a simple ASCII architecture diagram showing how the layers connect:
+
+"Here's a high-level view of your architecture:
+
+```
+[Browser] → [Frontend (React)] → [API (Node.js)] → [Database (PostgreSQL)]
+                                       ↓
+                                 [Auth (Clerk)]
+                                 [Storage (S3)]
+```
+
+Does this capture the main flow?"
+
+## Step 6: Present Final Choices and Confirm
+
+Present the complete tech stack for approval:
+
+"Here's your complete tech stack and architecture:
+
+**Technology Choices:**
+- **Frontend:** [Choice] — [Rationale]
+- **Backend:** [Choice] — [Rationale]
+- **Database:** [Choice] — [Rationale]
+[etc.]
+
+**Architecture:**
+[Layer summary]
+
+**Diagram:**
+[ASCII diagram]
+
+Ready to save?"
+
+## Step 7: Create the File
+
+Once approved, create the file at `/product/tech-stack/tech-stack.md` with this exact format:
+
+```markdown
+# Tech Stack & Architecture
+
+## Technology Choices
+
+### [Category]
+**Choice:** [Technology Name]
+**Rationale:** [Why this choice fits the product]
+
+### [Category]
+**Choice:** [Technology Name]
+**Rationale:** [Why this choice fits the product]
+
+[Add more categories as needed]
+
+## Architecture
+
+### [Layer Name]
+[Description of this layer's responsibility]
+- [Component 1]
+- [Component 2]
+
+### [Layer Name]
+[Description of this layer's responsibility]
+- [Component 1]
+- [Component 2]
+
+[Add more layers as needed]
+
+## Architecture Diagram
+```
+[ASCII diagram here]
+```
+```
+
+**Important:** The format with `### Category`, `**Choice:**`, and `**Rationale:**` must match exactly for the app to parse it correctly.
+
+## Step 8: Confirm Completion
+
+Let the user know:
+
+"I've created your tech stack definition at `/product/tech-stack/tech-stack.md`.
+
+**Technologies chosen:**
+- [List key choices]
+
+**Architecture layers:**
+- [List layers]
+
+This provides a clear technical foundation for your product. The implementation agent will use these choices when building your app.
+
+Next step: Run `/cost-estimator` to estimate infrastructure and service costs based on your tech stack."
+
+## Important Notes
+
+- Suggest technologies that match the product's complexity — don't over-engineer simple products
+- Consider the user's experience level — suggest well-documented, widely-adopted tools when possible
+- Keep the architecture layers practical — 3-5 layers is ideal
+- The ASCII diagram should be simple and readable
+- Focus on the "what" and "why", not detailed configuration
+- Don't include pricing in the tech stack — that's for the cost estimator
diff --git a/agents.md b/agents.md
index 29086b6e..b6dfae1b 100644
--- a/agents.md
+++ b/agents.md
@@ -45,6 +45,10 @@ Define the core entities and relationships in your product. This establishes the
 Choose your color palette (from Tailwind) and typography (from Google Fonts). These tokens are applied to all screen designs.
 **Output:** `product/design-system/colors.json`, `product/design-system/typography.json`
 
+### 4b. Figma Integration (`/figma`)
+Link your Figma design files for embedded previews and quick access from the Design tab.
+**Output:** `product/design-system/figma.json`
+
 ### 5. Application Shell (`/design-shell`)
 Design the persistent navigation and layout that wraps all sections.
 **Output:** `product/shell/spec.md`, `src/shell/components/`
@@ -55,7 +59,19 @@ Design the persistent navigation and layout that wraps all sections.
 - `/design-screen` — Create screen designs
 - `/screenshot-design` — Capture screenshots
 
-### 7. Export (`/export-product`)
+### 7. Tech Stack & Architecture (`/tech-stack`)
+Define the technology choices (frontend, backend, database, hosting, etc.) and architecture layers for your product.
+**Output:** `product/tech-stack/tech-stack.md`
+
+### 8. Cost Estimator & Optimizer (`/cost-estimator`)
+Estimate infrastructure and service costs at different usage tiers, and identify cost optimizations.
+**Output:** `product/cost-estimator/cost-estimate.md`
+
+### 9. QA Test Case Generator (`/qa-tests`)
+Generate comprehensive QA test cases covering all sections with priority levels and step-by-step instructions.
+**Output:** `product/qa-tests/qa-tests.md`
+
+### 10. Export (`/export-product`)
 Generate the complete export package with all components, types, and handoff documentation.
 **Output:** `product-plan/`
 
@@ -73,7 +89,17 @@ product/                           # Product definition (portable)
 │
 ├── design-system/                 # Design tokens
 │   ├── colors.json                # { primary, secondary, neutral }
-│   └── typography.json            # { heading, body, mono }
+│   ├── typography.json            # { heading, body, mono }
+│   └── figma.json                 # Figma integration { fileUrl, embedUrl, links }
+│
+├── tech-stack/                    # Tech stack & architecture
+│   └── tech-stack.md              # Technology choices and architecture layers
+│
+├── cost-estimator/                # Cost estimates
+│   └── cost-estimate.md           # Cost tiers and optimizations
+│
+├── qa-tests/                      # QA test cases
+│   └── qa-tests.md                # Test cases with priorities and steps
 │
 ├── shell/                         # Application shell
 │   └── spec.md                    # Shell specification
diff --git a/src/components/CostEstimatorPage.tsx b/src/components/CostEstimatorPage.tsx
new file mode 100644
index 00000000..65a2d295
--- /dev/null
+++ b/src/components/CostEstimatorPage.tsx
@@ -0,0 +1,141 @@
+import { useMemo } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { AppLayout } from '@/components/AppLayout'
+import { EmptyState } from '@/components/EmptyState'
+import { StepIndicator, type StepStatus } from '@/components/StepIndicator'
+import { NextPhaseButton } from '@/components/NextPhaseButton'
+import { loadProductData } from '@/lib/product-loader'
+
+export function CostEstimatorPage() {
+  const productData = useMemo(() => loadProductData(), [])
+  const costEstimate = productData.costEstimate
+
+  const hasCostEstimate = !!costEstimate
+  const stepStatus: StepStatus = hasCostEstimate ? 'completed' : 'current'
+
+  return (
+    <AppLayout>
+      <div className="space-y-6">
+        {/* Page intro */}
+        <div className="mb-8">
+          <h1 className="text-2xl font-semibold text-stone-900 dark:text-stone-100 mb-2">
+            Cost Estimator & Optimizer
+          </h1>
+          <p className="text-stone-600 dark:text-stone-400">
+            Estimate infrastructure and service costs, and identify optimizations.
+          </p>
+        </div>
+
+        {/* Step 1: Cost Estimate */}
+        <StepIndicator step={1} status={stepStatus} isLast={!hasCostEstimate}>
+          {!costEstimate ? (
+            <EmptyState type="cost-estimator" />
+          ) : (
+            <div className="space-y-6">
+              {/* Cost Tiers */}
+              {costEstimate.tiers.map((tier, index) => (
+                <Card key={index} className="border-stone-200 dark:border-stone-700 shadow-sm">
+                  <CardHeader>
+                    <CardTitle className="text-lg font-semibold text-stone-900 dark:text-stone-100 flex items-center justify-between">
+                      <span>{tier.name}</span>
+                      <span className="text-sm font-normal text-stone-500 dark:text-stone-400">
+                        {tier.users}
+                      </span>
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-3">
+                      {/* Total */}
+                      <div className="flex items-center justify-between pb-3 border-b border-stone-200 dark:border-stone-700">
+                        <span className="text-sm font-medium text-stone-600 dark:text-stone-400">
+                          Estimated Monthly Cost
+                        </span>
+                        <span className="text-lg font-semibold text-stone-900 dark:text-stone-100">
+                          ${tier.monthlyCost.toLocaleString()}/mo
+                        </span>
+                      </div>
+
+                      {/* Line items */}
+                      {tier.items.length > 0 && (
+                        <div className="space-y-2">
+                          {tier.items.map((item, ii) => (
+                            <div
+                              key={ii}
+                              className="flex items-start justify-between gap-4 py-2 bg-stone-50 dark:bg-stone-800/50 rounded-lg px-3"
+                            >
+                              <div className="flex-1 min-w-0">
+                                <div className="text-xs font-medium text-stone-500 dark:text-stone-400 uppercase tracking-wide">
+                                  {item.category}
+                                </div>
+                                <div className="text-sm font-medium text-stone-900 dark:text-stone-100">
+                                  {item.item}
+                                </div>
+                                {item.notes && (
+                                  <div className="text-xs text-stone-500 dark:text-stone-400 mt-0.5">
+                                    {item.notes}
+                                  </div>
+                                )}
+                              </div>
+                              <div className="text-sm font-medium text-stone-700 dark:text-stone-300 shrink-0">
+                                ${item.monthlyCost.toLocaleString()}/mo
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+
+              {/* Optimizations */}
+              {costEstimate.optimizations.length > 0 && (
+                <Card className="border-stone-200 dark:border-stone-700 shadow-sm">
+                  <CardHeader>
+                    <CardTitle className="text-lg font-semibold text-stone-900 dark:text-stone-100">
+                      Cost Optimizations
+                      <span className="ml-2 text-sm font-normal text-stone-500 dark:text-stone-400">
+                        ({costEstimate.optimizations.length})
+                      </span>
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <ul className="space-y-2">
+                      {costEstimate.optimizations.map((opt, index) => (
+                        <li key={index} className="flex items-start gap-3">
+                          <span className="w-1.5 h-1.5 rounded-full bg-lime-500 mt-2 shrink-0" />
+                          <span className="text-stone-700 dark:text-stone-300">
+                            {opt}
+                          </span>
+                        </li>
+                      ))}
+                    </ul>
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Edit hint */}
+              <div className="bg-stone-100 dark:bg-stone-800 rounded-md px-4 py-3">
+                <p className="text-sm text-stone-600 dark:text-stone-400">
+                  To update the cost estimate, run{' '}
+                  <code className="font-mono text-stone-800 dark:text-stone-200">/cost-estimator</code>{' '}
+                  or edit the file directly at{' '}
+                  <code className="font-mono text-stone-800 dark:text-stone-200">
+                    product/cost-estimator/cost-estimate.md
+                  </code>
+                </p>
+              </div>
+            </div>
+          )}
+        </StepIndicator>
+
+        {/* Next Phase Button */}
+        {hasCostEstimate && (
+          <StepIndicator step={2} status="current" isLast>
+            <NextPhaseButton nextPhase="qa-tests" />
+          </StepIndicator>
+        )}
+      </div>
+    </AppLayout>
+  )
+}
diff --git a/src/components/DesignPage.tsx b/src/components/DesignPage.tsx
index 46c43f4b..59e08de0 100644
--- a/src/components/DesignPage.tsx
+++ b/src/components/DesignPage.tsx
@@ -6,7 +6,7 @@ import { EmptyState } from '@/components/EmptyState'
 import { StepIndicator, type StepStatus } from '@/components/StepIndicator'
 import { NextPhaseButton } from '@/components/NextPhaseButton'
 import { loadProductData } from '@/lib/product-loader'
-import { ChevronRight, Layout } from 'lucide-react'
+import { ChevronRight, Layout, ExternalLink, Figma } from 'lucide-react'
 
 // Map Tailwind color names to actual color values for preview
 const colorMap: Record<string, { light: string; base: string; dark: string }> = {
@@ -34,12 +34,20 @@ const colorMap: Record<string, { light: string; base: string; dark: string }> =
   stone: { light: '#d6d3d1', base: '#78716c', dark: '#57534e' },
 }
 
+const figmaLinkTypeLabels: Record<string, string> = {
+  file: 'Design File',
+  prototype: 'Prototype',
+  board: 'Board',
+  frame: 'Frame',
+}
+
 /**
  * Determine the status of each step on the Design page
- * Steps: 1. Design Tokens, 2. Shell Design
+ * Steps: 1. Design Tokens, 2. Figma Integration, 3. Shell Design
  */
 function getDesignPageStepStatuses(
   hasDesignSystem: boolean,
+  hasFigma: boolean,
   hasShell: boolean
 ): StepStatus[] {
   const statuses: StepStatus[] = []
@@ -51,7 +59,16 @@ function getDesignPageStepStatuses(
     statuses.push('current')
   }
 
-  // Step 2: Shell
+  // Step 2: Figma Integration (optional — skip-friendly)
+  if (hasFigma) {
+    statuses.push('completed')
+  } else if (hasDesignSystem) {
+    statuses.push('current')
+  } else {
+    statuses.push('upcoming')
+  }
+
+  // Step 3: Shell
   if (hasShell) {
     statuses.push('completed')
   } else if (hasDesignSystem) {
@@ -69,10 +86,11 @@ export function DesignPage() {
   const shell = productData.shell
 
   const hasDesignSystem = !!(designSystem?.colors || designSystem?.typography)
+  const hasFigmaLinks = !!designSystem?.figma
   const hasShell = !!shell?.spec
   const allStepsComplete = hasDesignSystem && hasShell
 
-  const stepStatuses = getDesignPageStepStatuses(hasDesignSystem, hasShell)
+  const stepStatuses = getDesignPageStepStatuses(hasDesignSystem, hasFigmaLinks, hasShell)
 
   return (
     <AppLayout>
@@ -162,8 +180,100 @@ export function DesignPage() {
           )}
         </StepIndicator>
 
-        {/* Step 2: Application Shell */}
-        <StepIndicator step={2} status={stepStatuses[1]} isLast={!allStepsComplete}>
+        {/* Step 2: Figma Integration */}
+        <StepIndicator step={2} status={stepStatuses[1]}>
+          {!designSystem?.figma ? (
+            <EmptyState type="figma" />
+          ) : (
+            <Card className="border-stone-200 dark:border-stone-700 shadow-sm">
+              <CardHeader className="pb-4">
+                <CardTitle className="text-lg font-semibold text-stone-900 dark:text-stone-100 flex items-center gap-2">
+                  <Figma className="w-5 h-5 text-stone-500 dark:text-stone-400" strokeWidth={1.5} />
+                  Figma Integration
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-5">
+                {/* Figma Embed */}
+                {designSystem.figma.embedUrl && (
+                  <div>
+                    <h4 className="text-sm font-medium text-stone-500 dark:text-stone-400 uppercase tracking-wide mb-3">
+                      Preview
+                    </h4>
+                    <div className="rounded-lg overflow-hidden border border-stone-200 dark:border-stone-700 bg-white dark:bg-stone-900">
+                      <iframe
+                        src={designSystem.figma.embedUrl}
+                        className="w-full"
+                        style={{ height: '400px' }}
+                        allowFullScreen
+                        title="Figma embed"
+                      />
+                    </div>
+                  </div>
+                )}
+
+                {/* Figma Links */}
+                {designSystem.figma.links.length > 0 && (
+                  <div>
+                    <h4 className="text-sm font-medium text-stone-500 dark:text-stone-400 uppercase tracking-wide mb-3">
+                      Linked Files
+                    </h4>
+                    <div className="space-y-2">
+                      {designSystem.figma.links.map((link, index) => (
+                        <a
+                          key={index}
+                          href={link.url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="flex items-center justify-between gap-4 p-3 rounded-lg bg-stone-50 dark:bg-stone-800/50 hover:bg-stone-100 dark:hover:bg-stone-800 transition-colors group"
+                        >
+                          <div className="flex items-center gap-3 min-w-0">
+                            <div className="w-8 h-8 rounded-md bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center shrink-0">
+                              <Figma className="w-4 h-4 text-purple-600 dark:text-purple-400" strokeWidth={1.5} />
+                            </div>
+                            <div className="min-w-0">
+                              <p className="font-medium text-stone-900 dark:text-stone-100 truncate">
+                                {link.label}
+                              </p>
+                              <p className="text-xs text-stone-500 dark:text-stone-400">
+                                {figmaLinkTypeLabels[link.type] || link.type}
+                              </p>
+                            </div>
+                          </div>
+                          <ExternalLink className="w-4 h-4 text-stone-400 dark:text-stone-500 shrink-0 group-hover:text-stone-600 dark:group-hover:text-stone-300" strokeWidth={1.5} />
+                        </a>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Direct file link */}
+                {designSystem.figma.fileUrl && !designSystem.figma.links.some(l => l.url === designSystem.figma!.fileUrl) && (
+                  <a
+                    href={designSystem.figma.fileUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-2 text-sm text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 transition-colors"
+                  >
+                    <ExternalLink className="w-3.5 h-3.5" strokeWidth={1.5} />
+                    Open in Figma
+                  </a>
+                )}
+
+                {/* Edit hint */}
+                <div className="bg-stone-100 dark:bg-stone-800 rounded-md px-4 py-2.5">
+                  <p className="text-xs text-stone-500 dark:text-stone-400">
+                    Edit{' '}
+                    <code className="font-mono text-stone-700 dark:text-stone-300">product/design-system/figma.json</code>{' '}
+                    to update Figma links
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </StepIndicator>
+
+        {/* Step 3: Application Shell */}
+        <StepIndicator step={3} status={stepStatuses[2]} isLast={!allStepsComplete}>
           {!shell?.spec ? (
             <EmptyState type="shell" />
           ) : (
@@ -241,7 +351,7 @@ export function DesignPage() {
 
         {/* Next Phase Button - shown when all steps complete */}
         {allStepsComplete && (
-          <StepIndicator step={3} status="current" isLast>
+          <StepIndicator step={4} status="current" isLast>
             <NextPhaseButton nextPhase="sections" />
           </StepIndicator>
         )}
diff --git a/src/components/EmptyState.tsx b/src/components/EmptyState.tsx
index 6a8e4d0e..bdda748b 100644
--- a/src/components/EmptyState.tsx
+++ b/src/components/EmptyState.tsx
@@ -1,7 +1,7 @@
-import { FileText, Map, ClipboardList, Database, Layout, Package, Boxes, Palette, PanelLeft } from 'lucide-react'
+import { FileText, Map, ClipboardList, Database, Layout, Package, Boxes, Palette, PanelLeft, Server, DollarSign, TestTube, Figma } from 'lucide-react'
 import { Card, CardContent } from '@/components/ui/card'
 
-type EmptyStateType = 'overview' | 'roadmap' | 'spec' | 'data' | 'screen-designs' | 'data-model' | 'design-system' | 'shell' | 'export'
+type EmptyStateType = 'overview' | 'roadmap' | 'spec' | 'data' | 'screen-designs' | 'data-model' | 'design-system' | 'shell' | 'export' | 'tech-stack' | 'cost-estimator' | 'qa-tests' | 'figma'
 
 interface EmptyStateProps {
   type: EmptyStateType
@@ -67,6 +67,30 @@ const config: Record<EmptyStateType, {
     command: '/export-product',
     description: 'Generate the complete handoff package',
   },
+  'tech-stack': {
+    icon: Server,
+    title: 'No tech stack defined yet',
+    command: '/tech-stack',
+    description: 'Define the technology choices and architecture for your product',
+  },
+  'cost-estimator': {
+    icon: DollarSign,
+    title: 'No cost estimate defined yet',
+    command: '/cost-estimator',
+    description: 'Estimate infrastructure costs and identify optimizations',
+  },
+  'qa-tests': {
+    icon: TestTube,
+    title: 'No QA test cases generated yet',
+    command: '/qa-tests',
+    description: 'Generate test cases for validating product functionality',
+  },
+  figma: {
+    icon: Figma,
+    title: 'No Figma files linked yet',
+    command: 'product/design-system/figma.json',
+    description: 'Link your Figma design files for embedded previews and quick access',
+  },
 }
 
 export function EmptyState({ type }: EmptyStateProps) {
diff --git a/src/components/NextPhaseButton.tsx b/src/components/NextPhaseButton.tsx
index 4e7fb889..a4e31ccc 100644
--- a/src/components/NextPhaseButton.tsx
+++ b/src/components/NextPhaseButton.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom'
-import { FileText, Boxes, Layout, LayoutList, Package, ArrowRight } from 'lucide-react'
+import { FileText, Boxes, Layout, LayoutList, Package, Server, DollarSign, TestTube, ArrowRight } from 'lucide-react'
 import type { Phase } from './PhaseNav'
 
 interface NextPhaseButtonProps {
@@ -10,6 +10,9 @@ const phaseConfig: Record<Exclude<Phase, 'product'>, { label: string; icon: type
   'data-model': { label: 'Data Model', icon: Boxes, path: '/data-model' },
   'design': { label: 'Design', icon: Layout, path: '/design' },
   'sections': { label: 'Sections', icon: LayoutList, path: '/sections' },
+  'tech-stack': { label: 'Tech Stack', icon: Server, path: '/tech-stack' },
+  'cost-estimator': { label: 'Cost Estimator', icon: DollarSign, path: '/cost-estimator' },
+  'qa-tests': { label: 'QA Tests', icon: TestTube, path: '/qa-tests' },
   'export': { label: 'Export', icon: Package, path: '/export' },
 }
 
diff --git a/src/components/PhaseNav.tsx b/src/components/PhaseNav.tsx
index 9f876183..95329119 100644
--- a/src/components/PhaseNav.tsx
+++ b/src/components/PhaseNav.tsx
@@ -1,10 +1,10 @@
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useMemo } from 'react'
-import { FileText, Boxes, Layout, LayoutList, Package } from 'lucide-react'
+import { FileText, Boxes, Layout, LayoutList, Package, Server, DollarSign, TestTube } from 'lucide-react'
 import { loadProductData, hasExportZip } from '@/lib/product-loader'
 import { getAllSectionIds, getSectionScreenDesigns } from '@/lib/section-loader'
 
-export type Phase = 'product' | 'data-model' | 'design' | 'sections' | 'export'
+export type Phase = 'product' | 'data-model' | 'design' | 'sections' | 'tech-stack' | 'cost-estimator' | 'qa-tests' | 'export'
 
 interface PhaseConfig {
   id: Phase
@@ -18,6 +18,9 @@ const phases: PhaseConfig[] = [
   { id: 'data-model', label: 'Data Model', icon: Boxes, path: '/data-model' },
   { id: 'design', label: 'Design', icon: Layout, path: '/design' },
   { id: 'sections', label: 'Sections', icon: LayoutList, path: '/sections' },
+  { id: 'tech-stack', label: 'Tech Stack', icon: Server, path: '/tech-stack' },
+  { id: 'cost-estimator', label: 'Costs', icon: DollarSign, path: '/cost-estimator' },
+  { id: 'qa-tests', label: 'QA Tests', icon: TestTube, path: '/qa-tests' },
   { id: 'export', label: 'Export', icon: Package, path: '/export' },
 ]
 
@@ -58,6 +61,12 @@ function usePhaseStatuses(): PhaseInfo[] {
     currentPhaseId = 'design'
   } else if (currentPath === '/sections' || currentPath.startsWith('/sections/')) {
     currentPhaseId = 'sections'
+  } else if (currentPath === '/tech-stack') {
+    currentPhaseId = 'tech-stack'
+  } else if (currentPath === '/cost-estimator') {
+    currentPhaseId = 'cost-estimator'
+  } else if (currentPath === '/qa-tests') {
+    currentPhaseId = 'qa-tests'
   } else if (currentPath === '/export') {
     currentPhaseId = 'export'
   }
@@ -65,12 +74,19 @@ function usePhaseStatuses(): PhaseInfo[] {
   // Check if export zip exists
   const exportZipExists = hasExportZip()
 
+  const hasTechStack = !!productData.techStack
+  const hasCostEstimate = !!productData.costEstimate
+  const hasQaTests = !!productData.qaTests
+
   // Determine completion status
   const phaseComplete: Record<Phase, boolean> = {
     'product': hasOverview && hasRoadmap,
     'data-model': hasDataModel,
     'design': hasDesignSystem || hasShell,
     'sections': hasSections,
+    'tech-stack': hasTechStack,
+    'cost-estimator': hasCostEstimate,
+    'qa-tests': hasQaTests,
     'export': exportZipExists,
   }
 
diff --git a/src/components/QaTestsPage.tsx b/src/components/QaTestsPage.tsx
new file mode 100644
index 00000000..568bf0f9
--- /dev/null
+++ b/src/components/QaTestsPage.tsx
@@ -0,0 +1,164 @@
+import { useMemo } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { AppLayout } from '@/components/AppLayout'
+import { EmptyState } from '@/components/EmptyState'
+import { StepIndicator, type StepStatus } from '@/components/StepIndicator'
+import { NextPhaseButton } from '@/components/NextPhaseButton'
+import { loadProductData } from '@/lib/product-loader'
+import type { TestCase } from '@/types/product'
+
+const priorityStyles: Record<string, string> = {
+  critical: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400',
+  high: 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400',
+  medium: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400',
+  low: 'bg-stone-100 dark:bg-stone-700 text-stone-600 dark:text-stone-400',
+}
+
+export function QaTestsPage() {
+  const productData = useMemo(() => loadProductData(), [])
+  const qaTests = productData.qaTests
+
+  const hasQaTests = !!qaTests
+  const stepStatus: StepStatus = hasQaTests ? 'completed' : 'current'
+
+  // Group test cases by section
+  const groupedTests = useMemo(() => {
+    if (!qaTests) return new Map<string, TestCase[]>()
+    const groups = new Map<string, TestCase[]>()
+    for (const tc of qaTests.testCases) {
+      const section = tc.section || 'General'
+      if (!groups.has(section)) groups.set(section, [])
+      groups.get(section)!.push(tc)
+    }
+    return groups
+  }, [qaTests])
+
+  return (
+    <AppLayout>
+      <div className="space-y-6">
+        {/* Page intro */}
+        <div className="mb-8">
+          <h1 className="text-2xl font-semibold text-stone-900 dark:text-stone-100 mb-2">
+            QA Test Cases
+          </h1>
+          <p className="text-stone-600 dark:text-stone-400">
+            Generated test cases for validating your product's functionality.
+          </p>
+        </div>
+
+        {/* Step 1: Test Cases */}
+        <StepIndicator step={1} status={stepStatus} isLast={!hasQaTests}>
+          {!qaTests ? (
+            <EmptyState type="qa-tests" />
+          ) : (
+            <div className="space-y-6">
+              {/* Coverage Summary */}
+              {qaTests.coverageSummary && (
+                <Card className="border-stone-200 dark:border-stone-700 shadow-sm">
+                  <CardHeader>
+                    <CardTitle className="text-lg font-semibold text-stone-900 dark:text-stone-100">
+                      Coverage Summary
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <p className="text-stone-700 dark:text-stone-300 leading-relaxed">
+                      {qaTests.coverageSummary}
+                    </p>
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Stats */}
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                {(['critical', 'high', 'medium', 'low'] as const).map((priority) => {
+                  const count = qaTests.testCases.filter(tc => tc.priority === priority).length
+                  return (
+                    <div key={priority} className="bg-stone-50 dark:bg-stone-800/50 rounded-lg p-3 text-center">
+                      <div className="text-2xl font-semibold text-stone-900 dark:text-stone-100">{count}</div>
+                      <div className={`text-xs font-medium uppercase tracking-wide mt-0.5 ${priorityStyles[priority].split(' ').filter(c => c.startsWith('text-')).join(' ')}`}>
+                        {priority}
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+
+              {/* Test Cases by Section */}
+              {[...groupedTests.entries()].map(([section, cases]) => (
+                <Card key={section} className="border-stone-200 dark:border-stone-700 shadow-sm">
+                  <CardHeader>
+                    <CardTitle className="text-lg font-semibold text-stone-900 dark:text-stone-100">
+                      {section}
+                      <span className="ml-2 text-sm font-normal text-stone-500 dark:text-stone-400">
+                        ({cases.length} tests)
+                      </span>
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-4">
+                      {cases.map((tc) => (
+                        <div
+                          key={tc.id}
+                          className="bg-stone-50 dark:bg-stone-800/50 rounded-lg p-4"
+                        >
+                          <div className="flex items-center gap-2 mb-2">
+                            <span className="text-xs font-mono text-stone-500 dark:text-stone-400">
+                              {tc.id}
+                            </span>
+                            <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${priorityStyles[tc.priority]}`}>
+                              {tc.priority}
+                            </span>
+                          </div>
+                          <h4 className="font-medium text-stone-900 dark:text-stone-100 mb-2">
+                            {tc.title}
+                          </h4>
+                          {tc.steps.length > 0 && (
+                            <ol className="space-y-1 mb-2">
+                              {tc.steps.map((step, si) => (
+                                <li key={si} className="flex items-start gap-2 text-sm text-stone-600 dark:text-stone-400">
+                                  <span className="text-xs font-medium text-stone-400 dark:text-stone-500 mt-0.5 shrink-0 w-4 text-right">
+                                    {si + 1}.
+                                  </span>
+                                  {step}
+                                </li>
+                              ))}
+                            </ol>
+                          )}
+                          {tc.expectedResult && (
+                            <div className="text-sm mt-2 pt-2 border-t border-stone-200 dark:border-stone-700">
+                              <span className="font-medium text-stone-700 dark:text-stone-300">Expected: </span>
+                              <span className="text-stone-600 dark:text-stone-400">{tc.expectedResult}</span>
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+
+              {/* Edit hint */}
+              <div className="bg-stone-100 dark:bg-stone-800 rounded-md px-4 py-3">
+                <p className="text-sm text-stone-600 dark:text-stone-400">
+                  To regenerate test cases, run{' '}
+                  <code className="font-mono text-stone-800 dark:text-stone-200">/qa-tests</code>{' '}
+                  or edit the file directly at{' '}
+                  <code className="font-mono text-stone-800 dark:text-stone-200">
+                    product/qa-tests/qa-tests.md
+                  </code>
+                </p>
+              </div>
+            </div>
+          )}
+        </StepIndicator>
+
+        {/* Next Phase Button */}
+        {hasQaTests && (
+          <StepIndicator step={2} status="current" isLast>
+            <NextPhaseButton nextPhase="export" />
+          </StepIndicator>
+        )}
+      </div>
+    </AppLayout>
+  )
+}
diff --git a/src/components/SectionsPage.tsx b/src/components/SectionsPage.tsx
index 3ccb8db3..dc860fa1 100644
--- a/src/components/SectionsPage.tsx
+++ b/src/components/SectionsPage.tsx
@@ -148,7 +148,7 @@ export function SectionsPage() {
 
         {/* Next Phase Button - shown when all sections are complete */}
         {sections.length > 0 && completedSections === sections.length && (
-          <NextPhaseButton nextPhase="export" />
+          <NextPhaseButton nextPhase="tech-stack" />
         )}
       </div>
     </AppLayout>
diff --git a/src/components/TechStackPage.tsx b/src/components/TechStackPage.tsx
new file mode 100644
index 00000000..4c3265c3
--- /dev/null
+++ b/src/components/TechStackPage.tsx
@@ -0,0 +1,154 @@
+import { useMemo } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { AppLayout } from '@/components/AppLayout'
+import { EmptyState } from '@/components/EmptyState'
+import { StepIndicator, type StepStatus } from '@/components/StepIndicator'
+import { NextPhaseButton } from '@/components/NextPhaseButton'
+import { loadProductData } from '@/lib/product-loader'
+
+export function TechStackPage() {
+  const productData = useMemo(() => loadProductData(), [])
+  const techStack = productData.techStack
+
+  const hasTechStack = !!techStack
+  const stepStatus: StepStatus = hasTechStack ? 'completed' : 'current'
+
+  return (
+    <AppLayout>
+      <div className="space-y-6">
+        {/* Page intro */}
+        <div className="mb-8">
+          <h1 className="text-2xl font-semibold text-stone-900 dark:text-stone-100 mb-2">
+            Tech Stack & Architecture
+          </h1>
+          <p className="text-stone-600 dark:text-stone-400">
+            Define the technology choices and architecture for your product.
+          </p>
+        </div>
+
+        {/* Step 1: Tech Stack */}
+        <StepIndicator step={1} status={stepStatus} isLast={!hasTechStack}>
+          {!techStack ? (
+            <EmptyState type="tech-stack" />
+          ) : (
+            <div className="space-y-6">
+              {/* Technology Choices */}
+              <Card className="border-stone-200 dark:border-stone-700 shadow-sm">
+                <CardHeader>
+                  <CardTitle className="text-lg font-semibold text-stone-900 dark:text-stone-100">
+                    Technology Choices
+                    <span className="ml-2 text-sm font-normal text-stone-500 dark:text-stone-400">
+                      ({techStack.choices.length})
+                    </span>
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  {techStack.choices.length === 0 ? (
+                    <p className="text-stone-500 dark:text-stone-400">No technology choices defined.</p>
+                  ) : (
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                      {techStack.choices.map((choice, index) => (
+                        <div
+                          key={index}
+                          className="bg-stone-50 dark:bg-stone-800/50 rounded-lg p-4"
+                        >
+                          <div className="text-xs font-medium text-stone-500 dark:text-stone-400 uppercase tracking-wide mb-1">
+                            {choice.category}
+                          </div>
+                          <h3 className="font-semibold text-stone-900 dark:text-stone-100 mb-1">
+                            {choice.choice}
+                          </h3>
+                          <p className="text-stone-600 dark:text-stone-400 text-sm leading-relaxed">
+                            {choice.rationale}
+                          </p>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+
+              {/* Architecture Layers */}
+              <Card className="border-stone-200 dark:border-stone-700 shadow-sm">
+                <CardHeader>
+                  <CardTitle className="text-lg font-semibold text-stone-900 dark:text-stone-100">
+                    Architecture
+                    <span className="ml-2 text-sm font-normal text-stone-500 dark:text-stone-400">
+                      ({techStack.architecture.length} layers)
+                    </span>
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  {techStack.architecture.length === 0 ? (
+                    <p className="text-stone-500 dark:text-stone-400">No architecture layers defined.</p>
+                  ) : (
+                    <div className="space-y-4">
+                      {techStack.architecture.map((layer, index) => (
+                        <div
+                          key={index}
+                          className="bg-stone-50 dark:bg-stone-800/50 rounded-lg p-4"
+                        >
+                          <h3 className="font-semibold text-stone-900 dark:text-stone-100 mb-1">
+                            {layer.name}
+                          </h3>
+                          <p className="text-stone-600 dark:text-stone-400 text-sm mb-2">
+                            {layer.description}
+                          </p>
+                          {layer.components.length > 0 && (
+                            <ul className="space-y-1">
+                              {layer.components.map((component, ci) => (
+                                <li key={ci} className="flex items-start gap-2 text-sm text-stone-700 dark:text-stone-300">
+                                  <span className="w-1.5 h-1.5 rounded-full bg-stone-400 dark:bg-stone-500 mt-1.5 shrink-0" />
+                                  {component}
+                                </li>
+                              ))}
+                            </ul>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+
+              {/* Architecture Diagram */}
+              {techStack.diagram && (
+                <Card className="border-stone-200 dark:border-stone-700 shadow-sm">
+                  <CardHeader>
+                    <CardTitle className="text-lg font-semibold text-stone-900 dark:text-stone-100">
+                      Architecture Diagram
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <pre className="bg-stone-50 dark:bg-stone-800/50 rounded-lg p-4 text-sm text-stone-700 dark:text-stone-300 font-mono overflow-x-auto whitespace-pre">
+                      {techStack.diagram}
+                    </pre>
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Edit hint */}
+              <div className="bg-stone-100 dark:bg-stone-800 rounded-md px-4 py-3">
+                <p className="text-sm text-stone-600 dark:text-stone-400">
+                  To update the tech stack, run{' '}
+                  <code className="font-mono text-stone-800 dark:text-stone-200">/tech-stack</code>{' '}
+                  or edit the file directly at{' '}
+                  <code className="font-mono text-stone-800 dark:text-stone-200">
+                    product/tech-stack/tech-stack.md
+                  </code>
+                </p>
+              </div>
+            </div>
+          )}
+        </StepIndicator>
+
+        {/* Next Phase Button */}
+        {hasTechStack && (
+          <StepIndicator step={2} status="current" isLast>
+            <NextPhaseButton nextPhase="cost-estimator" />
+          </StepIndicator>
+        )}
+      </div>
+    </AppLayout>
+  )
+}
diff --git a/src/lib/cost-estimator-loader.ts b/src/lib/cost-estimator-loader.ts
new file mode 100644
index 00000000..b59304f4
--- /dev/null
+++ b/src/lib/cost-estimator-loader.ts
@@ -0,0 +1,99 @@
+/**
+ * Cost Estimator & Optimizer data loading utilities
+ */
+
+import type { CostEstimate, CostTier, CostLineItem } from '@/types/product'
+
+// Load cost estimator files from /product/cost-estimator/ directory at build time
+const costFiles = import.meta.glob('/product/cost-estimator/*.md', {
+  query: '?raw',
+  import: 'default',
+  eager: true,
+}) as Record<string, string>
+
+/**
+ * Parse cost-estimate.md content into CostEstimate structure
+ *
+ * Expected format:
+ * # Cost Estimate
+ *
+ * ## [Tier Name] ([User Count])
+ *
+ * | Category | Item | Monthly Cost | Notes |
+ * |----------|------|-------------|-------|
+ * | Hosting  | AWS  | $50         | ...   |
+ *
+ * ## Optimizations
+ * - Optimization 1
+ * - Optimization 2
+ */
+export function parseCostEstimate(md: string): CostEstimate | null {
+  if (!md || !md.trim()) return null
+
+  try {
+    const tiers: CostTier[] = []
+    const optimizations: string[] = []
+
+    // Extract tiers - ## Tier Name (user count)
+    const tierMatches = [...md.matchAll(/## (.+?)\s*\((.+?)\)\s*\n+([\s\S]*?)(?=\n## |\n#[^#]|$)/g)]
+    for (const match of tierMatches) {
+      const name = match[1].trim()
+      const users = match[2].trim()
+      const body = match[3].trim()
+      const items: CostLineItem[] = []
+
+      // Parse markdown table rows
+      const tableRows = body.split('\n').filter(line => line.includes('|') && !line.match(/^\s*\|[\s-|]+\|\s*$/))
+      for (const row of tableRows) {
+        const cells = row.split('|').map(c => c.trim()).filter(Boolean)
+        if (cells.length >= 4 && cells[0] !== 'Category') {
+          const costStr = cells[2].replace(/[^0-9.]/g, '')
+          items.push({
+            category: cells[0],
+            item: cells[1],
+            monthlyCost: parseFloat(costStr) || 0,
+            notes: cells[3],
+          })
+        }
+      }
+
+      const monthlyCost = items.reduce((sum, item) => sum + item.monthlyCost, 0)
+      tiers.push({ name, users, monthlyCost, items })
+    }
+
+    // Extract optimizations
+    const optSection = md.match(/## Optimizations\s*\n+([\s\S]*?)(?=\n## |\n#[^#]|$)/)
+    if (optSection?.[1]) {
+      const lines = optSection[1].split('\n')
+      for (const line of lines) {
+        const trimmed = line.trim()
+        if (trimmed.startsWith('- ')) {
+          optimizations.push(trimmed.slice(2).trim())
+        }
+      }
+    }
+
+    if (tiers.length === 0 && optimizations.length === 0) {
+      return null
+    }
+
+    return { tiers, optimizations }
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Load cost estimate data
+ */
+export function loadCostEstimate(): CostEstimate | null {
+  const content = costFiles['/product/cost-estimator/cost-estimate.md']
+  return content ? parseCostEstimate(content) : null
+}
+
+/**
+ * Check if cost estimate has been defined
+ */
+export function hasCostEstimate(): boolean {
+  return '/product/cost-estimator/cost-estimate.md' in costFiles
+}
diff --git a/src/lib/design-system-loader.ts b/src/lib/design-system-loader.ts
index 0b0ea5b7..76925af5 100644
--- a/src/lib/design-system-loader.ts
+++ b/src/lib/design-system-loader.ts
@@ -3,6 +3,7 @@
  */
 
 import type { DesignSystem, ColorTokens, TypographyTokens } from '@/types/product'
+import { loadFigmaIntegration, hasFigma as hasFigmaConfig } from './figma-loader'
 
 // Load JSON files from product/design-system at build time
 const designSystemFiles = import.meta.glob('/product/design-system/*.json', {
@@ -67,13 +68,14 @@ export function loadTypographyTokens(): TypographyTokens | null {
 export function loadDesignSystem(): DesignSystem | null {
   const colors = loadColorTokens()
   const typography = loadTypographyTokens()
+  const figma = loadFigmaIntegration()
 
-  // Return null if neither colors nor typography are defined
-  if (!colors && !typography) {
+  // Return null if nothing is defined
+  if (!colors && !typography && !figma) {
     return null
   }
 
-  return { colors, typography }
+  return { colors, typography, figma }
 }
 
 /**
@@ -99,3 +101,10 @@ export function hasColors(): boolean {
 export function hasTypography(): boolean {
   return '/product/design-system/typography.json' in designSystemFiles
 }
+
+/**
+ * Check if Figma integration has been configured
+ */
+export function hasFigma(): boolean {
+  return hasFigmaConfig()
+}
diff --git a/src/lib/figma-loader.ts b/src/lib/figma-loader.ts
new file mode 100644
index 00000000..76275f78
--- /dev/null
+++ b/src/lib/figma-loader.ts
@@ -0,0 +1,62 @@
+/**
+ * Figma integration loading utilities
+ */
+
+import type { FigmaIntegration, FigmaLink } from '@/types/product'
+
+// Load figma config from product/design-system at build time
+const figmaFiles = import.meta.glob('/product/design-system/figma.json', {
+  eager: true,
+}) as Record<string, { default: Record<string, unknown> }>
+
+/**
+ * Parse figma.json into FigmaIntegration structure
+ *
+ * Expected format:
+ * {
+ *   "fileUrl": "https://www.figma.com/design/...",
+ *   "embedUrl": "https://www.figma.com/embed?...",
+ *   "accessToken": "",
+ *   "links": [
+ *     { "label": "Main Design File", "url": "https://...", "type": "file" },
+ *     { "label": "Prototype", "url": "https://...", "type": "prototype" }
+ *   ]
+ * }
+ */
+export function loadFigmaIntegration(): FigmaIntegration | null {
+  const figmaModule = figmaFiles['/product/design-system/figma.json']
+  if (!figmaModule?.default) return null
+
+  const data = figmaModule.default
+  if (!data.fileUrl && (!data.links || !Array.isArray(data.links) || (data.links as unknown[]).length === 0)) {
+    return null
+  }
+
+  const links: FigmaLink[] = []
+  if (Array.isArray(data.links)) {
+    for (const link of data.links) {
+      const l = link as Record<string, string>
+      if (l.label && l.url) {
+        const validTypes = ['file', 'prototype', 'board', 'frame'] as const
+        const type = validTypes.includes(l.type as typeof validTypes[number])
+          ? (l.type as FigmaLink['type'])
+          : 'file'
+        links.push({ label: l.label, url: l.url, type })
+      }
+    }
+  }
+
+  return {
+    fileUrl: (data.fileUrl as string) || '',
+    embedUrl: (data.embedUrl as string) || '',
+    links,
+    accessToken: (data.accessToken as string) || '',
+  }
+}
+
+/**
+ * Check if Figma integration has been configured
+ */
+export function hasFigma(): boolean {
+  return '/product/design-system/figma.json' in figmaFiles
+}
diff --git a/src/lib/product-loader.ts b/src/lib/product-loader.ts
index 39508a9c..8c3a534b 100644
--- a/src/lib/product-loader.ts
+++ b/src/lib/product-loader.ts
@@ -6,6 +6,9 @@ import type { ProductOverview, ProductRoadmap, Problem, Section, ProductData } f
 import { loadDataModel, hasDataModel } from './data-model-loader'
 import { loadDesignSystem, hasDesignSystem } from './design-system-loader'
 import { loadShellInfo, hasShell } from './shell-loader'
+import { loadTechStack, hasTechStack } from './tech-stack-loader'
+import { loadCostEstimate, hasCostEstimate } from './cost-estimator-loader'
+import { loadQaTests, hasQaTests } from './qa-tests-loader'
 
 // Load markdown files from /product/ directory at build time
 const productFiles = import.meta.glob('/product/*.md', {
@@ -164,6 +167,9 @@ export function loadProductData(): ProductData {
     dataModel: loadDataModel(),
     designSystem: loadDesignSystem(),
     shell: loadShellInfo(),
+    techStack: loadTechStack(),
+    costEstimate: loadCostEstimate(),
+    qaTests: loadQaTests(),
   }
 }
 
@@ -196,4 +202,4 @@ export function getExportZipUrl(): string | null {
 }
 
 // Re-export utility functions for checking individual pieces
-export { hasDataModel, hasDesignSystem, hasShell }
+export { hasDataModel, hasDesignSystem, hasShell, hasTechStack, hasCostEstimate, hasQaTests }
diff --git a/src/lib/qa-tests-loader.ts b/src/lib/qa-tests-loader.ts
new file mode 100644
index 00000000..32ef7502
--- /dev/null
+++ b/src/lib/qa-tests-loader.ts
@@ -0,0 +1,108 @@
+/**
+ * QA Test Case Generator data loading utilities
+ */
+
+import type { QaTestSuite, TestCase } from '@/types/product'
+
+// Load QA test files from /product/qa-tests/ directory at build time
+const qaFiles = import.meta.glob('/product/qa-tests/*.md', {
+  query: '?raw',
+  import: 'default',
+  eager: true,
+}) as Record<string, string>
+
+/**
+ * Parse qa-tests.md content into QaTestSuite structure
+ *
+ * Expected format:
+ * # QA Test Cases
+ *
+ * ## Coverage Summary
+ * [Summary text]
+ *
+ * ## Test Cases
+ *
+ * ### TC-001: [Title]
+ * **Section:** [Section Name]
+ * **Priority:** critical|high|medium|low
+ * **Steps:**
+ * 1. Step one
+ * 2. Step two
+ * **Expected Result:** [Result description]
+ */
+export function parseQaTests(md: string): QaTestSuite | null {
+  if (!md || !md.trim()) return null
+
+  try {
+    const testCases: TestCase[] = []
+    let coverageSummary = ''
+
+    // Extract Coverage Summary
+    const summaryMatch = md.match(/## Coverage Summary\s*\n+([\s\S]*?)(?=\n## |\n#[^#]|$)/)
+    if (summaryMatch?.[1]) {
+      coverageSummary = summaryMatch[1].trim()
+    }
+
+    // Extract Test Cases
+    const casesSection = md.match(/## Test Cases\s*\n+([\s\S]*?)(?=\n## [^#]|\n#[^#]|$)/)
+    if (casesSection?.[1]) {
+      const caseMatches = [...casesSection[1].matchAll(/### (TC-\d+):\s*(.+)\n+([\s\S]*?)(?=\n### |\n## |$)/g)]
+      for (const match of caseMatches) {
+        const id = match[1].trim()
+        const title = match[2].trim()
+        const body = match[3].trim()
+
+        const sectionMatch = body.match(/\*\*Section:\*\*\s*(.+)/)
+        const priorityMatch = body.match(/\*\*Priority:\*\*\s*(.+)/)
+        const expectedMatch = body.match(/\*\*Expected Result:\*\*\s*(.+)/)
+
+        const steps: string[] = []
+        const stepsSection = body.match(/\*\*Steps:\*\*\s*\n+([\s\S]*?)(?=\*\*Expected|\n### |$)/)
+        if (stepsSection?.[1]) {
+          const lines = stepsSection[1].split('\n')
+          for (const line of lines) {
+            const trimmed = line.trim()
+            const stepMatch = trimmed.match(/^\d+\.\s+(.+)/)
+            if (stepMatch) {
+              steps.push(stepMatch[1].trim())
+            }
+          }
+        }
+
+        const priority = (priorityMatch?.[1]?.trim().toLowerCase() || 'medium') as TestCase['priority']
+
+        testCases.push({
+          id,
+          title,
+          section: sectionMatch?.[1]?.trim() || '',
+          priority: ['critical', 'high', 'medium', 'low'].includes(priority) ? priority : 'medium',
+          steps,
+          expectedResult: expectedMatch?.[1]?.trim() || '',
+        })
+      }
+    }
+
+    if (testCases.length === 0) {
+      return null
+    }
+
+    return { testCases, coverageSummary }
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Load QA test suite data
+ */
+export function loadQaTests(): QaTestSuite | null {
+  const content = qaFiles['/product/qa-tests/qa-tests.md']
+  return content ? parseQaTests(content) : null
+}
+
+/**
+ * Check if QA tests have been defined
+ */
+export function hasQaTests(): boolean {
+  return '/product/qa-tests/qa-tests.md' in qaFiles
+}
diff --git a/src/lib/router.tsx b/src/lib/router.tsx
index 6f32118c..63459982 100644
--- a/src/lib/router.tsx
+++ b/src/lib/router.tsx
@@ -6,6 +6,9 @@ import { SectionsPage } from '@/components/SectionsPage'
 import { SectionPage } from '@/components/SectionPage'
 import { ScreenDesignPage, ScreenDesignFullscreen } from '@/components/ScreenDesignPage'
 import { ShellDesignPage, ShellDesignFullscreen } from '@/components/ShellDesignPage'
+import { TechStackPage } from '@/components/TechStackPage'
+import { CostEstimatorPage } from '@/components/CostEstimatorPage'
+import { QaTestsPage } from '@/components/QaTestsPage'
 import { ExportPage } from '@/components/ExportPage'
 
 export const router = createBrowserRouter([
@@ -45,6 +48,18 @@ export const router = createBrowserRouter([
     path: '/shell/design/fullscreen',
     element: <ShellDesignFullscreen />,
   },
+  {
+    path: '/tech-stack',
+    element: <TechStackPage />,
+  },
+  {
+    path: '/cost-estimator',
+    element: <CostEstimatorPage />,
+  },
+  {
+    path: '/qa-tests',
+    element: <QaTestsPage />,
+  },
   {
     path: '/export',
     element: <ExportPage />,
diff --git a/src/lib/tech-stack-loader.ts b/src/lib/tech-stack-loader.ts
new file mode 100644
index 00000000..fd1bcec9
--- /dev/null
+++ b/src/lib/tech-stack-loader.ts
@@ -0,0 +1,112 @@
+/**
+ * Tech Stack & Architecture data loading utilities
+ */
+
+import type { TechStack, TechChoice, ArchitectureLayer } from '@/types/product'
+
+// Load tech stack files from /product/tech-stack/ directory at build time
+const techStackFiles = import.meta.glob('/product/tech-stack/*.md', {
+  query: '?raw',
+  import: 'default',
+  eager: true,
+}) as Record<string, string>
+
+/**
+ * Parse tech-stack.md content into TechStack structure
+ *
+ * Expected format:
+ * # Tech Stack & Architecture
+ *
+ * ## Technology Choices
+ *
+ * ### [Category]
+ * **Choice:** [Technology]
+ * **Rationale:** [Why this choice]
+ *
+ * ## Architecture
+ *
+ * ### [Layer Name]
+ * [Description]
+ * - Component 1
+ * - Component 2
+ *
+ * ## Architecture Diagram
+ * ```
+ * [ASCII or text diagram]
+ * ```
+ */
+export function parseTechStack(md: string): TechStack | null {
+  if (!md || !md.trim()) return null
+
+  try {
+    const choices: TechChoice[] = []
+    const architecture: ArchitectureLayer[] = []
+    let diagram = ''
+
+    // Extract Technology Choices section
+    const choicesSection = md.match(/## Technology Choices\s*\n+([\s\S]*?)(?=\n## |\n#[^#]|$)/)
+    if (choicesSection?.[1]) {
+      const choiceMatches = [...choicesSection[1].matchAll(/### (.+)\n+([\s\S]*?)(?=\n### |\n## |$)/g)]
+      for (const match of choiceMatches) {
+        const category = match[1].trim()
+        const body = match[2].trim()
+        const choiceMatch = body.match(/\*\*Choice:\*\*\s*(.+)/)
+        const rationaleMatch = body.match(/\*\*Rationale:\*\*\s*(.+)/)
+        choices.push({
+          category,
+          choice: choiceMatch?.[1]?.trim() || '',
+          rationale: rationaleMatch?.[1]?.trim() || '',
+        })
+      }
+    }
+
+    // Extract Architecture section
+    const archSection = md.match(/## Architecture\s*\n+([\s\S]*?)(?=\n## |\n#[^#]|$)/)
+    if (archSection?.[1]) {
+      const layerMatches = [...archSection[1].matchAll(/### (.+)\n+([\s\S]*?)(?=\n### |\n## |$)/g)]
+      for (const match of layerMatches) {
+        const name = match[1].trim()
+        const body = match[2].trim()
+        const lines = body.split('\n')
+        const description = lines[0]?.trim() || ''
+        const components: string[] = []
+        for (const line of lines.slice(1)) {
+          const trimmed = line.trim()
+          if (trimmed.startsWith('- ')) {
+            components.push(trimmed.slice(2).trim())
+          }
+        }
+        architecture.push({ name, description, components })
+      }
+    }
+
+    // Extract Architecture Diagram
+    const diagramMatch = md.match(/## Architecture Diagram\s*\n+```[\s\S]*?\n([\s\S]*?)```/)
+    if (diagramMatch?.[1]) {
+      diagram = diagramMatch[1].trim()
+    }
+
+    if (choices.length === 0 && architecture.length === 0) {
+      return null
+    }
+
+    return { choices, architecture, diagram }
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Load tech stack data
+ */
+export function loadTechStack(): TechStack | null {
+  const content = techStackFiles['/product/tech-stack/tech-stack.md']
+  return content ? parseTechStack(content) : null
+}
+
+/**
+ * Check if tech stack has been defined
+ */
+export function hasTechStack(): boolean {
+  return '/product/tech-stack/tech-stack.md' in techStackFiles
+}
diff --git a/src/types/product.ts b/src/types/product.ts
index b0de80a9..b5cab946 100644
--- a/src/types/product.ts
+++ b/src/types/product.ts
@@ -66,6 +66,24 @@ export interface TypographyTokens {
 export interface DesignSystem {
   colors: ColorTokens | null
   typography: TypographyTokens | null
+  figma: FigmaIntegration | null
+}
+
+// =============================================================================
+// Figma Integration
+// =============================================================================
+
+export interface FigmaLink {
+  label: string
+  url: string
+  type: 'file' | 'prototype' | 'board' | 'frame'
+}
+
+export interface FigmaIntegration {
+  fileUrl: string
+  embedUrl: string
+  links: FigmaLink[]
+  accessToken: string
 }
 
 // =============================================================================
@@ -84,6 +102,69 @@ export interface ShellInfo {
   hasComponents: boolean
 }
 
+// =============================================================================
+// Tech Stack & Architecture
+// =============================================================================
+
+export interface TechChoice {
+  category: string
+  choice: string
+  rationale: string
+}
+
+export interface ArchitectureLayer {
+  name: string
+  description: string
+  components: string[]
+}
+
+export interface TechStack {
+  choices: TechChoice[]
+  architecture: ArchitectureLayer[]
+  diagram: string
+}
+
+// =============================================================================
+// Cost Estimator
+// =============================================================================
+
+export interface CostLineItem {
+  category: string
+  item: string
+  monthlyCost: number
+  notes: string
+}
+
+export interface CostTier {
+  name: string
+  users: string
+  monthlyCost: number
+  items: CostLineItem[]
+}
+
+export interface CostEstimate {
+  tiers: CostTier[]
+  optimizations: string[]
+}
+
+// =============================================================================
+// QA Test Cases
+// =============================================================================
+
+export interface TestCase {
+  id: string
+  title: string
+  section: string
+  priority: 'critical' | 'high' | 'medium' | 'low'
+  steps: string[]
+  expectedResult: string
+}
+
+export interface QaTestSuite {
+  testCases: TestCase[]
+  coverageSummary: string
+}
+
 // =============================================================================
 // Combined Product Data
 // =============================================================================
@@ -94,4 +175,7 @@ export interface ProductData {
   dataModel: DataModel | null
   designSystem: DesignSystem | null
   shell: ShellInfo | null
+  techStack: TechStack | null
+  costEstimate: CostEstimate | null
+  qaTests: QaTestSuite | null
 }