design-reviewCore pack — always active for visual work. Quality gate for UI, components, pages, layouts, or frontend work. Triggers on any visual/design task automaticall...
Install via ClawdBot CLI:
clawdbot install aa-on-ai/design-reviewGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://mobbin.comAudited Apr 16, 2026 · audit v1.0
Generated May 11, 2026
A startup finalizes their product's UI before a critical investor demo. Using this skill, they run a design audit to ensure typography hierarchy, spacing, and interactive states are polished. The pre-flight checklist catches missing hover states and inconsistent spacing, leading to a confident presentation.
A team redesigns the checkout flow for an e-commerce platform. The design review enforces restraint in visual elements, checks loading/empty states for cart, and compares against proven patterns from Linear and Vercel. The result is a streamlined, high-conversion checkout.
A sub-agent builds a new analytics widget for a dashboard. They read spacing and anti-pattern references, run the anti-pattern check script, and present with evidence. The review catches a common anti-pattern of overusing color for hierarchy, fixing it before the human review.
A designer creates a new button component following the project's existing tokens. The skill ensures they read the design system doc, match references at pixel level, and check accessibility (aria labels, focus states). The component passes review without repeated feedback.
A team designs a workout tracking page for mobile. The design review includes viewport-specific screenshots and checks spacing for tap targets. Typography hierarchy is validated without color, making the interface calm and usable during workouts.
Offer the pre-flight checklist and scripts as a standalone SaaS tool for design teams. Teams pay a monthly subscription to run automated design audits on their PRs. Upsell includes integration with CI/CD pipelines and team-wide memory management.
Position this skill as a service: expert design reviewers apply the methodology for clients. Deliverables include detailed audit reports, reference file creation, and anti-pattern documentation. Revenue per project or retainer.
Create a training program teaching the design review methodology to design teams or agencies. Include certification for 'Design Review Practitioners'. Revenue from course fees and certification exam charges.
💬 Integration Tip
Integrate the verification scripts into your CI/CD pipeline by copying the ci/design-eval.py and ci/design-eval.yml files to your project root. This automatically runs anti-pattern, state, and accessibility checks on every PR.
Scored May 11, 2026
Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens. Use when 还原设计图, implementing...
Senior product designer methodology ensuring thorough user research, structured architecture, accessible color and typography systems, and pixel-perfect UI e...
Complete Motion.dev documentation - modern animation library for React, JavaScript, and Vue (formerly Framer Motion)
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-conv...
Shared design system for yuanfang-skills. Provides token CSS variables, 12+ themes, and reusable layout-type HTML blocks. Used by yuanfang-html-image (and fu...
Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinc...