diff --git a/infographic-wds.html b/infographic-wds.html new file mode 100644 index 000000000..2dbcfaec2 --- /dev/null +++ b/infographic-wds.html @@ -0,0 +1,425 @@ + + + + + + + + +
+
+ +
Open Source Framework
+
+

From Strategy to Product
in 8 AI-Powered Phases

+

A complete design-to-development methodology where AI agents handle strategy, UX, development, and design systems — guided by human decisions.

+
+ +
+
+
0
+
+
Project Setup
+
Determine project type, complexity, and tech stack
+
+
+
+ +
+
1
+
+
Project Brief Saga
+
Establish project context — the foundation for all design work
+
+
+
+ +
+
2
+
+
Trigger Mapping Saga
+
Map business goals to user psychology — driving forces, barriers, triggers
+
+
+
+ +
+
3
+
+
UX Scenarios Freya
+
Create scenario outlines from the Trigger Map — every screen grounded in user needs
+
+
+
+ +
+
4
+
+
UX Design Freya
+
Transform scenarios into detailed page specifications — layout, components, interactions
+
+
+
+ +
+
5
+
+
Agentic Development
+
AI-assisted build, test, and ship — from specification to working product
+
+
+
+ +
+
6
+
+
Asset Generation
+
AI-powered creative production — images, icons, videos, content, Figma integration
+
+
+
+ +
+
7
+
+
Design System
+
Create, import, and maintain tokens, components, and patterns
+
+
+
+ +
+
8
+
+
Product Evolution
+
Brownfield improvements — the full pipeline in miniature for existing products
+
+
+
+ +
+ +
+
+

AI Agents

+
+
📚
+
+
Saga
+
Strategic Analyst — Phases 1–2
+
+
+
+
✨
+
+
Freya
+
UX Designer — Phases 3–4
+
+
+
+
🔮
+
+
Mimir
+
Development — Phase 5
+
+
+
+
🍎
+
+
Idunn
+
Validation & Quality
+
+
+
+ +
+

Why WDS?

