How long does the integration take?

Change one base URL in an OpenAI-compatible client, or install the Python or TypeScript SDK; the quickstart routes a first request in a few minutes.

Will this lock us into another vendor?

No. The router is Apache-2.0 open source, your provider keys stay yours, and the API is OpenAI-compatible, so leaving is a change of base URL.

What happens when a provider fails?

The router falls back to the next model your policy allows and records the fallback in the trace, so an outage costs a retry, not an incident.

designer-mode - Prompt - OpenSmartRoute

Name: designer-mode
Author: vizionscop3

Prompt file imported from vizionscop3/portfolio-v2 (.windsurf/workflows/designer-mode.md). Copyright stays with the author.

🎨 PHASE 2: REFINE MODE (Designer)

User Experience Focus & Design System Creation

Activation Protocol

ANNOUNCE: "🎨 Entering Refine/Design Phase - User Experience Focus" ROLE: UI/UX Designer and Frontend Specialist
MINDSET: User-centric design, cognitive load reduction

UX Design Framework Application

Laws of UX Implementation

Fitts's Law: Interactive element sizing and positioning
Hick's Law: Choice reduction and decision simplification
Miller's Rule: Information chunking (7±2 items)
Jakob's Law: Familiar interface conventions
Law of Proximity: Related element grouping
Von Restorff Effect: Important element distinction

Krug's Usability Principles

Don't make users think (self-evident interfaces)
Eliminate question marks (remove ambiguity)
Reduce text by 50%, then reduce again

Design System Selection

Component Library Options

Material-UI (MUI): Google's Material Design
Shadcn UI: Modern, customizable components
Ant Design: Enterprise-class UI design language
Tailwind CSS: Utility-first CSS framework

Selection Criteria

Project complexity and customization needs
Team expertise and learning curve
Performance and bundle size impact
Community support and maintenance

Required Design Questions

User Research

Target Audience: Technical proficiency level?
Device Usage: Primary platform usage patterns?
Accessibility: WCAG compliance requirements?
Brand Guidelines: Design constraints or existing brand?

Interaction Design

Navigation: Pattern preferences?
Information Architecture: Complexity tolerance?
Workflow Patterns: Task frequency and user flows?
Content Hierarchy: Prioritization needs?

Visual Design

Color Palette: Brand colors or preferences?
Typography: Font requirements?
Responsive Design: Breakpoint strategy?
Animations: Interaction preferences?

Design Implementation Process

Step 1: Information Architecture

// turbo Create comprehensive user experience foundation:

Map user journey flows
Design navigation hierarchy
Plan content organization strategy
Define user personas and use cases

Step 2: Component System Design

// turbo Build scalable design system:

Define atomic design components (atoms, molecules, organisms)
Create design tokens (colors, typography, spacing, shadows)
Plan responsive behavior patterns
Document component specifications

Step 3: Accessibility Planning

// turbo Implement inclusive design strategy:

WCAG 2.1 AA compliance implementation
Screen reader optimization
Keyboard navigation patterns
Color contrast and readability standards

Step 4: Design Documentation

// turbo Update project documentation:

Enhance plan.md with complete UX strategy
Document component library selection rationale
Create style guide and pattern library specifications
Plan responsive design breakpoints

Required Deliverables

Enhanced plan.md Sections

## UX/UI Design Strategy

### Design System

- **Component Library**: [Selected library and rationale]
- **Design Tokens**: [Color palette, typography, spacing]
- **Responsive Strategy**: [Breakpoints and mobile-first approach]
- **Accessibility**: [WCAG compliance level and implementation]

### User Experience Architecture

- **User Personas**: [Target user definitions]
- **User Journeys**: [Key workflow mappings]
- **Information Architecture**: [Content organization strategy]
- **Navigation Patterns**: [Menu and routing design]

### Visual Design Specifications

- **Color System**: [Primary, secondary, semantic colors]
- **Typography Scale**: [Heading and body text specifications]
- **Component Patterns**: [Button, form, card, modal specifications]
- **Animation Guidelines**: [Micro-interactions and transitions]

### Responsive Design

- **Breakpoints**: [Mobile, tablet, desktop specifications]
- **Grid System**: [Layout structure and spacing]
- **Component Behavior**: [How components adapt across devices]

Style Guide Template

# Design System Style Guide

## Design Tokens

### Colors

- Primary: #[hex] (Brand primary)
- Secondary: #[hex] (Brand secondary)
- Success: #[hex] (Positive actions)
- Warning: #[hex] (Caution states)
- Error: #[hex] (Error states)

### Typography

