Getting started (Spec 3)

Paste URL, get report. Set up your account and run your first analysis.

What Blue Painter does (Spec 1)

Blue Painter analyzes Figma (and later other) designs to: detect unbuildable or over-complex flows; flag missing states and impossible interactions; propose simplified, dev-friendly alternatives; and generate a clear report that both designers and devs can act on. It sits on top of existing design-to-code tools as a feasibility and governance layer—it ensures what gets generated is actually shippable.

Positioning by version (Spec 12): v1 — make designs buildable before they hit engineering; v2 — AI-powered design governance with built-in coaching; v3 — the AI-native design governance platform (real-time guidance, analytics, automation).

User roles (Spec 3)

Designer — Buildability feedback, simplification suggestions, design system validation. v2: micro-lessons and AI prompts per issue. v3: Live guidance alongside Figma. Developer / Tech Lead — Risk and complexity estimates, missing states, implementation clarity. v2: AI collaboration tips. v3: Automated governance. PM / Founder — Scope and timeline impact, objective data for ship decisions. v3: Analytics overlay for real user behavior. Design Systems Lead (v3) — System adherence at scale, drift visibility, Design system analytics (Dashboard) and governance help.

Primary user flows (Spec 3)

  • Flow 1 (v1): Analyze a Figma file — connect Figma, select file/page/starting screens, add context (tech stack, project type), run analysis, get Flow Report.
  • Flow 2 (v2): Learn AI best practices — view an issue, click "How to fix this with AI", see playbook and good/bad prompt examples, use in Claude/Cursor.
  • Flow 3 (v3): Get flow alternatives — run analysis on a complex flow, compare Minimal / Guided / Edge-case safe variants, export preferred variant to Figma.
  • Flow 4 (v3): Real-time design guidance — open Desktop app alongside Figma; live complexity score, missing-state alerts, system warnings, contextual suggestions.
  • Flow 5 (v3): Analyze with real user data — connect PostHog/Amplitude, overlay drop-off points on flow graph, prioritize fixes by impact.

Create an account

Sign up at bluepainter.com and verify your email. Once logged in, you’ll land on the dashboard.

Dashboard home
Your Blue Painter dashboard after sign-in

Connect Figma (OAuth)

Go to Settings → Integrations and connect your Figma account via OAuth. This lets Blue Painter fetch files, frames, and design tokens for real analysis. Without Figma connected, analyses use a demo flow.

Create a project

Click Projects in the sidebar and create a new project. Give it a name and add your design assets (Figma URLs, Sketch, etc.) or code paths.

Run your first analysis

Paste your Figma file URL, run analysis, and get a report in minutes. Open the project, click New analysis, enter your Figma URL (or use the project's default), add context (tech stack, project type), and click Run. Blue Painter scans your design for buildability issues, missing states, and system alignment.

What to do next (Spec 4.5)

After your first report: switch persona (Designer / Developer / PM) to focus issues by role; export to Markdown, PDF, or GitHub; try Flow alternatives (Insights) and export a variant to Figma; connect analytics for real funnel data; or book an Expert Review for a human take. Connect GitHub for Design–Code Gap and Observer (Spec 5.6).