Add tech stack, cost estimator, QA tests, and Figma integration

[JagadeeshBabuDamarasingu]

Summary

Adds four new design OS commands and pages to complete the product planning workflow:

1. Tech Stack & Architecture (/tech-stack) — Define technology choices (frontend, backend, database, hosting, auth, etc.) and architecture layers with ASCII diagrams
2. Cost Estimator & Optimizer (/cost-estimator) — Estimate infrastructure costs across Starter/Growth/Scale tiers and identify cost optimizations
3. QA Test Case Generator (/qa-tests) — Generate comprehensive test cases with priorities (critical/high/medium/low) covering all product sections
4. Figma Integration (/figma) — Link Figma design files with embedded previews and quick-access links on the Design page

These commands bridge the gap between design and implementation, providing technical planning and validation artifacts before development begins.

Linked item

• Implements: Design OS workflow completion

Checklist

• New commands documented in .claude/commands/design-os/
• New pages created with proper empty states and data loading
• Navigation updated to include new phases in correct order
• Product data loader extended to parse new file formats
• Design page enhanced with Figma integration step
• Backwards compatibility maintained (all new features are additive)

Documented steps to test

Tech Stack Command

1. Run /tech-stack after creating a product overview and roadmap
2. Answer questions about technology preferences (frontend, backend, database, hosting, auth, styling)
3. Review proposed architecture layers and ASCII diagram
4. Confirm to save at product/tech-stack/tech-stack.md
5. Verify Tech Stack page displays choices and architecture

Cost Estimator Command

1. Run /cost-estimator after defining tech stack
2. Answer questions about target budget and constraints
3. Review cost estimates for Starter, Growth, and Scale tiers
4. Review suggested optimizations
5. Confirm to save at product/cost-estimator/cost-estimate.md
6. Verify Cost Estimator page displays tiers with line items and optimizations

QA Tests Command

1. Run /qa-tests after creating product overview and roadmap
2. Choose which sections to focus on (or all)
3. Review generated test cases with priorities and steps
4. Refine test cases as needed
5. Confirm to save at product/qa-tests/qa-tests.md
6. Verify test cases are properly formatted with TC-XXX IDs

Figma Integration

1. Run /figma after setting up design tokens
2. Provide main Figma file URL
3. Optionally add prototype, component library, or frame links
4. Optionally provide access token
5. Confirm to save at product/design-system/figma.json
6. Verify Design page shows Figma embed and linked files with external links

Navigation Flow

1. Verify phase navigation shows all new phases in correct order: Product → Data Model → Design → Sections → Tech Stack → Costs → QA Tests → Export
2. Verify phase completion status updates as files are created
3. Verify NextPhaseButton correctly navigates between phases

Notes for reviewers

File Format Parsing

• Cost estimates use markdown tables with ## Tier Name (User Count) headers for parsing
• QA tests use ### TC-XXX: headers with YAML-like fields for parsing
• Figma integration uses JSON format for structured data
• Tech stack uses markdown with ### Category and **Choice:**/**Rationale:** fields

Design Page Changes

• Figma integration is now Step 2 (optional, skip-friendly)
• Application Shell moved to Step 3
• NextPhaseButton updated to step 4 when all design steps complete
• Figma embed uses iframe with 400px height for preview

Product Data Loader

Extended to load:

• product/tech-stack/tech-stack.md → parsed into structured tech stack object
• product/cost-estimator/cost-estimate.md → parsed into tiers with line items
• product/qa-tests/qa-tests.md → parsed into test

https://claude.ai/code/session_0174cnM1vH9SFg62nrc7poKr