微软把VS Code十多年的设计哲学做成了Claude Skill，190K+安装，设计师和工程师终于能互相听懂了

Claude Code 有个让人头疼的问题：生成 UI 的时候，它会不自觉地走向”AI 设计“——紫色渐变、Inter 字体、圆角卡片，看一眼就知道是 AI 画的。Anthropic 出了个 frontend-design 来对抗这个趋势，但如果你想要更系统的设计语言支撑，微软刚刚开源了一套更底层的东西。

Design Philosophy，来自 VS Code 团队，藏在微软 VS Code 仓库的 .github/skills/design-philosophy 目录下。技能市场显示 190K+ 安装量，9 月 7 日刚更新，安全评级 Tier 1 PASS（100/100）。

它是什么

这不是一个教你配颜色或者选字体的技能。这是一个设计词汇表——把 VS Code 团队十几年做 IDE 的设计判断，压缩成了一套 Values → Principles → Moves 的三层体系：

• Values（价值观）：你想让用户感受到什么。VS Code 选了四个——Calm、Focused、Consistent、Delightful，每个都解释了为什么是它，而不是泛泛的”好看”。
• Principles（原则）：可执行的设计评判题。比如 “One thing leads; the rest supports”——用户的眼睛应该先落在哪里？
• Moves（手法）：具体的机制，每个都有”用哪个、为什么”的规则。比如 “把次级面板降级到凹陷背景 token，把标签文字降级到更安静的字重”

为什么有意思

大多数设计指南告诉你”怎么做”——这个按钮该多少像素、这个颜色用什么值。但 Design Philosophy 告诉你怎么思考。

它最妙的类比是：当一个面板让你觉得”不对劲”的时候，”这里是 8px 应该是 6px”只修了一个数字，但”这个表面的圆角用错了 elevation tier（高程层级）”才点名了规则，修复会波及所有同类问题，而且你在截图评审阶段就能发现，不用等到代码 review。

换句话说，它把设计师和工程师之间的对话，从像素层面拉升到了原则层面。

安装方法

npx skills add https://github.com/microsoft/vscode --skill design-philosophy

或者用 vskill：

npx vskill@latest install microsoft/vscode/design-philosophy

安装之后，当你跟 Claude 说”这个界面看起来不对”、”能否让这个面板看起来更干净”、”按钮的交互反馈不够清晰”的时候，Design Philosophy 会自动触发，引导 Claude 用 Calm/Focused/Consistent/Delightful 这套框架来分析问题，而不是直接跳到像素层面给一个随机的方案。

适用场景

• 你在用 Claude Code 做前端开发，想要 AI 生成的东西有设计判断力
• 你的团队设计师和工程师经常在 UI 评审时鸡同鸭讲——设计师说”不够安静”，工程师问”要几号字”
• 你想给 AI 一个比”避免 AI 设计风”更具体的约束框架

说实话，192K 的安装量已经说明问题了。大多数人装它不一定是因为 VS Code 的设计有多完美，而是这套”用价值观而不是像素来思考 UI”的方法论，在 AI 编程时代变得异常稀缺。

GitHub 链接：https://github.com/microsoft/vscode/tree/main/.github/skills/design-philosophy

GitHub: https://github.com/microsoft/vscode/tree/main/.github/skills/design-philosophy