OcianiX Pipeline - Architecture Diagram

1 — System Overview

Presentation

Dashboard — Next.js 16 + Tailwind 4

Project Overview
Cards with progress bars, demo badges, cost summary

Stage Timeline

24 stages, expand/collapse substages, phase grouping

Metrics Bar

Cost, tokens, artifacts, progress (real vs simulated)

Artifact Browser

Stage tree, file list, inline JSON viewer

↓ reads via API routes (GET only, no mutations) ↓

Data

File System — JSON State + Artifacts

state.json

Pipeline position, stage status, accumulated_context, metrics, demo_mode flag

artifacts/

stage_01–stage_24 directories, 172 JSON files, ~375 KB total

prompts/ & responses/

Audit trail: sent prompts (.md) and API responses (.json)

templates/

185 Mustache-style prompt templates across 24 stages

↓ managed by PowerShell modules ↓

Engine

PowerShell Pipeline Engine — 5 Modules

OcxPipeline
Orchestration, state management, prerequisites, artifact saving

OcxClaude

Claude API calls, template interpolation, token tracking

OcxDeploy

Cloudflare Pages, DNS, SSL verification, smoke tests

OcxMedia

WebP/AVIF conversion, favicon set, OG images, audits

OcxTest

Lighthouse, accessibility, link checks, SEO validation

2 — Pipeline Phases

A

Discovery

Stage 1–5

41

artifacts

B

SEO & IA

Stage 6–8

34

artifacts

C

Design

Stage 9–11

27

artifacts

D

Content

Stage 12–13

15

artifacts

E

Development

Stage 14–17

23

artifacts

F

Integration

Stage 18–20

14

artifacts

G

QA & Launch

Stage 21–23

12

artifacts

H

Post-Launch

Stage 24

6

artifacts

3 — Stage Execution Flow

✓

Prerequisites

Check depends_on stages are completed

📄

Load Template

templates/stage_XX/ .prompt.md

🔄

Interpolate

🤖

Execute

AUTO / MANUAL / HYBRID

💾

Save Artifact

artifacts/stage_XX/output.json

📊

Update State

position, metrics, context

4 — Snowball Context Accumulation

Stage 1

Brief

2 fields

Stage 5

+ Brand + Content

12 fields

Stage 8

+ SEO + Sitemap + Wireframes

22 fields

Stage 11

+ Tokens + Components + Designs

31 fields

Stage 17

+ Code + Pages + Routing

40 fields

Stage 24

Full Project Knowledge

50+ fields

5 — All 24 Stages

