Capture screenshots, compare UI against design mockups, and generate rubric-based fidelity scores.
npx skills add https://github.com/ramboz/servo --skill design-eval
Please help me install this Agent Skill. Skill: design-eval Source: https://github.com/ramboz/servo/tree/main/hosts/claude/skills/design-eval Command: npx skills add https://github.com/ramboz/servo --skill design-eval
This Skill automates the evaluation of UI design fidelity in projects, saving time and ensuring consistency between the design and the implemented UI.
Use the design-eval skill to initiate the evaluation process for a project UI. Run the command: /servo:design-eval init <target> to set up the evaluation environment.
High-intent search queries and answers about installing and using this skill.
Automate UI design fidelity evaluation by capturing Playwright screenshots, comparing them with design mockups, and generating scores via Claude Code or Codex vision models using a predefined rubric.
Yes, you can define custom evaluation criteria and rubrics to assess how closely your built web or mobile UI matches the design mockups.
Yes, Playwright is required for UI screenshotting, while Claude Code or Codex handles vision model scoring.
UI design fidelity evaluation integrates with existing workflows and CI/CD pipelines by running the init command on your target UI to set up the automated scoring environment.
The best way to score an implemented UI is using an automated process that captures screenshots and applies predefined rubrics via Claude Code or Codex vision models.
earchibaldConfigure the Claude statusline with a schema-driven UI and seeded config.
Dorpeer95Identify and quantify code quality risks using truth scores and automated verification checks.
RishabhupadhyaAutomate local web app testing with Python-based Playwright scripts.
hffmnnjCompare screenshots pixel-by-pixel to detect unintended UI changes.
