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 (or screens from the analyzed flow when your report has a flow graph—cross-check in repo), From Observer / code (repo-backed suggestions when Observer has run, otherwise illustrative), with Flow badges when Observer stored a flow context label from your latest completed analysis, and State coverage via missing-state and interaction issues in the report.
Use Copy as Markdown to paste the health score, lists (including Observer flow context on code-side rows), and issue counts into Notion or tickets. The Design-to-Code Health Score (0–100) reflects flow alignment, Observer signals, 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.