Quieto Skills：为设计令牌 CLI 打造的 Agentic 智能技能系统\n\n## 设计令牌管理的痛点\n\n在现代设计系统开发中，设计令牌（Design Tokens）已成为连接设计与开发的核心桥梁。这些令牌定义了颜色、字体、间距、动画等视觉属性的标准化值，确保产品在不同平台和设备上保持一致的用户体验。\n\n然而，设计令牌的管理往往面临以下挑战：\n\n命令行操作的认知负担：Quieto Tokens 等 CLI 工具虽然功能强大，但命令参数繁多、语法复杂。设计师和非技术背景的产品经理难以快速上手，每次操作都需要查阅文档。\n\n上下文切换的成本：团队成员需要在设计工具（Figma）、代码编辑器（VS Code）和终端之间频繁切换，打断创作思路。\n\n协作流程的摩擦：设计令牌的更新需要经过提案、评审、合并等多个环节，缺乏一个统一的协作界面来跟踪和管理这些流程。\n\n## Quieto Skills 的解决方案\n\nQuieto Skills 项目通过引入 Agentic AI 的理念，将传统的 CLI 命令封装为智能技能（Skills），让用户可以通过自然语言对话来完成复杂的设计令牌管理任务。\n\n### 核心概念：Skill\n\n在 Quieto Skills 中，每个 Skill 是一个独立的、可复用的功能单元，它将一个或多个 CLI 命令包装成对话式工作流。一个 Skill 通常包含以下组件：\n\n1. 意图识别（Intent Detection）\n\nSkill 定义了它能够处理的自然语言意图。例如：\n\ntypescript\nintents: [\n \"生成新的颜色令牌\",\n \"create a new color token\",\n \"添加品牌主色\",\n \"define primary brand color\"\n]\n\n\n当用户输入类似"我想添加一个新的品牌主色"时，系统能够识别并路由到对应的 Color Token Skill。\n\n2. 参数提取（Parameter Extraction）\n\nSkill 使用 LLM 从对话中提取必要的参数。例如，对于创建颜色令牌的任务：\n\ntypescript\nparameters: {\n tokenName: { type: \"string\", required: true },\n colorValue: { type: \"color\", required: true },\n description: { type: \"string\", required: false }\n}\n\n\n用户可以说："创建一个名为 brand-primary 的令牌，颜色是 #FF6B6B，用于主要按钮和链接"，系统会自动提取 tokenName、colorValue 和 description。\n\n3. 工作流编排（Workflow Orchestration）\n\n复杂的任务往往需要多个步骤。Skill 可以定义多轮对话工作流：\n\ntypescript\nworkflow: [\n { step: \"confirm_parameters\", message: \"确认创建令牌 {{tokenName}}，颜色 {{colorValue}}？\" },\n { step: \"check_conflicts\", action: \"validateTokenName\" },\n { step: \"execute\", action: \"createToken\" },\n { step: \"notify\", message: \"令牌已创建！需要同步到 Figma 吗？\" }\n]\n\n\n4. CLI 命令映射\n\nSkill 最终会将对话中提取的参数映射到具体的 CLI 命令：\n\ntypescript\ncommand: \"quieto tokens create --name {{tokenName}} --value {{colorValue}} --type color\"\n\n\n### 技能目录与生态\n\nQuieto Skills 提供了丰富的预置技能，覆盖设计令牌管理的全生命周期：\n\n令牌操作技能\n\n- /create-token：创建新的设计令牌\n- /update-token：更新现有令牌的值或元数据\n- /delete-token：删除不再使用的令牌\n- /list-tokens：查看令牌列表，支持按类型、主题筛选\n- /search-tokens：通过语义搜索查找相关令牌\n\n主题与变体技能\n\n- /create-theme：创建新的主题（如暗黑模式、高对比度）\n- /switch-theme：切换当前工作主题\n- /compare-themes：对比两个主题的差异\n\n同步与集成技能\n\n- /sync-figma：将令牌同步到 Figma 设计文件\n- /sync-code：生成代码平台的变量（CSS、iOS、Android）\n- /import-tokens：从其他格式（Style Dictionary、Tokens Studio）导入\n\n协作与审核技能\n\n- /propose-change：提交令牌变更提案\n- /review-changes：查看待审核的变更\n- /approve-change：批准变更提案\n- /comment-on-change：对提案添加评论\n\n## 技术实现架构\n\nQuieto Skills 采用模块化架构，由以下核心组件构成：\n\n### Skill Runtime\n\n这是系统的核心引擎，负责：\n\n- 对话管理：维护多轮对话的上下文状态\n- 意图路由：将用户输入匹配到最合适的 Skill\n- 参数验证：确保提取的参数符合预期类型和约束\n- 错误处理：当 CLI 命令失败时，向用户提供友好的错误解释和修复建议\n\n### CLI Adapter\n\n封装层，将 Skill 的抽象操作转换为具体的 CLI 调用：\n\n- 支持本地和远程的 Quieto CLI 实例\n- 处理命令执行、输出解析和错误捕获\n- 提供命令的幂等性和原子性保证\n\n### Context Provider\n\n为 Skill 提供必要的上下文信息：\n\n- 项目上下文：当前工作目录、配置文件、令牌集合\n- 用户上下文：用户角色、权限、偏好设置\n- 历史上下文：之前的操作记录、待办事项\n\n### Integration Layer\n\n与外部系统的集成接口：\n\n- Slack/Discord Bot：在团队聊天频道中调用 Skill\n- VS Code Extension：在编辑器内嵌的聊天面板中使用\n- Web Dashboard：浏览器端的可视化界面\n\n## 使用示例\n\n以下是几个典型的使用场景，展示 Quieto Skills 如何简化设计令牌管理：\n\n### 场景一：快速创建新令牌\n\n传统 CLI 方式：\n\nbash\nquieto tokens create \\\n --name=\"spacing-lg\" \\\n --value=\"24px\" \\\n --type=dimension \\\n --description=\"Large spacing for section margins\" \\\n --category=\"spacing\"\n\n\n使用 Quieto Skills：\n\n\n用户：创建一个新的间距令牌，叫 spacing-lg，值是 24px\nAI：好的，正在创建 spacing-lg = 24px。需要添加描述吗？\n用户：用于区块间距的大尺寸\nAI：已创建 spacing-lg 令牌（24px，用于区块间距的大尺寸）。\n\n\n### 场景二：批量更新主题\n\n传统方式：\n\n需要手动编辑多个令牌文件，或使用复杂的脚本。\n\n使用 Quieto Skills：\n\n\n用户：我想把所有主色调从蓝色改成紫色\nAI：找到了 12 个使用蓝色的主色调令牌。这是变更预览：\n - brand-primary: #0066FF → #6B46C1\n - brand-primary-hover: #0052CC → #553C9A\n ...\n用户：确认修改\nAI：已更新所有主色调令牌。需要创建变更提案吗？\n\n\n### 场景三：跨团队协作\n\n\n用户：/propose-change\nAI：好的，请描述你想进行的变更。\n用户：我想把所有圆角从 4px 改成 8px，让界面更现代\nAI：检测到 15 个圆角令牌将被修改。已创建提案 #42。\n 相关审核人：@design-lead @frontend-lead\n 查看详情：https://quieto.app/proposals/42\n\n\n## 扩展与自定义\n\nQuieto Skills 提供了完整的 Skill SDK，允许团队开发自定义技能：\n\ntypescript\nimport { defineSkill } from '@quieto/skills-sdk';\n\nexport default defineSkill({\n id: 'custom-export',\n name: 'Custom Export',\n description: 'Export tokens to custom format',\n \n intents: [\n '导出为自定义格式',\n 'export to custom format'\n ],\n \n parameters: {\n format: {\n type: 'enum',\n options: ['xml', 'yaml', 'csv'],\n required: true\n },\n destination: {\n type: 'string',\n required: true\n }\n },\n \n async execute({ parameters, context }) {\n const tokens = await context.getTokens();\n const formatted = customFormatter(tokens, parameters.format);\n await fs.writeFile(parameters.destination, formatted);\n return { success: true, message: `Exported to ${parameters.destination}` };\n }\n});\n\n\n## 项目状态与社区\n\nQuieto Skills 目前处于活跃开发阶段，核心功能已稳定可用。项目采用 MIT 协议开源，欢迎社区贡献。\n\n路线图：\n\n- v0.5（当前）：核心 Skill Runtime 和基础技能集\n- v0.6：增强的上下文感知和个性化推荐\n- v1.0：完整的插件生态和第三方集成市场\n\n贡献方式：\n\n- 提交 Bug 报告和功能建议\n- 开发新的 Skill 并提交到社区仓库\n- 改进文档和教程\n- 参与代码审查和架构讨论\n\n## 结语\n\nQuieto Skills 展示了 Agentic AI 在开发者工具领域的应用潜力。通过将复杂的 CLI 操作转化为直观的对话式交互，它降低了设计令牌管理的门槛，让设计师、产品经理和开发者能够在统一的对话界面中高效协作。对于正在使用或计划采用 Quieto Tokens 的团队，这是一个值得关注的生产力增强工具。