技能解析
何时触发 · 如何工作 · 产出什么
剖析技能的工作原理和产出物，快速判断你的场景与价值。
触发时机
当需要创建设计令牌、定义组件规范、配置 Tailwind 主题，或生成符合品牌的演示文稿/幻灯片时使用。
工作机理
- 通过 JSON 和 CSS 变量脚本构建三层令牌架构（基础→语义→组件）
- 使用 validate-tokens.cjs 检查代码中的硬编码值
- 幻灯片：使用 BM25 搜索和 CSV 决策系统选择布局、字体、颜色、图表，生成含 Chart.js 的 HTML 并校验令牌合规性
产生结果
系统化的设计令牌体系与符合品牌规范的战略幻灯片，具有一致样式与已校验的令牌使用。
使用场景
两种典型用法
场景 01
为新产品的 UI 构建令牌系统
前端团队启动新产品的 UI，需要一致样式。他们用 design-system 从品牌色通过 generate-tokens.cjs 生成三层令牌，将 CSS 变量交给 ui-styling。这避免硬编码、支持主题切换，并凭借清晰的设计到代码流程加速开发。
场景 02
生成符合品牌的路演幻灯片
市场人员需制作投资人路演 deck。使用 design-system 的幻灯片系统，运行 search-slides.py 获取上下文布局，应用 CSV 策略与设计令牌，生成含 Chart.js 的 HTML 幻灯片，并用 slide-token-validator.py 校验。产出零硬编码、符合品牌的说服性 deck。
技能关系
我用了哪些 Skills · 哪些 skills 用了我
依赖关系读作「上一格指向下一格」。当前 Skill 位于第二格，上下分别是影响它与被它影响的 Skill。
第一层 · 这些 Skills 用了我
第二层 · 当前 Skill
- design-systemStyle Guide · Workflow
第三层 · 我用了这些 Skills
完整关系图
在所属技能集的全局上下文中浏览当前 Skill 的关系。点击节点切换右侧详情,搜索框可快速定位技能。
技能文件
SKILL.md
SKILL.md从 GitHub 加载中…