Skip to main content
Get your first PRD transformed into validated Mermaid diagrams and Figma assets in under 5 minutes.

​
Prerequisites

Before you begin, ensure you have:
  • Node.js 18 or higher
  • A Figma account with a file you can edit
  • A Figma access token (get one here)

​
Installation

npx skills add https://github.com/fabioeloi/omni-architect --skill omni-architect

​
Quick Example: E-Commerce Checkout Flow

Let’s transform a checkout flow PRD into validated diagrams and Figma assets.
1

Create a PRD file

Create a file called checkout-prd.md with your product requirements:
## 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
2

Set your Figma token

Export your Figma access token as an environment variable:
export FIGMA_TOKEN="your-figma-token-here"
3

Run Omni Architect

Execute the skill with your PRD:
skills run omni-architect \
  --prd_source "./checkout-prd.md" \
  --project_name "E-Commerce Platform" \
  --figma_file_key "YOUR_FIGMA_FILE_KEY" \
  --figma_access_token "$FIGMA_TOKEN"
Find your Figma file key in the URL: https://www.figma.com/file/<FILE_KEY>/...
4

Review the output

Omni Architect generates:
  • Flowchart diagram showing the checkout process
  • Sequence diagram for user-system interactions
  • ER diagram for data model
  • Validation report with coherence score
  • Figma assets organized in your file
Expected output structure:
5

Check your Figma file

Open your Figma file to see the generated assets:
📁 E-Commerce Platform - Omni Architect
├── 📄 Index
├── 📄 User Flows
│   └── 🖼️ Checkout Flow
├── 📄 Interaction Specs
│   └── 🖼️ Checkout Sequence
├── 📄 Data Model
└── 📄 Component Library

​
Understanding the Validation Report

Omni Architect validates your diagrams before generating Figma assets. Here’s a sample report: 
{
  "overall_score": 0.93,
  "status": "approved",
  "breakdown": {
    "coverage": { "score": 0.95, "weight": 0.25 },
    "consistency": { "score": 0.92, "weight": 0.25 },
    "completeness": { "score": 0.90, "weight": 0.20 },
    "traceability": { "score": 0.95, "weight": 0.15 },
    "naming_coherence": { "score": 0.90, "weight": 0.10 },
    "dependency_integrity": { "score": 1.00, "weight": 0.05 }
  }
}
The default validation threshold is 0.85. Diagrams scoring above this threshold are automatically approved.

​
Next Steps

Configuration

Customize diagram types, design systems, and validation modes

Pipeline Phases

Explore all pipeline phases in detail

Validation

Learn how validation scoring works

Examples

See more complex PRD examples

​
Common Issues

If you see a 403 error, verify:
  • Your token is valid and not expired
  • You have edit permissions on the Figma file
  • The token is correctly exported to $FIGMA_TOKEN
If your validation score is below 0.85:
  • Add more details to your PRD user stories
  • Include acceptance criteria for each feature
  • Define clear flows and dependencies
Ensure your PRD:
  • Uses Markdown format with proper headings
  • Has structured sections (Feature, User Story, Acceptance Criteria)
  • Doesn’t contain special characters that break parsing

Build docs developers (and LLMs) love

Get started for freeTalk to us