by 运行时依赖
安装命令
点击复制技能文档
图形设计师 应用专业的UI/UX视觉设计判断力来创建模拟图、组件、屏幕和完整的界面。将模糊的美学请求（“让它更突出”，“看起来过时”，“感觉杂乱”）转化为具体的、有理有据的设计决策，这些决策以感知研究和当前平台惯例为基础。
何时使用此技能 设计或审查屏幕、组件、登陆页面、仪表盘或移动应用程序UI 选择色彩调色板、字体比例、间距或网格系统 定义设计令牌或组件变体以创建设计系统 提高现有布局的视觉层次、可扫描性或转换率 添加或审计微交互、状态转换和动画 使UI可访问（WCAG对比度、神经多样性友好模式、动态类型） 更新“2018年平面化”界面以满足2026年的期望
核心决策框架 每个视觉决策都应按顺序回答三个问题： 眼睛首先落在哪里？——主要操作必须赢得对比度/大小/位置的战斗。运行5秒钟的眯眼测试；如果CTA在30%不透明度下消失，则层次结构被破坏。 用户需要将什么感知为相关？——在添加边框、分隔线或框之前应用整体接近性和相似性。空白空间比线更干净地分组。 什么可以在需要时隐藏？——渐进式披露优于密度。每个可见元素都需要认知负载。
视觉系统默认值 使用这些作为起点，然后有理由偏离： 系统默认值 颜色比例 60-30-10（主色/次色/强调色） 强调色保留用于主要CTA和关键状态 字体比例 1.250（大三度）或1.333（完全四度） 更紧密的比例感觉像编辑；更宽的比例感觉像营销 基本单位 4px或8px间距网格 每个填充/边距都是倍数——没有填充：13px 正文文本最小16px在网页上，17pt在iOS上，14sp在Android上 网页上低于16px会失败大多数可访问性审计 行长度 45-75个字符 长篇文章；UI标签可以更短 行高 1.4-1.6用于正文，1.1-1.25用于显示 紧密的标题，慷慨的正文 圆角半径 一个比例（例如4/8/16/完整） 混合任意半径会使UI快速老化 提升 3-5个阴影等级最大 使用它们语义（休息/提高/叠加/模态）
颜色和对比度 WCAG最低要求：正文文本4.5:1，对于大文本（≥18pt或14pt粗体）和UI组件3:1。AAA是7:1/4.5:1。 玻璃/模糊背景通常会失败——测试最坏情况下的内容后面。 多巴胺调色板（饱和的霓虹灯，Y2K）需要一个60%的不饱和主导色才能保持可用性；每个地方的纯饱和度读取为儿童玩具。 暗模式不是“反转”——纯白文本在纯黑色上会引起光晕。使用#E6E6E6在#121212风格的离黑色上。 永远不要仅通过色调来编码信息。将颜色与图标、标签或形状配对（红色错误+ +“错误：”）。 状态颜色生活在一个单独的轴上与品牌：成功/警告/错误/信息应该能够在品牌刷新中幸存。
排版 最多两个家族。一个显示，一个文本。产品显示代码或需要对齐的数字时，用于单字体的第三个。 光学尺寸很重要。显示字体在正文大小下看起来很臃肿；文本字体在英雄大小下看起来很弱。 在可用时使用具有光学尺寸轴（opsz）的可变字体。 数字：表格、仪表盘和任何数字列中的表格数字（font-variant-numeric：tabular-nums）。其他地方的比例数字。 动力/超大型字体是2026年主导的英雄模式，但如果没有prefers-reduced-motion回退，它会吃掉可访问性。
值得了解的布局模式 便当网格——不同大小的模块化瓷砖；适合功能展示、仪表盘和作品集。 每个瓷砖必须是自包含的（一个想法，一个CTA）。 用于文本密集的页面的F模式；用于稀疏的登陆页面的Z模式。 将主要CTA放在预期扫描路径的终点。 不对称/断网格在2026年营销UI中回归，但生产应用程序UI仍然奖励严格的网格。 滚动驱动的故事讲述是默认的长篇模式；预算用于基于IntersectionObserver的揭示，而不是滚动劫持。
动作和微交互 持续时间：状态更改（悬停、按压）100-200毫秒，过渡（打开/关闭）200-400毫秒，仅用于叙事揭示400-800毫秒。 任何超过800毫秒的内容都会感到破碎。 缓动：立方贝塞尔（0.4,0,0.2,1）（材料“标准”）是一个安全的默认值。 线性缓动应该只出现在不确定的旋转器上。 始终尊重prefers-reduced-motion——用不透明度渐变替换变换，从不完全删除反馈。 每个交互元素需要最少四个可视状态：休息、悬停、活动/按压、焦点可见。 禁用是当适用时的第五个。 触觉最大主义（“软UI”）——按钮在按压时压缩2-4%，释放时有一个短暂的超调。 在触摸设备上读取为高级，在每个元素上都很花哨。
设计令牌和系统 令牌是分层的：原始（color-blue-500）→语义（color-action-primary）→组件