#	Stage	Phase	Mode	Model	Substages	Key Outputs
1	Project Brief	A	hybrid	Opus	7	brief.json, scope.json, timeline.json, risks.json, budget.json
2	Market Research	A	auto	Opus	8	competitors.json, personas.json, gap_analysis.json
3	Domain & Hosting	A	hybrid	Sonnet	8	domain_selected.json, hosting_plan.json, dns_plan.json
4	Brand Identity	A	hybrid	Opus	10	color_system.json, typography_system.json, logo_ai_prompt.json
5	Content Strategy	A	auto	Opus	8	content_pillars.json, tone_guide.json, content_calendar.json
6	SEO Foundation	B	auto	Sonnet	9	keyword_universe.json, schema_plan.json, technical_seo.json
7	Information Arch.	B	hybrid	Opus	7	sitemap.json, navigation.json, page_templates.json
8	Wireframes	B	hybrid	Opus	7	wireframe_home.json, wireframes/.json, wireframes_mobile/.json
9	Design Tokens	C	auto	Sonnet	5	design_tokens.json, tokens.css, tailwind_config.json
10	UI Components	C	auto	Opus	10	component_inventory.json, components/*.json (8 categories)
11	Page Designs	C	hybrid	Opus	12	designs/*.json (11 pages), designs_approved.flag
12	Content Writing	D	auto	Opus	10	homepage_content_tr/en.json, services, about, blog, legal, FAQ
13	Media Assets	D	hybrid	Sonnet	7	og_images.json, favicon_set.json, brand_assets.json
14	Project Setup	E	auto	Sonnet	9	project_scaffold.json, astro_config.json, tsconfig.json
15	CSS & Theme	E	auto	Sonnet	5	global.css, tailwind_final_config.json, theme_switcher.json
16	Components	E	auto	Sonnet	9	atoms, molecules, organisms .json, storybook_ready.json
17	Page Assembly	E	auto	Sonnet	9	pages_assembled.json, routing_verified.json, content_collections
18	Integrations	F	hybrid	Sonnet	8	analytics_setup.json, form_backend.json, cookie_consent.json
19	Performance	F	auto	Sonnet	9	lighthouse_report.json, bundle_analysis.json, caching_configured
20	Security	F	auto	Sonnet	6	security_headers.json, vulnerability_scan.json, ssl_audit.json
21	QA Testing	G	auto	Sonnet	10	e2e_tests.json, accessibility_audit.json, cross_browser.json
22	Pre-Launch	G	hybrid	Sonnet	6	prelaunch_checklist.json, rollback_plan.json, staging_test.json
23	Deployment	H	auto	Sonnet	9	deployment_log.json, dns_verification.json, smoke_test.json
24	Post-Launch	H	auto	Sonnet	8	monitoring_setup.json, seo_baseline.json, week1_report.json

6 — Module Function Map

OcxPipeline — Core Orchestrator

Start-OcxPipeline • Invoke-OcxStage • Get-OcxStageStatus
Read-OcxProjectState • Write-OcxProjectState • Update-OcxAccumulatedContext
Save-OcxStageArtifact • Save-OcxPromptLog • Test-StagePrerequisites
Export-OcxProject • Send-OcxDashboardNotification

OcxClaude

Invoke-OcxClaudeCompletion
Invoke-OcxClaudeWithContext
Format-OcxPromptTemplate
Get-OcxTokenCost
Get-OcxContextSummary
Get-OcxStageSystemPrompt

OcxDeploy

Deploy-OcxCloudflarePages
Set-OcxDnsRecords
Test-OcxSslCertificate
Test-OcxSmokeTest

OcxMedia

Convert-OcxToWebP
New-OcxFaviconSet
New-OcxOgImage
Get-OcxImageAudit
Test-OcxImageTools

OcxTest

Test-OcxPerformance
Test-OcxAccessibility
Test-OcxLinks
Test-OcxSeoValidation

7 — Cost Model

$24.15

Claude Opus

70 calls • strategy, brand, content, design

$6.21

Claude Sonnet

90 calls • SEO, code, testing, technical

$30.36

Total per Project

160 prompts • ~480K input • ~640K output tokens

DEMO MODE: $0.00

8 — Repository Structure

ocianix-dashboard/

config/ ← pipeline.config.json (24 stage defs, model settings)

dashboard/ ← Next.js 16 monitoring UI

src/app/ ← pages + API routes

src/components/ ← timeline, metrics, artifacts, cards

src/lib/ ← pipeline data access layer

src/types/ ← shared TypeScript interfaces

db/ ← schema.sql (SQLite for cost tracking)

modules/ ← PowerShell automation engine

OcxPipeline/ ← orchestration (Public/ + Private/)

OcxClaude/ ← Claude API + template engine

OcxDeploy/ ← Cloudflare deployment

OcxMedia/ ← image processing

OcxTest/ ← QA & testing

projects/ ← project workspaces

ocianix-test/ ← demo project (172 artifacts)

state.json ← pipeline state + 50 context fields

artifacts/ ← stage_01 through stage_24

templates/ ← 185 prompt templates (stage_01–stage_24)

tests/mock/ ← pipeline validation scripts

docs/ ← architecture diagrams

.editorconfig ← code style (2-space TS, 4-space PS)

.env.example ← environment template

.nvmrc ← Node 22

ARCHITECTURE.md

DEPLOY.md

README.md

OcianiX Web Production Pipeline

OcxPipeline — Core Orchestrator

OcxClaude

OcxDeploy

OcxMedia

OcxTest