Code awareness & Design–Code Gap (Spec 5.6)

Compare design flows with your codebase.

Code awareness parses your React/Next/Vue codebase and compares it with your design flows. Connect GitHub and run Observer to surface gaps between design and implementation.

Design–Code Gap panel (Spec 5.6)

The panel shows: Screens in design, not in code (designed but not implemented), Features in code, not designed (implemented but not in Figma), and State coverage (loading, error, empty states designed vs coded).

The Design-to-Code Health Score (0–100) reflects flow alignment, state coverage, and gap counts.

Setup

Connect GitHub in Settings. Add connected repos on the project Config tab. Run Observer analysis to generate suggestions. On desktop, you can also select a local repo folder for analysis.

Scope (Spec 5.6)

Today: Design–Code Gap and Observer use your repo connection and flow comparison to surface screens-in-design-not-in-code, features-in-code-not-designed, and state coverage. A full codebase parser (route extraction, component tree, state detection from source) is on the roadmap for deeper alignment.