Design

用户偏好与记忆数据存储于 ~/Clawic/data/design/ 目录下（首次使用请参考 setup.md，文件格式参见 memory-template.md）。若旧位置存在数据（如 ~/design/ 或 ~/clawic/design/），请将其迁移至 ~/Clawic/data/design/。

配置

用户自定义变量。默认值将在用户未指定偏好前生效；请将配置项保存至 ~/Clawic/data/design/config.yaml。

用户在使用过程中可记录以下偏好信息：

• 输出媒介 —— HTML/CSS、图像渲染或文字规格说明；使用的框架（如 Tailwind、原生 CSS）—— 影响最终交付物形式
• 美学风格 —— 极简、紧凑、编辑风、活泼等 —— 影响间距宽松度、字体选择与装饰容忍度
• 动效姿态 —— 完全动效 vs 默认减少 —— 控制核心规则8及所有过渡建议的启用
• 语言与文字系统 —— RTL 布局需镜像浏览顺序；中日韩文字需宽松行高且避免斜体强调 —— 影响 layout.md 与 fonts.md 的指导
• 评审风格 —— 排名清单式 vs 注释讲解式 —— 决定 critique.md 结果的呈现方式

何时使用

• 从零开始设计任何视觉作品：UI 界面、落地页、幻灯片、社交图文、海报、邮件、PDF 等。
• 设计“看起来不对”但用户说不清原因时。
• 在无设计系统的情况下选择字体、间距或配色方案。
• 在交付前审查生成的 HTML/CSS 或渲染图像。
• 不适用于设计令牌流程与组件库（design-system）或品牌定位策略（branding）。

快速参考

按需深入：critique.md 解析“看起来不对”的症状与成因 · layout.md 网格、对齐与响应式布局 · fonts.md 字体选择、搭配与排版设置 · palettes.md 无系统下的配色构建 · ui-screens.md 表单、表格、仪表盘与状态管理 · landing-pages.md 营销页面与行动号召按钮 · slides.md 演示文稿设计 · graphics.md 海报、社交图文与缩略图 · documents.md PDF 报告与印刷文档 · email.md HTML 邮件设计 · data-viz.md 数据可视化 · dark-mode.md 主题适配 · accessibility.md 可访问性（对比度、色觉缺陷、运动感知）

核心规则

1. 层级是排序，不是样式堆叠。 列出视图中所有元素，按用户重要性分为 1-3 级（1 = 必须看到，2 = 支持性，3 = 辅助信息）。每个视图仅允许一个等级1。验证方法：灰度截图应在 3 秒内清晰展现层级关系。
2. 每级变化只用一个通道。 相邻层级之间仅通过一个明确的通道变化实现：字号 ×1.25、字重 +300（如 400→700），或明显的明度差异。三个微小调整会被视为噪音。例如：18px/600 与 16px/400 为两个半阶，层级表现差；应改为 20px/400 或 16px/700。
3. 间距：基础单位 8，组间间距为组内两倍。 使用 4/8/16/24/32/48/64（base_unit 的倍数）。组间间距 ≥ 组内间距的两倍：标签到字段 8px，字段到字段 24px，章节到章节 48px。空间接近比任何边框或背景盒更高效地组织内容。
4. 字体基准：正文 16px，行高 1.5，行宽 45-75 字符。 Bringhurst 的理想值为 66 字符；低于 45 字符易跳行，高于 75 字符则失去回扫节奏。标题行高收紧至 1.1–1.3。type_scale_ratio = 1.25 时生成 16/20/25/31/39，覆盖多数产品设计；1.333 适用于编辑类与营销页面。
5. 色彩：60-30-10 分配，满足对比度底线。 约 60% 中性背景，30% 次要色，10% 强调色；强调色仅用于标记交互或状态元素。WCAG 底线：正文对比度 4.5:1，大文本（≥24px 或 19px 加粗）及 UI 边界 3:1。禁止 #000 与 #FFF 直接组合；近黑（#111 至 #1a1a1a）可减少边缘闪烁。
6. 每个边缘必须对应一条对齐线。 单个视图中不超过 3 条垂直对齐线；每多一条即增加杂乱感。仅短句（1-3 行）可居中；长文本一律左对齐，因为右端不齐能提供固定的回扫点。
7. 先以灰度设计。 布局、层级与间距必须在无色彩情况下成立。最后才加入色彩以表达意义（状态、动作、品牌）；仅靠色彩强化层级会失效于约 8% 的男性色觉缺陷者，并违反灰度检测门。
8. 动效：UI 过渡时间 150–300ms。 入场使用 ease-out，退出使用 ease-in。超过 400ms 显得迟滞，低于 100ms 显得异常。仅动画 transform 与 opacity 以保证流畅；尊重用户降低动效偏好（accessibility.md）。

