ckw-design

设计（入口）

当用户要求构建或设计网页 UI 时，请使用此技能：包括组件、页面、仪表盘、着陆页、React/Vue/HTML-CSS 布局或任何前端界面。目标是打造独具特色、达到生产级水准的成果，避免千篇一律的 AI 美学。

在报告任何设计“已完成”之前：先渲染设计，再让独立的评审者评审图像（而非代码，也不是自我评分）——参见 design-spatial §1。盲目生成无法察觉自身的布局冲突；这适用于所有设计产出，而不仅仅是空间设计。

强制横向溢出检查关卡——任何网页 UI 在标记为“已完成”之前都必须通过。 在窄屏宽度（约 390px 和 1024px），于本轮中测量 document.documentElement.scrollWidth - document.documentElement.clientWidth， 并确认结果为 0。此问题在桌面宽度下不可见，而且每次行（页眉、导航、工具栏）新增项目时都会再次出现，因此会反复流入产品。默认在页眉/工具栏行中使用 flex-wrap:wrap，并设置 body{overflow-x:clip}；**每次向水平行添加元素后都要重新测量。**完整流程和复发案例：design-spatial §4。 如果你没有测量窄屏，就还没完成——不要声称已完成。

子技能（在相关时加载）

• design-thinking — 每项设计任务都要加载。用于确定目的、调性、领域、色彩体系、评审标准及跨领域视角（电影、建筑、营销、UX、汽车、工业设计）。参见 design-thinking/SKILL.md。
• design-system — 实施时加载：设计令牌、排版、动效、色彩语义、背景。构建组件、页面或设计系统时使用。参见 design-system/SKILL.md。
• design-spatial — 编排布局时加载：明确的网格与 8 点间距约束、视觉重量/平衡/对齐，以及先渲染再评审的视觉循环。用于解决“空间理解不佳”问题——生成的布局居中却松散、对齐不准，或在某些宽度下出现问题。参见 design-spatial/SKILL.md。
• design-ux — 审查可用性（不只是外观）时加载：UI“感觉不对”/“用起来很糟糕”、难以学习、需要一大段说明，或任何即将发布的交互式工具/编辑器/应用。通过独立的全新视角评审者，依据 Nielsen 的 10 项原则及交互启发式评估渲染后的 UI，并给出按优先级排序的修复清单。可用性 ≠ 美学。参见 design-ux/SKILL.md。
• design-philosophy — 高概念设计、营销活动，或用户要求视觉理念、宣言或鲜明艺术风格时加载。参见 design-philosophy/SKILL.md。

视觉素材——生成或搜集

当 design-thinking 判断需要视觉素材（徽标、图标、主视觉图片、纹理、背景）时：

1. 生成 → 使用图像生成模型或 API 创建合成/品牌素材。
2. 搜集真实/档案素材 → 搜索免费图库或档案图像，通常比生成更便宜、更真实。
3. 根据 design-thinking 的输出（调性、领域、色彩体系）拟定提示词/搜索词。
4. 按照设计理念评估，完善后整合到构建成果中。

LLM 辅助工作——始终标注模型和成本

当设计工作涉及运行 LLM（生成素材、VLM 分析、布局评估、提示词生成等）时：

• **运行前：**说明将使用哪个模型以及预估成本（例如，“gpt-4o-mini · 约 $0.005/张图片”或“FLUX v1 · 每次生成约 $0.006”）。
• **获得结果后：**为输出标注所用模型、与预估不同的实际成本，以及任何关键参数（seed、提示词、设置）。成本必须对用户可见（显示在消息、联系表标题或素材说明中），不能藏在日志里。
• **原因：**用户需要判断成本与质量之间的权衡是否值得。未标注或隐藏成本，会掩盖最重要的影响因素。此规则与生成素材的 media-attribution-rule 相呼应，并将其扩展到设计工作流中的任何 LLM 操作。

示例：

• “正在用 gpt-4o-mini 评估 8 个设计的布局 · 预估总计约 $0.04”（运行前）。
• 联系表标题：“FLUX v1 · 总计 $0.48（6 次生成 × $0.08）”（完成后）。
• 素材说明：“hero_banner_flux-dev_seed3891.jpg”（seed 可实现结果复现）。
• 不确定性滑块结果：“对 46,978 张图片进行 VLM 分流 · gpt-4o-mini · 约 $9.40”（运行前）；“✓ 已完成：已分类 12,447 张图片 · gpt-4o-mini · $7.62”（完成后）。

算法／模型说明——展示公式，并标注各项

每当 UI 向用户展示算法或模型（“ⓘ 工作原理”面板、模型分解说明、方法说明）时，都要包含实际公式，并以排版格式呈现，标注其中的关键项——不要只用文字描述。如果评分器只用文字说明（“根据所选颜色的占比进行排名”），那就是无法证伪的空谈；公式 score = Σ fracᵢ · max(0, 1 − ΔEᵢ/τ) 并为各项加上标注，才能让用户确切了解参数的作用，并建立对其背后确有数学依据的信任。

应用方式：

• 每种算法呈现一个清晰、居中的核心公式——展示“亮点”核心，无需面面俱到。使用规范记法：σ 表示 sigmoid，Σ 表示求和，‖·‖ 表示范数，上标、ΔE、∇²；将公式放在与正文区分开的等宽／衬线数学字体区块中。
• **在公式下方立即标注每个符号：**每行说明 e_x、w、τ、Q 分别是什么。没有标注的公式只是装饰，标注过的公式才是规范说明。
• 尽量减少依赖——使用带样式的 HTML／Unicode 数学符号即可，并支持离线运行；只有表达式确实需要时，才使用 KaTeX／MathJax。
• 在评分旁说明决策规则（例如“当 P ≥ 0.55 时判定为个人内容”）。
• 这与上文的模型和成本标注要求相辅相成：公式说明计算什么，模型／成本说明则表明由什么模型运行以及花费多少。

示例（逻辑回归头）：

P(personal │ x) = σ(w·eₓ + b), σ(z) = 1 / (1 + e⁻ᶻ) • eₓ — 图片的 768 维嵌入 · w、b — 根据你的标签训练得到的权重 · 决策：当 P ≥ 0.55 时判定为个人内容，当 P ≤ 0.40 时判定为参考内容。

全选始终要有取消全选——不让选择陷入死局

任何**“全选”操作都必须配有清除选择**的方式—— 最好使用同一个按钮，并在全部选中时切换标签 （“全选”⇄“取消全选”）。没有反向操作的全选就是个陷阱：用户选多了（或不假思索地点击），之后只能逐项取消勾选，或重新加载 页面，才能恢复原状。这种代价悄无声息——只有在他们已经选错后才会显现。

应用方法：

• 切换同一个按钮（最简单，控件最少）：当所有可见项都 已选中时，按钮显示“取消全选”并清除选择；否则显示“全选”。一个 控件，不会陷入死局。
• 或者在选择非空时显示一个单独的“清除/取消选择”按钮。
• 取消选择的范围必须与全选的范围相同（所有显示项、所有 筛选结果、当前页上的所有项）——不能让“全选”选中 500 项，而“清除”只 清除屏幕上的 50 项。
• 这一原则可推广：任何可逆的批量切换操作（选择、全部展开、全部静音、 全部勾选）都需要让反向操作一键可达。操作应保持对称——参见 restraint-rule（不要让用户在任务中途进退两难）。