Projects (Spec 4)

Manage design–code alignment projects.

Projects group your design assets and codebases for analysis. Each project can have multiple analyses over time.

Projects list
List of your projects

Creating a project

Go to Projects → New project. Add a name, optional description, and configure design sources (Figma URLs, Sketch files) and code paths. Select a vertical preset (SaaS, E-commerce, Healthcare, etc.) so rules auto-adjust to industry best practices and micro-lessons are tailored to your domain.

Design stack config (Spec 4.3)

Per project, configure: Tech stack (React, Vue, React Native—set when creating the project or in Edit); Token source (path or URL to tailwind.config.js, theme.json, or CSS variables); Component source (Storybook URL or component path). Optionally document UI library (e.g. Mantine, shadcn/ui, Radix, Chakra) and Styling (Tailwind, CSS modules) in the project description or design system name until dedicated fields are available. This config drives what Blue Painter validates against and improves system adherence checks. See Designer Dev Stack for details.

Analytics integration

On the Config & analytics tab, connect PostHog, Amplitude, Mixpanel, Google Analytics 4, LogRocket, or FullStory. Blue Painter overlays real funnel and drop-off data on the flow graph in your report, so you can see which issues correlate with user friction and prioritize fixes by impact. See Analytics overlay for details.

Version history

On the Analyses tab, Blue Painter shows a version history when you have two or more analyses. Compare buildability scores over time and see the delta between runs. When the score drops, a "Regression" badge appears—designs getting more complex or new issues introduced. See Team workspace for collaboration features.