层级流程

1. 设计前完成内容盘点：列出视图中必须包含的所有元素，包括法律文本与空状态。
2. 逐项评分 1-3 级：若两项内容均需等级1，拆分视图或通过位置降级（在 LTR 流程中，左上优于右下）。
3. 自上而下分配样式：根据字号比例表设定样式。等级3内容通过明度降低（白底上使用 40–60% 灰色）而非缩小至 13px 以下，以免可读性崩溃。
4. 将等级1置于自然入口处：文档为左上角，海报与幻灯片为中心。
5. 交付前通过输出检测门验证。

间距与布局

• 宏观优先于微观：先设定页面边距与章节间距，再调整组件内部填充。
• 文本容器宽度：最大 560–600px（保持 16px 字号下行宽在 70–75ch，处于 45–75ch 范围内）。仪表盘可全宽，外边距 24px。
• 间距属于其标注的内容：标题与下方文本间距应小于与上方章节的间距（如下方 8px，上方 32px）。等距排列会破坏分组关系。
• 视觉优于数学计算：图标、三角形、播放按钮等需向视觉重心方向偏移 1–3px 才显居中。网格与列布局详见 layout.md。
• 空白是分组机制。在“空白”角落填充装饰，会破坏原本由空间提供的结构。

字体与色彩执行

• 字族搭配基于角色差异（如衬线体展示 + 无衬线体正文），而非相似性；两个高度相似的无衬线体组合会让人误以为是渲染错误。选型参考与加载处理：fonts.md。
• 跳过相邻字重：400 与 500 在正文字号下几乎无法区分。应使用 400/600 或 400/700。
• 全部大写仅用于 1–2 词标签，字母间距增加 5–10%。绝不可对小写正文使用字距调整，否则破坏读者扫描的字形轮廓。
• 配色推导：选定强调色后，构建其 9 步明度梯度，再以强调色饱和度的 2–5% 调和中性色。纯灰与高饱和强调色并列会显得脏乱。完整流程见 palettes.md。
• 语义色彩保留：红色用于删除或错误，绿色用于成功。若品牌为红色，则错误状态需通过不同色阶加图标区分，不能仅靠色相。
• 每件作品使用单一圆角尺度（如 4/8/16）。同级元素混用不同圆角是未经审查生成 UI 的最快信号。

输出检测门

交付任何视觉作品前必须运行以下检测：

• 灰度测试：去色后，1-3 级别是否仍在 3 秒内清晰可见？
• 眯眼测试：模糊状态下，标题与主操作是否依然突出？
• 对齐数量检查：≤3 条垂直对齐线，且每个元素都落在某条线上？
• 间距审计：所有间距为 base_unit 倍数，组间间距 ≥ 组内间距的两倍？
• 对比度检查：每对文字/背景是否达到最低标准（正文 4.5:1，大文本/UI 3:1）？
• 唯一一级焦点：每个视图是否仅有一个主操作或视觉焦点？

常见陷阱

专家分歧点

• 纯黑 (#000) 深色背景：OLED 优先设计师使用 #000 以节省功耗并增强对比；Material 建议 #121212 以减少眩光并保留阴影。默认使用 #121212；仅当作品面向 OLED 媒体消费（视频、照片流）时才使用 #000。
• 网格数学 vs 视觉判断：系统主义者强制对齐 8px 网格；排版师则在眼睛不一致时打破数学规则（如图标居中、展示文字间距）。默认：布局使用网格，组件级允许视觉修正——绝不反之。
• 系统字体 vs 网络字体：系统字体零加载成本，体验更原生；网络字体仅在字体本身即是品牌声音时才值得引入（营销、编辑类）。产品界面默认使用系统字体或一个可变字体。
• 极简 vs 紧凑：消费型界面青睐留白；日常专业工具追求密度（更多数据每屏滚动，base_unit 设为 4）。边界取决于使用频率，而非审美偏好：高频专家使用 → 密集胜出。

相关技能

更多 Clawic 技能，请访问 https://clawic.com/skills/design（用户确认后安装）：

• ui —— 界面组件模式、交互状态、平台规范
• typography —— 深度字体工作：光学尺寸、可变字重轴、印刷设置
• color —— 完整色彩系统、令牌管理、跨表面色彩验证
• design-system —— 将一次性决策转化为令牌与组件库
• accessibility-audit —— 全面 WCAG 审计，含屏幕阅读器测试与修复报告

反馈

• 若有帮助，请点赞：https://clawic.com/skills/design
• 最新版本：https://clawic.com/skills/design

[Clawic](https://clawic.com) 的官方技能库。获取此技能：https://clawic.com/skills/design