-
Notifications
You must be signed in to change notification settings - Fork 14
Design Discipline
AGF 设计治理的第三层：审美判断。补 token 层（
DESIGN.md）与机械审查层（code-reviewer grep 硬编码）之间的空白——前两层管"视觉值是否合规引用"，本层管"设计方向与审美有没有 AI 味"。权威源：ADR-013 + skill
agf-design-discipline。本页是教学层，硬规则以主仓为准（Wiki 与主仓冲突时以主仓为准）。
LLM 生成 UI 时高频落入统计默认的"AI 味"。这些模式不违反 token 纪律、也过得了机械审查（颜色都引自 token、没硬编码），但产出"模板化、一眼 AI"：
- AI 紫蓝渐变（
from-indigo-* to-violet-*）、neon glow - 三等分等高 feature 卡（
grid-cols-3一模一样） - emoji 当 icon（🔥✨🚀）
- 假数据假品牌名（John Doe / Acme / Nexus）
- Inter 作默认字体
- 纯黑
#000/ 纯白#fff - 居中 hero（模板化）
- div 伪造截图 / dashboard
此前 AGF 没有机制拦这些——往往到 UAT 阶段才发现"视觉不达标"再返工。设计纪律层把审查前置到设计产出环节。
| 层 | 管 | 承载 |
|---|---|---|
| token 层 | 视觉值是什么（色 / 字 / 间距 / 圆角） |
DESIGN.md（SSOT）+ coding.md 设计 token 纪律
|
| 机械审查层 | 值是否合规引用（grep 硬编码 / on-* 配对 / token 在册） | code-reviewer 设计 token 审查项 |
| 设计纪律层（本层） | 设计方向与审美判断（AI Tells / 三刻度 / Design Read / motion 红线） | skill agf-design-discipline + code-reviewer 审美纪律审查项 + agf-design-precheck.sh
|
纪律层不重声明 token（指向 DESIGN.md）、不做 grep（指向 code-reviewer），只管判断层。
灵感来自 taste-skill，但 taste-skill 是营销页导向，AGF 是产品 UI（登录 / 列表 / 表单 / 详情）——高 MOTION 编排在产品 UI 里是反模式，故裁剪。
写设计前先输出一句声明，落 spec.md 顶部：
Reading this as: 产品 UI（后台用户列表）for 内部运营, with a 克制 B2B language, leaning toward shadcn/ui DataTable + 中性灰 + 低 motion, VARIANCE/MOTION/DENSITY = 4/3/中。
| 刻度 | 产品 UI 默认 |
|---|---|
| VARIANCE（布局实验度） | ≤ 5 |
| MOTION（动效深度） | ≤ 4 |
| DENSITY（信息密度） | 中 |
刻度是"风格参数"不是"视觉值"——不进 DESIGN.md token YAML，落 spec.md 顶部的 Design Read 声明。
紫渐变 / 三等分卡 / emoji icon / 假数据 / Inter 默认 / 纯黑白 / 居中 hero / div 伪造截图……（完整清单 + 每条的 override 条件见 skill §4）。
agf-design-precheck.sh 机筛 hex / 100vh / emoji / Inter / 紫渐变 / grid-cols-3（advisory）→ reviewer 人审 AI Tells + motion 红线。
-
icon 库：taste-skill 禁
lucide-react→ AGF 被 ADR-000 锁 shadcn/ui（默认配 lucide）→ 只禁 emoji 当 icon，不禁 lucide - 设计系统：taste-skill 引导 Material / Fluent / Carbon 多系统 → AGF 锁 shadcn/ui + Tailwind v4 → 只锚定 shadcn/ui + WCAG
| 产品 UI 禁 | 产品 UI 允许 |
|---|---|
| scroll-hijack / parallax / GSAP pinning / kinetic-type | hover / active transition |
window.addEventListener('scroll') |
入场 reveal（whileInView / IntersectionObserver） |
useState 跟踪连续输入值（每帧重渲染） |
状态过渡（loading skeleton / toast / modal） |
| 磁吸按钮 / 3D tilt（营销页花活） |
:active 触觉反馈（-translate-y-[1px]） |
动画只动 transform / opacity，守 prefers-reduced-motion
|
营销 / 落地页 feature 若 PL 显式声明，可放开 MOTION 到 5-7（仍守 reduced-motion），但不放开到 scroll-hijack / GSAP。
| 角色 | 何时 | 做什么 |
|---|---|---|
uiux-designer |
产出 spec.md / index.html 前 | 给 Design Read 声明 + 自查 9 维（原 8 维工程 + 第 9 维审美） |
frontend-dev |
据 design 实现 UI 时 | 守 AI Tells，防重新引入 AI 味 |
code-reviewer |
含前端样式 / 原型改动的 PR | 跑 agf-design-precheck.sh step 0 + AI Tells 人审 + motion 红线核 |
product-lead |
派工时 | 声明 feature 页面类型（产品 UI vs 营销页，决定刻度档） |
- ADR-013 — 治理边界 + 决策 + 备选否决
-
skill
agf-design-discipline— 规则主体（规则 SSOT） -
DESIGN.md— 设计 token SSOT（v6.14.0 扩 font-family / dark / shadow / motion / z-index） - CHANGELOG v6.14.0 — 落地条目