【开源静态评测】unslop：UI设计复核Agent Skill，先定方向再迭代，风格清单≠设计铁律

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */
#content_views .toc,
/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */
#content_views.markdown_views > p:empty:has(+ .toc),
#content_views.markdown_views > .toc + p:empty,
/* 富文本旧版目录标记 */
#content_views.htmledit_views #main-toc,
#content_views.htmledit_views #hr-toc,
#content_views.htmledit_views p[id*=\”-toc\”] {
display: none !important;
}
/* 目录去掉后，紧跟的首个标题不再多出一块上边距 */
#content_views.markdown_views > .toc + h1,
#content_views.markdown_views > .toc + h2,
#content_views.markdown_views > .toc + h3,
#content_views.markdown_views > .toc + h4,
#content_views.markdown_views > .toc + p:empty + h1,
#content_views.markdown_views > .toc + p:empty + h2,
#content_views.markdown_views > .toc + p:empty + h3,
#content_views.markdown_views > .toc + p:empty + h4 {
margin-top: 0 !important;
}

【开源静态评测】unslop：UI设计复核Agent Skill，先定方向再迭代，风格清单≠设计铁律

版本：V2.6.0｜Valhalla L3 bounded-git-snapshot-v1 证据驱动取证 快照基准：commit 1d13095e4bef6ad6c74f1dd828d84c4ba309a4dc｜L3 · PASS｜静态文档审阅，不部署、不调用Agent、不执行页面改造 仓库：heydamir/unslop｜定位：面向网页界面的AI设计复核与迭代技能（Skill），面向Claude 作者：Valhalla Matrix治理实验室

文章目录

• 【开源静态评测】unslop：UI设计复核Agent Skill，先定方向再迭代，风格清单≠设计铁律
• • 一、开篇：一句话定位 + 三句话核心结论
  • • 读者阅读地图
  • 二、项目定位与评测边界
  • • 2.1 它解决什么问题
    • 2.2 评测纪律（CSDN专业度加分项）
    • 2.3 可复现取证浅克隆命令
  • 三、技术拆解：三段式复核流程、痕迹清单、外部依赖边界
  • • 3.1 流程顺序优先：先审计、定方向，再修改源码
    • 3.2 痕迹清单（signs.md）：可解释的设计提示，不是质量铁律
    • 3.3 外部依赖显性化，不隐藏在技能内部
    • 3.4 轻量流程材料 ≠ 通用UI质检产品
    • 流程简图
  • 四、L3证据面板（数字严格对齐快照）
  • 五、风险切片、许可红线边界（moderate风险姿态）
  • 六、落地验证路线（设计团队、Agent开发团队可直接执行）
  • 七、评测总结
  • • 标签
    • 分类推荐
    • 合规声明

⚠️ 前置核心认知：unslop 最容易产生的误解：它不是一套“万能UI质量检测器”，而是一套流程化设计复核方法论；清单里的反模板化规则只是设计偏好，不能直接当成普适质量标准。本文为独立取证评测，非README搬运。

一、开篇：一句话定位 + 三句话核心结论

AI生成UI经常出现同质化问题：泛滥渐变、多余光晕、杂乱图标、虚假社会证明、含糊文案，社区称之为 UI slop。unslop 就是专门用来解决这类问题的Agent Skill：先对现有界面做审计、锁定产品设计方向，再多轮迭代微调，而不是上来直接全盘重写页面。 很多开发者会把它的设计检查清单当成强制验收标准，静态快照证据清晰区分了「流程框架」和「美学偏好」的边界，同时明确了外部依赖、许可约束。

✅ 三句话核心结论

读者阅读地图

• 产品/设计负责人：本章、风险切片、落地建议，评估AI辅助UI评审的引入边界；
• 前端/AI Agent开发：技术拆解、三段式流程、外部依赖部分；
• 合规审计回溯：L3证据面板、manifest哈希，用于交叉核验快照。

二、项目定位与评测边界

2.1 它解决什么问题

当前AI代码Agent很容易“过度重构”：拿到页面就推翻原有设计、套上统一模板风格，忽略产品本身的品牌语境。 unslop 提供一套约束流程：

• 审计：识别界面里典型的模板化UI痕迹；
• 定方向：结合产品目标确定本次改造的设计基调；
• 多轮迭代（Passes）：分批修改，优先局部优化，原有界面质量达标时只做细节打磨；
• 附加能力：配合Playwright抓取页面快照、ffmpeg生成改造演示视频，支持付费图像生成（需要先确认提示词、征得用户同意）。

