Design Review Workflow for Code-First Teams
Why It Matters
Design review currently happens in Figma comments (against mockups, not real UI), Slack threads (text descriptions of visual problems), or Loom videos (async but no interactivity). All three methods suffer from The Feedback Collapse: by the time the developer reads the feedback, the context is lost. The screenshot shows a UI that may have already changed. The Slack message describes a problem without identifying the element. The Loom recording is a video the developer cannot interact with.
Review on the running application means feedback is always against the current state of the UI — not a design comp, not a screenshot, not a recording. The comment is anchored to the element it refers to, and the element's computed styles, accessibility data, and viewport context are captured automatically.
The Workflow
Setup
Wrap your staging environment with <LayProvider mode="review">. This is one component wrapping the app — no additional configuration required. Comment mode can also be toggled from the dashboard without redeploying.
Enter Comment Mode
Press C to enter comment mode. The cursor changes to a crosshair and elements highlight on hover, indicating they can receive feedback. Press Escape or C again to exit comment mode.
Click an Element
Click any element to anchor a comment. The system captures the DOM path, computed styles, accessibility data, and viewport dimensions at the moment of click. A comment input appears near the clicked element, positioned to avoid obscuring the target.
AI Enrichment
After submitting, AI classifies the comment into a category — visual, accessibility, layout, copy, or interaction — and generates context-aware suggestions. For a comment about readability, the AI notes the contrast ratio (from computed styles) and suggests specific color values that pass WCAG AA. For a spacing issue, it identifies the current padding and margin values and suggests adjustments.
Thread and Discuss
Team members click the dot indicators to open threads and reply in context. All conversation is anchored to the same element and persists across deploys via Three-Layer Anchoring. Designers, developers, and product managers discuss changes without switching tools.
Resolve
A developer marks the comment resolved from the thread panel or the dashboard. Resolved comments stay visible but dimmed, preserving the review history. If Linear is connected, the status syncs bidirectionally — resolving in Linear resolves in Lay, and vice versa.
Compared to Other Review Tools
The fundamental difference: Figma comments review a design, not the implementation. Screenshot tools freeze the UI at a point in time. Platform-locked tools tie feedback to a specific deployment. Element-anchored review on the running app is always against the current state of the UI, always enriched with computed styles and accessibility data, and always anchored to the actual element.
What AI Adds to Design Review
AI enrichment transforms a subjective comment into a structured assessment:
- Categorization — Each comment is auto-classified as visual, accessibility, layout, copy, or interaction. Teams can filter and prioritize by category.
- Interpretation — One sentence contextualizing the feedback against the element metadata. For example: "The low contrast between text (#6B6860) and background (#FAFAF7) likely contributes to the readability issue the reviewer flagged."
- CSS fix suggestions — Specific values when the issue is style-related. Not generic advice, but actual CSS properties and values derived from the element's computed styles.
- Accessibility detection — Contrast ratio, WCAG compliance, and ARIA attribute issues are flagged automatically, even when the reviewer does not mention accessibility. A comment about "hard to read text" surfaces the underlying 3.0:1 contrast ratio that fails WCAG AA.
The reviewer does not need to know CSS, accessibility standards, or browser DevTools. They describe what they see. The system captures why.