Web Design Guidelines

Review web layout, interaction and accessibility, then outline actionable improvements.

Available in app
Layout guides, a set square and checklist review a page composition.

Overview

A checkable design checklist that pushes 'vibes' out of review. Accessibility is the floor: real button and link semantics, every control named, keyboard paths that work, visible focus, contrast that meets the numbers, motion that respects reduced-motion settings, form errors that say what's wrong and where, touch targets you can actually hit. The design-system half: font families under a limit, a proportional type scale, spacing with rhythm, colors named by meaning, hover/focus/disabled/loading states designed rather than defaulted, content that reflows instead of shrinking, clickable things that look clickable, button copy that names the outcome, and card-on-card stacks that add only chrome get flagged.

When reviewing a page, each issue cites its checklist item, its basis and live evidence — a screenshot, the page structure, or a source line; 'looks off' is not a conclusion. Automated tools catch about thirty percent of issues, so prescribed live walks and source passes carry the rest.

It is the review standard; the deep remediation catalog lives with the accessibility-audit entry.

Where it helps

  • Attach a rule id and rendered evidence to every review finding
  • Check text and UI colors with the deterministic contrast worksheet
  • Audit spacing rhythm, type scale and interaction states against the system list
  • Sweep the interface copy: outcome verbs on buttons, fix paths in errors, guiding empty states
#web#design#guidelines#checklist

Examples

Examples describe the request and the shape of the expected deliverable; they are not completed run results.

Example prompt

Review my settings page against this checklist: item, basis and severity per finding; compute contrast with the formula, don't eyeball it.

Expected output

An itemized review report with measured numbers (contrast, focus behavior) and evidence screenshots.

Example prompt

Keyboard-walk this modal: can tab enter and leave, is the focus ring obvious, where does focus return on close — record each item.

Expected output

A focus-and-keyboard walkthrough with screenshots, naming the exact checklist items broken.

Requirements and limits

Install platforms
iOS: iOS · Android: Android
Script runtime
No script runtime (guidance and workflow)
Minimum app version
iOS: 1.7.59
Reviewed permission scope

iOS · Android

Capabilities
Read workspace files
Review decision
Approved
Review stage
Static content review
Reviewed on
2026-10-28
Implementation and runtime details
Adaptation stage
frozen

iOS

Capabilities
Read workspace files

Android

Capabilities
Read workspace files

License and source

Source and trace details

License

MPL-2.0

Floe original guide. Replaces the original candidate with independently authored content; upstream text is not distributed. Candidate identity and provenance remain in the package.

Source

Floe

Image and material attribution

Image attribution
Floe original, AI-assisted illustration.
Publisher
JiangNanGenius
Publication commit (retrieval)
25e07dbeeb6cc93c2fe83ddc72a34302cc40832a
Audited source commit
84c524b6fb483e4cad94db076e7d9c9962966c19
Signed catalog digest
iOS 46196ba57ed7ea7f22085e74b113207f31193e820ab8983cf7a60eee953f2340 · Android 16de89d019e2057804a40f215485ccb09d5495a25864b34d681168eeaf8f9697
Publication snapshot (UTC)
2026-10-31

Publication commit 25e07dbeeb, audited source 84c524b6fb; catalog digest iOS 46196ba57ed7… · Android 16de89d019e2….

Versions and status

Version records ship with the signed catalog; the target and released versions are shown below.

Adaptation
Ready
Publication state
Curated skills are available
Released version
1.0.1