尧图网站建设 
Impeccable Craft Floor 深度指南AI 生成界面的质量底线、批量验证清单与拒绝清单【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable本篇技术指南围绕 Impeccable 项目的craft-floor参考文档展开。它定义了 AI 在设计方向确定之后、动手编辑 UI 之前必须加载的质量地板craft floor一套九项可机械验证的检查清单Verify与两族被明确拒绝的惰性模式Refuse。读完本文你将掌握如何把对比度、间距、字体、动效、状态与浏览器原生表面等硬指标落地为可批量执行的检查并理解为何卡片网格 英雄数字 eyebrow 标签这类模板式产出被该项目视为必须重写而非微调的对象以及设计检测 Hook 如何自动承担其中一部分机械检查。一、Craft Floor 是什么定位与加载时机craft-floor不是一篇功能文档而是 Impeccable 技能在工作流中的一道强制关卡。原文档开篇即给出三条加载纪律在方向确定之后加载Load this after the direction is settled。它用于构建build阶段而非规划planning阶段。项目 SKILL.md 的 Setup 第 3 步明确写道After analysis and direction are resolved, loadreference/craft-floor.mdimmediately before editing UI. It carries the quality floor, the absolute bans, and the reflexes no detector catches. Do not load it for planning-only work.构建时不宣读清单build without announcing the checklist——质量底线应内化为执行标准而不是在交付里逐条罗列。优先级明确A pinned brief or the committed visual world overrides anything here; your own habit does not.已固定的 brief如 DESIGN.md 承诺的视觉世界优先级高于本清单而模型自身的固有习惯没有任何优先级。这意味着 floor 是最低标准永远不能取代方向决策。最后一条纪律直接关联到 Impeccable 的自动化能力当设计 Hook 激活时它在你编辑的同时就会强制执行下述机械检查——When the design hook is active it already enforces the mechanical checks below as you edit: act on its findings instead of re-auditing each rule.即不要重复人工逐条审计而是直接处理 Hook 给出的 findings。我们在第六节会还原这条 Hook 的源码链路。二、Verify九项可机械验证的检查清单原文档强调一个关键的执行方式这些检查针对的是构建结果the built result不是意图not an intention。同时它们应当在批量检查轮次中一起运行而不是分多次截图往返——the checks share one render即九项检查共享同一次渲染结果桌面与移动端合并到同一批检查中参见 SKILL.md 中Verify in bounded passes, not a loop的总原则。#检查项硬性参数取自原文档判定要点1Contrast正文与占位文本 ≥ 4.5:1大文本 ≥ 3:1彩色表面上次要文本从该色相或前景色取色绝不使用灰色2Depth阴影必须带 offset 与柔和模糊零 offset 的彩色光晕属于装饰不是深度3Spacing紧凑分组、宽松分隔、标题上方留白多于下方读取计算值computed values而非目测4Type正文行长 65–75chdisplay 最大 6remtracking 下限 -0.04em标题平衡字号与字重阶梯明显在每个断点跑真实文案修复一切溢出5Motion只有一个作者时刻one authored moment从已可见的默认状态做指数缓出效果需超越 transform/opacity 的组合6Stateshover、disabled、loading、error、empty加上真实内容、可用控件、响应式布局、键盘焦点7Browser surfaces文本选区、光标、自定义滚动条、焦点环、下划线偏移、表格数字全部从调色板主题化8Copy产品自己的语言控件命名动作错误命名问题与恢复路径9Coveragebrief 的每一项需求都存在且在数秒内可发现逐条对照 brief 需求2.1 Contrast对比度是硬指标灰色是惰性信号正文与 placeholder 文本需要 ≥ 4.5:1WCAG AA 级别的常见阈值大文本通常指 18px/14pt 以上加粗或 24px/18pt 以上常规文本放宽到 ≥ 3:1。关键规则在第二句在彩色表面上次要文本必须从该色相或前景色派生tint secondary text from that hue or the foreground绝不使用灰色。纯灰是与任何色板都无关的中性色它割裂了表面与文字的视觉血缘——这是本项检查最容易被模型跳过、也最容易被用户一眼看出的破绽。2.2 Depth阴影必须立得住合格阴影的两个必要条件offset偏移soft blur柔和模糊即box-shadow: 0 8px 24px rgba(...)这类形态。反向标准A zero-offset colored halo is decoration——一个没有偏移、只有模糊的彩色光晕是装饰而非深度。霓虹发光glow不属于深度系统。2.3 Spacing读计算值不靠目测节奏模式紧凑的分组tight groups 宽松的分组间分隔generous separation以及标题上方留白多于标题下方——后者是经典的段落归组视觉规律。执行方式被明确写死Read the computed values即必须读取浏览器计算后的实际像素值来核对而不是根据源码中的数值猜测。这与live工作流中基于真实渲染的检查方式一致。2.4 Type一组可直接复用的数值下限正文行长measure65–75ch超出行长会导致阅读疲劳display 级字号上限6rem约 96px防止失控的巨型标题字距收紧下限-0.04em更紧的 tracking 会破坏可读性——项目 skill/reference/craft-floor.md 的 codex 段落补充Tracking stops at -0.04em. -0.02 to -0.03em usually reads better即实际落地时 -0.02 到 -0.03em 通常更耐读标题需要平衡balanced headings字号与字重要有明显的阶梯obvious scale and weight steps而不是靠颜色或装饰撑层级最后一条是硬性动作在每个断点用真实文案运行Run the real copy at every breakpoint并修复一切溢出。2.5 Motion一个作者时刻而非散弹式效果数量纪律one authored moment, not scattered effects——整个页面只有一个精心设计的动效时刻反对每个 section 都放一个完全相同进入动画not one identical entrance on every section。曲线纪律从已可见的默认状态做指数缓出Exponential ease-out from an already-visible default而不是从不可见状态大范围入场。材质纪律动效调色板要超越 transform 与 opacity——blur, backdrop-filter, clip-path, mask, and shadow belong to the palette when they stay smooth。即只要保持流畅模糊、背景滤镜、裁剪路径、遮罩和阴影都可以作为动效材质参与叙事。2.6 States把状态机补全基础五态hover、disabled、loading、error、empty。在此之上还要有真实内容real content、可用的控件working controls、响应式组成responsive composition与键盘焦点keyboard focus。空状态尤其容易被遗漏——它往往是最能体现设计意图的界面。2.7 Browser surfaces模型最稳定跳过的一层这是原文档中唯一带价值判断的条目值得原文引用The parts you did not draw still carry the design. ... they all ship with browser defaults that belong to no design system. 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.你没有亲手画的部分依然在传递设计。浏览器默认的文本选区、光标caret、滚动条、焦点环、下划线偏移量、表格数据的数字字形都不属于任何设计系统必须用调色板重新主题化。原文称这是页面是构建出来而非拼装出来的最廉价信号也是模型最稳定跳过的一层——因为模型看不见这些浏览器层除非被明确要求。对应规则的标识在技能仓库中为rule:skill-craft-browser-surfaces见 skill/reference/craft-floor.md。2.8 Copy 与 Coverage语言与覆盖度Copy使用产品自己的语言。Controls name their action按钮文案说明动作如发布而非确认errors name the problem and the recovery错误信息同时说出问题与恢复路径而不是出错了。Coveragebrief 中的每一条需求都必须存在且能在数秒内被找到present and findable within seconds。这是一条可执行的对标动作交付前把 brief 逐条打勾。三、Refuse拒绝清单的定位——分类默认值不是禁令原文档对本节有一段极其重要的定性必须先理解否则整张清单会被误读为教条These are the categorys defaults, not bans: the briefs own words can earn any of them.清单中的每一项都是**按分类的默认值category defaults不是绝对禁令**——brief 自己的措辞可以赎回earn其中任何一项。但紧接着是两条行为铁律Reaching for one when the axis is free means you were not deciding——当某个轴向是自由的而你仍伸手去拿这些默认模板说明你没有在做决策recognizing that means rewriting the element, not softening it——一旦意识到踩线处理方式是重写该元素而不是弱化它。唯一的例外是kicker/eyebrow眉题This one is a ban, not a default: no brief earns it back.它是整张清单中唯一被升级为绝对禁令的项——标题自己承担重量删掉标签让标题直接说话。3.1 页面脚手架Page scaffolds族同尺寸卡片网格Same-size cards of icon plus heading plus text as the page structure——卡片是惰性容器the lazy container嵌套卡片永远是错的nested cards are always wrong。对应规则rule:skill-ban-identical-card-grids与rule:skill-layout-cards-lazy。英雄数字模板hero-metric template大数字 小标签 支撑性统计 强调色这组数据营销页拼装被整族拒绝rule:skill-ban-hero-metric。眉题/eyebrow唯一绝对禁令任何 brief 都不能赎回rule:skill-ban-eyebrow-on-every-section。章节编号01 / 02 / 03除非序列本身携带读者需要的信息如步骤、阶段否则拒绝rule:skill-ban-numbered-section-markers。模态框A modal for a task that needs neither interruption nor protected focus——一个既不需要打断、也不需要受保护焦点的任务不该用模态框rule:skill-reflex-modal-by-reflex。3.2 表面习惯Surface habits族渐变文字强调来自字重或字号而不是background-clip: text的渐变rule:skill-ban-gradient-text。玻璃拟态与装饰性模糊glass 与 blur 只有在承担特定效果时才被允许作为装饰即为拒绝rule:skill-ban-glassmorphism-default。彩色侧边条卡片、列表项、callout、alert 上超过 1px 的border-left/border-rightrule:skill-ban-side-stripe-borders。硬偏移阴影box-shadow: 4px 4px 0这类零模糊块状阴影只属于真正的新粗野主义neobrutalist世界The zero-blur block shadow is a costume, not a depth system——一个没有选择该世界观的世界永远不能把它当默认值rule:skill-ban-hard-offset-shadow。用图表元素代替内容Sparklines迷你趋势线、进度环、带柔和阴影的圆角矩形当它们顶替真实内容时被拒绝rule:skill-reflex-decorative-chrome。等宽字体做技术感戏服monospace 只用于代码、数据或度量不能拿来假装技术味rule:skill-reflex-mono-as-technical。系统 display 字体Impact、Arial Black、平台无衬线体不能作为自有世界own-world page的 display 声音。必须**获取并自托管source and self-host**一个气质与已批准字标匹配的字体the closest installed font is a failure, not a fallback——最接近的已装字体是失败不是回退rule:skill-ban-system-display-face。Unicode 符号/emoji 冒充图标系统图标必须是绘制出来的——来自真实图标库或手写 SVG且保持一致的笔画与字重rule:skill-ban-glyph-icons。几何遮罩冒充有机轮廓用圆形、多边形或 radial-gradient 切割来近似照片主体的边缘是廉价版效果比直接省略读起来更糟正确做法是从真实图像推导 alpha matte或产出抠图资产rule:skill-ban-geometric-occlusion-mask。按分类选明暗主题Light or dark picked by category——不要因为这是金融产品就选深色。要从使用场景谁、在哪、什么环境光下决定rule:skill-reflex-theme-by-habit。四、来自供应商补充段的附加纪律项目 skill/reference/craft-floor.md 在正文之外还带有面向特定模型的补充段落可视为对上述两条清单的实例化注解codex 段针对擅长产出看起来正确但缺乏真实的模型输出高程只声明一次——边框或阴影二选一A 1px border under a wide soft shadow is the ghost card卡片圆角保持在12–16px药丸形pill只留给小控件真插画或者没有sketch 风格的 SVG 场景、loose-sketch/doodle类名、feTurbulence颗粒质感都被视为业余但禁止的是用 SVG 模仿图片SVG 做几何仍然是头等媒体——清晰的矢量形状、图表、动画线稿、着色器驱动效果都允许rule:skill-ban-codex-sketchy-svg背景是表面只能来自主题世界的纹理repeating-linear-gradient条纹与双轴网格背景只有在真实画布、地图、蓝图或测量工具之下才成立诚实标注插画值声明与配置必须来自提供的真实信息示意性数值要如实标注rule:skill-ban-codex-x-theater。gemini 段永远不要悬停时动画图片本体直接或通过其父级触发都不行图片不是动作目标反馈应该给容器rule:skill-interaction-gemini-no-image-hover。这一条可以回看 2.5 的超越 transform/opacity——它划清了哪些元素可以承载动效、哪些不能。五、检测器如何把这些规则变成可判定的 finding拒绝清单不是一句口号——仓库的检测引擎把其中多项规则实现成了可自动化判定的反模式antipattern。在 regex_matchers.rs 中可以看到gradient-text规则的实现它同时匹配原生 CSS 与 Tailwind 两种写法background-clip: text gradient与bg-clip-text bg-gradient都会被识别并输出对应的 finding 文案。与之配套的回归夹具fixtures也证实了这些规则的可测性。在 tests/fixtures/antipatterns 目录下可以找到直接对应拒绝清单的测试页hero-eyebrow-chip.html——对应眉题/eyebrow 绝对禁令kicker-above-heading.html——对应标题上方标签模式numbered-section-markers.html——对应章节编号默认拒绝。这解释了原文档末尾那句reflexes no detector catches见 SKILL.md Setup 第 3 步的含义检测器能抓到一部分但 floor 的完整版——尤其是这些是默认值而非禁令的判断力——只能靠模型在执行时把握。六、设计 Hook让机械检查在编辑时自动执行原文档所说的 When the design hook is active it already enforces the mechanical checks below as you edit 在仓库中有完整的实现链路。1. 触发时机插件注册了两个 Hook 事件见 plugin/hooks/hooks.jsonPostToolUse匹配Edit|Write每次 UI 文件编辑后运行impeccable hook状态消息为 Checking UI changesStop对话停止时运行深度检查状态消息为 Design deep pass。2. 引擎实现Hook 的 Rust 实现位于 hook_lib.rs其中定义了默认配置HookConfig::defaultper_edit_rules: immediate——编辑后立即检查规则会话内编辑计数阈值EDIT_COUNT_THRESHOLD 6hook_lib.rs超过后抑制进一步的设计提示提示改用audit复查输出上限max_findings: 5、max_chars: 8000、max_file_bytes: 131072约 128KB防止检查结果淹没工作区受检扩展名ALLOWED_EXTS覆盖.tsx/.jsx/.html/.htm/.vue/.svelte/.astro/.css/.scss/.sass/.less/.ts/.jshook_lib.rs。3. 与 craft-floor 的衔接在 live 变体工作流中instructions.rs 对自由形式动作给出的指令是 work from SKILL.md rules plus craft-floor.md; no sub-command file插入模式insert mode的指令也明确要求 load craft-floor.md before writing net-new markupinstructions.rs。也就是说只要是生成全新标记net-new markupcraft-floor 都是必读前置。4. 行为契约测试scenarios.test.mjs 验证了工作流契约——craft-floor.md与polish.md等参考文件必须在正确的阶段才能被加载规划阶段不得提前调用确保方向确定之后、编辑之前这一时序不被打破。七、结语地板决定机制永不决定方向原文档以两句话收尾也是整个 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.地板只持有机制永不选择方向对比度、间距、动效曲线、状态完整性这些是工程正确性而这个页面属于哪个视觉世界是方向决策由 brief 与 DESIGN.md 决定floor 无权干预。九项全绿之后把页面花在已承诺的世界上检查通过不是终点而是把预算投向已承诺的视觉世界the committed world的起点。在精致与忠诚之间摇摆时选择忠诚commit对 brief 的忠诚高于一切抛光冲动。对 AI 驱动的前端工作流而言这份文档的价值在于它把一个容易被看起来不错糊弄过去的环节拆解成了可验证、可批量执行、可被检测器自动承担的硬指标同时为创造力保留了明确的出口——所有默认拒绝项都可以被 brief 赎回除了眉题。理解并落实这层地板是让模型产出从拼装感迈向构建感的最短路径。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Impeccable Craft Floor 深度指南：AI 生成界面的质量底线、批量验证清单与拒绝清单
Impeccable Craft Floor 深度指南AI 生成界面的质量底线、批量验证清单与拒绝清单【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable本篇技术指南围绕 Impeccable 项目的craft-floor参考文档展开。它定义了 AI 在设计方向确定之后、动手编辑 UI 之前必须加载的质量地板craft floor一套九项可机械验证的检查清单Verify与两族被明确拒绝的惰性模式Refuse。读完本文你将掌握如何把对比度、间距、字体、动效、状态与浏览器原生表面等硬指标落地为可批量执行的检查并理解为何卡片网格 英雄数字 eyebrow 标签这类模板式产出被该项目视为必须重写而非微调的对象以及设计检测 Hook 如何自动承担其中一部分机械检查。一、Craft Floor 是什么定位与加载时机craft-floor不是一篇功能文档而是 Impeccable 技能在工作流中的一道强制关卡。原文档开篇即给出三条加载纪律在方向确定之后加载Load this after the direction is settled。它用于构建build阶段而非规划planning阶段。项目 SKILL.md 的 Setup 第 3 步明确写道After analysis and direction are resolved, loadreference/craft-floor.mdimmediately before editing UI. It carries the quality floor, the absolute bans, and the reflexes no detector catches. Do not load it for planning-only work.构建时不宣读清单build without announcing the checklist——质量底线应内化为执行标准而不是在交付里逐条罗列。优先级明确A pinned brief or the committed visual world overrides anything here; your own habit does not.已固定的 brief如 DESIGN.md 承诺的视觉世界优先级高于本清单而模型自身的固有习惯没有任何优先级。这意味着 floor 是最低标准永远不能取代方向决策。最后一条纪律直接关联到 Impeccable 的自动化能力当设计 Hook 激活时它在你编辑的同时就会强制执行下述机械检查——When the design hook is active it already enforces the mechanical checks below as you edit: act on its findings instead of re-auditing each rule.即不要重复人工逐条审计而是直接处理 Hook 给出的 findings。我们在第六节会还原这条 Hook 的源码链路。二、Verify九项可机械验证的检查清单原文档强调一个关键的执行方式这些检查针对的是构建结果the built result不是意图not an intention。同时它们应当在批量检查轮次中一起运行而不是分多次截图往返——the checks share one render即九项检查共享同一次渲染结果桌面与移动端合并到同一批检查中参见 SKILL.md 中Verify in bounded passes, not a loop的总原则。#检查项硬性参数取自原文档判定要点1Contrast正文与占位文本 ≥ 4.5:1大文本 ≥ 3:1彩色表面上次要文本从该色相或前景色取色绝不使用灰色2Depth阴影必须带 offset 与柔和模糊零 offset 的彩色光晕属于装饰不是深度3Spacing紧凑分组、宽松分隔、标题上方留白多于下方读取计算值computed values而非目测4Type正文行长 65–75chdisplay 最大 6remtracking 下限 -0.04em标题平衡字号与字重阶梯明显在每个断点跑真实文案修复一切溢出5Motion只有一个作者时刻one authored moment从已可见的默认状态做指数缓出效果需超越 transform/opacity 的组合6Stateshover、disabled、loading、error、empty加上真实内容、可用控件、响应式布局、键盘焦点7Browser surfaces文本选区、光标、自定义滚动条、焦点环、下划线偏移、表格数字全部从调色板主题化8Copy产品自己的语言控件命名动作错误命名问题与恢复路径9Coveragebrief 的每一项需求都存在且在数秒内可发现逐条对照 brief 需求2.1 Contrast对比度是硬指标灰色是惰性信号正文与 placeholder 文本需要 ≥ 4.5:1WCAG AA 级别的常见阈值大文本通常指 18px/14pt 以上加粗或 24px/18pt 以上常规文本放宽到 ≥ 3:1。关键规则在第二句在彩色表面上次要文本必须从该色相或前景色派生tint secondary text from that hue or the foreground绝不使用灰色。纯灰是与任何色板都无关的中性色它割裂了表面与文字的视觉血缘——这是本项检查最容易被模型跳过、也最容易被用户一眼看出的破绽。2.2 Depth阴影必须立得住合格阴影的两个必要条件offset偏移soft blur柔和模糊即box-shadow: 0 8px 24px rgba(...)这类形态。反向标准A zero-offset colored halo is decoration——一个没有偏移、只有模糊的彩色光晕是装饰而非深度。霓虹发光glow不属于深度系统。2.3 Spacing读计算值不靠目测节奏模式紧凑的分组tight groups 宽松的分组间分隔generous separation以及标题上方留白多于标题下方——后者是经典的段落归组视觉规律。执行方式被明确写死Read the computed values即必须读取浏览器计算后的实际像素值来核对而不是根据源码中的数值猜测。这与live工作流中基于真实渲染的检查方式一致。2.4 Type一组可直接复用的数值下限正文行长measure65–75ch超出行长会导致阅读疲劳display 级字号上限6rem约 96px防止失控的巨型标题字距收紧下限-0.04em更紧的 tracking 会破坏可读性——项目 skill/reference/craft-floor.md 的 codex 段落补充Tracking stops at -0.04em. -0.02 to -0.03em usually reads better即实际落地时 -0.02 到 -0.03em 通常更耐读标题需要平衡balanced headings字号与字重要有明显的阶梯obvious scale and weight steps而不是靠颜色或装饰撑层级最后一条是硬性动作在每个断点用真实文案运行Run the real copy at every breakpoint并修复一切溢出。2.5 Motion一个作者时刻而非散弹式效果数量纪律one authored moment, not scattered effects——整个页面只有一个精心设计的动效时刻反对每个 section 都放一个完全相同进入动画not one identical entrance on every section。曲线纪律从已可见的默认状态做指数缓出Exponential ease-out from an already-visible default而不是从不可见状态大范围入场。材质纪律动效调色板要超越 transform 与 opacity——blur, backdrop-filter, clip-path, mask, and shadow belong to the palette when they stay smooth。即只要保持流畅模糊、背景滤镜、裁剪路径、遮罩和阴影都可以作为动效材质参与叙事。2.6 States把状态机补全基础五态hover、disabled、loading、error、empty。在此之上还要有真实内容real content、可用的控件working controls、响应式组成responsive composition与键盘焦点keyboard focus。空状态尤其容易被遗漏——它往往是最能体现设计意图的界面。2.7 Browser surfaces模型最稳定跳过的一层这是原文档中唯一带价值判断的条目值得原文引用The parts you did not draw still carry the design. ... they all ship with browser defaults that belong to no design system. 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.你没有亲手画的部分依然在传递设计。浏览器默认的文本选区、光标caret、滚动条、焦点环、下划线偏移量、表格数据的数字字形都不属于任何设计系统必须用调色板重新主题化。原文称这是页面是构建出来而非拼装出来的最廉价信号也是模型最稳定跳过的一层——因为模型看不见这些浏览器层除非被明确要求。对应规则的标识在技能仓库中为rule:skill-craft-browser-surfaces见 skill/reference/craft-floor.md。2.8 Copy 与 Coverage语言与覆盖度Copy使用产品自己的语言。Controls name their action按钮文案说明动作如发布而非确认errors name the problem and the recovery错误信息同时说出问题与恢复路径而不是出错了。Coveragebrief 中的每一条需求都必须存在且能在数秒内被找到present and findable within seconds。这是一条可执行的对标动作交付前把 brief 逐条打勾。三、Refuse拒绝清单的定位——分类默认值不是禁令原文档对本节有一段极其重要的定性必须先理解否则整张清单会被误读为教条These are the categorys defaults, not bans: the briefs own words can earn any of them.清单中的每一项都是**按分类的默认值category defaults不是绝对禁令**——brief 自己的措辞可以赎回earn其中任何一项。但紧接着是两条行为铁律Reaching for one when the axis is free means you were not deciding——当某个轴向是自由的而你仍伸手去拿这些默认模板说明你没有在做决策recognizing that means rewriting the element, not softening it——一旦意识到踩线处理方式是重写该元素而不是弱化它。唯一的例外是kicker/eyebrow眉题This one is a ban, not a default: no brief earns it back.它是整张清单中唯一被升级为绝对禁令的项——标题自己承担重量删掉标签让标题直接说话。3.1 页面脚手架Page scaffolds族同尺寸卡片网格Same-size cards of icon plus heading plus text as the page structure——卡片是惰性容器the lazy container嵌套卡片永远是错的nested cards are always wrong。对应规则rule:skill-ban-identical-card-grids与rule:skill-layout-cards-lazy。英雄数字模板hero-metric template大数字 小标签 支撑性统计 强调色这组数据营销页拼装被整族拒绝rule:skill-ban-hero-metric。眉题/eyebrow唯一绝对禁令任何 brief 都不能赎回rule:skill-ban-eyebrow-on-every-section。章节编号01 / 02 / 03除非序列本身携带读者需要的信息如步骤、阶段否则拒绝rule:skill-ban-numbered-section-markers。模态框A modal for a task that needs neither interruption nor protected focus——一个既不需要打断、也不需要受保护焦点的任务不该用模态框rule:skill-reflex-modal-by-reflex。3.2 表面习惯Surface habits族渐变文字强调来自字重或字号而不是background-clip: text的渐变rule:skill-ban-gradient-text。玻璃拟态与装饰性模糊glass 与 blur 只有在承担特定效果时才被允许作为装饰即为拒绝rule:skill-ban-glassmorphism-default。彩色侧边条卡片、列表项、callout、alert 上超过 1px 的border-left/border-rightrule:skill-ban-side-stripe-borders。硬偏移阴影box-shadow: 4px 4px 0这类零模糊块状阴影只属于真正的新粗野主义neobrutalist世界The zero-blur block shadow is a costume, not a depth system——一个没有选择该世界观的世界永远不能把它当默认值rule:skill-ban-hard-offset-shadow。用图表元素代替内容Sparklines迷你趋势线、进度环、带柔和阴影的圆角矩形当它们顶替真实内容时被拒绝rule:skill-reflex-decorative-chrome。等宽字体做技术感戏服monospace 只用于代码、数据或度量不能拿来假装技术味rule:skill-reflex-mono-as-technical。系统 display 字体Impact、Arial Black、平台无衬线体不能作为自有世界own-world page的 display 声音。必须**获取并自托管source and self-host**一个气质与已批准字标匹配的字体the closest installed font is a failure, not a fallback——最接近的已装字体是失败不是回退rule:skill-ban-system-display-face。Unicode 符号/emoji 冒充图标系统图标必须是绘制出来的——来自真实图标库或手写 SVG且保持一致的笔画与字重rule:skill-ban-glyph-icons。几何遮罩冒充有机轮廓用圆形、多边形或 radial-gradient 切割来近似照片主体的边缘是廉价版效果比直接省略读起来更糟正确做法是从真实图像推导 alpha matte或产出抠图资产rule:skill-ban-geometric-occlusion-mask。按分类选明暗主题Light or dark picked by category——不要因为这是金融产品就选深色。要从使用场景谁、在哪、什么环境光下决定rule:skill-reflex-theme-by-habit。四、来自供应商补充段的附加纪律项目 skill/reference/craft-floor.md 在正文之外还带有面向特定模型的补充段落可视为对上述两条清单的实例化注解codex 段针对擅长产出看起来正确但缺乏真实的模型输出高程只声明一次——边框或阴影二选一A 1px border under a wide soft shadow is the ghost card卡片圆角保持在12–16px药丸形pill只留给小控件真插画或者没有sketch 风格的 SVG 场景、loose-sketch/doodle类名、feTurbulence颗粒质感都被视为业余但禁止的是用 SVG 模仿图片SVG 做几何仍然是头等媒体——清晰的矢量形状、图表、动画线稿、着色器驱动效果都允许rule:skill-ban-codex-sketchy-svg背景是表面只能来自主题世界的纹理repeating-linear-gradient条纹与双轴网格背景只有在真实画布、地图、蓝图或测量工具之下才成立诚实标注插画值声明与配置必须来自提供的真实信息示意性数值要如实标注rule:skill-ban-codex-x-theater。gemini 段永远不要悬停时动画图片本体直接或通过其父级触发都不行图片不是动作目标反馈应该给容器rule:skill-interaction-gemini-no-image-hover。这一条可以回看 2.5 的超越 transform/opacity——它划清了哪些元素可以承载动效、哪些不能。五、检测器如何把这些规则变成可判定的 finding拒绝清单不是一句口号——仓库的检测引擎把其中多项规则实现成了可自动化判定的反模式antipattern。在 regex_matchers.rs 中可以看到gradient-text规则的实现它同时匹配原生 CSS 与 Tailwind 两种写法background-clip: text gradient与bg-clip-text bg-gradient都会被识别并输出对应的 finding 文案。与之配套的回归夹具fixtures也证实了这些规则的可测性。在 tests/fixtures/antipatterns 目录下可以找到直接对应拒绝清单的测试页hero-eyebrow-chip.html——对应眉题/eyebrow 绝对禁令kicker-above-heading.html——对应标题上方标签模式numbered-section-markers.html——对应章节编号默认拒绝。这解释了原文档末尾那句reflexes no detector catches见 SKILL.md Setup 第 3 步的含义检测器能抓到一部分但 floor 的完整版——尤其是这些是默认值而非禁令的判断力——只能靠模型在执行时把握。六、设计 Hook让机械检查在编辑时自动执行原文档所说的 When the design hook is active it already enforces the mechanical checks below as you edit 在仓库中有完整的实现链路。1. 触发时机插件注册了两个 Hook 事件见 plugin/hooks/hooks.jsonPostToolUse匹配Edit|Write每次 UI 文件编辑后运行impeccable hook状态消息为 Checking UI changesStop对话停止时运行深度检查状态消息为 Design deep pass。2. 引擎实现Hook 的 Rust 实现位于 hook_lib.rs其中定义了默认配置HookConfig::defaultper_edit_rules: immediate——编辑后立即检查规则会话内编辑计数阈值EDIT_COUNT_THRESHOLD 6hook_lib.rs超过后抑制进一步的设计提示提示改用audit复查输出上限max_findings: 5、max_chars: 8000、max_file_bytes: 131072约 128KB防止检查结果淹没工作区受检扩展名ALLOWED_EXTS覆盖.tsx/.jsx/.html/.htm/.vue/.svelte/.astro/.css/.scss/.sass/.less/.ts/.jshook_lib.rs。3. 与 craft-floor 的衔接在 live 变体工作流中instructions.rs 对自由形式动作给出的指令是 work from SKILL.md rules plus craft-floor.md; no sub-command file插入模式insert mode的指令也明确要求 load craft-floor.md before writing net-new markupinstructions.rs。也就是说只要是生成全新标记net-new markupcraft-floor 都是必读前置。4. 行为契约测试scenarios.test.mjs 验证了工作流契约——craft-floor.md与polish.md等参考文件必须在正确的阶段才能被加载规划阶段不得提前调用确保方向确定之后、编辑之前这一时序不被打破。七、结语地板决定机制永不决定方向原文档以两句话收尾也是整个 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.地板只持有机制永不选择方向对比度、间距、动效曲线、状态完整性这些是工程正确性而这个页面属于哪个视觉世界是方向决策由 brief 与 DESIGN.md 决定floor 无权干预。九项全绿之后把页面花在已承诺的世界上检查通过不是终点而是把预算投向已承诺的视觉世界the committed world的起点。在精致与忠诚之间摇摆时选择忠诚commit对 brief 的忠诚高于一切抛光冲动。对 AI 驱动的前端工作流而言这份文档的价值在于它把一个容易被看起来不错糊弄过去的环节拆解成了可验证、可批量执行、可被检测器自动承担的硬指标同时为创造力保留了明确的出口——所有默认拒绝项都可以被 brief 赎回除了眉题。理解并落实这层地板是让模型产出从拼装感迈向构建感的最短路径。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考