Blueprint comparison (Addendum B)

Compare your flows to battle-tested patterns.

In each analysis report, the Blueprint comparison panel lets you see how your flow stacks up against proven patterns like SaaS Onboarding, E-commerce Checkout, Auth Flow, and Search & Filter.

Analyze vs Blueprint (Spec)

From the flow report, use Compare to Blueprint… and choose a blueprint. Blue Painter aligns your flow graph to the blueprint nodes and highlights deviations: extra or missing steps, missing states (loading, error, empty), different branching. Output: Blueprint Match Score (0–100) and a list of key differences (e.g. "Blueprint expects onboarding to end with a value demonstration screen; current flow ends at generic dashboard", "Blueprint includes error handling on step 2; current flow has none").

How to use it

  • Open any completed analysis report
  • Go to the Insights step (last step in the report)
  • Expand Blueprint comparison in the accordion
  • Select a blueprint (SaaS Onboarding, E-commerce Checkout, etc.)
  • See your screen count vs the blueprint's recommended count and the Blueprint Match Score (0–100). The score reflects alignment of steps, branching, and required states (loading, error, empty). Higher scores mean your flow closely matches the battle-tested pattern.

If your flow has significantly more screens than the blueprint, consider consolidating steps. Blueprints reflect patterns that ship quickly and maintain clarity.

Generate from blueprint

From the Blueprint Library you can create flows from a blueprint. Options include Figma-ready wireframe specs (textual description per screen) and prompt packs for Claude/Cursor (e.g. "Implement this flow in Next.js with Mantine components").

Blueprint Library page

The Blueprint Library (sidebar → Blueprints) lists curated flow patterns: SaaS Onboarding, E-commerce Checkout, CRUD, Search & Filter, Auth Flow, Healthcare Portal. Filter by domain (SaaS, E-commerce, Admin, Universal, Healthcare). Each blueprint card shows the flow steps and a "Compare in report" action to open your latest analysis with that blueprint selected.

Integration points (Spec)

Design analysis: After an analysis, Blue Painter can report e.g. "This flow is ~45% similar to SaaS Onboarding; here's what you're missing." Dev-side Blue Painter (v5+): In the IDE, show "This route cluster looks like an onboarding flow; consider aligning to blueprint X." Observer Agent: Use blueprint matches/mismatches in suggestions (e.g. "Consider merging steps 3–4 to align with blueprint and reduce drop-off").