julio-antislop-design 是做什么的?
一个由 AI 生成的页面看起来像是所有被浏览页面的平均值:没有错,但也什么都没有被决定。这个技能用决策取代了缺陷:创意来源于主题,方向来自真实参考和跳出平均值的随机抽取,一个底线保护着无障碍性、诚实性和性能,并且在交付前审视自己的作品。仅仅去掉视觉套路是不够的:一个空白干净的页面本身也是一种套路(参见 references/originality.md)。
1. 选择路径
| 需求 | 路径 |
|---|---|
| 小需求:一个组件、一个区域、一项调整、一处修正,或“快点弄” | 快速(§3) |
| 新页面、新网站、新屏幕、新系统 | 完整(§4) |
| 重做已有内容 | 完整,重设计变体(references/redesign.md) |
| 审查设计 | 使用 references/critique.md 的审查网格和 references/tells.md 的清单,不进行构建 |
2. 选择模式
所有规则取决于访客在此界面上需要完成什么,而非产品。
| 模式 | 当访客……时即成功 | 适用界面 |
|---|---|---|
| 说服 | 做出决定并行动 | 落地页、营销页、定价页 |
| 操作 | 完成任务 | 应用、仪表盘、管理后台、设置页 |
| 阅读 | 理解内容 | 文档、文章、指南、帮助页 |
| 体验 | 沉浸于作品中 | 作品集、画廊、展示页 |
一个需求中包含两个界面:各自使用其模式,共享调色板和字体。
与人协作推进
永远不要让人沉默等待:尽早提问,对每个问题给出建议,一有可行成果就展示。完整路径有四个检查点(简报表格、前三个屏幕、第一个版本、交付),每个都附带一个推荐方案;两个检查点之间,不要连续执行超过十项操作而不展示。详情:references/intake.md 中的“节奏”部分。
3. 快速路径
- 读取
DESIGN.md和PRODUCT.md(如果存在)并遵守它们。最多一个问题,且仅在某个事实阻碍时提问。 - 应用底线(§5)和模式默认缺陷(
references/defaults-by-mode.md);所有内容必须通过现有令牌实现,或在没有令牌时声明一个小型比例尺。 - 运行
node scripts/check-tokens.mjs <文件>和node scripts/check-render.mjs <文件>至零错误;在 390px 和 1440px 宽度下查看截图。 - 输出三行报告:更改内容、通过的检查、无法运行的部分。
不需要完整定框架、随机抽取、或三个主视觉。如果需求扩大(变成整个页面),切换到完整路径。
4. 完整路径,共12步
每一步的详细说明:references/process.md。第1步至第8步在编码之前完成。
- 阅读项目、模式、实际可用的图片。
- 一次性定框架:项目、品味(所有填充
DESIGN.md的内容)、素材;最多12个问题,然后形成一份经确认的简报表格。除非有明确的委托(“全权委托”)或无人负责,否则不能免除品味环节。references/intake.md。 - 盘点主题:8到12个客户特有的元素;真实、可展示、缺失。
PRODUCT.md。 - 撰写论点:一个主张和每个部分的证据。
- 查看真实参考:从
references/site-models.md中选取3个网站,其中至少一个来自不同领域;使用scripts/board.mjs进行截图。 - 抽取方向:运行
node scripts/roll.mjs --mode <模式> --brief "…" --log direction-log.md(原型、卡片、颜色、字体、风险),然后得出5个方向,排除最可能的2个。references/originality.md。 - 构思创意(“[主题中的某物] 成为 [一种手法]”,做竞争对手测试),确保“活生生的元素”;写入
DESIGN.md;使用scripts/explore.mjs比较前三个屏幕,只选择一个。 - 在编码前编写所有文案;在 320px 宽度下,标题不超过两行。
- 构建时不带动效:先处理令牌(颜色、字体、排版比例尺、间距比例尺),然后是主视觉、各部分、视觉元素(无照片时:
references/visuals.md,在前两个屏幕中加入一个来自主题的视觉锚点),活生生的元素。 - 检查:
check-tokens.mjs(代码)、check-render.mjs --shots(渲染后的页面)、npx impeccable detect、性能;然后进行收尾工作(references/finish.md)和30条 UX 法则检查(references/ux-principles.md)。 - 让新手评审:使用
references/critique.md的审查网格,重点在原创性维度和“似曾相识”测试;修正,最多进行三轮。 - 添加动效,重新检查,连同报告一起交付。
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。永远不要声明一个未实际运行的检查项。