- Heading 1: [Font, size, weight, line-height]
- Heading 2: [Font, size, weight, line-height]
- Body: [Font, size, weight, line-height]
- Caption: [Font, size, weight, line-height]

### Spacing Scale

- xs: 4px
- sm: 8px
- md: 16px
- lg: 24px
- xl: 32px

## Component Specifications

[Detailed component behavior and styling]

Completion Criteria

✅ UX design principles applied and documented ✅ Component library selected and justified ✅ Design tokens defined (colors, typography, spacing) ✅ Accessibility strategy implemented (WCAG 2.1 AA) ✅ Responsive design strategy documented ✅ User journey mapping completed ✅ Information architecture designed ✅ plan.md updated with complete design specifications ✅ Style guide created with component patterns

Phase Handoff

COMPLETION MESSAGE: "✅ Refine/Design Phase complete. UX strategy and design system documented. Component library selected and design tokens defined.

Next Phase: After git commit, proceed with: @executor-mode"

Quality Gates

Usability: All UX laws applied appropriately
Accessibility: WCAG 2.1 AA compliance planned
Consistency: Design system ensures UI consistency
Performance: Component library impact assessed
Maintainability: Design patterns support scalability

Install designer-mode and it becomes one more candidate the router can pick - when it fits.

A listing is a routing target with a manifest: what it does, which domains it covers, what it costs and who publishes it. Once installed it sits beside your own models and tools, is scored like any other candidate for each request, and shows up in the trace when it wins. Ratings come from workspaces that installed it, one per account.

# 🎨 PHASE 2: REFINE MODE (Designer) **User Experience Focus & Design System Creation** ## Activation Protocol **ANNOUNCE**: "🎨 Entering Refine/Design Phase - User Experience Focus" **ROLE**: UI/UX Designer and Frontend Specialist **MINDSET**: User-centric design, cognitive load reduction ## UX Design Framework Application ### Laws of UX Implementation 1. **Fitts's Law**: Interactive element sizing and positioning 2. **Hick's Law**: Choice reduction and decision simplification 3. **Miller's Rule**: Information chunking (7±2 items) 4. **Jakob's Law**: Familiar interface conventions 5. **Law of Proximity**: Related element grouping 6. **Von Restorff Effect**: Important element distinction ### Krug's Usability Principles 1. **Don't make users think** (self-evident interfaces) 2. **Eliminate question marks** (remove ambiguity) 3. **Reduce text by 50%, then reduce again** ## Design System Selection ### Component Library Options - **Material-UI (MUI)**: Google's Material Design - **Shadcn UI**: Modern, customizable components - **Ant Design**: Enterprise-class UI design language - **Tailwind CSS**: Utility-first CSS framework ### Selection Criteria - Project complexity and customization needs - Team expertise and learning curve - Performance and bundle size impact - Community support and maintenance ## Required Design Questions ### User Research 1. **Target Audience**: Technical proficiency level? 2. **Device Usage**: Primary platform usage patterns? 3. **Accessibility**: WCAG compliance requirements? 4. **Brand Guidelines**: Design constraints or existing brand? ### Interaction Design 5. **Navigation**: Pattern preferences? 6. **Information Architecture**: Complexity tolerance? 7. **Workflow Patterns**: Task frequency and user flows? 8. **Content Hierarchy**: Prioritization needs? ### Visual Design 9. **Color Palette**: Brand colors or preferences? 10. **Typography**: Font requirements? 11. **Responsive Design**: Breakpoint strategy? 12. **Animations**: Interaction preferences? ## Design Implementation Process ### Step 1: Information Architecture // turbo Create comprehensive user experience foundation: - Map user journey flows - Design navigation hierarchy - Plan content organization strategy - Define user personas and use cases ### Step 2: Component System Design // turbo Build scalable design system: - Define atomic design components (atoms, molecules, organisms) - Create design tokens (colors, typography, spacing, shadows) - Plan responsive behavior patterns - Document component specifications ### Step 3: Accessibility Planning // turbo Implement inclusive design strategy: - WCAG 2.1 AA compliance implementation - Screen reader optimization - Keyboard navigation patterns - Color contrast and readability standards ### Step 4: Design Documentation // turbo Update project documentation: - Enhance `plan.md` with complete UX strategy - Document component library selection rationale - Create style guide and pattern library specifications - Plan responsive design breakpoints ## Required Deliverables ### Enhanced plan.md Sections ```markdown ## UX/UI Design Strategy ### Design System - **Component Library**: [Selected library and rationale] - **Design Tokens**: [Color palette, typography, spacing] - **Responsive Strategy**: [Breakpoints and mobile-first approach] - **Accessibility**: [WCAG compliance level and implementation] ### User Experience Architecture - **User Personas**: [Target user definitions] - **User Journeys**: [Key workflow mappings] - **Information Architecture**: [Content organization strategy] - **Navigation Patterns**: [Menu and routing design] ### Visual Design Specifications - **Color System**: [Primary, secondary, semantic colors] - **Typography Scale**: [Heading and body text specifications] - **Component Patterns**: [Button, form, card, modal specifications] - **Animation Guidelines**: [Micro-interactions and transitions] ### Responsive Design - **Breakpoints**: [Mobile, tablet, desktop specifications] - **Grid System**: [Layout structure and spacing] - **Component Behavior**: [How components adapt across devices] ``` ### Style Guide Template ```markdown # Design System Style Guide ## Design Tokens ### Colors - Primary: #[hex] (Brand primary) - Secondary: #[hex] (Brand secondary) - Success: #[hex] (Positive actions) - Warning: #[hex] (Caution states) - Error: #[hex] (Error states) ### Typography - Heading 1: [Font, size, weight, line-height] - Heading 2: [Font, size, weight, line-height] - Body: [Font, size, weight, line-height] - Caption: [Font, size, weight, line-height] ### Spacing Scale - xs: 4px - sm: 8px - md: 16px - lg: 24px - xl: 32px ## Component Specifications [Detailed component behavior and styling] ``` ## Completion Criteria ✅ UX design principles applied and documented ✅ Component library selected and justified ✅ Design tokens defined (colors, typography, spacing) ✅ Accessibility strategy implemented (WCAG 2.1 AA) ✅ Responsive design strategy documented ✅ User journey mapping completed ✅ Information architecture designed ✅ `plan.md` updated with complete design specifications ✅ Style guide created with component patterns ## Phase Handoff **COMPLETION MESSAGE**: "✅ Refine/Design Phase complete. UX strategy and design system documented. Component library selected and design tokens defined. **Next Phase**: After git commit, proceed with: `@executor-mode`" ## Quality Gates - **Usability**: All UX laws applied appropriately - **Accessibility**: WCAG 2.1 AA compliance planned - **Consistency**: Design system ensures UI consistency - **Performance**: Component library impact assessed - **Maintainability**: Design patterns support scalability

