Agent-built demo / Before audit
Latch
Dev tools and docs · Nov 8, 2026
3 measured views. Local app. Design grades compare the actual screen with published product references. N/A means there was no applicable sample. Unverified means evidence was insufficient.
Product specificity and generic signals · F
Both widths identify latch-kit, stale workspace build artifacts, Node 22 and npx latch doctor. However, the opening hero is interchangeable and the package-manager decision lacks a readable value. (/)
Visual specificity before deductions C. Weighted design base C. Distinct signal deductions 3.
Product specificity supplies 55% of the base, and the five visual design dimensions share 45%. Round the base to the nearest letter. Each distinct verified generic signal lowers it by one letter, down to F. Foundations are reported separately. The detector ceiling is D. Vision reviewed 1 of 1 measured routes.
- Template copy · −1
- “Everything you need, all in one place” does not identify a product task or outcome. (/, 1440 px, Detector and vision.)
- Gradient hero · −1
- A gradient fills the opening section around the visible heading. (/, 1440 px, Detector and vision.)
- Emoji bullets · not observed
- No instance was identified in the reviewed views.
- Default shadcn grays · not observed
- No instance was identified in the reviewed views.
- Purple on white · −1
- The prominent purple Latch CLI Docs title sits on the white header at both 1440 and 390. (/, 1440 px, Vision.)
- Centered everything · not observed
- No instance was identified in the reviewed views.
Compared with the 2026 references
- / · The reference gives the exact monospaced diagnostic content more room than its chrome. Latch likewise makes commands readable at both widths, but its large generic hero takes precedence over the package-manager decision and install command. WooCommerce · fatal error detail
Visual design
- Hierarchy
- C
- At 1440, the hero occupies 170px above the task; at 390, it occupies 216px and delays installation content. The two task cards have clear headings, but the decorative introduction receives greater prominence. (/)
- Typography
- B
- Both widths distinguish bold section headings, readable body text and monospaced commands. At 390, the install command wraps onto two lines while remaining inside its code block. (/)
- Spacing
- B
- At 1440, cards have consistent padding and separation. At 390, 18px outer margins and padded cards preserve readable content, although the spacious hero increases the distance to the task. (/)
- Copy and labels
- C
- Install Latch, the Node requirement and exit-code explanations are concrete at both widths. The hero says little about Latch, and the package-manager control exposes no readable selected option. (/)
- Imagery
- N/A
- This installation guide needs no illustration. The visible commands provide the relevant instructional content at both widths.
Foundations · A
Contrast, responsive layout and keyboard reach are sampled separately. The foundations grade is the lowest verified result in this group.
- Color contrast
- A
- At least four opaque text samples per view passed the contrast threshold. Verified across 3 measured views.
- Responsive layout
- A
- All sampled viewports fit without horizontal overflow and contained readable text. Verified across 3 measured views.
- Keyboard access
- A
- Tab reached two visibly focused controls and Shift+Tab returned to the first. Verified across 3 measured views.
Fix these first
- Name the object, action and result in the heading.Product specificity · / · 1440 px
- Replace the opening gradient with a view of the product doing its work.Product specificity · / · 1440 px
- Choose an action color grounded in the product and separate it from status colors.Product specificity · / · 1440 px
Evidence from the screens
Gray blocks conceal form values or sensitive text. Numbered outlines identify measured issues.
- “Everything you need, all in one place” does not identify a product task or outcome.
- A gradient fills the opening section around the visible heading.
- “Everything you need, all in one place” does not identify a product task or outcome.
- “Everything you need, all in one place” does not identify a product task or outcome.
Independent task review
The reviewer assesses each route against its user task using desktop and phone evidence. Its task grades describe the interaction evidence available for that route.
/
Audit of Latch CLI Docs at /. The reader must choose a package manager and read the matching latch-kit installation command. The workspace check is the subsequent task.
Reviewed at 1440 × 900 and 390 × 844.
- Task hierarchy
- C
- At 1440, the large promotional hero precedes the useful installation instructions. At 390, it pushes Install Latch down to y350. The package-manager control has no readable value at either width, obscuring the choice that determines the command.
- Landing message
- C
- Both widths explain that Latch checks workspaces for stale build artifacts and requires Node 22, but only below the generic hero. The opening message lacks a concrete benefit or proof; Quickstart is a small text link beneath it.
- Interaction feedback
- Unverified
- The supplied checks establish that a visible target receives Tab focus at both widths. No package-manager selection and resulting command update were recorded, so feedback, persistence and retry behavior remain unverified.
- Access and recovery
- C
- At both widths, Package manager is visible but its adjacent gray control shows no readable current choice. Tab reached a visible target, but the target and selector keyboard operation are unspecified. At 390, the install command wraps; recovery guidance continues below the capture.
- Release evidence
- Unverified
- Two local renders and checks establish one primary heading, three visible controls and a reachable visible Tab target at each width. Selection behavior, command correctness, installation success and deployed release conditions were not established.
First action
Make the package-manager control show a readable current value at 1440 and 390, with clearly labeled choices and a matching install command.
How to verify At each supplied width, Tab to the package-manager control, confirm visible focus and its current value, select another manager using the keyboard, and verify that the displayed command updates correctly. Contrast measurements and broader keyboard reach still require separate checks.
What a repair could look like
Latch is an agent-built developer documentation demo. Both captures show the same task.
