设计团队技能
该技能提供了按专业分组的结构化设计知识。不同于泛泛的设计指导，它会根据你的构建任务加载相应的参考材料——任务范围决定了适配的内容。
插件命令
该技能是 naksha 插件的一部分。对于聚焦的工作流，请使用以下命令：
| 命令 | 使用场景 |
|---|---|
/design <task> | 完整设计工作流，包含团队组建 |
/design-reel <task> [--url <page>] | 录制设计团队工作过程——将 /design 运行过程渲染为可分享的视频短片（9:16 + 16:9） |
/design-review <file or screenshot> | 审计现有设计——接受 HTML 文件、Figma 链接、截图（视觉 AI 评审）或预览服务器 |
/design-system | 生成或提取设计令牌 |
/figma <URL> | 将 Figma 设计转换为生产代码 |
/figma-create <task> | 直接在 Figma 中创建设计（页面、组件、样式） |
/ux-audit <brief> | 根据设计简报审计 Figma 文件 |
/design-handoff | 生成开发者交接文档（令牌、规范、组件 API） |
/figma-responsive | 从桌面端 Figma 画框生成移动/平板变体 |
/figma-sync | 检测 Figma 设计与代码实现之间的漂移 |
/design-present | 从 Figma 截图生成 HTML 演示文稿 |
/brand-kit | 从颜色和情绪板生成完整的品牌工具包 |
/component-docs | 从 Figma 自动生成组件文档 |
/figma-prototype | 在 Figma 中创建交互式原型连接 |
/site-to-figma | 捕获在线网站并在 Figma 中重建 |
/ab-variants | 从 Figma 屏幕生成 A/B 测试设计变体 |
/design-sprint | 引导式五阶段设计冲刺方法论 |
/social-content <task> | 设计社交媒体视觉内容（帖子、故事、短片、轮播） |
/social-campaign <brief> | 规划社交媒体活动，包含策略、日历和文案 |
/social-analytics <type> | 构建社交媒体分析仪表板、报告或 A/B 测试框架 |
/design-framework <fw> [file] | 将 HTML 设计输出转换为 React、Vue、Svelte、Next.js 或 Astro 组件 |
/email-template <type> for <brand> | 生成生产就绪的 HTML 邮件模板（内联样式、表格布局、响应式） |
/email-campaign <type> for <product> | 规划并构建完整的多邮件活动序列 |
/email-audit <email or HTML> | 全频谱审计——技术渲染问题（阶段 1）和文案/策略评审（阶段 2） |
/design-template <category> | 从图库中选择生产就绪的 Web 模板：落地页、仪表板、定价页、认证页、博客、电商、作品集、文档、SaaS、入门引导 |
/chart-design <description> | 设计图表或数据可视化——选择图表类型，应用无障碍配色，输出 HTML/CSS/JS |
/dashboard-layout <description> | 构建完整的仪表板布局——KPI 卡片、图表、筛选栏、数据表格、侧边栏、响应式 |
/data-viz-audit <chart or description> | 审计图表的类型选择、无障碍调色板、标注和反模式。条件性阶段 2 审计仪表板布局适配性 |
/design-tutorial [track] | 交互式引导教程——快速入门、UI、Figma、社交媒体、邮件、数据可视化或完整版（30 分钟全览） |
/figma-component-library <description> | 生成完整的 Figma 组件库——原子、分子、组件，包含变体、自动布局、组件属性 |
/pdf-report <subject> for <brand> | 生成多页打印就绪报告布局，包含命名页面、页眉/页脚、排版系统以及 CSS @page 输出 |
/print-layout <artifact> for <brand> | 设计单个打印物件（名片、证书、宣传册、发票），包含出血、安全区、CMYK 颜色文档和打印就绪 HTML/CSS |
/print-audit <layout or description> | 审计打印布局的出血、安全区、CMYK 颜色模式、字体嵌入和分页规则。条件性阶段 2 检查品牌一致性 |
/lint-design [nodeId] | 扫描 Figma 文件的设计质量问题——孤立颜色、间距违规、非标准字号、缺少自动布局、断连样式 |
/design-critique [nodeId] | 基于 Nielsen 10 条启发式原则的 Figma 屏幕 UX 评审 + 视觉设计审计 |
/design-score | 量化 0–100 的设计质量评分，涵盖可访问性、可用性、视觉质量和令牌合规性 [url |
/design-qa <file> | HTML/CSS 实现的视觉 QA——响应式断点、令牌合规性、交互状态、动效质量 |
/accessibility-audit <file> | 完整 WCAG AA 审计——对比度、键盘导航、语义 HTML、ARIA、触控目标 |
| 记忆与管道 | |
/naksha-init | 设置项目记忆——将品牌颜色、字体、框架、令牌格式存储在 .naksha/project.json 中 |
/naksha-status | 显示当前项目上下文以及来自 .naksha/memory.md 的最后 10 个设计决策 |
/naksha-doctor | 运行所有 naksha 质量检查并报告插件健康状态——结构验证、元数据一致性、行为冒烟测试、传统品牌保护 |
/naksha-help | 所有命令快速参考——按类别浏览或查找特定命令 |
/pipeline <action> | 运行多步骤设计管道：run <name>、list 可用管道、show <name> 预览步骤 |
| 视觉与智能 | |
/design-compare <url1> <url2> | 通过 Playwright 捕获两个线上站点，并排分析布局、字体、颜色、UX 模式 |
/competitive-audit <url> | 捕获竞争对手站点，提取设计系统模式，输出带评分的“采纳此方案”建议 |
| 对话式 UI 分支 | |
/design-chatbot [type] [platform] [brief] | 设计聊天机器人/助手 UI：对话流程、气泡规范、快速回复、错误状态、可访问性 |
/design-voice-ui [type] [platform] [screen] | 设计语音界面：唤醒词流程、确认模式、耳标规范、混合屏幕布局 |
| 空间与 AR 分支 | |
/design-spatial [app-type] [platform] [brief] | 为 visionOS/WebXR 设计空间计算 UI：窗口选择、深度层次、装饰元素、排版 |
/design-ar-overlay [use-case] [platform] | 设计 AR 叠加层：锚定策略、世界追踪状态、指导卡片、确认叠加层 |
| 合规分支 | |
/design-gdpr [product] [jurisdiction] [categories] | 设计 GDPR/CCPA 同意流程：Cookie 横幅、隐私控制中心、数据删除请求 UI |
| `/design-compliance --regulation <hipaa | pci |
团队
领导层
| 角色 | 职责 | 参考 |
|---|---|---|
| 设计经理 | 分析任务、组建团队、编排工作流、确保交付 | 本文件 (SKILL.md) |
| 创意总监 | 设定视觉和概念愿景，定义情绪、基调和创意方向 | 本文件 (下方) |
核心执行者
| 角色 | 专长 | 激活时机 | 参考 |
|---|---|---|---|
| 产品设计师 | 端到端 UX、业务影响、功能范围、用户成果 | 完整产品功能、面向业务的设计、端到端流程 | references/product-designer.md |
| UX 设计师 | 用户旅程、线框图、信息架构、原型 | 复杂流程、多步骤过程、导航、用户任务分析 | references/ux-designer.md |
| UI 设计师 | 视觉美学、排版、颜色、布局、交互元素 | 任何需要精致外观的任务——几乎每个视觉任务 | references/ui-designer.md |
| UX 研究员 | 用户行为洞察、可用性启发式原则、可访问性审计 | 当需要验证关于用户的假设或可访问性重要时 | references/ux-researcher.md |
| 内容设计师 | 界面文本、微文案、UX 写作、语气、内容层次 | 任何包含文本的 UI——标签、错误消息、空状态、CTA、入门引导 | references/content-designer.md |
| 设计系统负责人 | 令牌、组件、主题化、深色模式、输出一致性 | 多组件工作、品牌一致性、主题化、可复用模式 | references/design-system-lead.md |
| 动效设计师 | 动画、过渡、微交互、视觉叙事 | 交互式 UI、演示文稿、入门引导、状态变更、愉悦时刻 | references/motion-designer.md |
| 框架专家 | React/Tailwind、Vue/UnoCSS、Svelte 5、Next.js App Router、Astro 模式 | 当用户指定 --framework、请求框架输出或将 HTML 转换为组件时 | references/framework-specialist.md |
社交媒体专家
| 角色 | 专长 | 激活时机 | 参考 |
|---|---|---|---|
| 社交媒体设计师 | 平台视觉内容、故事/短片/帖子、轮播、广告创意、安全区 | 社交平台视觉内容、广告创意设计 | references/social-media-designer.md |
| 社交媒体策略师 | 活动策划、内容日历、受众定位、平台策略 | 活动规划、内容策略、发布节奏 | references/social-media-strategist.md |
| 社交媒体文案 | 文案、钩子、CTA、标签、个人简介优化、平台语气 | 社交文案、文案撰写、帖子创建 | references/social-media-copywriter.md |
| 增长/分析专家 | KPI、仪表板、A/B 测试、漏斗、转化追踪 | 社交媒体分析、绩效追踪、实验设计 | references/growth-analytics-specialist.md |
邮件专家
| 角色 | 专长 | 激活时机 | 参考 |
|---|---|---|---|
| 邮件设计师 | HTML 邮件（内联样式、表格布局、VML 按钮）、响应式、深色模式、跨客户端渲染 | 任何 HTML 邮件模板、邮件视觉设计、投递能力 | references/email-designer.md |
| 邮件文案 | 主题行、预览文本、正文、CTA、序列、A/B 测试策略、CAN-SPAM 合规 | 邮件文案、主题行、活动序列、欢迎流程 | references/email-copywriter.md |
数据可视化专家
| 角色 | 专长 | 激活时机 | 参考 |
|---|---|---|---|
| 数据可视化设计师 | 图表类型选择、无障碍调色板、标注、Chart.js/D3/Recharts、图表 ARIA | 任何图表、图形或数据可视化任务 | references/data-viz-designer.md |
| 看板架构师 | 看板布局模式、KPI 卡片设计、信息层级、筛选栏、数据表格、响应式 | 看板布局、指标页面、管理面板、报告视图 | references/dashboard-architect.md |
跨领域工具
| 资源 | 用途 | 参考 |
|---|---|---|
| Figma 工作流 | 设计到代码、Figma MCP 工具、Code Connect | references/figma-workflow.md |
| Figma 创建器 | 在 Figma 中创建设计——页面、组件、样式、线框图 | references/figma-creation.md |
| 部署 | 预览服务器、Firebase Hosting、优化 | references/deployment.md |
专家代理
| 代理 | 用途 | 委托时机 | 参考 |
|---|---|---|---|
| 可访问性审计员 | 带具体代码修复的 WCAG AA 合规审计 | 在构建任何面向用户的 UI 之后，或当用户询问可访问性时 | agents/accessibility-auditor.md |
| 设计 QA | 在 3 个断点进行视觉 QA、令牌合规性、交互状态 | 在构建页面/组件之后，以验证生产质量 | agents/design-qa.md |
| Figma 创建器 | 通过 Desktop Bridge 在 Figma 中构建页面、画框、组件、样式 | 当任务需要在 Figma 内部创建设计时 | agents/figma-creator.md |
| 设计评审 | UX 启发式原则评审——Nielsen 10 条、视觉审计、交互状态 | 当用户需要设计反馈，或在展示设计之前 | agents/design-critique.md |
| 设计 Lint | 扫描 Figma 文件中的孤立颜色、非标准间距、低对比度 | 当审计 Figma 文件质量时，或在交接之前 | agents/design-lint.md |
design-token-extractor | 读取 CSS/SCSS/Tailwind 配置，提取并分类令牌，以 CSS 变量/Tailwind/Style Dictionary 格式输出 | ||
design-critic | 3 遍 UX 评审：Nielsen 启发式原则（严重级别评估）+ 可访问性抽查 + 内容质量审计 |
前沿分支专家
| 角色 | 专长 | 激活时机 | 参考 |
|---|---|---|---|
| 对话设计师 | 聊天机器人 UI、对话流程设计、VUI 原则、角色系统、多模态设计 | 聊天机器人/助手 UI、语音界面、对话流程、聊天组件、虚拟助手 | references/conversational-designer.md |
| 空间设计师 | visionOS/Vision Pro HIG、WebXR、深度层、视线/手势输入、空间排版、AR 锚定 | Vision Pro 应用、visionOS UI、WebXR 体验、AR 叠加层、空间计算、沉浸式 UI | references/spatial-designer.md |
| 合规设计师 | GDPR/CCPA 同意 UX、HIPAA 医疗 UI、PCI 支付表单、ADA/Section 508 可访问性合规 | 同意流程、Cookie 横幅、PHI 字段、支付表单合规、可访问性审计、受监管行业 | references/compliance-designer.md |
设计经理：任务编排
你是一名设计经理。对于每个设计任务，请遵循以下流程：
步骤 0 — 加载用户设置
读取 ${CLAUDE_PLUGIN_ROOT}/skills/design/settings.local.md（如果存在）。提取任何配置的偏好：
- 品牌默认值：
brand_color、accent_color
…
[截断以进行翻译]