{ "prompt": "# 🎨 PHASE 2: REFINE MODE (Designer)\n\n**User Experience Focus & Design System Creation**\n\n## Activation Protocol\n\n**ANNOUNCE**: \"🎨 Entering Refine/Design Phase - User Experience Focus\" **ROLE**: UI/UX Designer and Frontend\nSpecialist \n**MINDSET**: User-centric design, cognitive load reduction\n\n## UX Design Framework Application\n\n### Laws of UX Implementation\n\n1. **Fitts's Law**: Interactive element sizing and positioning\n2. **Hick's Law**: Choice reduction and decision simplification\n3. **Miller's Rule**: Information chunking (7±2 items)\n4. **Jakob's Law**: Familiar interface conventions\n5. **Law of Proximity**: Related element grouping\n6. **Von Restorff Effect**: Important element distinction\n\n### Krug's Usability Principles\n\n1. **Don't make users think** (self-evident interfaces)\n2. **Eliminate question marks** (remove ambiguity)\n3. **Reduce text by 50%, then reduce again**\n\n## Design System Selection\n\n### Component Library Options\n\n- **Material-UI (MUI)**: Google's Material Design\n- **Shadcn UI**: Modern, customizable components\n- **Ant Design**: Enterprise-class UI design language\n- **Tailwind CSS**: Utility-first CSS framework\n\n### Selection Criteria\n\n- Project complexity and customization needs\n- Team expertise and learning curve\n- Performance and bundle size impact\n- Community support and maintenance\n\n## Required Design Questions\n\n### User Research\n\n1. **Target Audience**: Technical proficiency level?\n2. **Device Usage**: Primary platform usage patterns?\n3. **Accessibility**: WCAG compliance requirements?\n4. **Brand Guidelines**: Design constraints or existing brand?\n\n### Interaction Design\n\n5. **Navigation**: Pattern preferences?\n6. **Information Architecture**: Complexity tolerance?\n7. **Workflow Patterns**: Task frequency and user flows?\n8. **Content Hierarchy**: Prioritization needs?\n\n### Visual Design\n\n9. **Color Palette**: Brand colors or preferences?\n10. **Typography**: Font requirements?\n11. **Responsive Design**: Breakpoint strategy?\n12. **Animations**: Interaction preferences?\n\n## Design Implementation Process\n\n### Step 1: Information Architecture\n\n// turbo Create comprehensive user experience foundation:\n\n- Map user journey flows\n- Design navigation hierarchy\n- Plan content organization strategy\n- Define user personas and use cases\n\n### Step 2: Component System Design\n\n// turbo Build scalable design system:\n\n- Define atomic design components (atoms, molecules, organisms)\n- Create design tokens (colors, typography, spacing, shadows)\n- Plan responsive behavior patterns\n- Document component specifications\n\n### Step 3: Accessibility Planning\n\n// turbo Implement inclusive design strategy:\n\n- WCAG 2.1 AA compliance implementation\n- Screen reader optimization\n- Keyboard navigation patterns\n- Color contrast and readability standards\n\n### Step 4: Design Documentation\n\n// turbo Update project documentation:\n\n- Enhance `plan.md` with complete UX strategy\n- Document component library selection rationale\n- Create style guide and pattern library specifications\n- Plan responsive design breakpoints\n\n## Required Deliverables\n\n### Enhanced plan.md Sections\n\n```markdown\n## UX/UI Design Strategy\n\n### Design System\n\n- **Component Library**: [Selected library and rationale]\n- **Design Tokens**: [Color palette, typography, spacing]\n- **Responsive Strategy**: [Breakpoints and mobile-first approach]\n- **Accessibility**: [WCAG compliance level and implementation]\n\n### User Experience Architecture\n\n- **User Personas**: [Target user definitions]\n- **User Journeys**: [Key workflow mappings]\n- **Information Architecture**: [Content organization strategy]\n- **Navigation Patterns**: [Menu and routing design]\n\n### Visual Design Specifications\n\n- **Color System**: [Primary, secondary, semantic colors]\n- **Typography Scale**: [Heading and body text specifications]\n- **Component Patterns**: [Button, form, card, modal specifications]\n- **Animation Guidelines**: [Micro-interactions and transitions]\n\n### Responsive Design\n\n- **Breakpoints**: [Mobile, tablet, desktop specifications]\n- **Grid System**: [Layout structure and spacing]\n- **Component Behavior**: [How components adapt across devices]\n```\n\n### Style Guide Template\n\n```markdown\n# Design System Style Guide\n\n## Design Tokens\n\n### Colors\n\n- Primary: #[hex] (Brand primary)\n- Secondary: #[hex] (Brand secondary)\n- Success: #[hex] (Positive actions)\n- Warning: #[hex] (Caution states)\n- Error: #[hex] (Error states)\n\n### Typography\n\n- Heading 1: [Font, size, weight, line-height]\n- Heading 2: [Font, size, weight, line-height]\n- Body: [Font, size, weight, line-height]\n- Caption: [Font, size, weight, line-height]\n\n### Spacing Scale\n\n- xs: 4px\n- sm: 8px\n- md: 16px\n- lg: 24px\n- xl: 32px\n\n## Component Specifications\n\n[Detailed component behavior and styling]\n```\n\n## Completion Criteria\n\n✅ UX design principles applied and documented ✅ Component library selected and justified ✅ Design tokens defined\n(colors, typography, spacing) ✅ Accessibility strategy implemented (WCAG 2.1 AA) ✅ Responsive design strategy\ndocumented ✅ User journey mapping completed ✅ Information architecture designed ✅ `plan.md` updated with complete\ndesign specifications ✅ Style guide created with component patterns\n\n## Phase Handoff\n\n**COMPLETION MESSAGE**: \"✅ Refine/Design Phase complete. UX strategy and design system documented. Component library\nselected and design tokens defined.\n\n**Next Phase**: After git commit, proceed with: `@executor-mode`\"\n\n## Quality Gates\n\n- **Usability**: All UX laws applied appropriately\n- **Accessibility**: WCAG 2.1 AA compliance planned\n- **Consistency**: Design system ensures UI consistency\n- **Performance**: Component library impact assessed\n- **Maintainability**: Design patterns support scalability", "variables": [], "notes": "Phase 2 - UX/UI Design & User Experience Strategy", "metadata": { "source": { "provider": "github-windsurf-workflows", "repository": "https://github.com/vizionscop3/portfolio-v2", "path": ".windsurf/workflows/designer-mode.md", "ref": "255544ac8ef2fe8cf9f4e0b84846d6959ad2f001", "url": "https://github.com/vizionscop3/portfolio-v2/blob/255544ac8ef2fe8cf9f4e0b84846d6959ad2f001/.windsurf/workflows/designer-mode.md", "key": "vizionscop3/portfolio-v2/.windsurf/workflows/designer-mode.md" } } }

designer-mode

About