Overview This example walks through a complete e-commerce platform implementation using Omni Architect. We’ll transform a PRD for a checkout flow into validated Mermaid diagrams and production-ready Figma assets.
The PRD Here’s our starting PRD for the checkout feature:
## Feature: Checkout Flow ### User Story Como **comprador** , quero **finalizar minha compra em até 3 passos** , para que eu tenha uma **experiência rápida e sem fricção** . ### Acceptance Criteria - [ ] Usuário pode selecionar endereço salvo ou cadastrar novo - [ ] Cálculo de frete em tempo real - [ ] Suporte a PIX, cartão e boleto - [ ] Confirmação por email automática ### Entities | Entity | Attributes | |--------|------------| | User | id, email, name, role, created_at | | Order | id, user_id, status, total, created_at | | OrderItem | id, order_id, product_id, quantity, unit_price | | Payment | id, order_id, method, status, amount | | Shipping | id, order_id, carrier, tracking_code, estimated_delivery |
Running Omni Architect
Set up environment variables
Export your Figma token: export FIGMA_TOKEN = "your-personal-access-token"
Run the pipeline
Execute Omni Architect with the e-commerce PRD: skills run omni-architect \ --prd_source "./docs/prd-ecommerce.md" \ --project_name "E-Commerce Platform" \ --figma_file_key "abc123XYZ" \ --figma_access_token " $FIGMA_TOKEN " \ --diagram_types '["flowchart","sequence","erDiagram"]' \ --design_system "material-3" \ --validation_mode "interactive" \ --locale "pt-BR"
Review generated diagrams
The pipeline will generate Mermaid diagrams for validation.
Approve and generate Figma assets
Once approved, Figma assets are automatically created.
Generated Diagrams Flowchart: Checkout Flow The pipeline automatically generates this flowchart from the PRD:
Sequence Diagram: Checkout Process Interaction flow between user and system:
ER Diagram: Data Model Entity relationships extracted from the PRD:
Validation Report The logic validator generates a comprehensive report:
{ "overall_score" : 0.93 , "status" : "approved" , "breakdown" : { "coverage" : { "score" : 0.95 , "weight" : 0.25 , "details" : "All 4 acceptance criteria represented" }, "consistency" : { "score" : 0.92 , "weight" : 0.25 , "details" : "Entities consistent across diagrams" }, "completeness" : { "score" : 0.90 , "weight" : 0.20 , "details" : "Both happy and error paths covered" }, "traceability" : { "score" : 0.95 , "weight" : 0.15 , "details" : "All flows traceable to PRD requirements" }, "naming_coherence" : { "score" : 0.90 , "weight" : 0.10 , "details" : "Consistent Portuguese naming" }, "dependency_integrity" : { "score" : 1.00 , "weight" : 0.05 , "details" : "All dependencies satisfied" } }, "warnings" : [], "suggestions" : [ "Consider adding a state diagram for order status transitions" , "Add C4 context diagram for system architecture overview" ] }
The validation score of 0.93 exceeds the default threshold of 0.85, so the diagrams are automatically approved for Figma generation.
Generated Figma Assets Once approved, the pipeline creates this structure in Figma:
📁 E-Commerce Platform - Omni Architect ├── 📄 Index ├── 📄 User Flows │ ├── 🖼️ Checkout Flow │ ├── 🖼️ Authentication Flow │ └── 🖼️ Product Search Flow ├── 📄 Interaction Specs │ └── 🖼️ Checkout Sequence ├── 📄 Data Model │ └── 🖼️ Domain ER Diagram └── 📄 Component Library ├── 🧩 Design Tokens └── 🧩 Flow Connectors
Example Output The Figma generator returns asset details:
{ "figma_assets" : [ { "type" : "flow" , "name" : "Checkout Flow" , "node_id" : "123:456" , "preview_url" : "https://www.figma.com/file/abc123XYZ?node-id=123:456" , "page" : "User Flows" }, { "type" : "sequence" , "name" : "Checkout Sequence" , "node_id" : "123:789" , "preview_url" : "https://www.figma.com/file/abc123XYZ?node-id=123:789" , "page" : "Interaction Specs" }, { "type" : "er_diagram" , "name" : "Domain ER Diagram" , "node_id" : "123:012" , "preview_url" : "https://www.figma.com/file/abc123XYZ?node-id=123:012" , "page" : "Data Model" } ], "component_library" : { "tokens" : "123:345" , "connectors" : "123:678" } }
Best Practices
Complete PRDs Include all acceptance criteria, entities, and user stories for maximum coverage.
Entity Consistency Use consistent entity names across all PRD sections.
Happy & Error Paths Document both success and failure scenarios in your PRD.
Interactive Mode First Use validation_mode: "interactive" for the first run to calibrate quality.
Results With this e-commerce example:
Coverage : 95% of PRD features represented in diagramsTime : 45 seconds from PRD to Figma assetsValidation : Score of 0.93 (above 0.85 threshold)Assets : 3 major diagrams + component library
Next Steps
Customize Design System Apply your brand’s design tokens
Add More Diagrams Generate state and C4 diagrams
CI/CD Integration Automate the pipeline
Custom Workflows Use hooks for custom logic
