ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

impeccable 的 Craft Floor(工艺底线):方向定稿后、动手改 UI 之前的机械核查清单与禁用模式全集

impeccable 的 Craft Floor(工艺底线):方向定稿后、动手改 UI 之前的机械核查清单与禁用模式全集 impeccable 的 Craft Floor工艺底线方向定稿后、动手改 UI 之前的机械核查清单与禁用模式全集【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable本文讲解 impeccable 技能包本仓库根目录skill/SKILL.src.md及其多编辑器分发副本中的核心参考文档 Craft Floor。它回答一个几乎所有 AI 生成界面都会翻车的问题当视觉方向已经拍板、模型正要开始写代码时靠什么把产出钉在“像个专业设计师交付的作品”这条底线之上读完你会掌握 impeccable 的“Verify 九项核查”与“Refuse 禁用清单”的完整内容、它们的数值与判断规则、以及它们与设计检测器 Hook、Finish Reviewer 子代理之间的分工能直接把这套底线套用到你自己的 AI 前端生成流程中。Craft Floor 是 impeccable 在“方向已定、开始动手”这个转折点上加载的一份质量契约。SKILL.md 的 Setup 流程把它列为编辑 UI 前必读的第三步而本仓库的 skill-behavior 测试会用真实 LLM 走一遍工作流断言模型确实在写代码前读到了craft-floor.md——比如文档记载bolder refinement场景中模型依次读取bolder.md、craft-floor.md与当前页面文件后才动手。这篇文章即围绕该文档展开把“底线”两个字拆成可执行、可核对的条目并用仓库里的 Hook、检测器与评审 Agent 印证它在整条流水线中的位置。Craft Floor 是什么加载时机、优先级与“不宣布清单”先看文档开头的三句总纲原文 craft-floor.md在方向定稿之后加载它并且在动手构建时不要宣布这份清单。一份已固定的简报pinned brief或已承诺的视觉世界committed visual world优先于这里的一切你自己的习惯不优先于它。当设计 Hook 处于激活状态时它已经在你编辑的同时强制实施了下面这些机械检查去处理它的发现而不是把每一条规则重新审计一遍。这里规定了三个关键语义加载时机仅在“方向direction已定稿”之后、真正开始编辑 UI 之前加载。SKILL.md 明确“Do not load it for planning-only work”——纯规划阶段不许读它因为它携带的是执行纪律而非规划工具。静默执行加载后不要向用户宣布清单。清单是内化的操作底线不是用来展示的仪式宣布它等于把工艺降格为表演。优先级overrides优先级从高到低是“已固定的简报/已承诺的视觉世界 本清单 模型自己的习惯”。换言之craft floor 是可被简报覆写的默认值但永远不能反过来被模型个人的审美偏好覆盖。这与 SKILL.md 的“The brief wins”原则一脉相承。与 Hook 的分工当项目的设计检测器 Hook 开启见 hooks.md时那些机械可查的项已经由 Hook 在你每次编辑后自动探测并回报。此时正确动作是“处理它的 findings”而不是把每条规则再手动重审一遍——重复审计是浪费是文档明令禁止的“re-auditing each rule”。文档标题叫 “Craft floor” 而非 “Craft standard”词义已经说明它定位地板最低可接受线不是天花板。天花板由各个方向卡片上的 QUALITY BAR品质门槛承担地板则负责“无论方向如何都不能跌破的机械底线”。全篇最后一句呼应了这一点“The floor holds the mechanics; it never picks the direction.”地板掌握机制从不替你做方向选择。Verify九项“对着成品”的核查一次渲染、批量执行Verify 部分的每一个条目都强调是对构建结果的检查a check on the built result不是对意图的检查。你不能声称“我本意是想做得有对比度”你要对着渲染出来的真实像素说话。同时文档要求把它们放进同一批batched检查轮次里一起跑而不是拆成多次截图往返——因为所有检查共享同一次渲染desktop 与 mobile 一起SKILL.md 的“Build fully, inspect once with a batched round”正是同一纪律。逐条展开如下1. 对比度Contrast正文与占位符文本对比度 ≥4.5:1大号文本 ≥3:1对应 WCAG AA 的标准阈值其中占位符 placeholder 被明确列入是多数生成页面漏检的重灾区。在彩色表面上次级文本要从该色相that hue或前景色中“染”出永远不要直接用灰色。灰字压在彩色卡片上是生成模型的标志性失误——灰色不属于任何调色板它只是“没想好”的默认值。2. 纵深Depth阴影必须携带偏移量offset和柔化模糊soft blur即符合真实光影的投射。零偏移的彩色光晕只是装饰a zero-offset colored halo is decoration不是阴影。这在检测器中对应 glow 类规则tests/fixtures/antipatterns 目录下可见glow.html、radial-spotlight-glow.html等探测样本。3. 间距Spacing节奏法则紧凑的分组、慷慨的分隔、标题上方留白大于标题下方留白。关键要求“Read the computed values.”——不要相信你写的 margin 值要读浏览器计算后的实际值因为盒模型叠加、line-height 继承都可能让意图落空。4. 字体排印Type正文行长measure65–75ch。展示级字号上限6remdisplay max 6rem。字距下限-0.04emtracking floor即负字距最多收到 -0.04em防止“挤成一团”的极端负字距仓库 fixture 中extreme-negative-tracking.html正是这类探测样本。标题要平衡balanced层级要有明显的字号与字重梯度obvious scale and weight steps——不能让 H2 和正文长得像双胞胎。必须在每个断点下用真实文案跑一遍run the real copy at every breakpoint修掉一切溢出。假文字/lorem 掩盖的换行问题会在真实内容涌入时爆发。5. 动效Motion页面只允许一个“作者刻意设计”的动效时刻one authored moment而不是到处散落的特效更不是每个 section 都来一套一模一样的入场动画。缓动使用指数级 ease-out且元素应从一个本来就可见的默认状态出发不要先隐藏再弹出制造无意义的延迟。动画视野要突破 transform 与 opacity 的舒适区blur、backdrop-filter、clip-path、mask、shadow都属于可选调色板——前提是它们保持流畅stay smooth。这与参考文档 animate.md、overdrive命令的技术野心一脉相承但 craft floor 给它们套上了“克制”的缰绳。6. 状态与真实内容States全状态覆盖hover、disabled、loading、error、empty一个不能少。再加上真实内容不是演示占位、可用的控件、响应式组合、键盘焦点keyboard focus。第五项意味着一个只能鼠标点击、键盘 Tab 后焦点消失的页面在这一条直接不合格。7. 浏览器原生界面Browser surfaces这是全文最有洞察力的一条值得单独展开。文档指出“你没画的那部分同样要背负你的设计。”文本选区颜色、输入光标caret、自定义滚动条、焦点环focus ring、下划线偏移量underline offset、以及表格数据里的数字字形tabular numerals——这些都由浏览器默认值接管而默认值不属于任何设计系统。你必须从调色板出发为它们逐一设主题theme them from the palette。文档特别点评这是“页面是被建造出来的”还是“被拼装出来的”最廉价的信号也是模型最容易跳过的检查。This is the cheapest signal that a page was built rather than assembled, and the one models skip most reliably.生成模型天然只关心自己写下的那部分 DOM原生选区颜色、数字等宽对齐这类“继承自 UA stylesheet”的细节几乎必然被漏掉因此这条成了人工复核的高性价比抓手。8. 文案Copy使用产品自己的语言而不是套话。控件名要说清它执行的动作按钮不能叫“点击这里”要叫“保存草稿”。错误信息要说清问题与恢复路径errors name the problem and the recovery——“出错了”不是错误信息“无法连接服务器请检查网络后重试”才是。这与 UX 文案专项命令clarify的目标一致见 clarify.md。9. 覆盖度Coverage简报中的每一条需求都必须在页面上存在、且在数秒内可被发现present and findable within seconds。埋在折叠深处、藏在悬停态里的关键需求等同于缺失。这与 finish 评审的“fidelity 矩阵”直接衔接缺失的必达元素是 material fix。Refuse不是“禁止”而是“必须挣回来”的默认值Refuse 部分开宗明义地定义了整份清单的哲学这些是该类别的默认值不是禁令简报自己的措辞可以为其中任何一项赎身the briefs own words can earn any of them。当一个轴是自由的而你去抓取其中某一项说明你根本没有在做决定意识到这一点意味着重写该元素而不是把它软化。这句话值得放慢读三遍。它的意思是当方向没有约束某个轴时你“顺手”用了这些模式 你没有决策你在偷懒。而补救不是给这个卡片加点圆角、把红色调淡一点的“softening”而是重写它。反过来如果简报明确要新粗野主义neobrutalism、要玻璃拟态那这些模式就正当——所以下面是“defaults默认值”而非“bans绝对禁令”唯一的例外是 kicker/eyebrow那条是真正的 ban。分两组看页面脚手架Page scaffolds默认拒绝“图标 标题 正文”的同尺寸卡片阵列作为页面结构。文档直言“卡片是懒惰者的容器Cards are the lazy container嵌套卡片永远错误”。这是 AI 生成 landing page 最泛滥的配方一屏四张等大卡片几乎就是“没设计”的代名词。hero-metric 模板大数字 小标签 支持性统计 一个强调色。这是 SaaS 首页的刻板印象默认拒绝。标题上方的 kicker 或 eyebrow眉题文档明确这是ban不是 default“no brief earns it back”没有任何简报能把它赎回来。“标题自己扛得起自己的分量删掉那个小标签让标题自己说话。”The heading carries its own weight; delete the label and let the heading speak.值得注意的是检测器对这条的机械判定充满语义细节——仓库的 fixture kicker-above-heading.html 展示了“Should flag / Should pass”两组样例追踪字距的大写小标签会被判违规但面包屑、日期行、文章元数据、法律条文编号、步骤指示器、应用面板状态标签等携带真实信息的内容性标签不算 kicker纯大写字距未放大写的标签也不算带data-impeccable-allow-kickers显式标记的品牌系统可豁免。这恰好印证 craft floor 的立场——机械规则之外边界需要判断力。章节编号01 / 02 / 03默认拒绝除非序列本身承载读者需要的信息例如教程步骤、操作顺序。装饰性的序号是廉价的结构假装。为既不需要打断、也不需要受保护焦点的任务开模态框模态框有两大正当理由——打断用户当前流程、或保护焦点如不可跳过的确认。两者都不沾的任务开弹窗纯属给用户添堵。表面习惯Surface habits默认拒绝渐变文字。强调应该来自字重或字号而不是给文字糊一层彩虹。方向世界里视觉重复的gradient类 fixture如dark-gradient-ground.html、oklch-neon-text.html即探测样本。作为装饰的玻璃拟态与模糊glass and blur as decoration rather than as a specific effect——只有在模糊有具体功能目的内容遮挡、层级分离时才成立。卡片、列表项、引用块、提示条上的彩色border-left/border-right超过 1px。大于 1px 的彩色侧边条是“贴了标签的矩形”不是设计。硬偏移阴影box-shadow: 4px 4px 0用在并非真正新粗野主义neobrutalist的世界里。文档毒舌地点评“零模糊的块状阴影是戏服costume不是纵深系统一个没有选择它的世界永远不能把它当作默认值挣回来。”用迷你趋势图sparklines、进度环progress rings和软阴影圆角矩形来“代替”真实内容。占位即欺骗。把等宽字体当“技术感”戏服——monospace 只允许用于代码、数据或度量不能用来给页面贴“我很极客”的标签。用系统展示字体Impact、Arial Black、平台无衬线体充当自有世界页面的 display 主声部。文档要求去获取并自托管一款字型性格与已批准字样相符的字体“离得最近的已安装字体是失败不是 fallback。”the closest installed font is a failure, not a fallback.仓库的字体索引数据 font-index.json 与检测器的overused-font规则见 hooks.md正是为揪出这类“默认字体当个性”而存在。用 Unicode 字符或 emoji 充当图标系统。图标必须被绘制来自真实图标库或手写 SVG且保持一致的描边与字重one consistent stroke and weight。用几何蒙版冒充有机轮廓用圆形、多边形或径向渐变裁剪近似照片主体的边缘是“廉价版效果”比干脆不做更难读。正确做法是从真实图像导出 alpha 蒙版或产出一张剪裁好的素材。Finish Reviewer 的 Truth 检查会点名检测器的organic-clip-path与buried-rasterfindings——正是这条规则的机械化。按“类别”而非“场景”决定明暗主题light or dark picked by category。要从使用场景挑谁在用、在哪用、处于什么环境光下。SaaS 后台不等于必须亮色创意展示不等于必须暗色。在流水线中的位置与 Hook、Detector、Finish Reviewer 的分工craft floor 之所以重要恰恰因为它是**“检测器扫不到的反射”的存放处**。hooks.md 原文写得很清楚Every hook is a mechanical pass. The reflexes no scanner catches live in craft-floor.md, which the skill loads before it edits UI, so they apply whether or not a hook is wired.每个 Hook 都是一次机械扫描。扫描器抓不到的反射存在于 craft-floor.md 中技能在编辑 UI 之前就会加载它因此无论 Hook 是否接线它们都生效。也就是说系统内存在三层防线各自覆盖不同颗粒度Per-edit Hook即时机械层在.tsx/.jsx/.html/.vue/.svelte/.astro/.css等设计相关文件每次编辑后运行回报第一梯队的机械问题——坏图、溢出裁剪、对比度与可读性失败、渐变文字、光晕阴影、设计系统漂移等完整规则分层见 hooks.md。Craft Floor判断层本文档。覆盖“卡片阵列是不是偷懒”“这个序号有没有信息量”“这个模态框该不该存在”“灰色是不是偷懒的次级色”这类无法写成确定性规则的审美判断。它在每次编辑 UI 前被加载无论 Hook 是否激活都成立没有自动 Hook 的会话context.mjs会在结尾发出一条MANUAL_DETECTOR_REQUIRED指令要求手动跑一次检测作为兜底。Stop 深度扫描在会话结束事件上把全量规则集跑一遍本会话改过的所有 UI 文件去重后一次性回报剩余的品味类问题。在流水线的另一端impeccable-finish-reviewer 这个收尾评审子代理把 craft floor 直接设为它的Check 6 Floor它会把截图与 Refuse 清单逐项对照——kicker/eyebrow、新粗野主义世界之外的硬偏移阴影、字符图标、系统展示字体、渐变文字、侧边条等任何被禁元素都是 material fix即使它与 comp 完全一致也不行——因为“构建者写下它之前已经加载了同一条禁令对 comp 的忠实不能授权地板所拒绝的东西”。文档里还记录了一个辛辣的反面教材“最近两次 live 会话带着五个 kicker 过了评审而评审者从未看过它。”这正是 floor 检查存在的原因——Hook 覆盖不到的 harness无 Hook 会话会把整份责任压在评审代理对这份清单的执行上。此外还有两条纪律值得注意degraded/documenter.md 的“不 canonize”原则文档化代理绝不能把 craft-floor 的禁用项写进 DESIGN.md 变成系统规则——kicker、非新粗野主义世界的硬偏移阴影、字符图标、系统展示字体一旦被“风格化归档”一次违规就变成了“家传风格”。文档记载真实事故一个 live 会话发明了五个 kickerdocumenter 随后把它们写成了 DESIGN.md 的规范违规就此升级为 house style。禁用项永远记为“构建携带的缺陷”而非未来页面的设计系统规则。live 模式的自由态同样受约束live.md 规定当event.action为impeccablefreeform时从 SKILL.md 的设计规则 craft-floor 出发工作为 source-preview 目标写全新标记前也要先加载它且生成 variant 时“按构造”遵守对比度、间距与字体的底线完整验证留到 accept 时一次跑完。面向不同模式Persuade / Operate / Read / Experience的共同底座SKILL.md 把界面工作按访问者成功形态分成四个模式Persuade说服与转化landing/marketing、Operate任务完成应用/仪表盘、Read阅读理解文档/长文、Experience沉浸体验作品集/展览。operate.md 明确指出它的精要活在 SKILL.md 的模式定义加 craft-floor 里本文件只是 Operate 面上的纵深扩展。换句话说craft floor 是四模式共享的地板Persuade 页不能因为“要大胆”就跌破对比度Operate 面不能因为“要高效”就交出灰色次级文本Experience 不能因为“要沉浸”就纵容零偏移光晕。模式决定天花板的形状地板对所有人一样高。如何在你的项目里应用这套底线craft floor 的价值并不绑定 impeccable 全家桶把它当作一份可迁移的“动手前自检契约”同样成立把它加载在“方向定稿后、写第一行 UI 前”而不是设计讨论阶段——先解决“做什么方向”再上地板检查“方向执行得干不干净”。不向团队宣布清单把 Verify 项合并进同一批渲染检查桌面 移动一次跑完逐项对照计算值而非目测。用 Refuse 清单做代码审查的减法过滤看到同尺寸卡片阵列、hero 大数字、标题上的小眉题、渐变色文字、emoji 图标时先问“这页的方向世界里这些是否被简报挣回来了”挣不回来就重写元素而不是调色软化。给浏览器原生界面补主题——这是投入产出比最高的一条:selection、caret-color、scrollbar 样式、:focus-visible、下划线的text-underline-offset、表格的font-variant-numeric: tabular-nums一次调色板主题化整页“人工建造感”立涨。若你使用本仓库的 impeccable 技能把这条底线交给 Hook 与 Finish Reviewer 去执行启用hooks见 hooks.md 的动作表on/off/status/ignore-*并在收尾时让impeccable-finish-reviewer跑它的 Floor 检查对机械问题信 Hook 的 findings 即可把人工判断力留给 Hook 扫不到的部分。结语地板管机制天花板管野心Craft floor 用一句话收束全部内容The floor holds the mechanics; it never picks the direction. With every check green, spend the page on the committed world, and when torn between refined and committed, commit.地板掌握机制它从不替你选择方向。当每一项检查都通过后把整页的预算花在已经承诺的视觉世界上当你在“精致”与“忠于承诺的世界”之间犹豫时——忠于承诺。这最后半句是整个 impeccable 设计哲学中最锋利的一刀AI 生成界面最常见的死因不是“不精致”而是在自由轴上抓取了最安全、最不需要决策的默认模式。craft floor 的 Verify 让你不会把糟糕的机制交给用户Refuse 让你不会用懒惰的脚手架冒充设计而最终那句 “when torn between refined and committed, commit” 把 Agent 从“讨好式打磨”中拽出来推向真正有立场的设计决策。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表