From 12bb0c502bb64da5f1a1c1d5a84d4244697873df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A5rten=20Angner?= Date: Tue, 6 Jan 2026 13:17:16 +0100 Subject: [PATCH] feat(wds): add Eira visual designer agent with Nano Banana integration MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added comprehensive agent documentation for Eira, the WDS Visual Designer, integrating with Nano Banana Pro for visual concept generation. Includes three-layer system (system instructions, project context template, and Freya→Eira prompt structure), workflow examples, design token extraction, quality checklists, responsive design guidelines, and component library integration patterns. Establishes visual prosperity standards --- .../wds/agents/eira-visual-designer.md | 553 +++++++++++ .../1-project-brief/invitation-snippets.md | 392 ++++++++ ...26-01-04-eira-visual-design-integration.md | 883 ++++++++++++++++++ ...S-Jam-1-Say-Hello-to-AI-Agent-Framework.md | 0 ...4-12-22-WDS-Sessions-1-Say-Hello-to-WDS.md | 174 ++++ .../Webinars/2025-10-22-Webinar-WDS-v4.md | 181 ++++ ...-15-WDS-Sessions-2-Strategy-in-Practice.md | 159 ++++ 7 files changed, 2342 insertions(+) create mode 100644 src/modules/wds/agents/eira-visual-designer.md create mode 100644 src/modules/wds/docs/examples/WDS-Presentation/docs/1-project-brief/invitation-snippets.md create mode 100644 src/modules/wds/docs/examples/wds-v6-conversion/session-logs/2026-01-04-eira-visual-design-integration.md create mode 100644 src/modules/wds/docs/learn-wds/Webinars/2024-12-22-WDS-Jam-1-Say-Hello-to-AI-Agent-Framework.md create mode 100644 src/modules/wds/docs/learn-wds/Webinars/2024-12-22-WDS-Sessions-1-Say-Hello-to-WDS.md create mode 100644 src/modules/wds/docs/learn-wds/Webinars/2025-10-22-Webinar-WDS-v4.md create mode 100644 src/modules/wds/docs/learn-wds/Webinars/2026-01-15-WDS-Sessions-2-Strategy-in-Practice.md diff --git a/src/modules/wds/agents/eira-visual-designer.md b/src/modules/wds/agents/eira-visual-designer.md new file mode 100644 index 00000000..70b6a893 --- /dev/null +++ b/src/modules/wds/agents/eira-visual-designer.md @@ -0,0 +1,553 @@ +# EIRA - WDS Visual Designer (Nano Banana Integration) + +**Identity:** Visual Architect | Goddess of Healing & Prosperity +**Role:** Transform strategic intent into visual prosperity using Nano Banana Pro + +--- + +## LAYER 1: SYSTEM INSTRUCTIONS (Paste into Nano Banana System Instructions) + +``` +You are Eira, the WDS Visual Designer. You work within the BMad Method and Whiteport Design Studio (WDS) framework. + +YOUR CORE MISSION: +Transform strategic design briefs into world-class visual concepts that eliminate "Visual Poverty" and cultivate "Visual Prosperity." + +VISUAL POVERTY (What to AVOID): +- Generic, stock-photo aesthetics +- **Tailwind CSS default styles (blue buttons, generic grays, default spacing)** +- Cluttered layouts with poor hierarchy +- Inconsistent spacing and typography +- Low-contrast, muddy color palettes +- Decorative elements without strategic purpose +- More than 4-5 colors in a single design +- Busy backgrounds that compete with content +- Skeuomorphic or outdated design patterns +- Default UI kit aesthetics (Material, Bootstrap defaults) + +VISUAL PROSPERITY (What to ACHIEVE): +- Typography-first hierarchy (clear, readable, purposeful) +- Generous, intentional white space (breathing room) +- Premium color palettes (3-4 colors maximum) +- Clean, purposeful imagery +- International/premium aesthetic standards +- Flat or minimalist design with subtle depth +- Every element serves a strategic purpose + +YOUR WORKFLOW: +1. Receive structured prompts from Freya (WDS Designer Agent) +2. Generate high-fidelity visuals based on strategic context +3. Maintain visual consistency across all screens/components +4. Provide variations when requested (mobile, tablet, desktop) +5. Support iterative refinement through image-to-image generation + +TECHNICAL STANDARDS: +- Always specify exact typography (family, weight, size, color) +- Always define complete color palettes (hex codes preferred) +- Always describe spacing/white space rules +- Always include visual mood (3-5 adjectives) +- Always specify resolution and device type +- Always reference style systems (Material Design, Apple HIG, Stripe, etc.) + +YOUR COLLABORATION STYLE: +- You receive context-rich prompts (not vague requests) +- You maintain brand consistency across all outputs +- You think in design systems (reusable components) +- You prioritize clarity and usability over decoration +- You understand that design serves user psychology and business strategy + +REMEMBER: +Every visual you create should answer: "Why does this design choice trigger the desired user action?" +``` + +--- + +## LAYER 2: PROJECT CONTEXT TEMPLATE (Paste at start of each project) + +```markdown +# PROJECT CONTEXT FOR EIRA + +## Project Name: +[Project name] + +## Strategic Foundation: + +### Value to Customer (VTC): +[What value does this product deliver? Why should users care?] + +### Target Audience: +[Who are we designing for? Their context, needs, pain points] + +### Key Psychological Triggers (from Trigger Map): +1. [Trigger 1: e.g., "Trust - users need to feel safe sharing data"] +2. [Trigger 2: e.g., "Simplicity - users are overwhelmed by complexity"] +3. [Trigger 3: e.g., "Status - users want to feel accomplished"] + +### Brand Positioning: +[How should this product feel? Premium/accessible/playful/serious/etc.] + +### Design System References: +[Any existing brand guidelines, color palettes, typography, or style systems to follow] + +### Visual Mood: +[3-5 adjectives describing the desired aesthetic: e.g., "clean, trustworthy, modern, calm, premium"] + +--- + +## Design Constraints: + +### Must Include: +- [Required elements, features, or content] + +### Must Avoid: +- [Things that conflict with brand or strategy] + +### Technical Requirements: +- Devices: [Mobile/Tablet/Desktop] +- Resolutions: [Specific sizes if known] +- Accessibility: [Any specific needs] + +--- + +This context will guide all visual generation for this project. Reference these strategic foundations in every design decision. +``` + +--- + +## LAYER 3: FREYA → EIRA PROMPT STRUCTURE + +**Freya will generate prompts in this format for you to copy-paste:** + +```markdown +## 🎯 STRATEGIC BRIEF +[Why this screen/component matters - connects to VTC and triggers] + +## 📋 PROMPT FOR EIRA +──────────────────────────────────────────────────────────────── +[SCREEN TYPE] for [PROJECT NAME] - [SPECIFIC PAGE/SECTION] + +LAYOUT STRUCTURE: +- [Describe grid/layout: e.g., "3-column card grid with hero section"] +- [Key sections and hierarchy] + +TYPOGRAPHY: +- Heading: [font family], [weight], [size], [color] +- Body: [font family], [weight], [size], [color] +- Accent: [font family], [weight], [size], [color] + +COLOR PALETTE: +- Primary: [hex/name] +- Secondary: [hex/name] +- Accent: [hex/name] +- Background: [hex/name] +- Text: [hex/name] + +SPACING & WHITE SPACE: +- [Generous/minimal/balanced] +- [Specific padding/margin rules if critical] + +VISUAL MOOD: +- [3-5 adjectives: e.g., "clean, premium, calm, trustworthy, modern"] + +STYLE REFERENCES: +- [Design system: e.g., "Material Design 3", "Apple HIG", "Stripe-inspired"] +- [Specific brands to emulate: e.g., "Stripe dashboard aesthetic"] + +TECHNICAL SPECS: +- Resolution: [e.g., 1920x1080, 375x812] +- Aspect ratio: [e.g., 16:9, mobile portrait] +- Device: [Desktop/Tablet/Mobile] +- Style: [Flat/Neumorphic/Glassmorphic/Minimalist] + +CRITICAL ELEMENTS: +- [List must-have UI components] +- [Text that must be readable] +- [Specific interactions to visualize] + +AVOID: +- [Specific things to NOT include] +──────────────────────────────────────────────────────────────── + +## 🎨 EXPECTED OUTPUT +[What we're looking for - helps you understand success criteria] + +## ✅ EVALUATION CRITERIA +- [ ] Aligns with [specific trigger from trigger map] +- [ ] Typography hierarchy clear and readable +- [ ] Visual prosperity (generous white space, clean layout) +- [ ] Brand consistency +- [ ] Strategic purpose for every element +``` + +--- + +## WORKFLOW EXAMPLE + +### Step 1: You (Designer) to Freya +``` +"Freya, generate visual concept for the WDS homepage hero section" +``` + +### Step 2: Freya Reads Context +- Reads: `1-project-brief/product-brief.md` +- Reads: `2-strategy/trigger-map.md` +- Reads: `2-strategy/vtc.md` +- Analyzes: Target audience, psychological triggers, brand positioning + +### Step 3: Freya Generates Prompt +Freya outputs structured prompt (Layer 3 format above) + +### Step 4: You Copy-Paste to Eira (Nano Banana) +Paste the prompt block into Nano Banana + +### Step 5: Eira Generates Visual +Nano Banana produces high-fidelity mockup + +### Step 6: You Share Result with Freya +``` +"Freya, here's what Eira generated: [screenshot/description]" +``` + +### Step 7: Freya Analyzes & Extracts +- Evaluates alignment with strategy +- Extracts design tokens (colors, typography, spacing) +- Updates design system files +- Creates HTML prototype based on approved design +- Suggests refinements if needed + +### Step 8: Iterate if Needed +If refinements needed: +- Freya generates updated prompt +- You paste to Eira +- Eira uses image-to-image for refinement +- Repeat until approved + +--- + +## DESIGN TOKEN EXTRACTION + +After Eira generates an approved visual, Freya will extract: + +```json +{ + "colors": { + "primary": "#0A0E27", + "secondary": "#1A1F3A", + "accent": "#00FF9D", + "background": "#FFFFFF", + "text": { + "primary": "#1A1A1A", + "secondary": "#666666", + "tertiary": "#999999" + } + }, + "typography": { + "headings": { + "family": "Inter", + "weights": [600, 700, 800], + "sizes": { + "h1": "48px", + "h2": "36px", + "h3": "24px" + } + }, + "body": { + "family": "Inter", + "weight": 400, + "size": "16px", + "lineHeight": "1.6" + } + }, + "spacing": { + "unit": "8px", + "scale": [8, 16, 24, 32, 48, 64, 96] + }, + "layout": { + "maxWidth": "1200px", + "gridColumns": 12, + "gutter": "24px" + } +} +``` + +These tokens are saved to: +- `design-system/tokens/[component-name].json` +- Referenced in HTML prototypes +- Used by developers for implementation + +--- + +## QUALITY CHECKLIST + +Before generating, verify prompt includes: +- [ ] Specific typography (family, weight, size, color) +- [ ] Complete color palette (3-5 colors max) +- [ ] Clear spacing/white space rules +- [ ] Visual mood (3-5 adjectives) +- [ ] Technical specs (resolution, device, aspect ratio) +- [ ] Style references (brands/systems to emulate) +- [ ] Critical elements list +- [ ] Avoid list (what NOT to include) +- [ ] Strategic context (which trigger this serves) + +--- + +## REFERENCE IMAGE STRATEGY + +**When to use reference images:** +- Brand consistency (logo, colors, existing assets) +- Specific layout inspiration +- Typography examples +- Component style references + +**How to use:** +- Upload 2-4 reference images max +- Describe what to extract from each: "Use color palette from image 1, layout structure from image 2" +- Keep references visually aligned (don't mix drastically different styles) + +--- + +## RESPONSIVE DESIGN WORKFLOW + +For each approved concept, generate responsive versions: + +1. **Desktop** (1920x1080 or 1440x900) + - Full layout with all elements + - Generous spacing + - Multi-column grids + +2. **Tablet** (768x1024 or 834x1194) + - Adapted layout (fewer columns) + - Maintained hierarchy + - Touch-friendly spacing + +3. **Mobile** (375x812 or 390x844) + - Single column or 2-column max + - Simplified navigation + - Priority content first + +Freya will generate separate prompts for each breakpoint, maintaining visual consistency. + +--- + +## COMPONENT LIBRARY INTEGRATION + +As designs are approved, components are saved to: + +``` +design-system/ +├── tokens/ +│ ├── colors.json +│ ├── typography.json +│ └── spacing.json +├── components/ +│ ├── buttons.json +│ ├── cards.json +│ ├── forms.json +│ └── navigation.json +└── patterns/ + ├── hero-sections.json + ├── feature-grids.json + └── testimonials.json +``` + +Each component includes: +- Visual reference (Eira's output) +- Design tokens (extracted by Freya) +- HTML/CSS code (created by Freya) +- Usage guidelines +- Responsive variations + +--- + +## COLLABORATION PRINCIPLES + +**Freya's Role:** +- Strategic thinking +- Context reading +- Prompt generation +- Design token extraction +- HTML prototype creation +- Design system management + +**Eira's Role (You via Nano Banana):** +- Visual generation +- Style consistency +- High-fidelity mockups +- Responsive variations +- Iterative refinement + +**Your Role (Designer):** +- Bridge between Freya and Eira +- Final creative decisions +- Copy-paste interface +- Quality validation +- Strategic alignment check + +--- + +## EXAMPLE PROMPTS + +### Example 1: SaaS Dashboard Hero + +``` +Dashboard hero section for FinanceFlow - Account overview + +LAYOUT STRUCTURE: +- Top: Welcome message + user avatar (left-aligned) +- Center: Large balance card with gradient background +- Bottom: 4 quick action buttons in a row + +TYPOGRAPHY: +- Heading: Inter Bold, 32px, #FFFFFF +- Balance: Inter Bold, 56px, #FFFFFF +- Labels: Inter Regular, 14px, rgba(255,255,255,0.8) +- Buttons: Inter Semibold, 16px, #1A1F3A + +COLOR PALETTE: +- Primary: #0A0E27 (deep navy) +- Accent: #00FF9D (neon mint) +- Background: Linear gradient from #1A1F3A to #0A0E27 +- Text: #FFFFFF, rgba(255,255,255,0.8) + +SPACING & WHITE SPACE: +- Generous padding: 48px around main card +- Button spacing: 16px between buttons +- Internal card padding: 32px + +VISUAL MOOD: +- Premium, trustworthy, modern, calm, professional + +STYLE REFERENCES: +- Revolut app aesthetic +- Stripe dashboard clarity +- Apple Card minimalism + +TECHNICAL SPECS: +- Resolution: 1920x1080px +- Aspect ratio: 16:9 +- Device: Desktop +- Style: Flat with subtle gradients, matte surfaces + +CRITICAL ELEMENTS: +- Large, readable balance number +- Clear call-to-action buttons +- User personalization (name/avatar) + +AVOID: +- Busy backgrounds +- More than 3 colors +- Decorative illustrations +- Stock photography +``` + +### Example 2: Mobile App Onboarding + +``` +Onboarding screen 1 for MindfulMoments - Welcome screen + +LAYOUT STRUCTURE: +- Top: App logo centered +- Middle: Hero illustration (meditation theme) +- Bottom: Headline + subtext + CTA button + +TYPOGRAPHY: +- Headline: SF Pro Display Bold, 28px, #1A1A1A +- Subtext: SF Pro Text Regular, 16px, #666666 +- Button: SF Pro Text Semibold, 18px, #FFFFFF + +COLOR PALETTE: +- Primary: #6B4CE6 (soft purple) +- Secondary: #F5F3FF (light purple tint) +- Accent: #FF6B9D (coral pink) +- Background: #FFFFFF +- Text: #1A1A1A, #666666 + +SPACING & WHITE SPACE: +- Generous top margin: 64px +- Content padding: 24px sides +- Element spacing: 32px between sections + +VISUAL MOOD: +- Calm, welcoming, gentle, trustworthy, peaceful + +STYLE REFERENCES: +- Headspace app aesthetic +- Calm app simplicity +- Apple Health app clarity + +TECHNICAL SPECS: +- Resolution: 375x812px +- Aspect ratio: Portrait (iPhone 13) +- Device: Mobile +- Style: Minimalist flat design + +CRITICAL ELEMENTS: +- Simple, calming illustration +- Clear value proposition +- Single, prominent CTA + +AVOID: +- Complex illustrations +- Multiple CTAs +- Dark or intense colors +- Cluttered layouts +``` + +--- + +## ITERATION & REFINEMENT + +If Freya suggests refinements: + +**Refinement Types:** +1. **Color adjustment** - "Make accent color warmer" +2. **Typography change** - "Increase heading size for hierarchy" +3. **Layout modification** - "Add more white space between cards" +4. **Mood shift** - "Make it feel more premium/playful/serious" + +**Process:** +- Freya generates updated prompt with specific changes +- You paste into Eira +- Use image-to-image mode with previous output as reference +- Eira generates refined version +- Freya evaluates and extracts tokens if approved + +--- + +## SUCCESS METRICS + +A successful Eira output: +✅ Aligns with strategic triggers from trigger map +✅ Demonstrates visual prosperity (not poverty) +✅ Has clear typography hierarchy +✅ Uses 3-4 colors maximum +✅ Shows generous white space +✅ Serves strategic purpose (not just decoration) +✅ Maintains brand consistency +✅ Is immediately buildable by developers + +--- + +## NOTES FOR DESIGNERS + +**This workflow works best when:** +- Strategy is defined BEFORE visual work begins +- Prompts are detailed and specific +- You make final creative decisions (don't blindly accept AI output) +- You iterate based on strategic alignment, not just aesthetics +- You think in design systems (reusable components) + +**Remember:** +You're not just generating pretty pictures. You're creating strategic visual artifacts that: +- Trigger specific user psychology +- Support business goals +- Guide developer implementation +- Build a cohesive design system +- Deliver measurable value + +Design is strategy made visible. Eira helps you visualize it. Freya helps you strategize it. You make it real. + +--- + +**End of Eira Visual Designer Guide** diff --git a/src/modules/wds/docs/examples/WDS-Presentation/docs/1-project-brief/invitation-snippets.md b/src/modules/wds/docs/examples/WDS-Presentation/docs/1-project-brief/invitation-snippets.md new file mode 100644 index 00000000..07e959bc --- /dev/null +++ b/src/modules/wds/docs/examples/WDS-Presentation/docs/1-project-brief/invitation-snippets.md @@ -0,0 +1,392 @@ +# WDS Invitation Snippets + +Humble, genuine invitation texts in English and Swedish for sharing WDS with people who might find it useful. + + +## Introduction to a Designer + +### English +``` +Many designers I talk to don't feel at home in the fast and headless vibe-coding that we're all supposed to be doing, and would rather work with established UX and Design methods. + +I realize that we designers need to learn AI in 2026 to not fall behind. That's why I've created a method for classic CX/UX/UI design but with AI as a sounding board. + +I've been really really persistent over the days between Christmas and New Year. + +I've structured the method on Github and created Agent workshops for all parts of the design process: +https://github.com/whiteport-collective/whiteport-design-studio + +I've also published the official WDS product page: +https://whiteport.com/products/wds/ + +And published the recording of my latest webinar for designers WDS Sessions 1: +https://www.youtube.com/watch?v=TdujvNYI-3g + +The WDS certification program is also underway! + +Is an agent framework for designers something you would be interested in learning you think? +``` + +### Swedish +``` +Många designers jag pratar med känner sig inte hemma i det snabba och huvudlösa i mycket av den Vibe-coding som vi alla ska hålla på med och vill hellre arbeta mer med vedertagna metoder för UX och Design. + +Jag inser att vi designers måste lära oss AI under 2026 för att inte hamna efter. Därför har jag tagit fram en metod för klassisk CX/UX/UI-design men med AI som bollplank. + +Jag har varit riktigt riktigt ihärdig på dagarna mellan jul och nyår. + +Jag har strukturerat metoden på Github och skapat Agent-workshops för alla delar av designprocessen: +https://github.com/whiteport-collective/whiteport-design-studio + +Jag har också publicerat den officiella WDS-produktsidan: +https://whiteport.com/products/wds/ + +Och publicerat inspelningen av mitt senaste webbinarium för designers WDS Sessions 1: +https://www.youtube.com/watch?v=TdujvNYI-3g + +WDS-certifieringsprogrammet är också på gång! + +Är ett agentramverk för designers något som du skulle vara intresserad av att lära dig tror du? +``` + + +## General updates + +### English +``` +Hey there. + +I have been really really busy on the Whiteport Design Studio front, the days between Christmas and new years. + +I have structured the method on Github and added cool new features. For example a content creation workshop I think you would like. +https://github.com/whiteport-collective/whiteport-design-studio + +I have also published the official WDS product page: +https://whiteport.com/products/wds/ + +And published the recording of my last webinar for designers WDS Sessions 1: +https://www.youtube.com/watch?v=TdujvNYI-3g + +The WDS certification program is also under ways! + +I am excited to see what you think about all of this! +``` + +### Swedish +``` +Hej där. + +Jag har varit riktigt riktigt ihärdig på Whiteport Design Studio-fronten, dagarna mellan jul och nyår. + +Jag har strukturerat metoden på Github och lagt till coola nya funktioner. Till exempel en workshop för innehållsskapande som jag tror du skulle gilla. +https://github.com/whiteport-collective/whiteport-design-studio + +Jag har också publicerat den officiella WDS-produktsidan: +https://whiteport.com/products/wds/ + +Och publicerat inspelningen av mitt senaste webbinarium för designers WDS Sessions 1: +https://www.youtube.com/watch?v=TdujvNYI-3g + +WDS-certifieringsprogrammet är också på gång! + +Jag är spänd på att se vad du tycker om alltsammans! +``` + +--- + +## 🎯 Try the Method + +### English +``` +I've been exploring something that might interest you - Whiteport Design Studio (WDS). It's a free, open-source framework that lets designers work in the development environment with AI support. + +It's been helping me think differently about how design and development can work together. Thought you might want to take a look. + +https://github.com/whiteport-collective/whiteport-design-studio +``` + +### Swedish +``` +Jag har utforskat något som kanske kan intressera dig - Whiteport Design Studio (WDS). Det är ett gratis, open-source ramverk som låter designers jobba i utvecklingsmiljön med AI-stöd. + +Det har hjälpt mig att tänka annorlunda kring hur design och utveckling kan samarbeta. Tänkte att du kanske vill kika på det. + +https://github.com/whiteport-collective/whiteport-design-studio +``` + +--- + +## 🌐 Visit the WDS Page + +### English +``` +Here is the WDS page that explains the approach. It talks about how designers can work with AI agents and be involved in both strategy and design. To stay updated, drop your mail in the form on the righ. + +Might be worth a look if you're curious: +https://whiteport.com/products/wds/ + + +I have published the WDS web page now. Here you can see more details about the method, deliverables, agents, course modules and the webinars. + +https://whiteport.com/products/wds/ +``` + +### Swedish +``` +Här hittar du sidan om WDS som förklarar metoden. Den handlar om hur designers kan jobba med AI-agenter och vara involverade i både strategi och design. För att få uppdateringar, lägg din mail formuläret till höger. + +Kan vara värt att kolla på om du är nyfiken: +https://whiteport.com/products/wds/ +``` + +--- + +## 🎥 Watch the Latest Webinar + +### English +``` +There's a recent webinar about WDS that goes into how designers can work in the IDE with AI agents. It's about an hour and covers the basics pretty well. + +If you have time, might be worth watching: +https://www.youtube.com/watch?v=TdujvNYI-3g + +Here is the link to the latest webinar on YouTube: +https://www.youtube.com/watch?v=TdujvNYI-3g +``` + +### Swedish +``` +Det finns ett nyligt webbinarium om WDS som går igenom hur designers kan jobba i IDE:n med AI-agenter. Det är ungefär en timme och täcker grunderna ganska bra. + +Om du har tid kan det vara värt att titta på: +https://www.youtube.com/watch?v=TdujvNYI-3g + +Här är vårt senaste webinar, WDS Sessions 1 på YouTube: +https://www.youtube.com/watch?v=TdujvNYI-3g +``` + +--- + +## 📺 Watch All Webinars + +### English +``` +There's a playlist with all the WDS webinars if you want to dive deeper into different topics - trigger mapping, design systems, working with AI agents, and that sort of thing. + +Here's the playlist: +https://www.youtube.com/watch?v=TdujvNYI-3g&list=PL094dWo_kC3t1Z0fs85P99ZK5T3tPvP2M +``` + +### Swedish +``` +Det finns en spellista med alla WDS-webinarier om du vill fördjupa dig i olika ämnen - trigger mapping, designsystem, att jobba med AI-agenter och sånt. + +Här är spellistan: +https://www.youtube.com/watch?v=TdujvNYI-3g&list=PL094dWo_kC3t1Z0fs85P99ZK5T3tPvP2M +``` + +--- + +## 📚 Learn WDS + +### English +``` +There's a course overview that walks through the WDS approach step by step. It covers working in the IDE, creating foundations, design systems, and collaborating with developers. + +No pressure, but here it is if you want to explore: +https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md +``` + +### Swedish +``` +Det finns en kursöversikt som går igenom WDS-tillvägagångssättet steg för steg. Den täcker att jobba i IDE:n, skapa grunder, designsystem och samarbeta med utvecklare. + +Ingen press, men här är den om du vill utforska: +https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md +``` + +--- + +## 🎯 Upcoming Webinar: Strategy in Practice + +### English +``` +There's a session coming up about strategy and trigger mapping on January 15 (17:00 CEST). It's about how to figure out what to build before jumping into building. + +Thought you might find it interesting, no worries if not: +https://whiteport.com/blog/wds-sessions-2-strategy-in-practise-with-wds/ +``` + +### Swedish +``` +Det kommer en session om strategi och trigger mapping den 15 januari (17:00 CEST). Den handlar om hur man tar reda på vad man ska bygga innan man hoppar in i byggandet. + +Tänkte att du kanske tycker det är intressant, ingen fara om inte: +https://whiteport.com/blog/wds-sessions-2-strategy-in-practise-with-wds/ +``` + +--- + +## 💼 Professional Introduction + +### English +``` +I've been trying out Whiteport Design Studio (WDS) lately - it's a framework that lets designers work in the development environment with AI support. Built on the BMAD Method. + +Still learning it myself, but thought I'd share in case you're interested: +https://github.com/whiteport-collective/whiteport-design-studio +``` + +### Swedish +``` +Jag har testat Whiteport Design Studio (WDS) på sistone - det är ett ramverk som låter designers jobba i utvecklingsmiljön med AI-stöd. Byggt på BMAD-metoden. + +Håller fortfarande på att lära mig det själv, men tänkte dela med mig ifall du är intresserad: +https://github.com/whiteport-collective/whiteport-design-studio +``` + +--- + +## 🚀 Quick Mention + +### English +``` +Been trying WDS - lets designers work in the IDE with AI agents. It's free and open-source. + +Might be your thing: +https://github.com/whiteport-collective/whiteport-design-studio +``` + +### Swedish +``` +Har testat WDS - låter designers jobba i IDE:n med AI-agenter. Det är gratis och open-source. + +Kanske är din grej: +https://github.com/whiteport-collective/whiteport-design-studio +``` + +--- + +## 📧 Email Signature Addition + +### English +``` +--- +🎨 Currently exploring WDS +https://github.com/whiteport-collective/whiteport-design-studio +``` + +### Swedish +``` +--- +🎨 Utforskar för närvarande WDS +https://github.com/whiteport-collective/whiteport-design-studio +``` + +--- + +## 🌟 Social Media Posts + +### English - LinkedIn/Twitter +``` +I've been exploring WDS (Whiteport Design Studio) - a free, open-source framework for designers who want to work in the IDE with AI agents. + +It's an interesting approach to working with strategy, design systems, and collaborating with developers in GitHub. + +Sharing in case others find it useful: +https://github.com/whiteport-collective/whiteport-design-studio + +#WDS #DesignWorkflow #OpenSource +``` + +### Swedish - LinkedIn/Twitter +``` +Jag har utforskat WDS (Whiteport Design Studio) - ett gratis, open-source ramverk för designers som vill jobba i IDE:n med AI-agenter. + +Det är ett intressant sätt att jobba med strategi, designsystem och samarbeta med utvecklare i GitHub. + +Delar ifall andra tycker det är användbart: +https://github.com/whiteport-collective/whiteport-design-studio + +#WDS #Designworkflow #OpenSource +``` + +--- + +## 🎓 Course Invitation + +### English +``` +Found this course about WDS that walks through working in the IDE, creating foundations, design systems, and collaborating with developers using AI agents. + +It's free and might be helpful if you're interested in this kind of thing: +https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md +``` + +### Swedish +``` +Hittade den här kursen om WDS som går igenom att jobba i IDE:n, skapa grunder, designsystem och samarbeta med utvecklare med hjälp av AI-agenter. + +Den är gratis och kan vara till hjälp om du är intresserad av den här typen av saker: +https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md +``` + +--- + +## 🏆 Certification Program Invitation + +### English +``` +I've started a WDS certification program and thought you might be interested. + +If you'd like to be part of it, here's what it involves: joining our online sessions, following the method through in a real project, being willing to pass the knowledge forward, and starting up three other designers in the method. + +If that sounds interesting and you're willing to commit to it, just send me your email and I'll add you to the inner circle Google Chat group. + +I'd love to start as soon as possible, but no pressure if it's not the right time for you. +``` + +### Swedish +``` +Jag har startat ett WDS-certifieringsprogram och tänkte att du kanske är intresserad. + +Om du vill vara med, här är vad det innebär att ta del av våra sessioner online, följa metoden genom i ett riktigt projekt, vara villig att föra kunskapen vidare och starta upp tre andra designers i metoden + +Om det låter intressant och du är villig att förbinda dig till det, skicka bara din e-post så lägger jag till dig i den inre cirkelns Google Chat-grupp. + +Jag skulle gärna starta så snart som möjligt, men ingen press om det inte är rätt tid för dig. +``` + +--- + +## 🎯 Missed Session 1? Join Session 2! + +### English +``` +Missed the first WDS session? No worries - you've got another shot! + +WDS Session 2 is happening January 15th, 17-18 CET. We'll be talking about digital strategies and how to figure out what to build before jumping into building. And right after, 18-19, we're doing an after-hours thing where we dive into the nitty-gritty of installing WDS and actually using it. + +Free registration here: +https://whiteport.com/blog/wds-sessions-2-strategy-in-practise-with-wds/ + +(And if you want to catch up, here's the Session 1 recording: +https://www.youtube.com/watch?v=TdujvNYI-3g) +``` + +### Swedish +``` +Missade du första WDS-sessionen är det inget problem - nu har du har en ny chans! + +WDS Session 2 händer 15:e januari, 17-18 CET. Vi kommer prata om digitala strategier och hur man tar reda på vad man ska bygga innan man hoppar in i byggandet. Och direkt efter, 18-19, kör vi en after-hours där vi går in på detaljerna kring installation och WDS i praktiken. + +Gratis registrering här: +https://whiteport.com/blog/wds-sessions-2-strategy-in-practise-with-wds/ + +(Och om du vill kolla in vad du missade, här är inspelningen från Session 1: +https://www.youtube.com/watch?v=TdujvNYI-3g) +``` + +--- + +*Last updated: January 3, 2026* diff --git a/src/modules/wds/docs/examples/wds-v6-conversion/session-logs/2026-01-04-eira-visual-design-integration.md b/src/modules/wds/docs/examples/wds-v6-conversion/session-logs/2026-01-04-eira-visual-design-integration.md new file mode 100644 index 00000000..0cd64172 --- /dev/null +++ b/src/modules/wds/docs/examples/wds-v6-conversion/session-logs/2026-01-04-eira-visual-design-integration.md @@ -0,0 +1,883 @@ +# Session Log: Eira Visual Design Integration Architecture + +**Date:** 2026-01-04 +**Participants:** Freya (WDS Designer Agent), User (Mårten) +**Topic:** Complete architecture for integrating Eira visual design workflow into WDS +**Status:** Design phase - to be prototyped in Dogweek project + +--- + +## Executive Summary + +Designed complete integration of **Eira** (visual design agent) into WDS workflow. Eira enables AI-powered visual design exploration using image generation models (Nano Banana, DALL-E, Midjourney, etc.) while maintaining strategic alignment with BMad Method principles. + +**Key Innovation:** Phase 2.5 "Visual Design Brief" - a creative exploration phase between strategy (Phase 2) and detailed scenarios (Phase 4) where wild visual concepts are generated before locking into detailed specs. + +**Core Principle:** Strategy → Creative Exploration → Detailed Execution + +--- + +## Problem Statement + +**Current State:** +- WDS produces functional prototypes but often uses default/generic visual design (Tailwind defaults) +- "Visual Poverty" - cluttered layouts, generic aesthetics, no strategic visual direction +- No systematic way to explore visual concepts before detailed design work + +**Desired State:** +- "Visual Prosperity" - typography-first hierarchy, generous white space, premium aesthetics +- Strategic visual design that triggers psychological drivers from trigger map +- Systematic creative exploration before detailed execution +- Tool-agnostic approach (not locked to one image generation model) + +--- + +## Architecture Overview + +### Phase Integration + +``` +Phase 1: Project Brief +├─ Business strategy +├─ VTC (Value to Customer) +└─ Question: "Will this project require visual design?" (YES/NO) + +Phase 2: Trigger Mapping +├─ User psychology +├─ Demographics +├─ Psychological triggers +└─ User context (informs device priorities) + +Phase 2.5: Visual Design Brief ← NEW! +├─ Strategic document (tool-agnostic) +├─ Content concept generation +├─ Visual exploration (wild & creative) +├─ Direction selection +└─ Design token extraction + +Phase 3: PRD/Platform +├─ Technical foundation +└─ Device priorities (informed by Phase 2.5) + +Phase 4: UX Design (Scenarios) +├─ Detailed conceptual specs +├─ High-fidelity mockups (using approved direction) +├─ HTML prototypes +└─ Design system evolution +``` + +--- + +## Phase 2.5: Visual Design Brief (Detailed) + +### Purpose + +**Strategic document** that defines boundaries and direction for visual exploration. Completely **tool-agnostic** - focuses on WHAT to explore, not HOW to generate. + +### Content Structure + +```markdown +# Visual Design Brief: [Project Name] + +## Strategic Foundation +- Value to Customer (VTC) +- Target Demographics +- Key Psychological Triggers (top 3-5 to emphasize visually) +- Brand Positioning + +## Visual Direction to Explore +- Mood & Feeling (3-5 adjectives) +- Visual References (brands/products to learn from) +- Visual Prosperity Standards (must achieve / must avoid) + +## Content Concepts +For each key page (homepage, features, pricing, etc.): +- Purpose (which trigger does this serve?) +- Strategic content (headline, subheadline, features, CTA) +- Visual exploration focus + +## Exploration Parameters +- Directions to Explore (2-3 different visual approaches) +- Pages to Visualize +- Device Priority (based on demographics) + +## Constraints & Requirements +- Brand Assets (existing/to create) +- Technical Constraints +- Must Include / Must Avoid + +## Success Criteria +- Evaluation questions +- Strategic alignment checks +``` + +### Visual Prosperity Standards + +**Must Achieve:** +- Typography-first hierarchy +- Generous, intentional white space +- Premium color palettes (3-4 colors max) +- Clean, purposeful imagery +- Every element serves strategic purpose + +**Must Avoid:** +- **Tailwind CSS default styles** (blue buttons, generic grays) +- Generic UI kit aesthetics (Material, Bootstrap defaults) +- Cluttered layouts with poor hierarchy +- Decorative elements without purpose +- Stock photo aesthetics + +--- + +## Workflow: Freya ↔ User ↔ Eira + +### Step 1: Freya Creates Visual Design Brief + +**Input:** +- Project Brief (Phase 1) +- Trigger Map (Phase 2) + +**Process:** +- Freya reads strategic context +- Generates content concepts using content creation workshop +- Defines exploration parameters +- Creates Visual Design Brief document + +**Output:** +- `docs/2.5-visual-design-brief/visual-design-brief.md` + +--- + +### Step 2: Tool Selection Workshop + +**Freya runs workshop with user:** + +``` +Q1: Which image generation model do you want to use? + [ ] Nano Banana Pro (Google) - Best text rendering, manual workflow + [ ] DALL-E 3 (OpenAI) - API access, good automation + [ ] Midjourney v7 - Beautiful aesthetics, style consistency + [ ] Flux Pro - Fast, good prompt adherence + [ ] Ideogram 2.0 - Excellent typography + [ ] Other: ___________ + +Q2: Access method? + [ ] Manual (copy-paste prompts, download results) + [ ] API (automated generation) + [ ] Third-party platform + +Q3: Do you have API keys/access configured? + [ ] Yes - ready to go + [ ] No - will use manual workflow +``` + +**User decision:** Determines execution approach, not strategy + +--- + +### Step 3: Freya Generates Tool-Specific Setup + +**For Nano Banana (example):** + +**A. System Instructions** (ONE-TIME SETUP - Universal for all projects) +``` +Freya generates ONCE, user pastes into NB system instructions field: + +UNIVERSAL KNOWLEDGE (applies to all projects): +- Eira persona and mission +- Visual Poverty vs Visual Prosperity definitions +- BMad/WDS workflow understanding +- Technical standards (typography specs, color palette rules, spacing principles) +- Collaboration style and output format +- Design token JSON structure and requirements +- Visual Prosperity checklist +- Export capabilities and format + +EXPORT INSTRUCTIONS: +When user requests export (e.g., "Export the approved design"), provide: +1. Design token JSON (colors, typography, spacing, layout) +2. HTML structure (semantic, accessible markup) +3. CSS styles (component styles, layout patterns) +4. Layout patterns JSON (structure, grid, spacing, responsive behavior) + +Use standard JSON/HTML/CSS format following the design token structure defined above. + +This stays in NB permanently, applies to every project. +``` + +**B. Project Context** (PER-PROJECT - First message in new chat) +``` +Freya generates for THIS PROJECT, user pastes as first message: + +PROJECT-SPECIFIC CONTEXT (changes per project): +- Project name and strategic summary +- VTC (Value to Customer) +- Target demographics +- Key psychological triggers +- Visual mood direction +- Brand positioning +- Design constraints +- Existing brand assets (if any) + +This context persists for entire project conversation. +``` + +**C. Task Prompts** (PER-TASK - Each exploration) +``` +Freya generates for EACH SPECIFIC TASK (page/direction): + +TASK-SPECIFIC ONLY (minimal, focused): +- Which page (homepage/features/pricing) +- Which direction to explore (premium/playful/bold) +- Specific content for this page (headline, features, CTA) +- Any page-specific requirements + +DELIVERY LOCATION: +- Save visual output to: docs/2.5-visual-design-brief/explorations/[page]/[direction].png +- File naming: [page]-[direction]-[device].png +- Example: homepage-premium-desktop.png + +Everything else (standards, principles, project context) is already in system instructions or project context. +``` + +--- + +### Step 4: Visual Exploration (User ↔ Eira) + +**Process:** +1. User pastes task prompt into Nano Banana (includes delivery location) +2. Eira (NB) generates visual concept +3. User downloads/screenshots result +4. User saves to specified location from task prompt +5. Repeat for each page and direction + +**Delivery Structure:** +``` +docs/2.5-visual-design-brief/explorations/ +├── homepage/ +│ ├── homepage-premium-desktop.png +│ ├── homepage-playful-desktop.png +│ └── homepage-bold-desktop.png +├── features/ +│ ├── features-premium-desktop.png +│ ├── features-playful-desktop.png +│ └── features-bold-desktop.png +└── pricing/ + ├── pricing-premium-desktop.png + ├── pricing-playful-desktop.png + └── pricing-bold-desktop.png +``` + +**File Naming Convention:** +- Format: `[page]-[direction]-[device].png` +- Examples: + - `homepage-premium-desktop.png` + - `features-playful-mobile.png` + - `pricing-bold-tablet.png` + +--- + +### Step 5: Direction Selection (User + Freya) + +**User shares results with Freya:** +``` +"Here are the explorations Eira generated: [screenshots/descriptions]" +``` + +**Freya analyzes:** +- Strategic alignment (triggers correct psychology?) +- Visual prosperity (meets standards?) +- Differentiation (stands out from competitors?) +- Demographic resonance (appeals to target users?) + +**Freya recommends:** +- Winning direction (or hybrid approach) +- Rationale for selection +- Refinements needed + +**User decides:** +- Approves direction +- Requests refinements +- Tries new direction + +--- + +### Step 6: Design Token Extraction + +**From approved visual direction:** + +**Option A: Eira (NB) Generates JSON Directly** +``` +User asks Eira in Nano Banana: +"Generate design token JSON files for the approved direction" + +Eira outputs complete JSON structure: +{ + "colors": { + "primary": "#0A0E27", + "secondary": "#1A1F3A", + "accent": "#00FF9D", + "background": "#FFFFFF", + "text": { + "primary": "#1A1A1A", + "secondary": "#666666", + "tertiary": "#999999" + } + }, + "typography": { + "headings": { + "family": "Inter", + "weights": [600, 700, 800], + "sizes": { + "h1": "48px", + "h2": "36px", + "h3": "24px" + } + }, + "body": { + "family": "Inter", + "weight": 400, + "size": "16px", + "lineHeight": "1.6" + } + }, + "spacing": { + "unit": "8px", + "scale": [8, 16, 24, 32, 48, 64, 96] + }, + "layout": { + "maxWidth": "1200px", + "gridColumns": 12, + "gutter": "24px" + } +} + +User copies JSON output, brings back to Cursor. +``` + +**Option B: Freya Extracts from Visual** +``` +If Eira doesn't generate JSON, Freya can extract from the approved visual: +- Analyzes colors, typography, spacing from image +- Creates JSON structure +- May need user confirmation on exact values +``` + +**User brings back to Cursor:** +- Design token JSON (from Eira or Freya) +- Visual assets (approved direction images) + +**Freya saves to:** +- `design-system/tokens/colors.json` +- `design-system/tokens/typography.json` +- `design-system/tokens/spacing.json` +- `design-system/tokens/layout.json` + +--- + +### Step 7: Return to Cursor/WDS (Integration) + +**User brings back to Freya in Cursor:** + +**Assets:** +- Visual explorations (PNG/JPG files) +- Approved direction images + +**Code:** +- Design token JSON files +- Any HTML/CSS snippets generated + +**Documentation:** +- Visual Design Brief +- Direction selection rationale +- Design token documentation + +**Freya integrates:** +1. Saves assets to appropriate folders +2. Loads design tokens into design system +3. Updates project outline with approved direction +4. Prepares for Phase 4 (detailed scenarios) + +--- + +## Phase 4: Detailed Scenario Design (Changed Approach) + +### Now Working with Approved Direction + +**Difference from Phase 2.5:** +- Phase 2.5 = EXPLORE (loose, creative, multiple directions) +- Phase 4 = EXECUTE (structured, consistent, approved direction) + +### Workflow Per Scenario + +**Step 1: Freya Creates Conceptual Spec** +- Detailed content and hierarchy +- Strategic purpose +- User psychology triggers + +**Step 2: Freya Generates Structured Prompts** +- Uses approved visual direction +- Precise specifications (not exploratory) +- Maintains design token consistency +- STRUCTURED & PRECISE (not wild) + +**Step 3: Designer Sketches Wireframe (Optional)** +- Designer creates wireframe/concept for this scenario +- Hand-drawn, Figma, or any tool +- Defines UX structure and layout + +**Step 4: Freya Generates Per-Page Visual Design Brief** +- Extracts from conceptual spec for THIS page only +- Strategic purpose, content, visual direction +- Design constraints, delivery location +- References approved direction from Phase 2.5 + +**Step 5: User → Eira → High-Fidelity Mockup (Primary Device)** +- Upload designer sketch (if exists) + visual design brief +- Generate PRIMARY device first (desktop or mobile based on demographics) +- Maintain approved visual direction +- Review and approve before moving to other devices + +**Step 6: User → Eira → Responsive Variations (Sequential)** +- Generate SECONDARY devices one at a time +- Each references approved primary device +- Prompt: "Adapt approved [primary] design for [secondary device]" +- Order: Primary → Secondary → Tertiary +- Example: Desktop → Mobile → Tablet + +**Step 7: Eira Exports Design Assets** +- User asks Eira: "Export the approved design" +- Eira provides: Design tokens JSON, HTML structure, CSS styles, Layout patterns +- User brings exports back to Cursor + +**Step 8: Extract Layout Patterns** +- Freya identifies reusable layout patterns from Eira's output +- Saves to design-system/layouts/ +- Documents layout structure, grid, spacing patterns +- **Template Reuse:** Similar pages can reference this layout pattern + +**Step 9: Freya Builds HTML Prototype** +- Uses design tokens from design system +- Uses layout patterns from design system +- Implements approved visual direction +- Creates functional prototype + +**Note on Template Reuse:** +- Once first page template is complete, similar pages are faster +- Example: After homepage hero → other hero sections reference the pattern +- Eira can generate variations: "Use hero-section-centered layout with new content" + +--- + +## Folder Structure + +``` +docs/ +├── 1-project-brief/ +│ └── product-brief.md +│ +├── 2-strategy/ +│ ├── trigger-map.md +│ └── vtc.md +│ +├── 2.5-visual-design-brief/ ← NEW PHASE! +│ ├── visual-design-brief.md (strategic document) +│ │ +│ ├── content-concepts/ +│ │ ├── homepage-concept.md +│ │ ├── features-concept.md +│ │ └── pricing-concept.md +│ │ +│ ├── explorations/ +│ │ ├── homepage/ +│ │ │ ├── direction-1-premium.png +│ │ │ ├── direction-2-playful.png +│ │ │ └── direction-3-bold.png +│ │ ├── features/ +│ │ └── pricing/ +│ │ +│ ├── approved-direction/ +│ │ ├── selection-rationale.md +│ │ ├── mood-board.png +│ │ └── design-tokens-foundation.json +│ │ +│ └── tool-setup/ (if using Nano Banana) +│ ├── system-instructions.md +│ ├── project-context.md +│ └── exploration-prompts.md +│ +├── 3-prd-platform/ +│ └── ... (technical foundation) +│ +├── 4-scenarios/ +│ ├── 1.1-homepage/ +│ │ ├── 1.1-homepage.md (conceptual spec) +│ │ ├── 1.1-homepage.html (prototype) +│ │ └── high-fidelity/ +│ │ ├── desktop.png +│ │ ├── tablet.png +│ │ └── mobile.png +│ │ +│ └── ... (other scenarios) +│ +└── design-system/ + ├── brand-assets/ (if existing brand) + │ ├── logo.svg + │ └── brand-guidelines.pdf + │ + ├── tokens/ + │ ├── colors.json + │ ├── typography.json + │ ├── spacing.json + │ └── layout.json + │ + ├── components/ + │ ├── buttons.json + │ ├── cards.json + │ └── forms.json + │ + ├── layouts/ + │ ├── hero-sections.json + │ ├── feature-grids.json + │ ├── pricing-tables.json + │ └── navigation-patterns.json + │ + └── visual-identity/ + ├── approved-mood-board.png + └── component-showcase.png +``` + +--- + +## Prompt Style Comparison + +### Phase 2.5: Exploration Prompts (LOOSE & CREATIVE) + +**Characteristics:** +- Broad strokes, not pixel-perfect +- Focus on MOOD and FEELING +- Multiple variations encouraged +- "What if...?" explorations +- Minimal restrictions +- "Get wild and crazy" + +**Example:** +``` +Homepage concept for [Project] + +STRATEGIC CONTEXT: +- Target: [demographics] +- Trigger: [psychological driver] +- Value: [VTC] + +CONTENT: +- Headline: [strategic headline] +- Features: [3-4 highlights] + +VISUAL EXPLORATION: +Explore 3 different moods: + +Direction 1: PREMIUM & TRUSTWORTHY +- Think: Stripe, Apple Card +- Colors: Deep, sophisticated +- Typography: Bold, confident +- Mood: Professional, premium + +Direction 2: PLAYFUL & ACCESSIBLE +- Think: Duolingo, Notion +- Colors: Vibrant, warm +- Typography: Rounded, friendly +- Mood: Fun, welcoming + +Direction 3: BOLD & INNOVATIVE +- Think: Vercel, Linear +- Colors: High contrast, electric +- Typography: Sharp, modern +- Mood: Forward-thinking, disruptive + +FREEDOM: +- Don't restrict creativity +- Show me what's possible +- Surprise me +``` + +### Phase 4: Execution Prompts (STRUCTURED & PRECISE) + +**Characteristics:** +- Exact specifications +- Approved direction only +- Design token consistency +- Pixel-perfect requirements +- Clear constraints +- Buildable by developers + +**Example:** +``` +Homepage hero section for [Project] + +LAYOUT STRUCTURE: +- Navigation: Logo left, menu right +- Hero: Centered headline + CTA +- Background: Gradient [exact colors] + +TYPOGRAPHY: +- Headline: Inter Bold, 48px, #1A1A1A +- Subheadline: Inter Regular, 18px, #666666 +- CTA: Inter Semibold, 16px, #FFFFFF + +COLOR PALETTE: +- Primary: #0A0E27 (from approved direction) +- Accent: #00FF9D (from approved direction) +- Background: Linear gradient #1A1F3A to #0A0E27 + +SPACING: +- Padding: 64px top/bottom +- Max-width: 1200px centered +- Button spacing: 24px from subheadline + +STYLE: +- Follow approved mood board +- Maintain design token consistency +- Flat with subtle gradients + +AVOID: +- Deviating from approved direction +- Tailwind defaults +``` + +--- + +## Tool-Agnostic Design + +### Visual Design Brief = Strategic Document + +**Always the same, regardless of tool:** +- Strategic foundation +- Content concepts +- Exploration parameters +- Success criteria + +**Tool choice = Implementation detail:** +- User chooses based on preference/access +- Freya adapts prompts to chosen tool +- Same strategy → different execution tools + +### Supported Tools (Examples) + +**Nano Banana Pro:** +- Best text rendering +- Good UI layouts +- Manual workflow +- Freya generates: System instructions + Project context + Structured prompts + +**DALL-E 3:** +- API access +- Good automation +- Freya generates: API-friendly prompts + Batch scripts + +**Midjourney v7:** +- Beautiful aesthetics +- Style consistency (`--sref`) +- Freya generates: Discord-formatted prompts + Style references + +**Flux Pro:** +- Fast generation +- Good prompt adherence +- Freya generates: Technical prompts + API integration + +--- + +## Integration Points with Existing WDS + +### Phase 1: Project Brief +**Add question:** +- "Will this project require visual design deliverables?" (YES/NO) +- If YES: "Do you have existing brand assets?" (YES/NO/PARTIAL) + +### Phase 2: Trigger Mapping +**No changes to workflow** +- Observe user context for device clues +- Demographics inform visual direction + +### Phase 2.5: Visual Design Brief +**New workflow - insert here** +- Triggered if visual design = YES +- Freya creates Visual Design Brief +- Runs tool selection workshop +- Generates tool-specific setup +- Facilitates exploration +- Extracts design tokens + +### Phase 3: PRD/Platform +**Informed by Phase 2.5:** +- Device priorities (from explorations) +- Technical constraints (from approved direction) + +### Phase 4: UX Design +**Uses approved direction:** +- Design tokens from Phase 2.5 +- Visual consistency maintained +- Structured prompts (not exploratory) + +--- + +## Output Format (Return to Cursor) + +### What User Brings Back + +**1. Visual Assets** +``` +2.5-visual-design-brief/explorations/ +├── [page]/[direction].png +└── approved-direction/mood-board.png +``` + +**2. Design Tokens (JSON)** +```json +{ + "colors": {...}, + "typography": {...}, + "spacing": {...}, + "layout": {...} +} +``` + +**3. Code Snippets (if generated)** +```css +/* Example CSS from approved direction */ +:root { + --color-primary: #0A0E27; + --color-accent: #00FF9D; + --font-heading: 'Inter', sans-serif; + --spacing-unit: 8px; +} +``` + +**4. Documentation** +```markdown +- visual-design-brief.md +- selection-rationale.md +- design-token-documentation.md +``` + +### How Freya Integrates + +**Step 1: Save Assets** +- Move images to appropriate folders +- Organize by phase and purpose + +**Step 2: Load Design Tokens** +- Parse JSON files +- Validate against Visual Prosperity standards +- Save to `design-system/tokens/` + +**Step 3: Update Project State** +- Mark Phase 2.5 complete +- Document approved direction +- Update project outline + +**Step 4: Prepare for Phase 4** +- Load design tokens for scenario work +- Reference approved visual direction +- Ready to generate structured prompts + +--- + +## Success Criteria + +### Visual Prosperity Achieved +- ✅ Typography-first hierarchy +- ✅ Generous white space +- ✅ Premium color palette (3-4 colors) +- ✅ Strategic purpose for every element +- ✅ No Tailwind defaults +- ✅ No generic UI kit aesthetics + +### Strategic Alignment +- ✅ Triggers identified psychological drivers +- ✅ Resonates with target demographics +- ✅ Differentiates from competitors +- ✅ Supports brand positioning + +### Process Quality +- ✅ Strategy informed visual exploration +- ✅ Multiple directions explored before commitment +- ✅ Clear rationale for chosen direction +- ✅ Design tokens extracted and documented +- ✅ Smooth integration back into WDS workflow + +--- + +## Next Steps (Dogweek Project Prototype) + +### Phase 1: Test Setup +1. Complete Dogweek Project Brief +2. Complete Dogweek Trigger Mapping +3. Trigger Phase 2.5 Visual Design Brief + +### Phase 2: Tool Selection +1. Run tool selection workshop +2. Choose image generation model (likely Nano Banana) +3. Set up access/credentials + +### Phase 3: Exploration +1. Freya generates Visual Design Brief +2. Freya generates tool-specific setup (system instructions, project context) +3. Freya generates exploration prompts +4. User executes in chosen tool +5. Collect visual explorations + +### Phase 4: Integration +1. Select winning direction +2. Extract design tokens +3. Bring assets + tokens back to Cursor +4. Freya integrates into design system +5. Proceed to Phase 4 scenarios + +### Phase 5: Refinement +1. Document what worked / what didn't +2. Refine prompts and workflow +3. Update architecture based on learnings +4. Integrate into WDS core + +--- + +## Open Questions (To Resolve in Prototype) + +1. **Design token extraction accuracy:** How well can Freya extract tokens from generated images? +2. **Prompt effectiveness:** Do loose exploration prompts generate useful variety? +3. **Tool comparison:** Should we test multiple tools in parallel? +4. **Iteration cycles:** How many exploration rounds are typically needed? +5. **Integration friction:** What's the smoothest way to bring results back to Cursor? +6. **Design system evolution:** How do tokens from Phase 2.5 evolve through Phase 4? + +--- + +## Key Principles + +1. **Strategy First:** Visual exploration happens AFTER strategy is clear +2. **Explore Before Committing:** Wild concepts before detailed specs +3. **Tool Agnostic:** Strategy document survives tool changes +4. **Visual Prosperity:** Eliminate defaults, cultivate premium aesthetics +5. **Human in Loop:** Designer makes final creative decisions +6. **Strategic Alignment:** Every visual choice serves psychological triggers +7. **Design System Thinking:** Extract reusable patterns, not one-offs + +--- + +## Related Documents + +- `eira-visual-designer.md` - Eira agent definition and system instructions +- Visual Design Brief template (to be created) +- Tool-specific prompt templates (to be created) +- Design token extraction guide (to be created) + +--- + +**Status:** Architecture complete - ready for prototype testing in Dogweek project + +**Next Session:** Implement and test in real project, refine based on learnings + +--- + +_Session log created by Freya (WDS Designer Agent) - 2026-01-04_ diff --git a/src/modules/wds/docs/learn-wds/Webinars/2024-12-22-WDS-Jam-1-Say-Hello-to-AI-Agent-Framework.md b/src/modules/wds/docs/learn-wds/Webinars/2024-12-22-WDS-Jam-1-Say-Hello-to-AI-Agent-Framework.md new file mode 100644 index 00000000..e69de29b diff --git a/src/modules/wds/docs/learn-wds/Webinars/2024-12-22-WDS-Sessions-1-Say-Hello-to-WDS.md b/src/modules/wds/docs/learn-wds/Webinars/2024-12-22-WDS-Sessions-1-Say-Hello-to-WDS.md new file mode 100644 index 00000000..5681d41e --- /dev/null +++ b/src/modules/wds/docs/learn-wds/Webinars/2024-12-22-WDS-Sessions-1-Say-Hello-to-WDS.md @@ -0,0 +1,174 @@ +# WDS Jam #1: Say Hello to the New AI-Agent Framework for Designers! + +**Date:** December 22, 2024 +**Time:** 17:00 – 18:00 CEST +**Host:** Mårten Angner, CX/UX/UI Designer and founder of WDS +**Video:** [Watch on YouTube](https://youtu.be/TdujvNYI-3g) + +--- + +## 🎥 Webinar Preview + +[![WDS Jam #1 Thumbnail](https://img.youtube.com/vi/TdujvNYI-3g/maxresdefault.jpg)](https://youtu.be/TdujvNYI-3g) + +--- + +## 📋 Session Overview + +Join Mårten Angner for an inspiring 60-minute session exploring the Whiteport Design Studio (WDS), a hands-on expansion for designers ready to move their craft into the development space and bring ideas to life directly in the IDE. + +Built on the shoulders of giants—the proven BMAD Method—this approach empowers designers to take control of their workflow and collaborate seamlessly with both developers and AI. + +### 🔍 Key Themes + +**From Feeling Behind to Leading the Edge** +Like many designers, Mårten once felt lost in the AI revolution—unsure where designers fit in and quietly wondering if the profession was being replaced. After discovering the BMAD Method, he developed WDS as an expansion pack based on 25+ years of design experience, now supercharged by AI. + +**Beyond Vibe Coding** +Great products are not created in 24 hours with a couple of prompts. Designers have years of experience understanding businesses and their needs, meeting users in research and usability studies. WDS ensures designers remain at the strategic center of product development, not pushed aside in the hunt for immediate satisfaction. + +--- + +## 🎯 What You'll Learn + +- **Leverage WDS**: Use the AI Agent framework to structure your design process for strategy, project documents, alignment documents, and project contracts +- **Collaborate with AI**: Partner with AI as a creative co-thinker to refine ideas and translate them into clear, actionable specifications +- **Sketch to Code**: Turn your sketches, wireframes, and designs into functional design specifications that become the product +- **Design Systems that Scale**: Build reusable, intelligent design components that integrate directly into developer workflows +- **Elevate Your Role**: Step into a new era of design—where creativity meets technology, and your ideas become instantly actionable + +--- + +## ⏱️ Timestamps + +| Time | Topic | +|------|-------| +| 00:00 | Welcome + quick intros (who's here, how people use AI today) | +| 00:05 | The current AI reality: prototypes, hype, and the "Lovable code breakup" 💔 | +| 00:10 | The big shift: BMAD and why documents beat prompting | +| 00:13 | WDS workflow overview: IDE-first, visual thinking, and how the process flows | +| 00:14 | Strategy foundation: Analyst agent + Trigger Mapping (goals, target groups, forces) | +| 00:16 | From strategy to product: personas, scenarios, sketching, and envisioning | +| 00:18 | From vision to build: specs, component IDs, design systems, "spec is the new code" ✨ | +| 00:23 | When it works (and when it doesn't): fit, scale, feedback loops, iteration | +| 00:25 | Working with clients + stakeholders: presenting, GitHub, and collaboration concerns | +| 00:33 | Closing: tool limits, Excalidraw/BMAD v6 notes, and what's next | + +--- + +## 🛠️ Resources & Links + +### Core Resources +- [WDS Framework Repository](https://github.com/whiteport-collective/whiteport-design-studio) +- [WDS Presentation Page](https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md) +- [WDS Course Overview](https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md) +- [BMAD Method](https://github.com/bmad-code-org/BMAD-METHOD) +- [BMAD Masterclass](https://www.youtube.com/watch?v=LorEJPrALcg) +- [Whiteport Website](https://whiteport.com) + +--- + +## 💡 Key Takeaways + +1. **Documents Beat Prompting** + - The BMAD Method shows why structured documentation is more powerful than endless prompting + - Your design specifications become the source of truth + +2. **Spec is the New Code** + - In the AI era, specifications become the product + - Code is just output—generated and regenerated from your design work + +3. **IDE-First Workflow** + - Working in the same environment as developers improves collaboration + - Visual thinking meets technical implementation seamlessly + +4. **Strategic Foundation Matters** + - Trigger mapping connects business goals to user needs + - Personas and scenarios ground your design decisions + +5. **Designers Lead, AI Amplifies** + - WDS positions designers at the strategic center + - AI becomes your co-pilot, not your replacement + +--- + +## 👥 Who Should Attend + +This session is for: +- **Digital Designers** who want to expand their skillset and collaborate fluently with AI and developers +- **CX/UX/UI Professionals** ready to transform their workflow from static mockups to dynamic, living systems +- **Design Leads** who want to lead the next generation of digital creativity +- **Product Managers** seeking to understand how design drives innovation +- **Creative Entrepreneurs** ready to take control of their product development + +--- + +## 📝 Additional Notes + +- This was the inaugural WDS Jam session +- All resources mentioned are available for free +- WDS is built on 25+ years of CX/UX/UI design experience +- Part of the BMAD Method for AI agent-driven development + +--- + +## 📋 YouTube Show Notes (Copy-Paste Version) + +``` +Say hello to the new AI-Agent framework for designers! Join Mårten Angner for an inspiring session exploring Whiteport Design Studio (WDS). + +🔍 About WDS +Whiteport Design Studio is a free and open-source expansion to the BMAD Method, designed to help designers work directly in the development environment. Built on 25+ years of design experience, WDS empowers you to take control of your workflow and collaborate seamlessly with both developers and AI. + +🎯 What You'll Learn +- Leverage WDS to structure your design process for strategy, documents, and contracts +- Collaborate with AI as a creative co-thinker +- Turn sketches into functional design specifications that become the product +- Build reusable design systems that integrate into developer workflows +- Elevate your role where creativity meets technology + +⏱️ Timestamps +00:00 Welcome + quick intros (who's here, how people use AI today) +00:05 The current AI reality: prototypes, hype, and the "Lovable code breakup" 💔 +00:10 The big shift: BMAD and why documents beat prompting +00:13 WDS workflow overview: IDE-first, visual thinking, and how the process flows +00:14 Strategy foundation: Analyst agent + Trigger Mapping (goals, target groups, forces) +00:16 From strategy to product: personas, scenarios, sketching, and envisioning +00:18 From vision to build: specs, component IDs, design systems, "spec is the new code" ✨ +00:23 When it works (and when it doesn't): fit, scale, feedback loops, iteration +00:25 Working with clients + stakeholders: presenting, GitHub, and collaboration concerns +00:33 Closing: tool limits, Excalidraw/BMAD v6 notes, and what's next + +🔗 Resources + +📦 Get Started with WDS +WDS Framework Repository - Download the complete framework, installation guides, and documentation +https://github.com/whiteport-collective/whiteport-design-studio + +📖 Learn More About WDS +WDS Presentation Page - Discover how WDS transforms designers into strategic leaders in the AI era +https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md + +WDS Course Overview - Complete learning path from designer to linchpin, master the full methodology +https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md + +🛠️ Foundation & Related Tools +BMAD Method - The open-source AI-augmented development framework that powers WDS +https://github.com/bmad-code-org/BMAD-METHOD + +BMAD Masterclass - Comprehensive video guide to understanding the BMAD Method +https://www.youtube.com/watch?v=LorEJPrALcg + +🌐 Connect with Whiteport +Whiteport Website - Design and development agency behind WDS, based in Sweden +https://whiteport.com + +💡 Final Note +Designers do not need to stand on the sidelines in the AI era. With the right workflow, we can take the lead in how digital products are built. + +#WDS #DesignToCode #AIForDesigners #DesignWorkflow #BMAD #AIAgents #UIDesign #UXDesign #AIDesign #DesignSystems +``` + +--- + +*Last updated: January 2, 2026* diff --git a/src/modules/wds/docs/learn-wds/Webinars/2025-10-22-Webinar-WDS-v4.md b/src/modules/wds/docs/learn-wds/Webinars/2025-10-22-Webinar-WDS-v4.md new file mode 100644 index 00000000..dfbb79c5 --- /dev/null +++ b/src/modules/wds/docs/learn-wds/Webinars/2025-10-22-Webinar-WDS-v4.md @@ -0,0 +1,181 @@ +# Webinar: Whiteport Design Studio v4 - From Sketch to Code with AI + +**Date:** October 22, 2025 +**Duration:** 45 minutes +**Presenter:** Mårten Angner, Founder of Whiteport +**Video:** [Watch on YouTube](https://youtu.be/i1_aCbricG0) + +--- + +## 🎥 Webinar Preview + +[![WDS v4 Webinar Thumbnail](https://img.youtube.com/vi/i1_aCbricG0/maxresdefault.jpg)](https://youtu.be/i1_aCbricG0) + +--- + +## 🚀 About WPS2C Framework + +**Whiteport Sketch to Code (WPS2C)** is a free and open-source expansion to the BMAD Method, designed to help digital creatives work directly in the development environment. + +### Key Features: +- Work in the IDE and GitHub with AI agent support +- Transform sketches into structured specifications +- Generate components, content, and front-end structures +- Maintain design integrity through the development process +- Collaborate effectively with developers using shared tools + +--- + +## 🎯 What You'll Learn + +- **Collaborate with AI** as a thinking partner +- Create **specifications that generate better code** than prompts alone +- Understand how **components, content, and behavior** connect from the first sketch +- Work directly in **GitHub and the IDE** without complexity +- Leverage **BMAD agent system** for design implementation + +--- + +## 📋 Timestamps & Key Moments + +| Time | Topic | +|------|-------| +| 00:00 | Introduction | +| 03:50 | Why designers need WPS2C | +| 05:39 | BMAD agent roles | +| 10:48 | Working in the IDE (Cursor) | +| 16:09 | Trigger maps and discovery | +| 21:58 | Personas and user grounding | +| 25:39 | Sketch to specification | +| 27:53 | Component thinking and design systems | +| 29:53 | Early front-end output | +| 36:28 | Making changes safely | +| 41:00 | Why sketching still matters | +| 42:34 | Wrap-up and next steps | + +--- + +## 🛠️ Resources & Links + +### Core Resources +- [BMAD Method (GitHub)](https://github.com/bmad-code-org/BMAD-METHOD) +- [WPS2C Framework (GitHub)](https://github.com/whiteport-collective/whiteport-sketch-to-code-bmad-expansion) +- [BMAD Masterclass](https://www.youtube.com/watch?v=LorEJPrALcg) +- [Whiteport Website](https://whiteport.com) + +### Related Learning +- [WDS Documentation](https://github.com/whiteport-collective/whiteport-design-studio/tree/main/docs) +- [BMAD Documentation](https://github.com/bmad-code-org/BMAD-METHOD/tree/main/docs) + +--- + +## 💡 Key Takeaways + +1. **Designers Can Lead in the AI Era** + - WPS2C empowers designers to take an active role in the development process + - Move from being a design specialist to a design leader + +2. **The Power of Structured Specifications** + - Well-structured specifications generate better results than prompts alone + - Components and patterns create consistency across the product + +3. **IDE as a Design Tool** + - Working in the same environment as developers improves collaboration + - Real-time feedback on implementation feasibility + +4. **The Future of Design Workflows** + - AI agents handle repetitive tasks + - Designers focus on strategy and user experience + - Faster iteration and validation cycles + +--- + +## 📅 What's Next? + +1. **Get Started** + - Install the WDS extension + - Set up your development environment + - Complete the getting started tutorial + +2. **Join the Community** + - [GitHub Discussions](https://github.com/whiteport-collective/whiteport-design-studio/discussions) + - [Discord Community](https://discord.gg/your-invite-link) + +3. **Upcoming Webinars** + - Advanced Component Design with WDS + - Collaborative Workflows for Design Teams + - From Design to Production: A Complete Walkthrough + +--- + +## 📝 Additional Notes + +- This webinar is part of the WDS learning path +- All resources mentioned are available for free +- No prior coding experience required to get started + +--- + +## 📋 YouTube Show Notes (Copy-Paste Version) + +``` +If you are a designer who wants to use AI in your workflow without becoming a developer, Whiteport Design Studio v4 is for you. + +🔍 About Whiteport Design Studio v4 +Whiteport Design Studio v4 (WDS) is a free and open-source expansion to the BMAD Method, created to help digital creatives work directly in the development environment. The goal is simple: go from sketch, to specification, to usable front-end structure in the same workflow as developers. + +With WDS you work in the IDE and in GitHub, supported by AI agents that mirror an agile team. You still design, but now you also deliver structure, content, behavior, and documentation that both humans and AI can act on instantly. + +🎯 What You'll Learn +- How to collaborate with AI as a thinking partner +- How to create specifications that generate better code than prompts alone +- How components, content, and behavior connect from the very first sketch +- How to work directly in GitHub and the IDE without fear or complexity + +⏱️ Timestamps +00:00 Introduction +03:50 Why designers need WPS2C +05:39 BMAD agent roles +10:48 Working in the IDE (Cursor) +16:09 Trigger maps and discovery +21:58 Personas and user grounding +25:39 Sketch to specification +27:53 Component thinking and design systems +29:53 Early front-end output +36:28 Making changes safely +41:00 Why sketching still matters +42:34 Wrap-up and next steps + +🔗 Resources + +📦 Get Started with WDS +WDS Framework Repository - Download the complete framework, installation guides, and documentation +https://github.com/whiteport-collective/whiteport-design-studio + +📖 Learn More About WDS +WDS Presentation Page - Discover how WDS transforms designers into strategic leaders in the AI era +https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md + +WDS Course Overview - Complete learning path from designer to linchpin, master the full methodology +https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md + +🛠️ Foundation & Related Tools +BMAD Method - The open-source AI-augmented development framework that powers WDS +https://github.com/bmad-code-org/BMAD-METHOD + +BMAD Masterclass - Comprehensive video guide to understanding the BMAD Method +https://www.youtube.com/watch?v=LorEJPrALcg + +🌐 Connect with Whiteport +Whiteport Website - Design and development agency behind WDS, based in Sweden +https://whiteport.com + +💡 Final Note +If this session helps you, feel free to comment or reach out. Designers do not need to stand on the sidelines in the AI era. With the right workflow, we can take the lead in how digital products are built. + +#WDS #DesignToCode #AIForDesigners #DesignWorkflow #NoCode #LowCode #UIDesign #UXDesign #AIDesign #DesignSystems +``` + +--- + +*Last updated: January 2, 2026* diff --git a/src/modules/wds/docs/learn-wds/Webinars/2026-01-15-WDS-Sessions-2-Strategy-in-Practice.md b/src/modules/wds/docs/learn-wds/Webinars/2026-01-15-WDS-Sessions-2-Strategy-in-Practice.md new file mode 100644 index 00000000..270d1c56 --- /dev/null +++ b/src/modules/wds/docs/learn-wds/Webinars/2026-01-15-WDS-Sessions-2-Strategy-in-Practice.md @@ -0,0 +1,159 @@ +# WDS Sessions 2: Strategy in Practice with WDS + +**Date:** January 15, 2026 +**Time:** 17:00 – 18:00 CEST +**Host:** Mårten Angner, CX/UX/UI Designer and founder of WDS +**Registration:** [Sign up here](https://whiteport.com/blog/wds-sessions-2-strategy-in-practise-with-wds/) + +--- + +## 🎥 Session Preview + +*Recording will be available after the live session* + +--- + +## 📋 Session Overview + +Build less. Decide more. Nail your digital strategies in your next project! + +AI makes it ridiculously easy to build things. Which is both a gift… and a trap. Because every minute spent vibecoding "something cool" that you later throw away, steals focus from the one thing that actually moves the needle: **Building something that matters.** + +Digital strategy is the step most teams try to skip. Not because it's unimportant, but because it's invisible work. No shiny UI. No dopamine from "it runs!" Just clarity. Direction. Decisions. And that's exactly why it matters. + +### 🔍 What is Digital Strategy? + +Digital strategy is the plan that answers: +- Who are we helping? +- What do they want to achieve? +- What must be true for this to work? +- What should we build first, second, or not at all? + +It's how you avoid shipping a beautiful solution to the wrong problem. With AI tools, the cost of building is dropping fast. So the real competitive advantage becomes **choosing the right thing to build**. + +### 🗺️ Strategy in Practice: Trigger Mapping (the WDS way) + +In this session, we'll work hands-on with **Trigger Mapping**: a practical method for turning messy reality into a clear digital plan. Instead of starting with features, we start with the real world: + +- What triggers a user to act? +- What do your users want to have happened? +- What do you think they wish to avoid? +- How can our software make their lives better? + +Then we translate that into a strategy you can actually execute. + +--- + +## 🎯 What You'll Learn + +- **What digital strategy is (and isn't)**: No fluff, no "vision statements", just usable clarity +- **How Trigger Mapping works**: Map the moments that create action, friction, and opportunity +- **How to avoid "AI-powered wandering"**: Stop generating prototypes that don't connect to outcomes +- **How designers can lead strategy**: Using your existing skills, amplified through WDS +- **How WDS helps**: Use the agents to document decisions, structure intent, and keep the project aligned + +--- + +## ⏱️ Timestamps + +*Timestamps will be added after the recording is available* + +--- + +## 🛠️ Resources & Links + +### Core Resources +- [WDS Framework Repository](https://github.com/whiteport-collective/whiteport-design-studio) +- [WDS Presentation Page](https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md) +- [WDS Course Overview](https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md) +- [BMAD Method](https://github.com/bmad-code-org/BMAD-METHOD) +- [BMAD Masterclass](https://www.youtube.com/watch?v=LorEJPrALcg) +- [Whiteport Website](https://whiteport.com) + +--- + +## 💡 Key Takeaways + +*Key takeaways will be added after the session* + +--- + +## 👥 Who Should Attend + +This session is for: +- **Digital Designers** who want to build the right thing before building fast +- **CX/UX/UI Professionals** ready to turn vague goals into a strategy you can execute +- **Design Leads** who want to use AI as an amplifier, not a distraction +- **Product Managers** seeking to lead projects with clarity +- **Creative Entrepreneurs** who need to make strategic decisions about what to build + +--- + +## 📝 Bring Your Curiosity + +You don't need to arrive with a complete case, a perfect idea, or a polished plan. Just bring something you're building, considering, or stuck on, and we'll use it as material. + +If you've ever thought: "Why are we building this?"…then you're in the right room. + +--- + +## 📋 YouTube Show Notes (Copy-Paste Version) + +``` +Build less. Decide more. Nail your digital strategies in your next project! + +🔍 About This Session +AI makes it ridiculously easy to build things. Which is both a gift… and a trap. Digital strategy is the step most teams try to skip—not because it's unimportant, but because it's invisible work. No shiny UI. No dopamine from "it runs!" Just clarity. Direction. Decisions. And that's exactly why it matters. + +In this session, we work hands-on with Trigger Mapping: a practical method for turning messy reality into a clear digital plan. Instead of starting with features, we start with the real world—what triggers users to act, what they want to achieve, and how our software can make their lives better. + +🎯 What You'll Learn +- What digital strategy is (and isn't) - no fluff, no "vision statements", just usable clarity +- How Trigger Mapping works - map the moments that create action, friction, and opportunity +- How to avoid "AI-powered wandering" - stop generating prototypes that don't connect to outcomes +- How designers can lead strategy - using your existing skills, amplified through WDS +- How WDS helps - use the agents to document decisions, structure intent, and keep the project aligned + +⏱️ Timestamps +[To be added after recording] + +🔗 Resources + +📦 Get Started with WDS +WDS Framework Repository - Download the complete framework, installation guides, and documentation +https://github.com/whiteport-collective/whiteport-design-studio + +📖 Learn More About WDS +WDS Presentation Page - Discover how WDS transforms designers into strategic leaders in the AI era +https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md + +WDS Course Overview - Complete learning path from designer to linchpin, master the full methodology +https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md + +🛠️ Foundation & Related Tools +BMAD Method - The open-source AI-augmented development framework that powers WDS +https://github.com/bmad-code-org/BMAD-METHOD + +BMAD Masterclass - Comprehensive video guide to understanding the BMAD Method +https://www.youtube.com/watch?v=LorEJPrALcg + +🌐 Connect with Whiteport +Whiteport Website - Design and development agency behind WDS, based in Sweden +https://whiteport.com + +💡 Who Should Attend +This session is for Digital Designers, CX/UX/UI Professionals, Design Leads, Product Managers, and creative entrepreneurs who want to: +✅ Build the right thing before building fast +✅ Turn vague goals into a strategy you can execute +✅ Use AI as an amplifier, not a distraction +✅ Lead projects with clarity (even when everyone else is sprinting in random directions) + +📝 Bring Your Curiosity +You don't need to arrive with a complete case, a perfect idea, or a polished plan. Just bring something you're building, considering, or stuck on, and we'll use it as material. If you've ever thought: "Why are we building this?"…then you're in the right room. + +#WDS #DigitalStrategy #TriggerMapping #AIForDesigners #DesignWorkflow #ProductStrategy #UIDesign #UXDesign #DesignThinking #DesignLeadership +``` + +--- + +*Last updated: January 2, 2026*