AI playbooks (v2, Spec 5.1)

Contextual instructions for fixing issues with AI tools.

Each issue in your report includes an AI playbook—step-by-step instructions for fixing it with Claude, Cursor, or Figma AI. Click the Learn icon next to any issue to open the micro-lesson. Use "Mark as learned" to track your progress (stored locally in your browser).

Micro-lesson structure (30–60 sec, Spec 5.3)

  • Pattern explanation — What the issue is and why it matters
  • Good vs bad examples — Visual or code examples, common mistakes
  • How to fix with AI — Which tool to use, prompt template, one-sentence review tip

Blue Painter builds a library of 20–30 core micro-lessons covering common patterns. Progress (Mark as learned) is stored locally. Integrated contextually, not as a separate course.

Playbook types

  • Missing state — Use Cursor to add error/loading/empty states. Includes example prompts and design system references.
  • Complexity — Use Claude to propose flow consolidation. Includes step-count constraints and content breakdown prompts.
  • System alignment — Use Figma AI or Dev Mode to map custom components to design system components.
  • Interaction — Use Cursor to refactor interactions for platform-appropriate patterns (touch targets, gestures).

Good vs bad prompts

Playbooks highlight traits of effective prompts: specific state types, design system references, constrained scope.

Good example (flow simplification): "I have a 7-step checkout flow: [paste diagram]. Suggest how to consolidate to 3–5 steps while maintaining all necessary information collection. For each step, list what content/inputs to include."
  • Includes context (7 steps, need to reduce)
  • Specifies constraints (3–5 steps, all info needed)
  • Asks for detailed breakdown
Bad example: "Make this checkout flow simpler" — too vague, no constraints, no context.

Example: Simplify over-complex checkout (Spec Appendix)

For a 7-step checkout, the playbook is: (1) Analyze current flow—list data per step, dependencies, regulatory needs. (2) Use Claude for consolidation strategy with a prompt that includes step count, constraints, and "for each step specify content/inputs." (3) Review Claude's suggestion for coverage and dependencies. (4) Prototype in Figma with design system components and all states. (5) Validate with Blue Painter; target buildability score 90+.

Suggested AI Workflow (spec 5.2)

On the report overview, the Suggested AI Workflow panel shows a customized 3–5 step workflow for fixing issues in this project. It recommends which AI tool (Claude, Figma AI, Cursor) to use for each category, optimal sequence based on dependencies, and estimated time. Phases typically: Copy & Content → Design System Cleanup → Code Implementation.

Customization

The Suggested AI Workflow adapts to project type (SaaS, e-commerce, healthcare, etc.), issue severity distribution, and your tools. For urgent deadlines, focus on Phase 1 first; for iterative work, tackle phases in order for best results.

See AI workflow templates for team-level templates (Design Sprint with AI, Bug-Driven Refactor).