视觉设计基础Skill：用一套设计令牌，把排版、配色和间距一次做对
- 它是干什么的：这个技能把排版比例、颜色理论、间距系统和图标原则整理成一套可直接使用的规范，帮你建立设计令牌、编写风格指南、改善视觉层次与一致性。
- 给了什么现成的东西：模块化字号阶梯、行高指南、8 点网格间距系统、语义颜色令牌、Tailwind 配置示例、WCAG 对比度标准、深色模式变量方案、图标尺寸系统与组件示例。
- 谁最需要它：前端工程师、独立开发者、小团队设计负责人，以及需要给 AI 编程助手补充“设计常识”的人。
- 怎么用最省事：把“我要给新项目建立设计令牌”这类具体诉求直接交给 AI，它会按照技能内置的规范输出变量、配置和检查清单。
- 关键提醒：技能输出的是“规范建议”，最终对比度、字号、触摸目标仍需在真实设备上验证，不能只依赖生成结果。
1. 该技能叫什么？如何一键安装 AI 技能提升开发效率？
这个技能的中文名是 视觉设计基础，英文名（技能标识）为 visual-design-foundations，技能 ID 为 13161。
它解决的是一个很常见但很消耗精力的问题：界面“看起来不专业”，往往不是缺想法，而是缺约束。字号随手定、间距凭感觉、颜色到处复制粘贴，最后出现“同一个卡片内边距 13px、17px、20px 混用”的情况，改一处就要连带修十处。视觉设计基础技能的价值，是把这些散落的决定收拢成一套有名字、可复用、可检查的令牌体系——排版用模块化比例，间距用 8 点网格，颜色用语义化命名（primary / success / error / info 而非“蓝色2”），图标用统一尺寸档位。
“一键安装”的思路，本质是把专家经验变成 AI 的默认行为。 具体做法是：先在你的 AI 编程助手或技能平台里找到技能库（技能市场/技能目录）入口，搜索“视觉设计基础”或技能 ID 13161，或英文标识 visual-design-foundations，点击安装/启用即可；安装前提是你的宿主环境已支持 AI 技能机制，并具备可用的模型与工程目录访问权限。具体的安装命令、账号要求与计费方式以官方说明为准，不同平台的入口和指令并不统一。
安装后如何验证生效？建议用一句最小测试提示词：
帮我为一个新项目建立设计令牌，包含字号阶梯、间距刻度、语义颜色，
并说明每个层级的用途。
如果返回结果里出现了类似 --font-size-xs 到 --font-size-5xl 的阶梯、--space-1 到 --space-16 的 8 点网格刻度、以及 primary/success/warning/error/info 这类语义命名，就说明技能已经正常加载。若返回的是空泛的“建议使用统一的字号”，说明技能未被调用，需要检查是否启用成功。
2. 该技能的主要功能和特点
- 模块化排版比例：内置从
0.75rem到3rem的九级字号阶梯，配套行高指南——标题 1.1–1.3、正文 1.5–1.7、UI 标签 1.2–1.4。不是“凭感觉调大小”，而是用比例让层级自带秩序。 - 8 点网格间距系统：提供
--space-1（4px）到--space-16（64px）的刻度，并给出组件级用法（卡片内边距 16–24px、章节间隙 32–64px、图标与文字间隙 8px），从源头减少“魔法数字”。 - 语义化颜色令牌：品牌色含默认/悬停/激活三态，语义色覆盖 success、warning、error、info，中性色提供 50–900 十档灰阶，按用途命名而非按外观命名，换主题时不用全局搜替换。
- 可访问性（WCAG）内建：直接给出对比度底线——正文 4.5:1、大文本 3:1、UI 组件 3:1、增强 7:1，并提供一段可编程的对比度计算函数，把“看起来够清楚”变成“算出来够清楚”。
- 深色模式方案：通过
[data-theme="dark"]覆盖同一组变量，背景、文字、边框三类令牌成对给出，避免事后补救。 - 开箱即用的 Tailwind 令牌配置：附带
tailwind.config.js扩展写法，字体族、字号+行高对、品牌色阶、自定义间距一次配好。 - 字体配对与流体排版：给出三组安全组合（如 Inter 单族；Playfair Display + Source Sans Pro 对比；Space Grotesk + IBM Plex Sans 几何），并提供
clamp()流体字号写法与max-width: 65ch的最佳阅读宽度。 - 字体加载防抖：
font-display: swap与woff2写法，减少字体加载导致的布局偏移。 - 图标系统：从
--icon-xs（12px）到--icon-xl（32px）五档尺寸，附一个 React 图标组件示例，统一aria-hidden、flex-shrink-0等细节。 - 清单式排错：把“不一致的间距、对比度差、字体过载、魔法数字、缺失状态、无深色模式计划”列为高频问题，方便自查。
和普通工具比强在哪？ 普通设计工具给你“画布”，这个技能给你“规则和理由”——它不仅告诉你用什么值，还告诉你为什么是这个值、在哪里容易出错。
3. 如何使用该技能？
步骤 1：明确你的目标场景。 技能覆盖的典型任务包括：建立设计令牌、构建风格指南、字体选择与配对、构建可访问调色板、图标系统设计、改进视觉层次、审核视觉一致性、实现深色模式。
步骤 2：用“约束 + 产物”的方式描述需求。 不要只说“帮我设计得好看点”，要说明技术栈、产物形式与约束条件。
技术栈：React + Tailwind CSS。
请为我的 SaaS 后台建立一套设计令牌，
输出内容包括：字号阶梯、行高、8 点网格间距、语义颜色令牌、
深浅两套主题变量，以及 tailwind.config.js 的 extend 片段。
品牌主色是 #2563eb。
步骤 3：读懂输出结构。 通常会得到三块内容——CSS 变量定义（:root 与 [data-theme="dark"]）、框架配置片段（如 Tailwind 的 extend）、以及使用建议（哪个层级用哪个令牌）。
步骤 4：落地到项目里。 把变量文件放进全局样式入口，把配置片段合并进构建配置，然后在新组件中只允许引用令牌，禁止硬编码数值。
步骤 5：做一次可访问性校验。 把主要的前景/背景色对交给对比度检查，正文必须 ≥ 4.5:1，大号标题 ≥ 3:1，按钮、输入框边框等 UI 组件 ≥ 3:1。技能中给出的计算函数可以封装成一个单元测试或构建期检查。
步骤 6：让 AI 做一致性审核。 把现有页面的样式代码或组件清单丢回去，问题可以这样问：
这是我项目的间距和字号使用情况，
请按 8 点网格和模块化比例找出不一致之处，
列出问题清单和修改建议。
输出通常是一张“问题—原因—建议值”的对照表，直接可当作重构任务单使用。
4. 同类型竞品对比分析
| 方案名称 | 定位 | 核心功能 | 安装/使用门槛 | 适用场景 | 优势与不足 |
|---|---|---|---|---|---|
| 视觉设计基础Skill | 面向 AI 协作的设计规范“知识包” | 排版比例、8 点网格、语义色令牌、WCAG 对比度、深色模式、图标系统、Tailwind 配置 | 在支持技能的平台中启用即可，无需额外依赖；具体入口以官方说明为准 | 新项目起步、风格指南编写、视觉一致性审核、深色模式改造 | 优势：给的是决策依据与可复制代码，能直接对话式追问；不足：不提供可视化设计稿，最终仍需人工在设备上验证 |
| Tailwind CSS 官方文档 | 原子化 CSS 框架的权威参考 | 工具类、配置扩展、主题定制 | 需引入框架并理解工具类体系 | 已使用 Tailwind 的项目 | 优势：工程化成熟、生态大；不足：偏“怎么实现”，对“为什么这样定值”的设计原则着墨少 |
| Material Design 3 | 完整的设计系统规范 | 颜色系统、字体、组件规范、动效 | 需通读规范，理解其隐喻与组件体系 | 追求统一观感的 Android/Web 产品 | 优势：体系完备、组件齐全；不足：风格辨识度高，定制成本大，直接套用易“一眼谷歌味” |
| Radix Colors / 设计令牌库 | 高质量的配色与令牌资源 | 提供成套语义色阶与暗色配对 | 安装依赖或复制变量即可 | 需要现成可访问配色 | 优势：颜色质量高、开箱可用；不足：主要解决“颜色”这一层，排版、间距、图标仍需另找方案 |
选型建议：如果你要的是“和 AI 一起把规范定下来并写进代码”，选视觉设计基础Skill；如果只要配色，选调色板类资源；如果要整套组件规范，选成熟设计系统。
5. 该技能的典型应用场景与实际体验情况
场景一：前端工程师从零搭建新项目。 痛点是从第一行 CSS 开始就在做无依据的决策，项目跑起来后视觉混乱，返工成本高。使用方式是在搭脚手架阶段就让 AI 输出令牌与 Tailwind 配置，一次性把字号、间距、颜色、圆角、图标尺寸定死。实际体验是上手门槛很低——不需要先学设计理论，只要说清技术栈；效果体现在后期——组件越多，统一性的收益越明显。注意事项：生成的品牌色阶要结合真实业务核对，不要直接把示例蓝当成品牌色。
场景二：独立开发者或小团队补“设计岗”。 没有专职设计师，界面容易“能用但不好看”。这类用户可以直接要求“基于我的品牌色，给出一套浅色/深色双主题变量 + 字体配对建议”。体验上，技能提供的三组安全字体组合非常实用，能避开“标题字体太花、正文字体太挤”的常见问题。注意：字体文件需要自行确认授权与加载方式，示例中的字体名只是推荐，不构成可直接商用的保证。
场景三：设计—开发协作交付规范。 设计师给的是稿子，开发要的是可执行的值。用这个技能可以把“视觉走查意见”翻译成令牌级修改建议，例如把“这里字太小、间距太挤”变成“正文字号升至 1rem，卡片内边距从 12px 调到 16px”。实际体验是沟通成本明显下降，因为双方讨论的是同一套有名字的变量。
场景四：存量项目的可访问性与深色模式改造。 老项目常见问题是对比度不达标、深色模式靠反色硬凑。使用方式是先让 AI 按 WCAG 标准列出对比度不达标的组合，再按语义令牌重构颜色层。体验上，改造前建议先做一次全量色值盘点，否则容易出现“令牌建好了但组件还在写死颜色”的半吊子状态。
整体体验评价：上手难度低（会写提示词即可），产出质量取决于你给的约束是否具体；最大的注意事项是不要把生成结果当成最终验收标准——真实设备上的字号可读性、触摸目标大小、暗色下的视觉疲劳，都需要人来判断。
6. 该技能能为用户带来的价值
- 把设计决策前置：在写第一行业务代码之前就把字号、间距、颜色定好，避免后期全局返工。以往这类工作往往要一两天，现在可以压缩到一次对话加一次核对。
- 降低设计门槛：不需要系统学习排版学与色彩理论，也能得到符合行业惯例的比例与刻度，尤其适合没有设计师配置的小团队。
- 把可访问性变成默认项：对比度标准直接内建在建议里，减少上线后才发现“文字看不清”“按钮不明显”的返工。
- 提升协作效率：语义令牌让“颜色”“尺寸”有了共同语言，设计稿与代码之间的翻译损耗显著降低。
- 长期可维护：主题切换、品牌换色、尺寸调整只需改变量，而不是全局搜索替换，改动成本随项目规模增长而保持可控。
- 沉淀为团队资产：一次生成的令牌体系与风格指南，可以直接进入团队文档，成为后续所有页面的“默认答案”。
7. 常见问题 FAQ
Q1：这个技能怎么安装？需要付费吗？ 在支持 AI 技能的平台技能库中搜索“视觉设计基础”、英文标识 visual-design-foundations 或技能 ID 13161，启用即可。安装前提是宿主环境支持技能机制；具体命令、账号要求与是否收费以官方说明为准，不同平台差异较大。
Q2：它和直接用 Tailwind 有什么区别？ Tailwind 解决“怎么写类名”，这个技能解决“该定什么值、为什么定这个值”。两者是互补关系——技能里本身就提供了 Tailwind 的令牌配置写法，可以直接配合使用。
Q3：生成的颜色和字号能直接上线吗？ 建议不要直接上线。技能提供的是符合行业惯例的起点，品牌色、品牌字体、目标用户的阅读习惯都需要你替换和验证；对比度也应在真实的前景/背景组合上逐一核对，正文 ≥ 4.5:1。
Q4：适合谁用？纯设计师用得上吗？ 最适合前端工程师、独立开发者、小团队技术负责人和需要维护设计系统的人。设计师同样可以用它来整理规范、检查一致性与对比度，但它不产出视觉稿，不能替代设计工具。
Q5：和成熟的 Material Design 这类设计系统怎么选？ 要高度统一的现成观感、组件齐全，选成熟设计系统；要一套贴合自己品牌、能落进代码库、可随项目演进的最小规范，选这个技能。很多团队的实践是：用技能定自建令牌，用成熟系统参考组件行为。