Agent Skills
返回列表
🤖

Hallmark 反 AI slop 设计工作流

AI Agent 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_3c6cb52e/apply-an-anti-ai-slop-design-workflow-to-pages-components-audits-and-redesigns-with-hallmark

技能介绍

要解决的问题

直接让编码代理写 UI，往往会得到千篇一律的“AI 味”界面：圆角卡片堆叠、紫蓝渐变铺满、Generic Sans 字体、8px 间距机械重复。这类页面能跑，但没有品牌感，也谈不上设计意图。问题在于代理缺少一套设计判断标准，只能从训练数据里复刻最常见的模式。

核心能力与工作方式

Hallmark 把反 AI slop 的设计流程整理成编码代理可执行的 SKILL.md，覆盖四类典型任务：

  • 绿野 UI：从空白项目起步时，按明确规则生成有辨识度的页面结构与视觉语言，而不是套用默认模板
  • 组件工作：在现有组件库中新增或改造组件，保持与项目既有风格的一致性
  • 设计审计：对已有页面做系统性检查，标记 slop 特征（过度留白、无意义的阴影、滥用渐变等）并给出修复建议
  • 重新设计与视觉 DNA 提取：从截图或 URL 中解析目标页面的视觉特征——间距系统、字体层级、色彩比例、组件结构——作为重设计或改造的输入

技能面向 Claude Code、Cursor、Codex 等编码代理，核心是把设计决策变成代理能遵循的规则，而不是让它自由发挥。

适用边界与注意点

  • 技能输出的是设计工作流与判断标准，不替代前端工程能力，代理仍需能读懂并操作项目代码
  • 视觉 DNA 提取依赖输入截图或页面的质量：截图分辨率过低、页面本身 slop 严重，都会影响提取结果的可用性
  • 审计与重设计建议需要结合项目实际约束（现有依赖、性能预算、响应式断点）落地，不能机械照搬
  • 最适合需要快速产出有设计感的界面原型、或对现有 AI 生成 UI 做规范化清理的场景，不适合完全无设计输入的纯抽象系统

使用场景

  • 在空白项目里搭建首页，按设计规则生成页面结构，避免套用默认 AI 模板风格。
  • 对已有页面做 slop 审计，逐项标记过度留白、滥用渐变等问题并给出修复建议。
  • 拿到竞品截图或 URL，提取其间距、字体层级与配色比例，作为重设计的输入。
  • 在现有组件库中新增卡片或表单组件，确保与项目既有视觉风格保持一致。

适合人员

  • 前端工程师，想让编码代理产出有辨识度的页面，而不是千篇一律的 AI 味模板。
  • 独立全栈开发者，从零做产品时需要快速得到不落俗套的界面。
  • 设计系统维护者，需要在改造现有组件时保持整套视觉语言一致。
  • 负责清理存量 AI 生成界面的技术负责人，需要一套可执行的审计标准。