mcpField
D
design-critic-skill

design-critic-skill

github.com/sergekostenchuk设计与 UI3262 次安装18 周前更新
代码仓库

关于 design-critic-skill

design-critic-skill 用于评审截图、Figma 画面或代码上下文，并将可观察到的视觉问题转化为可执行的改进建议。它区分证据类型，并包含隐私与验证步骤。

主要功能

  1. 01截图、Figma 和代码评审模式
  2. 02针对可见问题提出改进建议
  3. 03将评审转为实施说明
  4. 04隐私与证据类型检查
  5. 05结构化评审报告模板

适用场景

  1. 01检查截图中的视觉层级问题
  2. 02实现前评估 Figma 画面
  3. 03将评审结果转为 Web 应用改进说明

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill design-critic-skill

安装后在 Claude Code 中输入/design-critic-skill确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
assets/
critique-report.template.md
evals/
evals.json
references/
anti-slop-patterns.md
hierarchy-rubric.md
reference-products.md
taste-constraints.md

详细介绍

设计评审技能

当主要需求是判断视觉质量并提出可执行的润色建议，而非完整实现或自动化审查时，请使用此专家工具。

工作模式

  • screenshot-critique：评审屏幕截图或图像。
  • figma-critique：评审提供的 Figma 画板或上下文。
  • code-context-critique：根据源代码和本地截图，评审可能存在的视觉问题。
  • fix-brief：将评审意见转化为 Web 应用或营销技能的实现说明。

必需工作流程

  1. 阅读 references/hierarchy-rubric.md。
  2. 在称设计“精致”之前，阅读 references/anti-slop-patterns.md。
  3. 使用 references/taste-constraints.md，确保评审意见基于可观察的事实。
  4. 在使用 Figma、屏幕截图或外部工具之前，应用 ../../shared/privacy-policy.md。
  5. 使用 assets/critique-report.template.md 输出结构化内容。
  6. 标明证据类型：屏幕截图、Figma、源代码、浏览器或 Manual。

评审规则

  • 评审结果必须对应可观察的问题：层级、分组、浏览路径、对比度风险、间距、字号层级、可供性、一致性、内容密度或操作优先级。
  • 避免只表达模糊的审美判断而不提供修改方向。
  • 不要编造有关无障碍、DOM、性能或分析的数据。
  • 只有获得批准后，才可使用可选的云工具辅助构思；这些工具不能取代本地判断。

验证

python3 $CODEX_SKILLS_DIR/.system/skill-creator/scripts/quick_validate.py $CODEX_SKILLS_DIR/design-critic-skill
python3 $CODEX_SKILLS_DIR/senior-skill-architect/scripts/lint_production_skill.py $CODEX_SKILLS_DIR/design-critic-skill

输出格式

Input:
Evidence type:
Top findings:
Fix brief:
What not to change:
Verification:
Privacy notes:

评论

支持 Markdown