通用技能设计与创意
claude-pixel-perfect-agent
对照设计稿逐项检查线上页面的 CSS 实现偏差
对照设计稿逐项检查线上页面的 CSS 实现偏差
它通过 Chrome DevTools 测量页面与交互状态的字体、颜色、间距、圆角和阴影，并与 Figma、品牌手册、参考站点、截图或手工规范核对。流程会复查疑似偏差、过滤设计意图和重复问题，最终输出带严重级别、当前值与期望值的 Excel 或 Markdown 报告。使用时必须提供目标网址和至少一种设计参考，并安装 Chrome MCP。
资源类型
使用场景
运行平台
协议与集成
把一句想法画成带花生角色的概念插图
先锁定设计规则，再让 Claude 生成并核查界面。
核心能力
GitHub 公开事实最近同步于 2026年7月10日。
根据设计简报自动安排配色、效果、字体和图标技能的调用顺序。
用 Claude 规划并推进完整的产品设计项目