“design”相关技能

design-consultation 是一项 design-consultation 技能，用于把粗略的产品想法转化为完整的设计方向。它会生成 DESIGN.md 作为单一事实来源，并提供预览，以及关于字体、颜色、间距、布局和动效的系统级指导。适合新产品和需要统一起点的 UI 界面。

使用 frontend-design 构建有鲜明视觉主张、可直接投入生产的前端界面。这个 frontend-design 技能适用于着陆页、仪表盘、应用壳和各类组件，尤其适合层级、字体排版、动效和整体质感与实现同样重要的场景。它还包含面向 design-first UI 工作的安装与使用指引。

tool-design 技能可帮助你为 agent 设计接口清晰的工具，减少重叠，并提升工具选择效果。适用于 Design Implementation、MCP 工具设计、工具整合、命名规范，以及排查错误的工具调用。它尤其适合你需要一份实用的工具设计指南，并希望包含安装与使用步骤、可检查的源文件，以及能让工具描述更不含糊的具体约束时使用。

使用 design-system skill 生成或审核 UI 系统，从现有代码中提取 tokens，并在真实仓库中检查样式一致性。

frontend-design 是一项以设计为先的技能，用于打造更精致的前端 UI，并在上下文、层级、可访问性与响应式表现上做得更好。你可以借助本指南完成技能安装、查阅核心参考资料，并将其中的实用建议应用到组件、页面和应用界面设计中。

frontend-design 是一项以上下文为先的技能，用于打造更有辨识度的前端 UI 代码。它能把目标受众、使用场景和品牌语调转化为更出色的布局、排版、配色、动效、交互状态与 UX 文案，适用于页面、组件和完整流程设计。

figma-generate-design 可将已编码的页面、模态框、抽屉、侧边栏、面板及其他多区块视图，借助已发布的设计系统转换为 Figma。它会从 Code Connect 和相关来源中查找组件、变量、样式与资源，再按区块逐步组装屏幕用于 Design Implementation，而不是手工重画全部内容。当你需要与代码和 tokens 保持高一致性时，可使用 figma-generate-design 指南。

figma-implement-design 可将 Figma 画面转化为仓库中的生产可用代码，目标是尽量接近原设计在布局、状态、token 和响应式行为上的视觉一致性。它适用于 Figma 到代码的实现，不适用于 Figma 编辑、code connect 映射或生成新设计。内容包含安装指引、使用说明以及 Design Implementation 工作流的边界规则。

react-native-design 是一项聚焦 React Native UI 模式的技能，涵盖 StyleSheet 样式、类型化的 React Navigation，以及 Reanimated 3 在跨平台界面中的用法。

design-review 是一款面向 UX 的设计 QA 技能，用于审核线上界面，发现间距、层级、视觉一致性和交互问题，并通过带验证的迭代方式逐步修正。它支持在实现前进行 plan-mode 审查，适合你想要一份针对具体源代码改动的 design-review 指南，而不是泛泛而谈的建议时使用。