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.

create-ux - Prompt - OpenSmartRoute

Name: create-ux
Author: daveharmswebdev

Prompt file imported from daveharmswebdev/property-manager (.claude/commands/create-ux.md). Copyright stays with the author.

Create UX Design Specification

Context

Create a comprehensive UX design specification through collaborative visual exploration. You are a UX facilitator helping a product stakeholder make informed design decisions. Draw inspiration from real-world professional websites and established design systems.

Inputs

docs/project/prd.md — product requirements
docs/project/architecture.md — technical constraints (frontend framework, component library)
docs/project/product-brief.md — target users and product vision

Process

Step 1: Understand the design context

From the product brief and PRD, identify:

Target user personas and their technical comfort level
Key user flows that need design attention
The emotional tone the product should convey (professional, friendly, minimal, etc.)
Any existing brand elements or preferences

Step 2: Design inspiration

Explore professional websites and design systems for inspiration:

Identify 3-5 reference sites that match the desired tone
Discuss what works about each reference with the user
Extract specific patterns worth emulating (navigation, data display, form patterns)

Step 3: Color palette

Collaboratively build a color system:

Primary and secondary brand colors
Semantic colors (success, warning, error, info)
Neutral scale (backgrounds, text, borders)
Ensure WCAG AA contrast compliance
Test against the UI component library being used (e.g., Angular Material)

Step 4: Typography and spacing

Define the type system:

Font families (headings, body, mono)
Size scale
Spacing/rhythm system
Responsive breakpoints

Step 5: Component patterns

Define patterns for key UI elements:

Navigation (sidebar, topbar, breadcrumbs)
Data tables and lists
Forms and validation display
Cards and detail views
Modals and dialogs
Empty states and loading states
Toast/notification patterns

Step 6: Page layouts

Sketch layouts for key pages identified in the PRD:

Dashboard/home
List views
Detail/edit views
Settings

Step 7: Write the UX specification

Write to docs/project/ux-design-specification.md:

# UX Design Specification: {project_name}

## Design Principles
## Color System
## Typography
## Spacing & Layout
## Component Patterns
## Page Layouts
## Responsive Strategy
## Accessibility Standards
## Design References

Validation Gates

Color palette has sufficient contrast for WCAG AA
Component patterns cover all key UI elements in the PRD
Design decisions reference the target user personas
User reviewed and approved

Install create-ux 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.

# Create UX Design Specification ## Context Create a comprehensive UX design specification through collaborative visual exploration. You are a UX facilitator helping a product stakeholder make informed design decisions. Draw inspiration from real-world professional websites and established design systems. ## Inputs - `docs/project/prd.md` — product requirements - `docs/project/architecture.md` — technical constraints (frontend framework, component library) - `docs/project/product-brief.md` — target users and product vision ## Process ### Step 1: Understand the design context From the product brief and PRD, identify: - Target user personas and their technical comfort level - Key user flows that need design attention - The emotional tone the product should convey (professional, friendly, minimal, etc.) - Any existing brand elements or preferences ### Step 2: Design inspiration Explore professional websites and design systems for inspiration: - Identify 3-5 reference sites that match the desired tone - Discuss what works about each reference with the user - Extract specific patterns worth emulating (navigation, data display, form patterns) ### Step 3: Color palette Collaboratively build a color system: - Primary and secondary brand colors - Semantic colors (success, warning, error, info) - Neutral scale (backgrounds, text, borders) - Ensure WCAG AA contrast compliance - Test against the UI component library being used (e.g., Angular Material) ### Step 4: Typography and spacing Define the type system: - Font families (headings, body, mono) - Size scale - Spacing/rhythm system - Responsive breakpoints ### Step 5: Component patterns Define patterns for key UI elements: - Navigation (sidebar, topbar, breadcrumbs) - Data tables and lists - Forms and validation display - Cards and detail views - Modals and dialogs - Empty states and loading states - Toast/notification patterns ### Step 6: Page layouts Sketch layouts for key pages identified in the PRD: - Dashboard/home - List views - Detail/edit views - Settings ### Step 7: Write the UX specification Write to `docs/project/ux-design-specification.md`: ```markdown # UX Design Specification: {project_name} ## Design Principles ## Color System ## Typography ## Spacing & Layout ## Component Patterns ## Page Layouts ## Responsive Strategy ## Accessibility Standards ## Design References ``` ## Validation Gates - [ ] Color palette has sufficient contrast for WCAG AA - [ ] Component patterns cover all key UI elements in the PRD - [ ] Design decisions reference the target user personas - [ ] User reviewed and approved

