VS Code 设计哲学
用价值、原则和设计动作,把“看起来不对”转化为可执行的界面改进。
该技能仅提供设计判断与文档化建议,不执行代码、不访问数据、不引入依赖或外部副作用,具备较好的最小权限特征;仓库提供 MIT 许可和 Microsoft 来源信息。未说明用户确认、变更回滚、敏感设计数据处理或具体来源验证流程,因此未满分。
Values→Principles→Moves 的结构、决策规则和大量示例使正常使用路径较一致;但存在句式大小写与仓库编码规范的已知冲突,且引用的相关文件未在该技能材料中展开,也没有技能专属测试或异常输入反馈,因此按静态校准限制扣分。
触发条件覆盖设计、构建、审查和视觉反馈场景,且给出了多类 UI 问题的语义化处理方式;但未明确非适用边界、输入输出契约、误触发条件或中文使用指导。核心功能不依赖海外服务,因此未因网络可达性扣分。
文档采用分层结构,包含示例、术语、决策规则、已知冲突和实现引用;仓库材料补充了 MIT 许可、Microsoft 维护背景和版本信息。技能本身没有明确版本、变更日志、维护责任人、更新路径、安装说明或故障排查,因此扣分。
内容能把像素级反馈转化为价值、原则、机制和可执行的设计语言,并提供可直接复用的示例,核心任务基本可完成;但没有代表性产出验证、跨界面一致性证明或与现有设计评审方式的比较证据,静态上限使其不超过 7 分。
技能文本本身提供了大量可审计规则、token 名称、链接引用和明确的事实与判断结构;但没有技能专属测试、第三方复现记录或独立交叉验证,仓库中的 CI 与测试材料也未覆盖该技能的关键路径,因此仅给静态审查上限附近分数。
- 句式大小写规则与仓库现行 UI 标签规范冲突,实际应用前需确认适用范围并统一规范。
- 技能引用了多个未提供内容的仓库文件;若这些文件的 token、字体或编码规则发生变化,建议在使用前复核。
- 这是设计判断词汇,不是自动实现或验证工具;输出仍需设计师和工程师进行上下文审查。
它能做什么 & 适用场景
这是 VS Code 仓库中的一个设计评审与界面推理技能,提供 Values→Principles→Moves 三层词汇。它帮助开发者和设计者先判断界面应传达的感受,再定位违反的原则,最后选择对应的设计机制。内容覆盖层级、间距、字体、图标、边框、主题颜色、交互显现和动效。它适合需要统一 UI 判断标准的团队,但不是可运行的设计工具,也没有在提供的材料中记录独立安装命令或自动化测试。
它把界面问题归入 Calm、Focused、Consistent、Delightful 四种价值,使用七条评估原则分析视觉层面,并根据表面层级选择圆角、间距、字体角色、图标尺寸、边框、主题令牌和 reveal-on-intent 行为。它还提供反馈措辞、工作示例和设计令牌参考路径,帮助把像素层面的意见改写为角色、层级、比例或令牌层面的建议。
- 设计师评审设置页、侧边栏或对话框时,需要解释为什么界面显得拥挤、扁平或缺少层级。
- 前端开发者决定按钮圆角、面板间距、字体角色或 Codicon 尺寸时,需要依据共享规则而不是个人偏好。
- 团队进行截图或原型评审时,需要把“这个看起来不对”拆解为价值、表面、原则和具体设计动作。
- 维护多个主题或高对比度界面时,需要检查颜色是否使用 VS Code 主题令牌,而不是硬编码颜色。
- 设计动效或交互显现时,需要判断动画是在引导、确认、定位,还是仅仅构成装饰噪声。
优缺点一览
- 提供从价值到原则再到实现机制的完整评审框架,适合团队建立共同设计语言。
- 给出明确的间距、圆角、字体权重、图标尺寸、边框和主题颜色规则。
- 强调使用命名令牌和语义角色,有助于减少界面漂移。
- 包含常见问题的工作示例和可直接采用的反馈措辞。
- 它主要提供指导和反馈语言,不执行代码修改、截图分析或自动化检查。
- 提供的材料没有独立安装说明、脚本、测试套件或运行时依赖。
- 句式大小写规则存在已知冲突:现代 UI 指南倾向 sentence case,而仓库现有编码指南要求非实验性 UI 使用 title-style capitalization。
- 圆角、间距和字体等规则针对 VS Code 的设计体系,迁移到其他产品时可能需要重新映射令牌。
如何安装
该技能位于 https://github.com/microsoft/vscode 的 .github/skills/design-philosophy/SKILL.md。提供的 README 和 SKILL.md 没有记录该单项技能的安装命令、复制步骤或独立发行包;采用前应将该文件作为 Agent Skill 内容提供给兼容客户端。整个仓库采用 MIT 许可证,但仓库同时包含其他技能,不能将其他技能的能力归属于本技能。
如何使用
在支持 Agent Skills 的客户端中,将 .github/skills/design-philosophy/SKILL.md 纳入技能上下文,然后提出具体界面问题。例如:评审这个设置面板:请先指出它缺少的价值,再说明违反的原则,最后给出对应的设计动作。 对具体截图或界面,应说明表面名称、主题模式以及是否涉及 reduced motion;该技能建议按“感受→表面→原则→动作→数值”的顺序反馈。