+
+
✓
+
Strategy-first — Trigger Map grounds every decision in real user psychology
+
+
+
✓
+
Human-guided AI — Agents propose, humans decide. Full control, 10x speed
+
+
+
✓
+
Shared brain — Design Space keeps all knowledge searchable and connected
+
+
+
✓
+
Full pipeline — Strategy to design system, not just one piece
+
+
+
✓
+
Open source — MIT licensed, vendor independent, any AI model
+
+
+
+ +
+
Whiteport Design Studio — Open Source AI Design Framework
+
whiteport.com/wds
+
+ + + diff --git a/src/sync-manifest.json b/src/sync-manifest.json index ff45bc956..bec384685 100644 --- a/src/sync-manifest.json +++ b/src/sync-manifest.json @@ -1,6 +1,6 @@ { "$schema": "./sync-manifest.schema.json", - "version": "1.0.0", + "version": "1.0.1", "description": "Controls which agent instructions are synced to Design Space", "updated": "2026-03-24", @@ -15,196 +15,228 @@ "agent": "saga", "type": "persona", "file": "src/agents/saga-analyst.agent.yaml", - "channel": "stable" + "channel": "stable", + "changelog": "Saga persona definition — strategic analyst, discovery partner" }, { "agent": "freya", "type": "persona", "file": "src/agents/freya-ux.agent.yaml", - "channel": "stable" + "channel": "stable", + "changelog": "Freya persona definition — UX designer, experience shaper" }, { "agent": "saga", "type": "activation", "file": "src/skills/saga.activation.md", - "channel": "stable" + "channel": "stable", + "changelog": "Full activation sequence with multi-project branching and status reporting" }, { "agent": "freya", "type": "activation", "file": "src/skills/freya.activation.md", - "channel": "stable" + "channel": "stable", + "changelog": "Full activation sequence with phase routing and prerequisites check" }, { "agent": "saga", "type": "skill", "file": "src/skills/saga/SKILL.md", - "channel": "stable" + "channel": "stable", + "changelog": "Saga capabilities: Product Brief (9 steps), Trigger Mapping, Alignment Signoff" }, { "agent": "freya", "type": "skill", "file": "src/skills/freya/SKILL.md", - "channel": "stable" + "channel": "stable", + "changelog": "Freya capabilities: UX Scenarios, Design Loop (9 steps), Asset Generation, Design System" }, { "agent": "*", "type": "skill", "file": "src/skills/design-space/SKILL.md", - "channel": "stable" + "channel": "stable", + "changelog": "Design Space integration: search, capture, messaging, work orders, agent presence" }, { "agent": "saga", "type": "reference", "file": "src/skills/saga/references/discovery-conversation.md", - "channel": "stable" + "channel": "stable", + "changelog": "Conversational techniques for Phase 1 discovery — one question at a time" }, { "agent": "saga", "type": "reference", "file": "src/skills/saga/references/trigger-mapping.md", - "channel": "stable" + "channel": "stable", + "changelog": "Phase 2 methodology: user psychology, driving forces, barrier mapping, archetypes" }, { "agent": "saga", "type": "reference", "file": "src/skills/saga/references/dream-up-approach.md", - "channel": "stable" + "channel": "stable", + "changelog": "Dialog/Suggest/Dream mode selection framework for artifact generation" }, { "agent": "saga", "type": "reference", "file": "src/skills/saga/references/strategic-documentation.md", - "channel": "stable" + "channel": "stable", + "changelog": "How to structure briefs, maintain quality, and format strategic artifacts" }, { "agent": "saga", "type": "reference", "file": "src/skills/saga/references/conversational-followups.md", - "channel": "stable" + "channel": "stable", + "changelog": "Follow-up techniques, deep-dive patterns, and probing strategies" }, { "agent": "saga", "type": "reference", "file": "src/skills/saga/references/seo-strategy-guide.md", - "channel": "stable" + "channel": "stable", + "changelog": "SEO keyword strategy and search intent mapping for product positioning" }, { "agent": "saga", "type": "reference", "file": "src/skills/saga/references/content-structure-principles.md", - "channel": "stable" + "channel": "stable", + "changelog": "Information architecture principles for content organization" }, { "agent": "saga", "type": "reference", "file": "src/skills/saga/references/inspiration-analysis.md", - "channel": "stable" + "channel": "stable", + "changelog": "Competitive analysis and visual direction methodology" }, { "agent": "saga", "type": "reference", "file": "src/skills/saga/references/working-with-existing-materials.md", - "channel": "stable" + "channel": "stable", + "changelog": "How to analyze client-provided PRDs, briefs, and existing documentation" }, { "agent": "freya", "type": "reference", "file": "src/skills/freya/references/strategic-design.md", - "channel": "stable" + "channel": "stable", + "changelog": "Design decision framework tied to business goals and trigger map" }, { "agent": "freya", "type": "reference", "file": "src/skills/freya/references/specification-quality.md", - "channel": "stable" + "channel": "stable", + "changelog": "How to write complete, unambiguous page specifications" }, { "agent": "freya", "type": "reference", "file": "src/skills/freya/references/agentic-development.md", - "channel": "stable" + "channel": "stable", + "changelog": "Handoff to development agents — spec format, expectations, feedback loops" }, { "agent": "freya", "type": "reference", "file": "src/skills/freya/references/content-creation.md", - "channel": "stable" + "channel": "stable", + "changelog": "Content strategy within design work — copy, tone, structure" }, { "agent": "freya", "type": "reference", "file": "src/skills/freya/references/design-system.md", - "channel": "stable" + "channel": "stable", + "changelog": "Design token extraction and component library building" }, { "agent": "freya", "type": "reference", "file": "src/skills/freya/references/meta-content-guide.md", - "channel": "stable" + "channel": "stable", + "changelog": "Metadata, SEO tags, and information architecture for pages" }, { "agent": "saga", "type": "workflow", "file": "src/workflows/0-alignment-signoff/workflow.md", - "channel": "stable" + "channel": "stable", + "changelog": "Phase 0: Stakeholder alignment before strategic work begins" }, { "agent": "*", "type": "workflow", "file": "src/workflows/0-project-setup/workflow.md", - "channel": "stable" + "channel": "stable", + "changelog": "Phase 0: Project initialization and configuration" }, { "agent": "saga", "type": "workflow", "file": "src/workflows/1-project-brief/workflow.md", - "channel": "stable" + "channel": "stable", + "changelog": "Phase 1: Strategic discovery — product brief with 9-step conversation" }, { "agent": "saga", "type": "workflow", "file": "src/workflows/2-trigger-mapping/workflow.md", - "channel": "stable" + "channel": "stable", + "changelog": "Phase 2: User psychology mapping — personas, triggers, barriers, driving forces" }, { "agent": "freya", "type": "workflow", "file": "src/workflows/3-scenarios/workflow.md", - "channel": "stable" + "channel": "stable", + "changelog": "Phase 3: UX scenarios from trigger map using Dialog/Suggest/Dream modes" }, { "agent": "freya", "type": "workflow", "file": "src/workflows/4-ux-design/workflow.md", - "channel": "stable" + "channel": "stable", + "changelog": "Phase 4: Design Loop — 9 steps from discussion to token extraction" }, { "agent": "mimir", "type": "workflow", "file": "src/workflows/5-agentic-development/workflow.md", - "channel": "stable" + "channel": "stable", + "changelog": "Phase 5: Development handoff and agentic implementation" }, { "agent": "freya", "type": "workflow", "file": "src/workflows/6-asset-generation/workflow.md", - "channel": "stable" + "channel": "stable", + "changelog": "Phase 6: Visual and text asset creation" }, { "agent": "freya", "type": "workflow", "file": "src/workflows/7-design-system/workflow.md", - "channel": "stable" + "channel": "stable", + "changelog": "Phase 7: Component library and design tokens (optional)" }, { "agent": "idunn", "type": "workflow", "file": "src/workflows/8-product-evolution/workflow.md", - "channel": "stable" + "channel": "stable", + "changelog": "Phase 8: Post-launch iteration, monitoring, and continuous improvement" } ] } diff --git a/src/workflows/6-asset-generation/steps-i/step-04-generate.md b/src/workflows/6-asset-generation/steps-i/step-04-generate.md index af5f236e3..49501867d 100644 --- a/src/workflows/6-asset-generation/steps-i/step-04-generate.md +++ b/src/workflows/6-asset-generation/steps-i/step-04-generate.md @@ -68,7 +68,7 @@ For each group: generate first icon, get approval, use as reference for rest of ### 3. Select Service -Present options: [G] Generate via MCP (best for custom icons), [E] Export prompts (for external generation), [L] Library match (search open-source icon libraries). +Present options: [G] Generate via Nano Banana (`mcp__nanobanana__generate_image` — supports 4K, style references via `input_image_path_1/2/3`, model tiers flash/nb2/pro, negative prompts), [E] Export prompts (for external generation), [L] Library match (search open-source icon libraries). ### 4. Optimize SVG Output diff --git a/src/workflows/6-asset-generation/steps-m/step-05-generate.md b/src/workflows/6-asset-generation/steps-m/step-05-generate.md index 16b59d7c8..5a8fc6be5 100644 --- a/src/workflows/6-asset-generation/steps-m/step-05-generate.md +++ b/src/workflows/6-asset-generation/steps-m/step-05-generate.md @@ -60,7 +60,7 @@ Per batch: start with hero/anchor, present for approval, chain approved result f ### 3. Select Service -[G] Generate via MCP, [E] Export prompts (save to `{output_folder}/E-Assets/images/prompts/`), [U] Upload existing (user provides, skip generation). +[G] Generate via Nano Banana (`mcp__nanobanana__generate_image` — supports 4K, style references via `input_image_path_1/2/3`, model tiers flash/nb2/pro, negative prompts), [E] Export prompts (save to `{output_folder}/E-Assets/images/prompts/`), [U] Upload existing (user provides, skip generation). ### 4. Handle Variations diff --git a/src/workflows/6-asset-generation/steps-p/step-04-generate.md b/src/workflows/6-asset-generation/steps-p/step-04-generate.md index 9dce724df..8921e37f0 100644 --- a/src/workflows/6-asset-generation/steps-p/step-04-generate.md +++ b/src/workflows/6-asset-generation/steps-p/step-04-generate.md @@ -60,7 +60,7 @@ Attach wireframe as structural reference when available. Note: "Follow layout st ### 3. Select Service -[G] Generate via MCP or [E] Export prompts. +[G] Generate via Nano Banana (`mcp__nanobanana__generate_image` — supports 4K, style references via `input_image_path_1/2/3`, model tiers flash/nb2/pro, negative prompts) or [E] Export prompts. ### 4. Generate Sequentially diff --git a/src/workflows/6-asset-generation/steps-u/step-04-generate.md b/src/workflows/6-asset-generation/steps-u/step-04-generate.md index b269ef86d..6a287c25e 100644 --- a/src/workflows/6-asset-generation/steps-u/step-04-generate.md +++ b/src/workflows/6-asset-generation/steps-u/step-04-generate.md @@ -64,7 +64,7 @@ Grid style: generate all states of one variant in a single prompt. Individual st ### 4. Select Service -[G] Generate via MCP or [E] Export prompts. +[G] Generate via Nano Banana (`mcp__nanobanana__generate_image` — supports 4K, style references via `input_image_path_1/2/3`, model tiers flash/nb2/pro, negative prompts) or [E] Export prompts. ### 5. Track Progress diff --git a/src/workflows/6-asset-generation/steps-v/step-04-generate.md b/src/workflows/6-asset-generation/steps-v/step-04-generate.md index 1248f41e1..73d1389a1 100644 --- a/src/workflows/6-asset-generation/steps-v/step-04-generate.md +++ b/src/workflows/6-asset-generation/steps-v/step-04-generate.md @@ -63,7 +63,7 @@ Include: duration, subject, movement, mood, style keywords, color palette, dimen ### 3. Select Service -For AI video: [G] Generate via MCP, [E] Export prompts. For CSS/SVG: [C] Generate code, [S] Spec document. +For AI video: [G] Generate via Nano Banana (`mcp__nanobanana__generate_image` — supports 4K, style references via `input_image_path_1/2/3`, model tiers flash/nb2/pro, negative prompts), [E] Export prompts. For CSS/SVG: [C] Generate code, [S] Spec document. ### 4. Generate and Preview diff --git a/src/workflows/6-asset-generation/steps-w/step-04-generate.md b/src/workflows/6-asset-generation/steps-w/step-04-generate.md index 68e9fd58b..171fa16a7 100644 --- a/src/workflows/6-asset-generation/steps-w/step-04-generate.md +++ b/src/workflows/6-asset-generation/steps-w/step-04-generate.md @@ -60,7 +60,7 @@ Insert page-specific content zones, navigation state, and unique layout requirem ### 3. Select Service -[G] Generate via MCP or [E] Export prompts for external tool. +[G] Generate via Nano Banana (`mcp__nanobanana__generate_image` — supports 4K, style references via `input_image_path_1/2/3`, model tiers flash/nb2/pro, negative prompts) or [E] Export prompts for external tool. ### 4. Execute Generation