{ "prompt": "# Create UX Design Specification\n\n## Context\n\nCreate a comprehensive UX design specification through collaborative visual exploration. You are a UX facilitator helping a product stakeholder make informed design decisions. Draw inspiration from real-world professional websites and established design systems.\n\n## Inputs\n\n- `docs/project/prd.md` — product requirements\n- `docs/project/architecture.md` — technical constraints (frontend framework, component library)\n- `docs/project/product-brief.md` — target users and product vision\n\n## Process\n\n### Step 1: Understand the design context\n\nFrom the product brief and PRD, identify:\n- Target user personas and their technical comfort level\n- Key user flows that need design attention\n- The emotional tone the product should convey (professional, friendly, minimal, etc.)\n- Any existing brand elements or preferences\n\n### Step 2: Design inspiration\n\nExplore professional websites and design systems for inspiration:\n- Identify 3-5 reference sites that match the desired tone\n- Discuss what works about each reference with the user\n- Extract specific patterns worth emulating (navigation, data display, form patterns)\n\n### Step 3: Color palette\n\nCollaboratively build a color system:\n- Primary and secondary brand colors\n- Semantic colors (success, warning, error, info)\n- Neutral scale (backgrounds, text, borders)\n- Ensure WCAG AA contrast compliance\n- Test against the UI component library being used (e.g., Angular Material)\n\n### Step 4: Typography and spacing\n\nDefine the type system:\n- Font families (headings, body, mono)\n- Size scale\n- Spacing/rhythm system\n- Responsive breakpoints\n\n### Step 5: Component patterns\n\nDefine patterns for key UI elements:\n- Navigation (sidebar, topbar, breadcrumbs)\n- Data tables and lists\n- Forms and validation display\n- Cards and detail views\n- Modals and dialogs\n- Empty states and loading states\n- Toast/notification patterns\n\n### Step 6: Page layouts\n\nSketch layouts for key pages identified in the PRD:\n- Dashboard/home\n- List views\n- Detail/edit views\n- Settings\n\n### Step 7: Write the UX specification\n\nWrite to `docs/project/ux-design-specification.md`:\n\n```markdown\n# UX Design Specification: {project_name}\n\n## Design Principles\n## Color System\n## Typography\n## Spacing & Layout\n## Component Patterns\n## Page Layouts\n## Responsive Strategy\n## Accessibility Standards\n## Design References\n```\n\n## Validation Gates\n\n- [ ] Color palette has sufficient contrast for WCAG AA\n- [ ] Component patterns cover all key UI elements in the PRD\n- [ ] Design decisions reference the target user personas\n- [ ] User reviewed and approved", "variables": [], "notes": "Collaborative UX design specification with color palette and real-world inspiration", "metadata": { "source": { "provider": "github-claude-commands", "repository": "https://github.com/daveharmswebdev/property-manager", "path": ".claude/commands/create-ux.md", "ref": "585ed5e16fdc23cf3cfa313d77a076b9a824ba93", "url": "https://github.com/daveharmswebdev/property-manager/blob/585ed5e16fdc23cf3cfa313d77a076b9a824ba93/.claude/commands/create-ux.md", "key": "daveharmswebdev/property-manager/.claude/commands/create-ux.md" } } }

create-ux

About

Create UX Design Specification

Context

Inputs

Process

Step 1: Understand the design context

Step 2: Design inspiration

Step 3: Color palette

Step 4: Typography and spacing

Step 5: Component patterns

Step 6: Page layouts

Step 7: Write the UX specification

Validation Gates

Install create-ux and it becomes one more candidate the router can pick - when it fits.

What it costs to adopt - in engineering time.

One base URL

No vendor lock-in

Failover built in

Use it

Manifest

Reviews