设计与前端 ✓ Microsoft · 官方 design-systemui-reviewdesign-tokensvisual-designvscode

VS Code 设计哲学

用价值、原则和设计动作,把“看起来不对”转化为可执行的界面改进。

FollowSkills 评估 · FSRS-2.0
不推荐
58/ 100 五分制 2.9 / 5
信任安全20 / 25 · 4.0/5

该技能仅提供设计判断与文档化建议,不执行代码、不访问数据、不引入依赖或外部副作用,具备较好的最小权限特征;仓库提供 MIT 许可和 Microsoft 来源信息。未说明用户确认、变更回滚、敏感设计数据处理或具体来源验证流程,因此未满分。

可靠稳定8 / 20 · 2.0/5

Values→Principles→Moves 的结构、决策规则和大量示例使正常使用路径较一致;但存在句式大小写与仓库编码规范的已知冲突,且引用的相关文件未在该技能材料中展开,也没有技能专属测试或异常输入反馈,因此按静态校准限制扣分。

适用触发10 / 15 · 3.3/5

触发条件覆盖设计、构建、审查和视觉反馈场景,且给出了多类 UI 问题的语义化处理方式;但未明确非适用边界、输入输出契约、误触发条件或中文使用指导。核心功能不依赖海外服务,因此未因网络可达性扣分。

规范维护8 / 15 · 2.7/5

文档采用分层结构,包含示例、术语、决策规则、已知冲突和实现引用;仓库材料补充了 MIT 许可、Microsoft 维护背景和版本信息。技能本身没有明确版本、变更日志、维护责任人、更新路径、安装说明或故障排查,因此扣分。

有效结果7 / 15 · 2.3/5

内容能把像素级反馈转化为价值、原则、机制和可执行的设计语言,并提供可直接复用的示例,核心任务基本可完成;但没有代表性产出验证、跨界面一致性证明或与现有设计评审方式的比较证据,静态上限使其不超过 7 分。

证据核验5 / 10 · 2.5/5

技能文本本身提供了大量可审计规则、token 名称、链接引用和明确的事实与判断结构;但没有技能专属测试、第三方复现记录或独立交叉验证,仓库中的 CI 与测试材料也未覆盖该技能的关键路径,因此仅给静态审查上限附近分数。

证据充分度: 评估于 2026年7月20日 审查版本 5b3e1be7be9e
使用前请注意
  • 句式大小写规则与仓库现行 UI 标签规范冲突,实际应用前需确认适用范围并统一规范。
  • 技能引用了多个未提供内容的仓库文件;若这些文件的 token、字体或编码规则发生变化,建议在使用前复核。
  • 这是设计判断词汇,不是自动实现或验证工具;输出仍需设计师和工程师进行上下文审查。
查看完整评分方法 →

它能做什么 & 适用场景

这是 VS Code 仓库中的一个设计评审与界面推理技能,提供 Values→Principles→Moves 三层词汇。它帮助开发者和设计者先判断界面应传达的感受,再定位违反的原则,最后选择对应的设计机制。内容覆盖层级、间距、字体、图标、边框、主题颜色、交互显现和动效。它适合需要统一 UI 判断标准的团队,但不是可运行的设计工具,也没有在提供的材料中记录独立安装命令或自动化测试。

它把界面问题归入 Calm、Focused、Consistent、Delightful 四种价值,使用七条评估原则分析视觉层面,并根据表面层级选择圆角、间距、字体角色、图标尺寸、边框、主题令牌和 reveal-on-intent 行为。它还提供反馈措辞、工作示例和设计令牌参考路径,帮助把像素层面的意见改写为角色、层级、比例或令牌层面的建议。

  1. 设计师评审设置页、侧边栏或对话框时,需要解释为什么界面显得拥挤、扁平或缺少层级。
  2. 前端开发者决定按钮圆角、面板间距、字体角色或 Codicon 尺寸时,需要依据共享规则而不是个人偏好。
  3. 团队进行截图或原型评审时,需要把“这个看起来不对”拆解为价值、表面、原则和具体设计动作。
  4. 维护多个主题或高对比度界面时,需要检查颜色是否使用 VS Code 主题令牌,而不是硬编码颜色。
  5. 设计动效或交互显现时,需要判断动画是在引导、确认、定位,还是仅仅构成装饰噪声。

优缺点一览

