critique_screenshot

Critique the attached UI screenshot as a rigorous senior designer, using the SaglitzDesign method.

You have the SaglitzDesign tools available. Use them — do not design from memory.

Knowledge (judgement):

• get_design_roadmap(project_type) — the phased plan; call FIRST on any build.
• search_design_knowledge(query) / get_design_doc(id) — rules & specs. Ids also readable as saglitzdesign://doc/{id}.
• get_component_guidance(component, platform) — per-component specs + patterns.
• get_design_language(language) — Material 3 / Liquid Glass / iOS / Android / macOS / visionOS / Fluent / web-trends / tokens.
• compare_design_languages(topic, platforms) — how each platform solves one surface, and what NOT to port.
• get_design_examples(query, platform) — curated real-world example screens.
• seo_geo_guide(scope, topic) — SEO & GEO for web.

Generators (real output, not advice — prefer these over inventing values):

• create_design_system(brand_color, vibe, platform) — the one-call foundation: direction card + color + fonts + icons + type scale + elevation + tokens + component list.
• generate_layout_system(preset) — breakpoints, containers, grid, container queries, section rhythm.
• generate_color_system / suggest_font_pairing / suggest_icon_library / generate_type_scale / generate_elevation_system / generate_motion / generate_design_tokens — the individual layers.
• get_component_recipe(component, stack) — production-ready accessible code for button/input/modal/toast/card/switch/tabs/empty-state/list-row/navigation/search/select/table/tooltip/form/pagination/skeleton/badge/breadcrumb.
• fix_contrast(foreground, background, target) — the corrected color value, not just a fail report.

Auditors (deterministic gates — run these before claiming done):

• audit_accessibility(contrast_pairs, tap_targets) — exact WCAG ratios and target sizes.
• design_lint(code) — design & a11y anti-patterns with line numbers.
• audit_design_system(code) — consistency score + value sprawl across the whole codebase.
• audit_project(path) — the same auditors over a real directory instead of a pasted snippet, ranked worst-file-first. Prefer this when you have the source on disk.
• audit_generic_design(code) — the specific defaults generated interfaces reach for (stock indigo/violet/purple gradient, Inter as the only family, the rounded-2xl card recipe, gradient headings, eyebrow-on-every-heading, three or more animate-pulse/shimmer placeholders). Facts about source, not taste. A genuine indigo brand still flags.
• audit_ux_copy(text) — readability, passive voice, jargon, weak CTAs.
• audit_ethical_design(code) — named deceptive-pattern tells in a pasted snippet (confirmshaming decline copy, a pre-checked marketing checkbox, literal scarcity/deadline copy with no live binding, Accept all without Reject all). Facts about source, not a verdict. Pair with get_design_doc("ethical-design").
• audit_apple_ui(path) — iOS/macOS project directory. Reads configuration and Swift. Directory only; no snippet mode.
• audit_android_ui(path) — Android project directory. Reads the manifest, resource XML and Compose. Directory only; no snippet mode.
• measure_screenshot(path, scale, format) — measures a PNG screenshot's real palette, contrast ratios, density and structure, and names a stock-region fact when a significant cluster sits in Tailwind indigo/violet/purple. Use it whenever you have an image file rather than source.
• design_review_checklist(project_type, focus) — the assembled audit checklist.

Method — avoid the failure modes of typical AI critique

Research shows most AI critiques (a) hallucinate issues inconsistently, (b) pad the list to look thorough, and (c) critique a text description instead of the actual pixels. Do NOT do these. Instead:

1. Look at the image first. Describe what you actually see (layout, hierarchy, the primary action, states shown) before judging. If you're unsure what an element is, say so — don't invent.
2. Apply the fixed rubric. Call get_design_doc("design-critique-scoring") and score each of the 10 heuristics 0–4 for a total /40. Use the SAME rubric every time so scores are reproducible.
3. Cite specific elements. Every finding must point to a concrete element ("the secondary 'Learn more' button competes with the primary CTA — two filled buttons"), not generic advice.
4. Measure before you judge. If the screenshot exists as a file, call measure_screenshot(path) FIRST and let its numbers drive the critique — the real palette and how many colours the screen actually uses, exact WCAG ratios for the pairs on screen, density, the structural detections with their confidence, and whether a significant cluster sits in the stock indigo/violet/purple region. Cite those numbers instead of impressions ("the muted text measures 2.9:1; AA needs 4.5"), and run fix_contrast for each failure. Respect the confidence levels: a medium-confidence detection is a question to check, not a finding to assert. If you only have an inline image and no file path, say so, and fall back to audit_accessibility on any colours you can read plus audit_ux_copy on legible copy.
5. No padding. Report only real issues. If the screen is genuinely good, a short list is the correct answer — do not manufacture findings to seem thorough.
6. Rank by severity P0→P3 and give one concrete fix per finding, citing the SaglitzDesign rule/doc it comes from.
7. If it's a known screen type, also run the matching design_review_checklist and get_design_examples to compare against how top apps handle it.