用途:这是一个可检索的参考目录,不是构建工具。它索引来自 alexpate/awesome-design-systems 的 185 个公开设计系统,并叠加结构化筛选,用于提供真实先例。构建方法由 extract-design-system 与 design-system-patterns 负责,本技能负责“谁已经做过、叫什么、去哪里读代码或规范”。
主要能力:收录 185 个设计系统,其中 180 个提供编码组件,132 个公开源码,85 个提供设计工具套件(Figma/Sketch/XD/Photoshop),77 个记录语气与文案指南。每条目带四个标记:组件、语气与文案、设计工具套件、源码。组件约 97%(180/185),筛选意义不大;语气与文案仅 42%(77/185),是有效筛选;设计工具套件 46%(85/185);源码 71%(132/185),公开可见不等于宽松许可,使用前须查 LICENSE。
使用方式:按问题加载对应参考文件,一次一个,避免重叠。名称查询与完整索引用 references/all-systems.md;语气与文案先例用 references/with-voice-and-tone.md;设计工具套件用 references/with-designers-kit.md;开源代码阅读用 references/open-source.md;按行业浏览用 references/notable-by-category.md。示例问题包括“X 是设计系统吗、网址是什么”“哪些系统有强语气与文案指南”“给我 3 个金融科技/政府/SaaS 先例”“Polaris、Carbon、Material 如何处理空状态、数据表、按钮层级”。
适用场景:为组件设计寻找真实先例与引用;按行业(大厂、政府、金融科技、SaaS、React、旅游等)浏览;对标自身组件;查找可参考的 Figma 套件或开源实现。
限制:若用户提到的系统不在目录中(如 Airbnb DLS、Nike Connect),应明确说明,不要猜测网址。与主技能建议冲突时以主技能为准。数据来源为 https://github.com/alexpate/awesome-design-systems(Unlicense)。刷新上游数据:curl -s https://raw.githubusercontent.com/alexpate/awesome-design-systems/master/README.md -o awesome-design-systems-readme.md;重新生成参考文件:在仓库根目录运行 python3 tools/parse.py 然后 python3 tools/build.py。