优点
  • 提供从价值到原则再到实现机制的完整评审框架,适合团队建立共同设计语言。
  • 给出明确的间距、圆角、字体权重、图标尺寸、边框和主题颜色规则。
  • 强调使用命名令牌和语义角色,有助于减少界面漂移。
  • 包含常见问题的工作示例和可直接采用的反馈措辞。
局限
  • 它主要提供指导和反馈语言,不执行代码修改、截图分析或自动化检查。
  • 提供的材料没有独立安装说明、脚本、测试套件或运行时依赖。
  • 句式大小写规则存在已知冲突:现代 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;该技能建议按“感受→表面→原则→动作→数值”的顺序反馈。

常见问题

这个技能需要联网、Shell、Node.js 或其他依赖吗?
提供的 SKILL.md 不要求执行命令、访问网络、调用 MCP 或安装特定运行时;它是基于文档内容进行设计推理的技能。
它会直接修改我的 UI 代码吗?
不会。内容描述的是评审方法、设计令牌和反馈措辞,没有提供代码修改器、脚本或自动化执行流程。
它是否只适用于 VS Code?
它明确描述 VS Code 的设计哲学和令牌体系,因此最适合 VS Code 及采用相近体系的界面。用于其他产品时,需要判断这些层级和令牌是否适用。
它采用什么许可证?
README 声明该开源仓库的源代码采用 MIT 许可证。

同仓库的其他 Skills

均来自 microsoft/vscode

开发与工程 ✓ Microsoft · 官方

工具重命名兼容性检查

防止内置工具重命名破坏现有提示词与工具配置。

开发与工程 ✓ Microsoft · 官方

Copilot Chat OpenTelemetry 埋点指南

为 Copilot Chat 统一设计和维护 OpenTelemetry 埋点。

开发与工程 ✓ Microsoft · 官方

VS Code 配置策略维护助手

规范 VS Code 企业配置策略的注册、导出与验证。

开发与工程 ✓ Microsoft · 官方

Agent 主机端到端测试助手

用严格的回放夹具维护 VS Code Agent 主机端到端测试。

开发与工程 ✓ Microsoft · 官方

VS Code 集成浏览器架构指南

帮助开发者安全理解和修改 VS Code 集成浏览器的跨进程架构。

开发与工程 ✓ Microsoft · 官方

VS Code Agents 窗口会话架构

帮助代理安全实现和修复 VS Code Agents 窗口功能。

开发与工程 ✓ Microsoft · 官方

智能提交助手

根据仓库惯例生成提交信息并安全提交代码变更。

开发与工程 ✓ Microsoft · 官方

Agent Host 日志分析

定位 Agent Host 导出日志中的会话、传输与主机问题。

开发与工程 ✓ Microsoft · 官方

VS Code 单元测试助手

在 VS Code 源码仓库中按文件、测试名称或匹配模式运行单元测试。

开发与工程 ✓ Microsoft · 官方

VS Code Agent 定制助手

帮助创建、修复和排查 VS Code Agent 定制文件及其加载问题。

开发与工程 ✓ Microsoft · 官方

Code OSS 启动与调试

为 VS Code 源码构建提供隔离启动、Playwright 自动化和多进程调试端口。

开发与工程 ✓ Microsoft · 官方

VS Code 无障碍开发助手

为 VS Code 交互式功能提供可执行的无障碍实现规范。

设计与前端 ✓ Microsoft · 官方

VS Code CSS 布局规范

用 VS Code 规范构建稳健的 CSS 布局与文本截断体验

开发与工程 ✓ Microsoft · 官方

VS Code Chat 性能实验室

基准测试聊天渲染性能,并检测会话中的内存泄漏。

开发与工程 ✓ Microsoft · 官方

组件夹具与截图测试

帮助你为 VS Code 组件创建稳定、可主题化的截图测试夹具。

开发与工程 ✓ Microsoft · 官方

VS Code 冒烟测试助手

运行、筛选并调试 VS Code 端到端冒烟测试。

开发与工程 ✓ Microsoft · 官方

VS Code 崩溃转储符号化

将原生 VS Code 崩溃转储转换为带方法名的可读回溯。

开发与工程 ✓ Microsoft · 官方

VS Code 本地 Web 工作台

在本地 vscode.dev 中验证 VS Code 工作台和 Agents 窗口改动。

开发与工程 ✓ Microsoft · 官方

反馈执行器

读取当前会话反馈并落实对应代码修改。

开发与工程 ✓ Microsoft · 官方

VS Code 聊天定制编辑器开发技能

帮助开发者安全修改并测试 VS Code 的聊天定制管理界面。

相关 Skills