Communitygithub.com

jrco-dev/julio-antislop-design

专业设计技能:用于打造、重构或审查落地页、应用界面、仪表盘、文档、作品集等,使其看起来是精心设计的而非 AI 生成的。支持中英文请求。

julio-antislop-design 是什么?

julio-antislop-design 是一个专注于对抗 AI 视觉套路的专业设计技能,适用于 Claude Code、Cursor 或 Codex 等 AI 编码代理。它适用于任何涉及界面外观、布局、排版、色彩、动效或感觉的任务——无论用户是否明确提到“设计”。该技能提供两种工作路径:快速路径(用于单组件、小节或修正)和完整路径(用于全新页面、应用或重设计)。其核心原则包括:主题驱动的创意、基于真实参考的方向、以及一个包含无障碍性、诚实性、可追溯性、隐私、性能和技术的绝对底线。它提供丰富的检查工具(如 `check-tokens.mjs`、`check-render.mjs`)和一套完整的基于模式(说服、操作、阅读、体验)的设计决策框架,确保最终输出既非千篇一律,也不带常见的 AI 伪影。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jrco-dev/julio-antislop-design/tree/HEAD/skills/julio-antislop-design

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

julio-antislop-design 是做什么的?

一个由 AI 生成的页面看起来像是所有被浏览页面的平均值:没有错,但也什么都没有被决定。这个技能用决策取代了缺陷:创意来源于主题,方向来自真实参考和跳出平均值的随机抽取,一个底线保护着无障碍性、诚实性和性能,并且在交付前审视自己的作品。仅仅去掉视觉套路是不够的:一个空白干净的页面本身也是一种套路(参见 references/originality.md)。

1. 选择路径

需求路径
小需求:一个组件、一个区域、一项调整、一处修正,或“快点弄”快速(§3)
新页面、新网站、新屏幕、新系统完整(§4)
重做已有内容完整,重设计变体(references/redesign.md)
审查设计使用 references/critique.md 的审查网格和 references/tells.md 的清单,不进行构建

2. 选择模式

所有规则取决于访客在此界面上需要完成什么,而非产品。

模式当访客……时即成功适用界面
说服做出决定并行动落地页、营销页、定价页
操作完成任务应用、仪表盘、管理后台、设置页
阅读理解内容文档、文章、指南、帮助页
体验沉浸于作品中作品集、画廊、展示页

一个需求中包含两个界面:各自使用其模式,共享调色板和字体。

与人协作推进

永远不要让人沉默等待:尽早提问,对每个问题给出建议,一有可行成果就展示。完整路径有四个检查点(简报表格、前三个屏幕、第一个版本、交付),每个都附带一个推荐方案;两个检查点之间,不要连续执行超过十项操作而不展示。详情:references/intake.md 中的“节奏”部分。

3. 快速路径

  1. 读取 DESIGN.md 和 PRODUCT.md(如果存在)并遵守它们。最多一个问题,且仅在某个事实阻碍时提问。
  2. 应用底线(§5)和模式默认缺陷(references/defaults-by-mode.md);所有内容必须通过现有令牌实现,或在没有令牌时声明一个小型比例尺。
  3. 运行 node scripts/check-tokens.mjs <文件> 和 node scripts/check-render.mjs <文件> 至零错误;在 390px 和 1440px 宽度下查看截图。
  4. 输出三行报告:更改内容、通过的检查、无法运行的部分。

不需要完整定框架、随机抽取、或三个主视觉。如果需求扩大(变成整个页面),切换到完整路径。

4. 完整路径,共12步

每一步的详细说明:references/process.md。第1步至第8步在编码之前完成。

  1. 阅读项目、模式、实际可用的图片。
  2. 一次性定框架:项目、品味(所有填充 DESIGN.md 的内容)、素材;最多12个问题,然后形成一份经确认的简报表格。除非有明确的委托(“全权委托”)或无人负责,否则不能免除品味环节。references/intake.md。
  3. 盘点主题:8到12个客户特有的元素;真实、可展示、缺失。PRODUCT.md。
  4. 撰写论点:一个主张和每个部分的证据。
  5. 查看真实参考:从 references/site-models.md 中选取3个网站,其中至少一个来自不同领域;使用 scripts/board.mjs 进行截图。
  6. 抽取方向:运行 node scripts/roll.mjs --mode <模式> --brief "…" --log direction-log.md(原型、卡片、颜色、字体、风险),然后得出5个方向,排除最可能的2个。references/originality.md。
  7. 构思创意(“[主题中的某物] 成为 [一种手法]”,做竞争对手测试),确保“活生生的元素”;写入 DESIGN.md;使用 scripts/explore.mjs 比较前三个屏幕,只选择一个。
  8. 在编码前编写所有文案;在 320px 宽度下,标题不超过两行。
  9. 构建时不带动效:先处理令牌(颜色、字体、排版比例尺、间距比例尺),然后是主视觉、各部分、视觉元素(无照片时:references/visuals.md,在前两个屏幕中加入一个来自主题的视觉锚点),活生生的元素。
  10. 检查:check-tokens.mjs(代码)、check-render.mjs --shots(渲染后的页面)、npx impeccable detect、性能;然后进行收尾工作(references/finish.md)和30条 UX 法则检查(references/ux-principles.md)。
  11. 让新手评审:使用 references/critique.md 的审查网格,重点在原创性维度和“似曾相识”测试;修正,最多进行三轮。
  12. 添加动效,重新检查,连同报告一起交付。

