↑
免责声明：本站部分 Skill 来源于公开渠道，使用前请注意识别相关风险，内容版权归原作者所有，如 Skill 涉及版权问题，请在线反馈，核实后予以下架处理。
概述
本 Skill 为 coding agent 提供离线可审计的设计方法论引擎，在编写 UI 代码前通过数据检索完成科学决策而非随机挑选。核心交付是一套基于 BM25 搜索的设计系统生成器：输入产品描述后自动推导匹配的产品类型、UI 风格、调色板、字体搭配与效果规范，输出包含色彩 token、对比度数据、反模式警示与 P0 交付门禁的完整设计系统文档。内置 50 余种 UI 风格库、161 组确定性调色板、57 组 Google Fonts 搭配、85 条分级 UX 指南、25 种图表选型、24 种落地页模式与 15 个技术栈实践，覆盖 SaaS、电商、仪表盘、移动 App 等 30 余类产品的设计起点需求。
技能包含
SKILL.md（本文件）：技能主说明，含触发条件、命令体系与铁律边界scripts/engine.py：纯标准库设计引擎，支持生成、搜索、浏览、审计等 11 类命令scripts/make_icon.py：图标生成辅助脚本assets/data.py：离线设计数据库，含风格、调色板、字体、产品规则等全部维度references/method.md：BM25 检索与设计推导的方法论说明examples_cases.md：使用案例与示例
核心能力
- 设计系统一键生成：从自然语言描述推导产品类型 → 风格 → 色彩 token → 字体 → 效果 → 反模式 → QA 清单，输出 7 段式可复现设计系统
- 跨维度 BM25 检索：支持风格、产品、调色板、字体、图表、落地页模式、UX 指南等 7 个维度的离线搜索与匹配
- 确定性调色板引擎：161 组调色板按色相分布与情绪标签索引，自动计算文字-背景对比度，支持亮/暗双模式切换
- 字体搭配智能匹配：解析 type_mood 从 57 组 Google Fonts 搭配中精确选型，输出可直接引用的字体加载链接
- 启发式代码审计：对现有 UI 代码做可访问性与规范粗判，标识潜在阻断项与改进点
- 全维度浏览查询：独立浏览 50+ 风格、85 条 UX 指南、25 种图表、24 种落地页模式、15 个技术栈的完整规格
应用场景
| 用户怎么说 | 本技能做什么 |
|---|---|
| "帮我做一个高端美妆品牌的落地页设计" | 运行 generate 推导产品类型为 Luxury，匹配玻璃拟态或极简奢华风格，从 161 调色板中选接近 gold/rose 色相的方案，输出完整色彩 token、字体搭配、7 段式设计系统与 P0 交付门禁 |
| "这个 SaaS 仪表盘用深色模式，配什么图表合适？" | 用 palettes --mode dark 筛选深色调色板，charts trend 浏览 25 种图表的适用场景，组合输出配色-图表选型建议 |
| "现有 React 组件的可访问性怎么样？" | 运行 audit 做启发式粗判，检查语义结构、焦点管理、ARIA 使用等常见阻断项，输出问题清单与复核建议 |
| "想看一下 Cyberpunk 风格的完整 CSS 变量" | styles cyberpunk 直接返回该风格的关键词定义、适用场景、效果规格、CSS 变量与反模式警示 |
| "B2B 金融科技产品该用什么字体和配色？" | search "fintech banking" --dim product 检索产品规则，fonts 匹配专业可信的字体气质，组合输出风格-字体-色彩推导链路 |