它的价值不在于“一键产出完美UI”，而是给Agent增加设计约束顺序，降低无差别重写的破坏风险。

2.2 评测纪律（CSDN专业度加分项）

• 评测范式：Valhalla L3 bounded-git-snapshot-v1 有界静态取证；
• 抽样规则：固定commit，限定8个文件做blob核验，全仓一共21个文件，体量很小，以文档、Skill定义为主；
• 未执行动作：不安装Playwright、ffmpeg，不调用大模型、不抓取在线页面、不生成演示视频；
• 排除范围：不评估改造后UI的实际美观度、交互兼容性、跨框架适配能力；
• 证据锚定：全部证据绑定固定commit，不跟随main分支漂移。

2.3 可复现取证浅克隆命令

git clone –depth 1 –filter=blob:none –no-checkout –no-tags \\
[https://github.com/heydamir/unslop.git](https://github.com/heydamir/unslop.git)

三、技术拆解：三段式复核流程、痕迹清单、外部依赖边界

3.1 流程顺序优先：先审计、定方向，再修改源码

README 与 SKILL.md 明确定义三段执行顺序：Audit → Direction → Passes。 核心约束：如果原有界面本身设计质量良好，Agent只输出细化建议，不强制大面积改动。这个顺序是本项目最核心的工程约束，用来对抗AI Agent“上来就全量重写”的坏习惯。

3.2 痕迹清单（signs.md）：可解释的设计提示，不是质量铁律

signs.md 按维度分组列举模板化UI特征：颜色、字形、图标、间距、文案、组件、动效；重点标记虚构社会证明、模糊空洞文案这类高频AI UI问题。

关键降噪：清单是识别模板化痕迹的参考集，不是行业强制标准。部分规则和品牌视觉规范冲突，在落地时必须预留例外通道。

3.3 外部依赖显性化，不隐藏在技能内部

文档明确列出可选依赖：

• Playwright / Chromium：获取在线页面实时快照；
• ffmpeg：生成改造前后对比演示视频；
• 付费图像服务：生成配图，要求先展示提示词、获得用户确认之后再调用。 依赖全部显性声明，没有隐式拉起浏览器、扣费调用的黑盒逻辑。

3.4 轻量流程材料 ≠ 通用UI质检产品

仓库主体是Skill定义文档、参考清单、示例素材，代码体量很小。它是一套给Agent用的设计审阅流程材料，不能默认兼容React/Vue/Next.js等所有前端框架，也不能自动修复交互、键盘、移动端适配问题。

流程简图

#mermaid-svg-Ld1s0XXwCVjuKOQw{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-Ld1s0XXwCVjuKOQw .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-Ld1s0XXwCVjuKOQw .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-Ld1s0XXwCVjuKOQw .error-icon{fill:#552222;}#mermaid-svg-Ld1s0XXwCVjuKOQw .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Ld1s0XXwCVjuKOQw .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-Ld1s0XXwCVjuKOQw .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Ld1s0XXwCVjuKOQw .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Ld1s0XXwCVjuKOQw .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-Ld1s0XXwCVjuKOQw .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Ld1s0XXwCVjuKOQw .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Ld1s0XXwCVjuKOQw .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Ld1s0XXwCVjuKOQw .marker.cross{stroke:#333333;}#mermaid-svg-Ld1s0XXwCVjuKOQw svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Ld1s0XXwCVjuKOQw p{margin:0;}#mermaid-svg-Ld1s0XXwCVjuKOQw .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-Ld1s0XXwCVjuKOQw .cluster-label text{fill:#333;}#mermaid-svg-Ld1s0XXwCVjuKOQw .cluster-label span{color:#333;}#mermaid-svg-Ld1s0XXwCVjuKOQw .cluster-label span p{background-color:transparent;}#mermaid-svg-Ld1s0XXwCVjuKOQw .label text,#mermaid-svg-Ld1s0XXwCVjuKOQw span{fill:#333;color:#333;}#mermaid-svg-Ld1s0XXwCVjuKOQw .node rect,#mermaid-svg-Ld1s0XXwCVjuKOQw .node circle,#mermaid-svg-Ld1s0XXwCVjuKOQw .node ellipse,#mermaid-svg-Ld1s0XXwCVjuKOQw .node polygon,#mermaid-svg-Ld1s0XXwCVjuKOQw .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Ld1s0XXwCVjuKOQw .rough-node .label text,#mermaid-svg-Ld1s0XXwCVjuKOQw .node .label text,#mermaid-svg-Ld1s0XXwCVjuKOQw .image-shape .label,#mermaid-svg-Ld1s0XXwCVjuKOQw .icon-shape .label{text-anchor:middle;}#mermaid-svg-Ld1s0XXwCVjuKOQw .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-Ld1s0XXwCVjuKOQw .rough-node .label,#mermaid-svg-Ld1s0XXwCVjuKOQw .node .label,#mermaid-svg-Ld1s0XXwCVjuKOQw .image-shape .label,#mermaid-svg-Ld1s0XXwCVjuKOQw .icon-shape .label{text-align:center;}#mermaid-svg-Ld1s0XXwCVjuKOQw .node.clickable{cursor:pointer;}#mermaid-svg-Ld1s0XXwCVjuKOQw .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-Ld1s0XXwCVjuKOQw .arrowheadPath{fill:#333333;}#mermaid-svg-Ld1s0XXwCVjuKOQw .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Ld1s0XXwCVjuKOQw .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Ld1s0XXwCVjuKOQw .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Ld1s0XXwCVjuKOQw .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-Ld1s0XXwCVjuKOQw .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Ld1s0XXwCVjuKOQw .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-Ld1s0XXwCVjuKOQw .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Ld1s0XXwCVjuKOQw .cluster text{fill:#333;}#mermaid-svg-Ld1s0XXwCVjuKOQw .cluster span{color:#333;}#mermaid-svg-Ld1s0XXwCVjuKOQw div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Ld1s0XXwCVjuKOQw .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-Ld1s0XXwCVjuKOQw rect.text{fill:none;stroke-width:0;}#mermaid-svg-Ld1s0XXwCVjuKOQw .icon-shape,#mermaid-svg-Ld1s0XXwCVjuKOQw .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Ld1s0XXwCVjuKOQw .icon-shape p,#mermaid-svg-Ld1s0XXwCVjuKOQw .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-Ld1s0XXwCVjuKOQw .icon-shape .label rect,#mermaid-svg-Ld1s0XXwCVjuKOQw .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Ld1s0XXwCVjuKOQw .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-Ld1s0XXwCVjuKOQw .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-Ld1s0XXwCVjuKOQw :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

Audit 审计：识别模板化UI痕迹

Direction 定方向：对齐产品品牌语境

Passes 多轮迭代修改，优先局部微调

可选：Playwright快照 + ffmpeg生成演示视频

四、L3证据面板（数字严格对齐快照）

📌 L3标准重申：固定40位commit + blob逐文件校验 + 证据覆盖率≥90% + manifest哈希绑定；仅证明本次审阅的文档样本可复现、防篡改，不代表改造效果、UI兼容性、业务可用性可靠。

五、风险切片、许可红线边界（moderate风险姿态）

所有风险来自静态证据读取，不是高危漏洞，是接入Agent工作流前必须核验的控制点

六、落地验证路线（设计团队、Agent开发团队可直接执行）

#mermaid-svg-o2HBgIZuoU5RLUGf{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-o2HBgIZuoU5RLUGf .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-o2HBgIZuoU5RLUGf .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-o2HBgIZuoU5RLUGf .error-icon{fill:#552222;}#mermaid-svg-o2HBgIZuoU5RLUGf .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-o2HBgIZuoU5RLUGf .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-o2HBgIZuoU5RLUGf .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-o2HBgIZuoU5RLUGf .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-o2HBgIZuoU5RLUGf .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-o2HBgIZuoU5RLUGf .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-o2HBgIZuoU5RLUGf .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-o2HBgIZuoU5RLUGf .marker{fill:#333333;stroke:#333333;}#mermaid-svg-o2HBgIZuoU5RLUGf .marker.cross{stroke:#333333;}#mermaid-svg-o2HBgIZuoU5RLUGf svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-o2HBgIZuoU5RLUGf p{margin:0;}#mermaid-svg-o2HBgIZuoU5RLUGf .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-o2HBgIZuoU5RLUGf .cluster-label text{fill:#333;}#mermaid-svg-o2HBgIZuoU5RLUGf .cluster-label span{color:#333;}#mermaid-svg-o2HBgIZuoU5RLUGf .cluster-label span p{background-color:transparent;}#mermaid-svg-o2HBgIZuoU5RLUGf .label text,#mermaid-svg-o2HBgIZuoU5RLUGf span{fill:#333;color:#333;}#mermaid-svg-o2HBgIZuoU5RLUGf .node rect,#mermaid-svg-o2HBgIZuoU5RLUGf .node circle,#mermaid-svg-o2HBgIZuoU5RLUGf .node ellipse,#mermaid-svg-o2HBgIZuoU5RLUGf .node polygon,#mermaid-svg-o2HBgIZuoU5RLUGf .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-o2HBgIZuoU5RLUGf .rough-node .label text,#mermaid-svg-o2HBgIZuoU5RLUGf .node .label text,#mermaid-svg-o2HBgIZuoU5RLUGf .image-shape .label,#mermaid-svg-o2HBgIZuoU5RLUGf .icon-shape .label{text-anchor:middle;}#mermaid-svg-o2HBgIZuoU5RLUGf .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-o2HBgIZuoU5RLUGf .rough-node .label,#mermaid-svg-o2HBgIZuoU5RLUGf .node .label,#mermaid-svg-o2HBgIZuoU5RLUGf .image-shape .label,#mermaid-svg-o2HBgIZuoU5RLUGf .icon-shape .label{text-align:center;}#mermaid-svg-o2HBgIZuoU5RLUGf .node.clickable{cursor:pointer;}#mermaid-svg-o2HBgIZuoU5RLUGf .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-o2HBgIZuoU5RLUGf .arrowheadPath{fill:#333333;}#mermaid-svg-o2HBgIZuoU5RLUGf .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-o2HBgIZuoU5RLUGf .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-o2HBgIZuoU5RLUGf .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-o2HBgIZuoU5RLUGf .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-o2HBgIZuoU5RLUGf .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-o2HBgIZuoU5RLUGf .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-o2HBgIZuoU5RLUGf .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-o2HBgIZuoU5RLUGf .cluster text{fill:#333;}#mermaid-svg-o2HBgIZuoU5RLUGf .cluster span{color:#333;}#mermaid-svg-o2HBgIZuoU5RLUGf div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-o2HBgIZuoU5RLUGf .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-o2HBgIZuoU5RLUGf rect.text{fill:none;stroke-width:0;}#mermaid-svg-o2HBgIZuoU5RLUGf .icon-shape,#mermaid-svg-o2HBgIZuoU5RLUGf .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-o2HBgIZuoU5RLUGf .icon-shape p,#mermaid-svg-o2HBgIZuoU5RLUGf .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-o2HBgIZuoU5RLUGf .icon-shape .label rect,#mermaid-svg-o2HBgIZuoU5RLUGf .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-o2HBgIZuoU5RLUGf .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-o2HBgIZuoU5RLUGf .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-o2HBgIZuoU5RLUGf :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

Step1：选定目标页面，记录产品目标、品牌约束

Step2：先审计+确认设计方向，签字确认后再进入迭代

Step3：每轮修改生成可回滚Patch，单独验证键盘、移动端、无障碍

Step4：按需开启快照/视频能力；图像付费调用增加预算确认开关

Step5：区分演示素材和正式UI验收标准

落地验收清单：

七、评测总结

unslop 是一个非常有启发性的Agent设计辅助Skill，最大亮点不是一套UI检查规则，而是把「先审计、定方向、再分批修改」的人工设计流程固化给AI，有效缓解AI Agent粗暴重写界面的问题。 它本质是轻量化的流程材料，而非通用UI自动化质检引擎；清单规则是设计偏好，不是普适质量定律；许可为CC BY 4.0，二次使用需要署名。 静态L3证据只能确认文档快照可追溯、流程定义清晰；不能证明它适配所有前端框架、自动保障交互可用性、产出符合品牌规范的界面。

一句话浓缩：它是约束Agent的设计复核流程，不是万能UI打分器；规则可以参考，品牌语境永远优先。

标签

AI Agent、UI设计、前端、开源评测、Claude Skill

分类推荐

人工智能 → AI智能体 / 前端开发

合规声明

本文仅基于固定commit的bounded静态快照完成文档审阅，未部署、未调用Agent、未抓取页面、未生成演示视频；文档线索仅用于阅读导航，不代表UI改造效果、交互兼容性、品牌适配性可保证；二次改编、商用分发本Skill材料，必须遵守CC BY 4.0署名要求。