5. 绝对底线

这条底线永远不能逾越:不能出于品味、简报或外部资源。

  • A1 无障碍性:WCAG 2.2 AA 标准(对比度 4.5:1,大文本和控件 3:1),焦点可见,键盘支持,目标尺寸 24px(移动端目标 44px),标题无跳级,替代文本,减少动效,除操作模式外无 JavaScript 也可浏览内容。
  • A2 诚实性:不虚构任何数字、引用、评价、标志、客户或功能;示例内容需在报告中列出并在页面上仅标注一次。
  • A3 可追溯性:每种字体、组件、图片和引用都必须有已验证的真实来源和覆盖其用途的许可证。
  • A4 隐私性:未经书面同意,不得将任何客户数据、设计稿或截图发送给第三方服务。
  • A5 性能:LCP ≤ 2.5 秒,INP ≤ 200 毫秒(实验室 TBT),CLS ≤ 0.1;否则动效应替换为静态图像。references/performance.md。
  • A6 技术规范:颜色、字体、大小和间距仅使用令牌;禁止 transition: all 或动画 width、height、top、left;在 320px 至 1920px 范围内禁止水平滚动;主视觉使用 dvh 或 svh;容器应有最大宽度限制。
  • A7 简报:明确的简报指令可覆盖可解除的默认缺陷,但绝不能覆盖 A1 至 A6。

6. 可解除的默认缺陷,核心要点

每个缺陷解除时必须有与创意或简报相关的书面理由。完整清单:references/defaults-by-mode.md;过时的视觉套路:references/tells.md。

  • 不使用标题装饰线、字母间距过大的大写、或01/02/03编号(除非有真实的序列)。
  • 不使用紫色渐变、文字渐变、发光效果、装饰性玻璃效果、图标-标题-文本的相同卡片行、或用 emoji 作为图标。
  • 不未经品牌原因而使用默认字体(references/typography.md);如果未提供字体,则推荐3对组合(references/font-catalog.md)。
  • 使用模块化的排版比例尺和三级间距比例尺,不使用以外的值(references/spacing.md)。
  • 使用一个背景色、一个文字色、一个强调色;强调色每屏最多使用约4次。
  • 不使用已成陈词的修正方案(米色、衬线字体、陶土色),也不使用我们自己的“干净反套路”风格(references/originality.md §1)。

7. 何时读取什么

场景文件
12步详细说明、交付清单、报告格式references/process.md
定框架:问题、品味、素材、简报表格references/intake.md
各模式规则references/defaults-by-mode.md
盘点、创意、图片、无照片的产品references/idea-and-direction.md
无照片的视觉元素(按得分排序);无文本的主题测试references/visuals.md
收尾:评审发现的缺陷及其检查项references/finish.md
随机抽取、原型、约束、风险、三个主视觉、似曾相识references/originality.md
落地页、主视觉、表单、玻璃效果、产品插图、Bento 布局references/persuade.md
导航和页脚(18 + 15 种模式)references/nav-footer.md
应用、仪表盘、图表、表单references/operate.md
文档、文章、作品集、画廊references/read-and-experience.md
重设计references/redesign.md
调色板references/color.md
字体和排版比例尺;可推荐的字体references/typography.md、references/font-catalog.md
间距和节奏references/spacing.md
动效、效果、代码实现的视频references/motion-and-video.md
各模式的性能references/performance.md
过时的 AI 视觉套路references/tells.md
30条 UX 法则及其应用,以及 UX 检查references/ux-principles.md
真实网站模型;画廊、库、许可证references/site-models.md、references/resources.md
新人评审references/critique.md

只加载当前任务所需的文件。

8. 交付

在底线要求、check-tokens.mjs、check-render.mjs、检测工具、截图、评审(原创性至少4分,无已知样式通过似曾相识测试)以及方向日志全部通过之前,不得交付。完整清单和报告格式:references/process.md。永远不要声明一个未实际运行的检查项。

相关技能