Design System Picker

从内置设计系统库中匹配最合适的设计系统，为后续网页/界面设计提供风格规范基础。

路径规则：本 skill 调用的脚本和文件用相对 skill 自身的相对路径（./scripts/... / ./design-systems/...），不依赖仓部署位置。openclaw 加载 skill 时注入 skill 根目录，agent 直接用相对路径即可。

用法

搜索匹配

./scripts/pick.sh "<风格描述>"

示例：

./scripts/pick.sh "科技感暗色主题"
./scripts/pick.sh "类似 Stripe 的金融风格"
./scripts/pick.sh "温暖亲和的生活服务"

读取设计系统详情

搜索到匹配结果后，读取对应的设计系统文件获取完整规范：

读取 ./design-systems/<file>

例如匹配到 Stripe，则读取 ./design-systems/stripe.md。

内置设计系统

使用时机

每项设计任务开始时，在 brief 确认后、进入具体设计前必须调用此技能确定设计系统。设计系统选定后，所有后续 HTML/CSS 产出的色彩、字体、间距、组件样式都应遵循该设计系统的规范。

自定义设计系统

如果用户提供的风格描述与内置设计系统均不匹配，应基于用户描述自行构建设计系统，输出格式参照内置 DESIGN.md 的标准结构：

1. Visual Theme & Atmosphere
2. Color Palette & Roles
3. Typography Rules
4. Component Stylings
5. Layout Principles
6. Depth & Elevation
7. Do's and Don'ts
8. Responsive Behavior

探索更多设计系统

内置设计系统无法覆盖所有风格需求。当内置库中没有合适匹配，或用户指定了特定品牌/风格参考时，可从上游仓库 VoltAgent/awesome-design-md 中查找并导入：

查找流程

1. 访问 https://github.com/VoltAgent/awesome-design-md 查看完整设计系统列表
2. 也可直接访问 https://getdesign.md/<brand-name>/design-md 查看特定品牌的设计系统（如 https://getdesign.md/starbucks/design-md）
3. 选取匹配的设计系统后，将内容下载为 ./design-systems/<name>.md

导入流程

找到合适的设计系统后，必须完成以下两步才能使用：

1. 添加设计系统文件

将 DESIGN.md 内容保存到 ./design-systems/<name>.md，确保遵循标准的 8 段结构。如果不完整，应基于下载内容补全缺失段落。

2. 注册到索引

在 ./design-systems/index.json 中添加条目：

{
  "id": "<name>",
  "name": "<Brand Name>",
  "category": "<category>",
  "keywords": ["关键词1", "关键词2", ...],
  "description": "一句话风格描述",
  "colorPrimary": "#HEX",
  "darkMode": true/false,
  "bestFor": "适用场景描述",
  "file": "<name>.md"
}

完成后即可通过 ./scripts/pick.sh 搜索到该设计系统。