{"passport":{"unfragile":{"@version":"1.0","version":"2026-05","artifact":{"id":"hn-47499672","slug":"proofshot-give-ai-coding-agents-eyes-to-verify-the","name":"ProofShot – Give AI coding agents eyes to verify the UI they build","type":"cli","url":"https://github.com/AmElmo/proofshot","page_url":"https://unfragile.ai/proofshot-give-ai-coding-agents-eyes-to-verify-the","categories":["automation"],"tags":["hackernews","show-hn"],"pricing":{"model":"open_source","free":true,"starting_price":null},"status":"active","verified":false},"capabilities":[{"id":"hn-47499672__cap_0","uri":"capability://image.visual.visual.assertion.generation.for.ai.built.uis","name":"visual assertion generation for ai-built uis","description":"Captures screenshots of rendered UI components and generates machine-readable assertions that verify visual correctness. Uses image analysis to extract layout, styling, and element positioning data, then synthesizes assertions that AI agents can evaluate against expected output. Enables agents to close the feedback loop by comparing rendered output against specifications without human intervention.","intents":["Verify that an AI-generated UI component matches the design specification before committing","Automatically detect visual regressions when an agent modifies existing UI code","Generate test assertions from screenshots without manually writing assertion code","Enable AI agents to self-correct UI generation by comparing visual output to intent"],"best_for":["AI agent developers building autonomous code generation systems","Teams using LLM-based UI builders that need automated quality gates","Developers implementing agentic loops where visual feedback is required"],"limitations":["Assertion generation accuracy depends on image analysis model quality — may miss subtle styling differences or accessibility issues","Requires rendered output (browser/headless environment) — cannot verify static code without execution","No built-in support for responsive design testing across multiple viewport sizes","Assertion generation is non-deterministic — same screenshot may produce slightly different assertions on repeated runs"],"requires":["Node.js 16+ or Python 3.8+","Browser environment (Puppeteer, Playwright, or Selenium) for screenshot capture","Vision-capable LLM API (Claude Vision, GPT-4V, or equivalent) for assertion generation","API credentials for vision model provider"],"input_types":["screenshot/image (PNG, JPEG, WebP)","UI specification (text description, design tokens, or component props)","HTML/CSS code (for context)"],"output_types":["assertion code (JavaScript/Python test format)","structured assertion metadata (JSON with element selectors, expected values)","visual diff report (comparison between expected and actual)"],"categories":["image-visual","code-generation-editing"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"hn-47499672__cap_1","uri":"capability://image.visual.screenshot.capture.with.agent.context.injection","name":"screenshot capture with agent context injection","description":"Captures full-page or component-level screenshots from a running browser instance and embeds metadata about the current agent state, task context, and UI specifications. Integrates with headless browser APIs (Puppeteer/Playwright) to trigger captures at specific points in the agent's execution flow, passing along task descriptions and expected outcomes as context for downstream assertion generation.","intents":["Capture UI state at specific checkpoints during agent execution for verification","Include task context and specifications in screenshot metadata for assertion generation","Trigger screenshots programmatically when agent completes a UI modification","Generate timestamped visual logs of agent progress for debugging and auditing"],"best_for":["Agentic UI builders that need visual checkpoints during code generation","Teams debugging why AI-generated UIs don't match specifications","Systems that need audit trails of visual changes made by agents"],"limitations":["Requires headless browser environment — cannot capture native mobile or desktop app UIs","Screenshot timing is critical; race conditions may capture incomplete renders or loading states","Context metadata must be manually injected by agent orchestrator — no automatic extraction from agent state","Large screenshots consume significant storage and API quota when sent to vision models"],"requires":["Puppeteer 13+ or Playwright 1.30+","Headless browser (Chromium, Firefox, or WebKit)","Agent framework with execution hooks (LangChain, AutoGPT, or custom orchestrator)"],"input_types":["browser page object (Puppeteer/Playwright Page instance)","task context (string description of what agent is building)","UI specification (design tokens, component requirements, or acceptance criteria)"],"output_types":["screenshot image (PNG, JPEG)","screenshot metadata (JSON with context, timestamp, agent state)","screenshot buffer (in-memory for immediate processing)"],"categories":["image-visual","tool-use-integration"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"hn-47499672__cap_2","uri":"capability://image.visual.multi.modal.assertion.validation.with.llm.reasoning","name":"multi-modal assertion validation with llm reasoning","description":"Evaluates generated assertions against actual UI output using LLM reasoning over both visual and textual data. Sends screenshots, generated assertions, and UI specifications to a vision-capable LLM, which reasons about whether the rendered UI satisfies the assertions and specifications. Returns structured validation results with confidence scores and explanations of any mismatches, enabling agents to understand why assertions failed.","intents":["Validate that generated assertions accurately reflect the UI specification","Understand why a UI doesn't match expectations with natural language explanations","Score the quality of AI-generated UI code before committing to a codebase","Enable agents to iteratively refine UI code based on assertion validation feedback"],"best_for":["AI agents that need to understand and reason about assertion failures","Teams building self-correcting UI generation loops","Systems where visual validation requires semantic understanding (e.g., 'button is prominently placed' vs pixel-perfect positioning)"],"limitations":["LLM reasoning is non-deterministic — same assertion may pass/fail on different runs due to model variance","Confidence scores are heuristic-based and not calibrated to actual error rates","Reasoning explanations can be verbose or miss subtle issues that automated tools would catch","Adds latency (typically 2-5 seconds per validation) due to LLM API calls","Requires vision-capable LLM — not all models support image input"],"requires":["Vision-capable LLM API (Claude 3 Vision, GPT-4V, Gemini Vision, or equivalent)","API credentials with sufficient quota for repeated validation calls","Screenshot image in supported format (PNG, JPEG, WebP, GIF)"],"input_types":["screenshot image (PNG, JPEG, WebP)","assertion code or assertion metadata (JSON)","UI specification (text description or structured requirements)","component props or design tokens (optional context)"],"output_types":["validation result (pass/fail/partial)","confidence score (0-1 float)","reasoning explanation (natural language)","structured validation report (JSON with detailed findings)"],"categories":["image-visual","planning-reasoning"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"hn-47499672__cap_3","uri":"capability://automation.workflow.agentic.feedback.loop.integration.for.iterative.ui.refinement","name":"agentic feedback loop integration for iterative ui refinement","description":"Embeds visual verification into agent execution loops, enabling agents to capture screenshots, generate assertions, validate them, and automatically refine code based on validation feedback. Implements a feedback mechanism where assertion failures trigger code regeneration with updated context, creating a closed loop where agents self-correct UI code until assertions pass. Integrates with agent frameworks via hooks or middleware.","intents":["Enable AI agents to autonomously iterate on UI code until visual output matches specifications","Reduce human review cycles by having agents self-validate and self-correct","Build agentic systems that learn from visual feedback and improve code quality over iterations","Implement quality gates that prevent agents from committing code that fails visual assertions"],"best_for":["Teams building fully autonomous UI generation agents","Systems where human-in-the-loop review is too slow or expensive","Developers implementing self-improving code generation systems"],"limitations":["Iteration loops can be expensive — each iteration requires screenshot capture, LLM vision analysis, and potentially code regeneration (3-5 API calls per iteration)","Risk of infinite loops if assertions are impossible to satisfy or if agent gets stuck in local optima","No built-in timeout or iteration limit — requires external orchestration to prevent runaway loops","Agent quality depends heavily on initial prompt and specification clarity — vague specs lead to poor iterations","Debugging failed iterations is difficult — requires logging all intermediate states and LLM responses"],"requires":["Agent framework with execution hooks (LangChain, AutoGPT, custom orchestrator, or similar)","Code generation capability (LLM with code generation ability)","Vision-capable LLM for assertion generation and validation","Headless browser for screenshot capture","State management for tracking iterations and preventing infinite loops"],"input_types":["UI specification (text or structured requirements)","initial code template or starting point (optional)","design tokens or component library (optional)","iteration budget (max number of refinement attempts)"],"output_types":["final UI code (HTML/CSS/JavaScript or framework-specific)","iteration history (log of all attempts, assertions, and feedback)","validation report (final assertion results and confidence scores)","refinement suggestions (natural language explanation of changes made)"],"categories":["automation-workflow","planning-reasoning"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"hn-47499672__cap_4","uri":"capability://code.generation.editing.specification.aware.assertion.generation.with.design.token.support","name":"specification-aware assertion generation with design token support","description":"Generates assertions that reference design tokens, component specifications, and UI requirements rather than hardcoded pixel values. Parses design token files (JSON, CSS variables, or Figma tokens) and component specifications to generate assertions that validate semantic properties (e.g., 'button uses primary color token' vs 'button is #007BFF'). Enables assertions to remain valid across design system updates and theme changes.","intents":["Generate assertions that validate UI against design system specifications","Ensure AI-generated UI respects design tokens and component requirements","Create assertions that survive design system updates without modification","Validate that UI components use correct semantic colors, spacing, and typography"],"best_for":["Teams with established design systems and design tokens","Organizations using Figma tokens or design token standards","Systems where UI consistency across components is critical"],"limitations":["Requires design tokens to be available in machine-readable format — not all design systems export tokens","Token mapping is heuristic-based — may fail if token names don't match CSS variable names or Figma token names","Cannot validate tokens that aren't explicitly defined (e.g., custom colors not in token file)","Assertion generation accuracy depends on design token completeness — missing tokens lead to incomplete assertions"],"requires":["Design token file (JSON, CSS, or Figma tokens export)","Component specification (Storybook, design system documentation, or custom format)","Vision-capable LLM for assertion generation","Token parser (custom or library like design-tokens or token-transformer)"],"input_types":["screenshot image (PNG, JPEG, WebP)","design token file (JSON, CSS, or Figma export)","component specification (text or structured format)","design system documentation (optional)"],"output_types":["assertion code with token references (e.g., 'expect(button).toHaveColor(tokens.primary)')","token validation report (which tokens are used, which are missing)","design system compliance report (whether UI matches design system specifications)"],"categories":["code-generation-editing","data-processing-analysis"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"hn-47499672__cap_5","uri":"capability://image.visual.component.level.visual.regression.detection","name":"component-level visual regression detection","description":"Compares screenshots of individual UI components across versions to detect unintended visual changes. Isolates component rendering in a test environment, captures screenshots before and after code changes, and uses image analysis or LLM vision to identify differences. Generates reports highlighting which components changed and whether changes are intentional or regressions.","intents":["Detect when AI-generated code changes break existing UI components","Identify unintended side effects of UI modifications","Validate that component styling remains consistent across refactoring","Generate visual diff reports for code review"],"best_for":["Teams using component-based UI frameworks (React, Vue, Angular)","Systems where component isolation is possible (Storybook, component test harnesses)","Developers needing visual regression detection without manual baseline management"],"limitations":["Requires component isolation — cannot detect regressions in integrated page layouts","Baseline management is manual — no built-in version control for baseline images","Sensitive to rendering differences (anti-aliasing, font rendering) that aren't real regressions","Cannot distinguish intentional design changes from unintended regressions without human review","Requires separate test environment for component rendering — adds setup complexity"],"requires":["Component test harness (Storybook, Chromatic, or custom setup)","Headless browser for screenshot capture","Baseline image storage (filesystem or cloud storage)","Image comparison library (pixelmatch, resemble.js, or LLM vision)"],"input_types":["component code (React/Vue/Angular component)","component props or variants (for testing different states)","baseline screenshot (previous version)"],"output_types":["visual diff report (highlighted differences between baseline and current)","regression detection result (pass/fail/review-needed)","change summary (which components changed, magnitude of change)"],"categories":["image-visual","automation-workflow"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"hn-47499672__cap_6","uri":"capability://image.visual.cross.browser.visual.consistency.validation","name":"cross-browser visual consistency validation","description":"Captures screenshots of UI components across multiple browser engines (Chromium, Firefox, WebKit) and validates visual consistency. Compares rendered output across browsers to detect browser-specific rendering issues, CSS compatibility problems, or layout shifts. Generates reports identifying which browsers have visual discrepancies and suggests fixes.","intents":["Ensure AI-generated UI renders consistently across browsers","Detect browser-specific CSS issues before code is committed","Validate that responsive design works across different browser engines","Identify CSS compatibility issues that affect user experience"],"best_for":["Teams building web UIs that must support multiple browsers","Organizations with strict cross-browser compatibility requirements","Developers using AI to generate CSS and needing automated validation"],"limitations":["Requires multiple browser engines to be installed — adds setup complexity and disk space","Rendering differences can be due to legitimate browser behavior, not bugs — requires human judgment","Cannot test on actual mobile browsers — only desktop browser engines","Comparison logic is heuristic-based — may miss subtle rendering differences or false-positive on minor variations","Slow — capturing screenshots across 3+ browsers adds 10-30 seconds per validation"],"requires":["Playwright or Puppeteer with multiple browser engines installed (Chromium, Firefox, WebKit)","Sufficient disk space for browser binaries (~1GB per engine)","Image comparison library or LLM vision for cross-browser diff detection"],"input_types":["UI component or page URL","browser list (which browsers to test)","viewport size (for responsive testing)"],"output_types":["cross-browser comparison report (visual diffs per browser)","consistency score (how similar rendering is across browsers)","compatibility issues list (specific CSS or layout problems)"],"categories":["image-visual","automation-workflow"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"hn-47499672__cap_7","uri":"capability://image.visual.accessibility.aware.visual.assertion.generation","name":"accessibility-aware visual assertion generation","description":"Generates assertions that validate accessibility properties visible in screenshots, including color contrast, text size, button size, focus indicators, and semantic HTML structure. Uses vision models to analyze screenshots for accessibility issues and generates assertions that enforce WCAG compliance. Integrates with accessibility testing libraries to validate assertions programmatically.","intents":["Ensure AI-generated UI meets WCAG accessibility standards","Detect color contrast issues that fail accessibility requirements","Validate that interactive elements are large enough for touch/click targets","Generate assertions that enforce accessibility best practices"],"best_for":["Teams with accessibility compliance requirements (WCAG 2.1 AA/AAA)","Organizations building public-facing web applications","Developers using AI to generate UI and needing automated accessibility validation"],"limitations":["Vision-based accessibility analysis cannot detect all issues — requires axe-core or similar for comprehensive testing","Cannot validate keyboard navigation, screen reader compatibility, or semantic HTML from screenshots alone","Color contrast detection is heuristic-based — may fail on gradients or complex backgrounds","Assertion generation for accessibility is less mature than visual assertions — higher false positive/negative rates","Requires WCAG standard reference data — must be kept up-to-date with spec changes"],"requires":["Vision-capable LLM for accessibility analysis","WCAG compliance reference data (color contrast ratios, minimum touch target sizes, etc.)","Accessibility testing library (axe-core, pa11y, or similar) for programmatic validation","Screenshot image in supported format"],"input_types":["screenshot image (PNG, JPEG, WebP)","WCAG compliance level (A, AA, AAA)","component code (for semantic HTML validation)"],"output_types":["accessibility assertion code (e.g., 'expect(button).toHaveMinimumSize(44px)')","accessibility issues report (contrast failures, small touch targets, etc.)","WCAG compliance score (percentage of requirements met)"],"categories":["image-visual","safety-moderation"],"confidence":0.5,"matches":0,"success_rate":0}],"trust":{"score":43,"verified":false,"data_access_risk":"high","permissions":["Node.js 16+ or Python 3.8+","Browser environment (Puppeteer, Playwright, or Selenium) for screenshot capture","Vision-capable LLM API (Claude Vision, GPT-4V, or equivalent) for assertion generation","API credentials for vision model provider","Puppeteer 13+ or Playwright 1.30+","Headless browser (Chromium, Firefox, or WebKit)","Agent framework with execution hooks (LangChain, AutoGPT, or custom orchestrator)","Vision-capable LLM API (Claude 3 Vision, GPT-4V, Gemini Vision, or equivalent)","API credentials with sufficient quota for repeated validation calls","Screenshot image in supported format (PNG, JPEG, WebP, GIF)"],"failure_modes":["Assertion generation accuracy depends on image analysis model quality — may miss subtle styling differences or accessibility issues","Requires rendered output (browser/headless environment) — cannot verify static code without execution","No built-in support for responsive design testing across multiple viewport sizes","Assertion generation is non-deterministic — same screenshot may produce slightly different assertions on repeated runs","Requires headless browser environment — cannot capture native mobile or desktop app UIs","Screenshot timing is critical; race conditions may capture incomplete renders or loading states","Context metadata must be manually injected by agent orchestrator — no automatic extraction from agent state","Large screenshots consume significant storage and API quota when sent to vision models","LLM reasoning is non-deterministic — same assertion may pass/fail on different runs due to model variance","Confidence scores are heuristic-based and not calibrated to actual error rates","builder identity is not verified yet","no observed match outcomes yet"],"rank_breakdown":{"adoption":0.7,"quality":0.26,"ecosystem":0.46,"match_graph":0.25,"freshness":0.6,"weights":{"adoption":0.25,"quality":0.25,"ecosystem":0.1,"match_graph":0.28,"freshness":0.12}},"observed_outcomes":{"matches":0,"success_rate":0,"avg_confidence":0,"top_intents":[],"last_matched_at":null},"maintenance":{"status":"active","updated_at":"2026-06-17T09:51:04.692Z","last_scraped_at":"2026-05-04T08:10:12.967Z","last_commit":null},"community":{"stars":null,"forks":null,"weekly_downloads":null,"model_downloads":null,"model_likes":null}},"distribution":{"claim_url":"https://unfragile.ai/submit?claim=proofshot-give-ai-coding-agents-eyes-to-verify-the","compare_url":"https://unfragile.ai/compare?artifact=proofshot-give-ai-coding-agents-eyes-to-verify-the"}},"signature":"EqPcFG2DXmTE9AF49NS/xA7Hi8w6Rv9rPHMcXcxc/dXUR0I7wGWqh3PJXU9x0qKU0VTIesrv892JcLmJZ1JFDQ==","signedAt":"2026-06-21T13:13:19.006Z","signedBy":"unfragile.ai","version":1},"_links":{"self":"https://unfragile.ai/api/v1/passport/proofshot-give-ai-coding-agents-eyes-to-verify-the","artifact":"https://unfragile.ai/proofshot-give-ai-coding-agents-eyes-to-verify-the","verify":"https://unfragile.ai/api/v1/verify?slug=proofshot-give-ai-coding-agents-eyes-to-verify-the","publicKey":"https://unfragile.ai/api/v1/trust-passport-public-key","spec":"https://unfragile.ai/trust","schema":"https://unfragile.ai/schema.json","docs":"https://unfragile.ai/docs"}}