> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trae.cn/llms.txt
> Use this file to discover all available pages before exploring further.
本文档精选了 TRAE Work 技能市场中的一系列核心技能，涵盖开发工具、效率提升、界面设计、数据分析与内容创作领域，并通过实践案例，展示了它们在不同场景中的具体应用。每个技能都包含详细的功能简介、应用场景和实际使用案例。
本文介绍的技能如下：
| | | \
|**技能名称** |**简介** |
|---|---|
| | | \
|git-commit |根据 Conventional Commits 规范生成提交信息，并在分析代码变更的基础上自动完成变更拆分、文件暂存与安全提交。 |
| | | \
|react-best-practices |对 React 或 Next.js 项目的代码进行质量审查与性能分析，并针对结构与实现问题提供优化建议。 |
| | | \
|webapp-testing |基于 Playwright 生成并执行自动化测试脚本，以完成前端功能验证、界面调试与页面行为分析。 |
| | | \
|composition-patterns |基于组件组合模式对复杂组件进行拆分与重构，并优化组件结构与状态管理方式。 |
| | | \
|agent-browser |通过脚本化方式执行浏览器操作，以完成页面交互、数据提取与自动化流程控制。 |
| | | \
|brainstorming |在开发前强制对需求进行梳理与澄清，并通过交互式对话逐步形成可执行的设计方案与需求文档。 |
| | | \
|figma |解析 Figma 设计稿并生成对应的前端代码，同时复用现有设计系统与组件规范。 |
| | | \
|frontend-design |从零生成具有明确视觉风格的前端界面，在排版、配色与动效等方面完成整体设计。 |
| | | \
|frontend-skill |构建结构清晰且风格克制的前端界面，并通过规范的信息层级与排版提升视觉效果。 |
| | | \
|chart-visualization |根据数据特征选择合适的图表类型，并生成用于展示趋势、对比关系或结构关系的可视化结果。 |
| | | \
|data-analysis |基于 SQL 对 Excel 或 CSV 数据进行查询、聚合与多表关联分析，并输出结构化结果。 |
| | | \
|canvas-design |生成海报、封面等原创静态视觉内容，并通过构图与图形表达设计主题。 |
| | | \
|doc-coauthoring |通过分阶段的协作流程组织与完善文档内容，并生成结构清晰、逻辑完整的文稿。 |
## 关于 TRAE Work 的技能市场 {#8758d598}
TRAE Work 的技能市场为不同使用场景提供了多种技能，涵盖数据分析、界面设计、开发工具等领域。你可以直接从中安装所需技能。详情参考[技能](/solo/skills)。
## 开发工具 {#db18d300}
### git-commit {#7d8024b3}
| | | \
|**作者** |GitHub |
|---|---|
| | | \
|**简介** |git-commit 是一个基于 Conventional Commits 规范的代码提交辅助工具。它可以分析代码变更，自动完成文件分组与暂存，并生成结构化的提交信息。该技能内置严格的 Git 安全协议与最佳实践，确保提交历史规范且安全。 |
| | | \
|**应用场景** |* **生成规范的提交信息** |\
| | 在提交代码时，AI 会通过该技能来自动分析暂存区或工作区的代码差异（diff），识别变更类型（如 feat、fix、docs）及作用范围（scope），并生成符合 Conventional Commits 规范的提交信息。提交描述必须使用现在时祈使句，长度不超过 72 字符。 |\
| |* **按逻辑拆分与暂存变更** |\
| | 当工作区中存在多项变更时，该技能支持通过文件路径、通配符或交互式方式（`git add -p`）来暂存特定文件，确保单次提交仅包含一个变更。同时，该技能会严格遵守安全准则，不会将 `.env`、凭证或私钥等机密文件加入提交列表。 |\
| |* **安全执行 Git 提交流程** |\
| | 执行 `git commit` 时，该技能支持让你以交互式方式修改或覆盖自动生成的类型、范围和描述。同时，它会严格遵循 Git 安全协议： |\
| | * 不修改 Git 配置； |\
| | * 不执行破坏性命令（如 `--force`、`hard reset`）； |\
| | * 默认不跳过代码检查钩子（`--no-verify`）； |\
| | * 钩子校验失败时，需修复后重新提交，不使用 `git commit --amend` 覆盖历史提交。 |
在以下示例中，AI 调用 “git-commit” 技能，按顺序执行 `git status`、`git diff`、`git add`、`git commit` 和 `git log` 命令，高效完成一次符合规范的提交。
### react-best-practices {#a184acdd}
| | | \
|**作者** |Vercel |
|---|---|
| | | \
|**简介** |`react-best-practices` 是一个面向 React 和 Next.js 项目（尤其是 TSX/JSX 文件）的代码质量审查与性能优化工具。它的内置规则基于 Vercel 官方最佳实践（8 类、64 条，按优先级划分），覆盖组件结构、Hooks 规范、a11y、TypeScript 以及服务端/客户端性能优化。该技能会在组件编写、修改或重构时自动被触发，然后执行代码检查并提供优化建议。 |
| | | \
|**应用场景** |* **核心性能瓶颈诊断与优化** |\
| | 针对数据请求与页面加载，该技能重点解决以下两大 CRITICAL 优先级的问题： |\
| | * **请求瀑布流**：使用 `Promise.all`、`Suspense` 流式渲染，优化 API 路由中的异步依赖。 |\
| | * **Bundle 体积**：避免引入冗余的 barrel file，使用 `next/dynamic` 动态加载组件，同时延迟第三方脚本的加载，从而提升页面的感知加载速度。 |\
| |* **UI 架构审查与技术栈迁移** |\
| | 检测到传统 CSS-in-JS（如 `styled-components`、`@emotion`）或大型组件库（如 `@mui/material`、`@chakra-ui/react`）时，该技能会提示你迁移至 `shadcn/ui + Tailwind CSS` 等现代技术栈，以提升服务端渲染性能与构建效率。 |\
| |* **组件渲染与状态管理优化** |\
| | 在组件开发与重构阶段，该技能会审查代码并提供优化建议： |\
| | * **服务端/客户端协同**：规范 React Server Components 的数据序列化与缓存机制（如 `React.cache()`），并优化客户端的 SWR 请求去重。 |\
| | * **重渲染控制**：规范 Hooks 的使用，优先采用派生状态（Derived State），避免过度使用 `useEffect`；结合 `useTransition` 与缓存策略，降低不必要的重渲染。 |
以下案例中，AI 调用 “react-best-practices” 技能优化了一个 TypeScript 项目。结果如下：
::::cols
@col 50
AI 调用该技能后的输出：
@col 50
具体优化点（以 diff 形式展示）：
* **避免行内组件 & CSS 替代 JS 交互状态**
将 `UserRow` 提取到组件外部，并用 `styled-components` 的 `:hover` 伪类替代 `onMouseEnter` 维护的 JS 状态。
* **渲染健壮性与内存泄漏修复**
修复了防抖函数遗漏的 `clearTimeout`，以及 React 条件渲染数组长度的陷阱（可能导致页面输出 `0`）。
::::
### webapp-testing {#f608875e}
| | | \
|**作者** |Anthropics |
|---|---|
| | | \
|**简介** |webapp-testing 是一个基于 Playwright 的本地 Web 应用测试工具集，支持前端功能验证、UI 调试、页面截图及浏览器控制台日志采集，遵循 “先侦查后执行” 的流程。该技能提供示例与辅助脚本，覆盖静态 HTML 自动化测试、元素定位、日志抓取能力，并可在多服务场景下统一管理服务器生命周期。 |
| | | \
|**应用场景** |* **前端功能验证** |\
| | 在本地开发 Web 应用（如 React、Vue、Svelte）时，通过自然语言描述测试需求（如 “测试登录流程”），AI 会调用该技能，自动生成 Playwright 脚本，模拟用户操作并返回结果。 |\
| |* **UI 行为调试与分析** |\
| | 当你发现页面中某元素渲染异常或交互行为异常时，可向 AI 下达指令（例如：“截取首页完整截图” 或 “检查按钮的 DOM 结构”），AI 会执行该技能中的对应脚本，捕获截图或获取 HTML 内容，并将检查结果返回给你，以帮助你定位问题。 |\
| |* **多服务应用测试** |\
| | 若你的应用为前后端分离架构，测试前端功能需后端 API 服务同步运行，只需向 AI 提供项目结构与启动命令，AI 会借助该技能中的 `with_server.py` 脚本来同时启动所有必需服务，再运行测试脚本，确保在完整的环境中执行测试。 |\
| |* **静态页面测试** |\
| | 若你有不依赖服务器的纯静态 HTML 页面，需验证其内容或结构，只需向 AI 提供文件路径与测试需求，AI 会编写脚本并通过 `file://` 协议在浏览器中打开该文件，然后执行自动化验证。 |
在以下案例中，AI 测试了一个网站的登录功能。它调用了 “webapp-testing” 技能，使用 Playwright 编写自动化测试脚本 `test_login.py`，对登录功能进行了端到端测试，并输出测试结果。
### composition-patterns {#11eca1f1}
| | | \
|**作者** |Vercel |
|---|---|
| | | \
|**简介** |composition-patterns 是一个面向 React 组件组合模式与架构设计的代码审查与重构工具。其核心目标是解决组件迭代过程中因逻辑叠加导致的 props 膨胀问题，通过复合组件（Compound Components）、状态提升（Lifting State）及现代 React API（含 React 19），构建具备高灵活性、高可维护性的组件体系。 |
| | | \
|**应用场景** |* **重构臃肿组件** |\
| | 当一个组件包含过多业务分支，充斥大量布尔 props（比如 `isPrimary`、`hasIcon`）和多层 `if-else` 时，你可以使用该技能来重构它。该技能会协助你将一个复杂组件拆分为多个细粒度子组件，以组合方式替代参数扩展，从而降低组件的复杂度。 |\
| |* **设计可复用的组件库** |\
| | 在实现 `Tabs`、`Modal`、`Select` 这类通用组件时，该技能采用 Compound Components 来设计 API：将状态收敛在内部（通常为 `Provider` + `Context`），同时把结构的控制权交给使用者，让组件可以自由组合，而非固定用法。 |\
| |* **设计灵活的业务 API** |\
| | 面对不确定的业务需求，需要为组件预留足够的内部扩展空间时，可以使用该技能。它会优先使用 `children` 来组合节点，而非一开始就引入复杂的 `renderProps` 或大量配置项，这样可以减少组件内部的复杂度，也更容易应对后续变化。 |\
| |* **审查组件架构并规范状态** |\
| | 你可以将该技能作为团队的组件设计审核工具，在代码审查时用于评估组件架构是否健壮。该技能强制推行状态解耦，确保状态管理内聚在 `Provider` 中，并定义标准化的 `Context` 接口，保证复杂组件树中的状态流向清晰、易于维护。 |\
| |* **适配 React 19 API** |\
| | 当需要重构组件以适配 React 19 的新特性时，可以使用该技能。例如，它会协助你移除冗余的 `forwardRef` 包装，并使用更灵活的 `use()` hook 替代传统的 `useContext()`，让组件代码更符合最新的 React 演进方向。 |
以下案例中，AI 调用 “composition-patterns” 技能优化了一个 TypeScript 项目。结果如下：
::::cols
@col 50
AI 调用该技能后的输出：
@col 50
具体优化点（以 diff 形式展示）：
* **消除布尔属性泛滥**
移除了 `hasImage`、`hasIcon`、`showFooter`、`isLoading`、`isError` 等大量用于控制 UI 显隐的布尔属性，改为使用 `children` 组合。
* **显式变体**
用明确的 `variant` 枚举属性替换了原本单一的 `isPrimary` 布尔值，为后续增加更多样式（如 `secondary`、`outline`）提供了扩展性。
* **复合组件架构**
将原本大而全的庞大 JSX 渲染逻辑（无数个 `if/else`），拆分为职责单一的小组件，并通过挂载到主组件上对外暴露。
::::
## 效率提升 {#a36d5c1d}
### agent-browser {#52b6bf6f}
| | | \
|**作者** |Vercel |
|---|---|
| | | \
|**简介** |agent-browser 是一个面向 AI 智能体的浏览器自动化 CLI 工具，用于执行网页交互与数据操作，包括页面导航、表单填写、点击操作、截图、数据提取及 Web 应用测试等，适用于以编程方式控制浏览器的自动化流程。 |\
| |该技能支持的典型请求包括：打开页面、填写表单、点击元素、截图、抓取数据、登录网站等。 |
| | | \
|**应用场景** |\
| |* **测试网页中的复杂交互** |\
| | 当一个网页包含复杂的表单填写、下拉选择或多步点击时，可以借助该技能来自动化测试该网页。该技能通过快照命令（`snapshot`）获取页面内所有元素的简化标识（如 `@e1`），然后通过批量命令（`batch`）执行操作，从而提升执行效率并降低 Token 消耗。 |\
| |* **抓取网页中的数据** |\
| | 当你需要从多个网页提取特定信息或结构化数据时，可以使用该技能。它支持提取页面链接（`--urls`）及指定元素内容（如 `get text`），并自动处理 Iframe，非常适用于结构化数据采集。 |\
| |* **响应式布局与视觉回归验证** |\
| | 当需要验证网页在不同屏幕尺寸或设备上的表现时，可以使用该技能。它支持动态调整视口分辨率、模拟各类设备（如 iPhone 14），并生成全页面或特定元素的截图；结合 diff 功能，该技能非常适用于 UI 回归测试与布局校验。 |
**实践案例**
::::cols
@col 50
**场景**：测试一个包含 “选择套餐”、“高级配置”、“完善信息” 三步流程的企业套餐订阅页面。
@col 50
**操作与结果**：AI 调用 “agent-browser” 技能，通过 `click`、`snapshot` 等自动化操作，成功验证了三步流程中的所有交互逻辑（包括价格切换、组件响应、表单校验、数据保留及提交），并发现和修复了一个因 `z-index` 不当导致按钮被遮挡的层级问题。
::::
### brainstorming {#154cf932}
| | | \
|**作者** |Obra |
|---|---|
| | | \
|**简介** |Brainstorming 是一个强制性的前置设计与需求分析技能，旨在通过协作式对话，将你的初步想法转化为结构化、可执行的设计方案与需求文档。在完成文档并获得用户确认前，禁止执行任何实现类操作（如编写代码、初始化项目等）。 |\
| |该技能避免了 “需求太简单而无需设计” 的反模式，所有需求均需经过设计阶段，从而降低最终实现的偏差与返工率。 |
| | | \
|**应用场景** |* **引入全新功能与组件** |\
| | 你可以在需要增加新的业务逻辑、开发独立的模块，或在现有系统中扩展新能力等场景中使用该技能。它会引导你明确新需求，梳理现有代码与新功能的耦合度，并提供最终的设计方案。 |\
| |* **修改或重构现有逻辑** |\
| | 当你需要修改或重构现有逻辑（例如臃肿的代码）时，该技能会在修改前先探索现有结构和瓶颈，然后提出针对性的改进方案。 |\
| |* **拆解并规划大型项目** |\
| | 面对搭建类似 Notion 的协作平台等宏大需求时，该技能会在早期阶段对项目范围进行收敛。它会引导你理清各个子系统的依赖关系，确定最小可行性版本（MVP），将整体项目拆分为多个可独立开发的小任务。随后，它会优先为第一个子项目启动设计流程。 |\
| |* **涉及 UI/UX 的视觉辅助决策** |\
| | 当讨论诸如 “仪表盘布局” 或 “页面交互” 等需要直观展示的需求时，该技能会提供基于浏览器的可视化工具（Visual Companion），直接渲染线框图、架构图或多套布局方案。这种直观的对比展示能够帮助你更准确地完成设计相关的决策。 |
**实践案例**
::::cols
@col 50
**第一阶段：提问**
提示词：帮我创建一个宠物用品购物网站。
收到请求后，AI 自动调用 “brainstorming” 技能，在开发前通过一系列提问与我进行头脑风暴，收集关于目标用户、核心功能、设计偏好和技术栈选择的信息。
问题一：
问题二：
问题三：
问题四：
@col 50
**第二阶段：输出方案**
在获得充足的信息后，AI 输出了一份网页设计方案让我确认。我可以选择接受方案或提出修改意见，待方案设计定稿后再进入开发阶段。
::::
## 界面设计 {#6731a293}
### figma {#3d40d804}
| | | \
|**作者** |Figma |
|---|---|
| | | \
|**简介** |figma 是一个基于 Figma MCP Server 的设计到代码转换工具。其标准流程包括：通过设计链接获取节点结构（`get_design_context`）与参考截图（`get_screenshot`），生成初始代码（通常为 React + Tailwind），然后将生成的初始代码重构为符合项目规范的代码。 |\
| |在实现过程中，该技能会让 AI 优先复用现有设计系统（如 tokens、基础组件、架构模式），并通过原生接口直接集成所需的图像与 SVG 资源，最终通过截图对比来完成视觉与行为校验。 |
| | | \
|**应用场景** |* **将 Figma 设计稿实现为代码** |\
| | 通过该技能，AI 可以把 Figma 中的某个页面、组件或模块实现为精确的前端代码。适用于对视觉一致性要求极高的场景，比如产品官网、落地页、营销页等。 |\
| |* **用现有组件实现 Figma 设计** |\
| | 当设计稿与现有项目的设计系统存在差异时，可以用这个技能做转换。在尽量还原 Figma 视觉效果的前提下，AI 会优先复用项目中已有的组件和样式规范（如 color、typography、spacing 等），避免重复实现或引入不一致的写法。 |\
| |* **按节点实现或修改代码** |\
| | 当你只需要实现或修改 Figma 中的某个具体部分（比如按钮、卡片或一个模块）时，可以直接针对这个节点来开发。通过 Figma 链接定位到对应的节点，并获取相关的设计上下文，只改需要改的部分，适合做局部调整或增量迭代。 |
:::tip 提示
在使用 “figma” 技能前，你需要从 TRAE Work 的 MCP 市场添加 “Figma AI Bridge” 这一 MCP Server，详细步骤参考[此文档](https://docs.trae.cn/solo/remote-mcp-server#5f985f98)。
:::
**使用案例**
::::cols
@col 50
Figma 设计稿：
@col 50
AI 调用 “Figma AI Bridge” MCP Server 和 “figma” 技能后，其初次生成的代码已具备极高的视觉还原度。
::::
### frontend-design {#a43af8c9}
| | | \
|**作者** |Anthropics |
|---|---|
| | | \
|**简介** |frontend-design 用于生成具备独特风格和高质量的前端界面，满足生产级 UI 标准。它的核心目标是避免生成同质化的“AI 风格” 界面，而是通过选择大胆、明确的美学主题（例如：极简、复古、未来感、野兽派等），并注重排版、色彩、动效、空间布局等细节，来打造具有辨识度和艺术感的前端界面。 |
| | | \
|**应用场景** |* **构建网页组件或页面** |\
| | 在从零开始创建一个具体的 UI 时（如一个 React 组件、一个 HTML/CSS 布局，或一个独立的静态页面），该技能会确保这个 UI 不仅功能完善，而且在视觉上具有辨识度。 |\
| |* **开发完整的 Web 应用或网站** |\
| | 在构建落地页、仪表盘或小型网站等产品时，该技能会让 AI 从整体出发，确立一个统一且鲜明的设计风格，并将其全局应用到产物中。 |\
| |* **美化或重塑现有界面** |\
| | 针对已有但设计质量较低的界面，可以使用该技能来提升界面的整体视觉质量，包括优化字体、配色、动效、布局等。 |
在以下案例中，我让 TRAE Work 开发一款 MBTI 心理测试小游戏，可明显观察到使用 “frontend-design” 技能前后的视觉差异：
* **使用技能前**：UI 界面充满了典型的 AI 审美——高饱和度的霓虹渐变色、通用的 “闪亮星星” 图标以及粗壮的无衬线字体。整体视觉显得较为套路化，缺乏心理测试产品应有的神秘、探索感。
* **使用技能后**：UI 质量显著提升。在不失细节和保持体验完整性的前提下，整体设计更简约、独特。克制的暗色调与优雅的衬线排版赋予了 UI 界面一种深邃、神秘的质感。
::::cols
@col 50
使用 “frontend-design” 技能前：
@col 50
使用 “frontend-design” 技能后：
::::
### frontend-skill {#b611e25a}
| | | \
|**作者** |OpenAI |
|---|---|
| | | \
|**简介** |frontend-skill 适用于打造视觉冲击力强的落地页、网站、应用、原型、Demo 或游戏界面。它强调克制的构图、图像主导的层级、统一的内容结构和精致动效。 |\
| |该技能要求在编写代码前建立明确的视觉基调、内容规划、交互理念。当界面质量更依赖于艺术指导和视觉张力，而非功能堆砌时，该技能可以帮助你交付具有明确设计意图、符合现代审美的作品。其实现方式通常是聚焦于一个核心创意，并通过突出的视觉元素、简洁的文案、严格的间距和令人印象深刻的动效来呈现。 |
| | | \
|**应用场景** |* **构建高质量的落地页与官网** |\
| | 该技能可用来构建需要建立强烈视觉焦点的页面。它在设计上强调首屏全画幅视觉、大面积留白与高对比度的文字排版，通过精简的内容结构清晰传达产品信息，避免使用堆叠式卡片与过多装饰元素。 |\
| |* **开发现代化的 Web 应用** |\
| | 该技能可用来开发强调效率和信息密度的软件界面，它会采用克制的层级关系和极简风格（类似 Linear 的设计语言），采用合适的字体排印和间距来组织内容，仅保留必要的边框和强调色，去除多余的阴影与渐变背景，且仅在真正代表交互的模块上使用卡片，以确保界面的整洁与易读性。 |\
| |* **开发高质量的原型与 Demo** |\
| | 该技能可用来制作对视觉质量、叙事性和动态效果有较高要求的演示项目。设计上强调图像的叙事作用，要求使用具有临场感的高质量真实摄影图，避免使用抽象的 3D 渲染或带 UI 边框的网图。同时严格限制动效的数量，仅保留 2-3 个能改变页面氛围的核心动效，确保整体的交互克制但令人印象深刻。 |
在以下案例中，我让 TRAE Work 开发一个 AI 协作平台的首页，主题为 “Work with AI”，可明显观察到使用 “frontend-skill” 技能前后的视觉差异：
* **使用技能前**：界面呈现了典型、模版化的 AI 风格，包括居中排版，高饱和度的双色渐变与夸张的环境光晕。整体视觉虽然炫酷，但带有浓重的 “AI 味”，缺乏品牌个性。
* **使用技能后**：UI 设计成功跳出了常规的 AI 审美框架，整体采用左对齐结构，页面排版更具特色。同时，单色高亮、直角按钮以及收敛的光影处理，让整体视觉更具克制、深邃的质感。
::::cols
@col 50
使用 “frontend-skill” 技能前：
@col 50
使用 “frontend-skill” 技能后：
::::
### 哪个前端设计 skill 更适合我？ {#5f309440}
| | | | | \
| |**figma** |**frontend-design** |**frontend-skill** |
|---|---|---|---|
| | | | | \
|**核心定位** |将 Figma 上的设计稿高度还原为代码，即 Design-to-Code。 |大胆的创意与极致的视觉张力。 |克制、高级感与现代感的设计。 |
| | | | | \
|**主要功能** |通过 Figma MCP Server，读取你提供的 Figma 链接或 Node ID，获取设计上下文、设计变量、图片资源，并将其精准翻译为生产级别的代码（如 React + Tailwind）。 |当你只有需求而没有设计稿时，它能从零帮你设计并编写具有强烈风格的前端界面。它极力避免 “AI 味” 的审美和千篇一律的组件库风格。 |用于构建结构严谨、排版专业的落地页（Landing Page）、SaaS 应用界面或原型。它推崇类似 Linear 那种干净、克制、高端的设计语言。 |
| | | | | \
|**特点** |不负责提供设计创意，而是严格遵守现有的设计稿，并复用你项目中的设计系统、Token 和组件。 |强调艺术指导。它会要求明确的视觉基调（例如：极致极简、粗野主义、复古未来风、高级杂志风等），并在排版、字体（拒绝常见字体）、色彩对比、特殊视觉细节上做大胆尝试。 |强调信息层级和排版。默认拒绝泛滥的卡片式设计，主张全屏大图、精准的留白、极少的颜色干扰、精炼的文案，以及少量但优雅的动效（如 Framer Motion 滚动反馈）。 |\
| | | | |
| | | | | \
|**何时选择** |* 你已经有了现成的 Figma 设计稿。 |\
| |* 你需要 AI 帮你把 Figma 上的某个页面或组件，精准地写成代码，并且要求视觉和行为上的高度还原。 |* 你没有设计稿，需要从零构建一个页面。 |\
| | |* 你需要这个界面非常独特、吸引眼球、具有强烈的艺术风格。 |* 你没有设计稿，需要从零构建一个页面。 |\
| | | |* 你的界面侧重于功能性和信息获取效率，强调克制的设计风格、清晰的信息层级。 |
## 数据分析 {#946b1283}
### chart-visualization {#03ab4749}
| | | \
|**作者** |ByteDance |
|---|---|
| | | \
|**简介** |chart-visualization 技能可以帮你快速将数据可视化。它会根据数据特征，从 26 种图表类型中自动选择最合适的一种，并提取生成图表所需的参数。随后，它会通过 Node.js 脚本生成高质量的图表图片，并返回图片 URL 及完整参数信息。 |
| | | \
|**应用场景** |* **多维数据对比** |\
| | 通过该技能，AI 可将时间序列与分类数据转换为折线图、柱状图或双轴图，帮助你观察核心指标随时间的变化趋势及周期性波动，并在同一视图中对比不同类别的数据的差异。例如，你可以用该技能来同时展示多项产品的销量变化与利润数据，用于评估业务的整体表现。 |\
| |* **复杂层级与拓扑网络梳理** |\
| | 针对具有层级关系或流向关联的非线性数据，AI 可以通过该技能生成相应的组织架构图、网络关系图或桑基图。通过解析节点与连接关系，呈现层级结构、流转路径及关键转化情况，适用于梳理系统结构、分析资源流向或分析用户行为路径等场景。 |\
| |* **地理性数据可视化** |\
| | 当数据包含地理信息或需要对数据统计分析时，AI 可以通过该技能生成区域地图、轨迹图，以及箱线图、直方图。它既可展示数据在空间上的分布情况，也可展示数据的分布特征，如数据的集中趋势、中位数及异常值，特别适用于区域市场监控和底层数据特征排查。 |
**使用案例一：**
* 提示词：
```Plain Text
帮我生成一张双轴图，用来展示“2025年各季度线上与线下营收及核心指标趋势对比”。
X 轴的含义为“季度”，包含四个季度：Q1（春季）、Q2（大促季）、Q3（淡季）、 Q4（年末旺季）。
Y 轴的含义为 “营收规模”。
这张图需要包含以下两个数据系列：
第一个系列是“线上营收（百万元）”，数据依次为：320、580、410、750。
第二个系列是“线下营收（百万元）”，数据依次为：450、480、430、620。
两个系列的数据都使用柱状图展示。此外，需要应用 academy 主题，并且自定义两个系列的颜色面板依次为： #5B8FF9 （蓝色）、#5AD8A6 （绿色）。
```
* AI 使用 “chart-visualization” 技能后生成的图表：
**使用案例二：**
* 提示词：
```Plain Text
帮我生成一张网络关系图，用于梳理“电商交易核心微服务架构拓扑”。
首先，系统包含以下10个核心节点：
API网关、用户服务、商品服务、订单服务、支付服务、促销服务、消息队列（MQ）、库存服务、关系型数据库（DB）、缓存集群（Redis）。
它们之间的调用和依赖流向关联如下：
- API网关 -> 用户服务 (说明: 身份鉴权)
- API网关 -> 商品服务 (说明: 浏览商品)
- API网关 -> 订单服务 (说明: 创建订单)
- 用户服务 -> 缓存集群(Redis) (说明: 读取会话)
- 商品服务 -> 缓存集群(Redis) (说明: 读取热点商品)
- 商品服务 -> 关系型数据库(DB) (说明: 商品主数据)
- 订单服务 -> 用户服务 (说明: 验证用户状态)
- 订单服务 -> 商品服务 (说明: 获取商品快照)
- 订单服务 -> 促销服务 (说明: 计算优惠)
- 订单服务 -> 库存服务 (说明: 扣减库存)
- 订单服务 -> 关系型数据库(DB) (说明: 订单落库)
- 订单服务 -> 支付服务 (说明: 发起支付)
- 支付服务 -> 消息队列(MQ) (说明: 支付成功事件)
- 消息队列(MQ) -> 订单服务 (说明: 更新订单状态)
- 消息队列(MQ) -> 库存服务 (说明: 释放超时库存)
图表宽度设为 900，高度设为 600，使用 academy 主题。
```
* AI 使用 “chart-visualization” 技能后生成的拓扑图：
### data-analysis {#bfde277b}
| | | \
|**作者** |ByteDance |
|---|---|
| | | \
|**简介** |data-analysis 技能基于 DuckDB（嵌入式分析型 SQL 引擎），用于处理用户的 Excel（.xlsx/.xls）和 CSV 文件，并对结构化数据进行分析与探索。整体流程包括：理解用户需求、检查文件结构以及执行数据分析。 |\
| |该技能通过统一的 Python 脚本完成数据结构检查、基于 SQL 的查询和统计摘要生成，支持多工作表 Excel 文件处理，以及聚合、筛选、表关联（`join`）等操作，并可将结果导出为 CSV、JSON 或 Markdown 文件。 |
| | | \
|**应用场景** |* **数据结构理解与初步探索** |\
| | 在获取新的 Excel/CSV 文件后，快速查看表结构、字段类型、数据规模及样例数据，用于建立对数据内容的基本认知。 |\
| |* **SQL 查询与数据筛选** |\
| | 基于明确条件对数据进行查询、过滤和排序，从原始数据中提取所需结果，适用于定向的数据检索与问题验证。 |\
| |* **聚合统计与指标分析** |\
| | 通过分组与聚合计算（如 SUM、AVG、COUNT），生成关键指标或对比不同维度的数据的表现，是最常见的分析场景。 |\
| |* **多表关联与综合分析** |\
| | 若一个 Excel 文件包含多个工作表或需要同时分析多个文件，该技能会通过 `join` 来关联数据，然后对跨源数据进行整体分析，例如对订单、用户与商品数据的整合与分析。 |
**使用案例**
::::cols
@col 50
待分析的 Excel 文件（`sales_data_2025.xlsx`）中的数据：
@col 50
AI 调用 “data-analysis” 技能后的分析结果，经人工核算，AI 提供的数据完全准确。
::::
## 内容创作 {#2a328b69}
### canvas-design {#9e62d115}
| | | \
|**作者** |Anthropics |
|---|---|
| | | \
|**简介** |canvas-design 技能用于生成静态视觉设计作品（如海报、艺术页、封面），并可将作品输出为 `.md`、`.pdf` 和 `.png` 文件。它的执行流程分为两个步骤： |\
| | |\
| |1. **生成设计原则**：首先，该技能会生成一份设计原则文档（`.md`），以确立创作的核心理念。 |\
| |2. **完成画布作品**：然后，基于这份设计哲学，完成最终的视觉设计。 |\
| | |\
| |该技能强调通过构图、色彩、图形、留白和少量文字进行艺术表达，并要求所有输出均为原创，严禁模仿或复制现有作品。 |
| | | \
|**应用场景** |* **海报设计** |\
| | 该技能可用来制作线下活动、艺术展览或主题分享会的宣传海报。你只需提供活动主题，该技能会自动帮你完成排版：它会以图形、色块和几何分割为主来构成画面，并仅在画面特定位置保留标题、时间等少量核心文本。 |\
| |* **封面设计** |\
| | 该技能可用来为行业报告、白皮书、电子书或音乐专辑等制作封面。它会将你提供的主题转化为视觉元素，例如网格、纹理等抽象图形，然后最终会生成一张带主标题的静态图像，可直接作为长篇文档或出版物的封面。 |\
| |* **系列视觉图集** |\
| | 该技能可用来制作一组风格一致、但内容不同的图像。例如：一套四张的节气明信片、同一场活动的三天倒计时海报，或类似实体画册的连贯配图。该技能会先固定一套色彩和图形规则，再在此基础上连续生成多张构图各异的图片，确保整组物料在视觉风格上属于同一系列。 |
**使用案例一：**
* 提示词：
```Plain Text
帮我生成一张海报，用于展示早春的美好景色，就像诗句 “草长莺飞二月天，拂堤杨柳醉春烟” 中描写的一样唯美。
```
* AI 使用 “canvas-design” 技能后的输出：
* AI 生成的海报：
**使用案例二：**
* 提示词：
```Plain Text
帮我生成一组四季（春、夏、秋、冬）系列的明信片，整体风格需要偏中式、诗意。
```
* AI 使用 “canvas-design” 技能后的输出：
* AI 生成的明信片：
::::cols
@col 25
@col 25
@col 25
@col 25
::::
### byted-seedream-image-generate {#c0327c88}
| | | \
|**作者** |ByteDance |
|---|---|
| | | \
|**简介** |byted-seedream-image-generate 是一个基于火山引擎 Seedream（豆包·星绘）大模型开发的高效图像生成 skill。它能够通过文本提示词直接生成高质量、多风格的图像。支持文生图（Text-to-Image）、图生图（Image-to-Image）、批量生成、自定义图片尺寸以及水印控制。 |\
| |该技能提供三个不同的模型版本以应对不同需求： |\
| | |\
| |* 4.0：适合日常使用，快速生成所需图像，响应迅速且稳定。 |\
| |* 4.5：细节表现更优，适合处理复杂的图像。 |\
| |* 5.0：提供最高的图像质量，且支持联网搜索工具及自定义输出格式。 |
| | | \
|**应用场景** |* **根据文本生成图像（文生图）** |\
| | 当你只提供文字描述，希望通过自然语言提示词直接生成符合语意的高质量图片时，可以使用该技能。 |\
| |* **创作多种风格的艺术作品** |\
| | 当你需要生成特定艺术风格的美术作品时，例如动漫、写实、3D、水彩、插画等丰富多样的视觉风格，可以使用该技能。 |\
| |* **制作创意项目的视觉物料** |\
| | 当你需要为创意项目、营销策划、海报设计或产品方案设计制作引人注目的配图与视觉素材时，可以使用该技能。 |\
| |* **集成 AI 生成图像能力** |\
| | 当你的工作流或开发任务中，需要通过 “AI 生成图像” 的能力来提升效率时，可以使用该技能。 |\
| |* **转换参考图的风格（图生图）** |\
| | 当你已经有一张参考图片，希望在此基础上将其转换成不同艺术风格的图片，或者保留原图结构进行二次创作时，可以使用该技能。 |\
| |* **批量产出图片** |\
| | 当你需要在单次请求中一次性批量生成多张图片，可以使用该技能。 |\
| |* **产出专业级高质量图片** |\
| | 当你对图像的细节、光影、构图有极高要求，需要专业的、可直接用于展示或生产环境的图片时，可以使用该技能。 |
:::tip 提示
在使用 byted-seedream-image-generate 技能前，你需要在火山引擎官网上进入 “火山方舟” 的控制台，然后在 “API Key 管理” 部分生成你的 API 密钥，在 “模型广场” 中开通 Doubao-Seedream 模型。
在给 AI 下达指令时，你需要告诉它你的 API Key 和需要调用的模型。
:::
**使用案例**
* 提示词：
```Plain Text
根据以下文字生成一张图片：一座赛博朋克风格的未来城市夜景，密集的高层建筑与巨型霓虹广告牌交错分布，屏幕上滚动着数字与全息影像。街道与空中充满蓝紫与粉色霓虹灯光，强烈对比与高饱和色彩营造出压迫而繁华的氛围。飞行汽车在城市高空穿梭，多层立体交通系统与狭窄街巷交织。建筑表面带有雨水与反光效果，地面湿润，倒映出霓虹灯与广告光影。空气中弥漫轻微雾气与光晕，增强空间纵深与氛围感。整体为电影级光影效果，细节丰富，广角视角，超写实风格，无人物，重点表现城市环境。
调用 Doubao-Seedream-5.0-lite 模型
我的 api key 是 02892fdb-xxxx-xxxx-ae7f-2bc01511640f
```
* AI 使用 “byted-seedream-image-generate” 技能后生成的图像：
### doc-coauthoring {#e758a961}
| | | \
|**作者** |Anthropics |
|---|---|
| | | \
|**简介** |doc-coauthoring 是一款引导你编写结构化文档的技能。当您提出写作需求时（例如，“帮我写一个文档”、“写一个 PRD”），它会通过一个协作流程，将你的零散想法转化为逻辑清晰、内容完整的文档。 |\
| |其工作流包含三个阶段： |\
| | |\
| |1. **收集上下文**：用户提供所有相关背景信息，AI 通过提问来补充和澄清必要信息。 |\
| |2. **分块起草与细化**：通过头脑风暴与编辑，逐步完善各个部分内容 |\
| |3. **读者视角测试**：在定稿前，模拟一位不了解背景的读者来审阅文稿，以发现潜在盲点。 |\
| | |\
| |这一机制旨在消除 AI 与你之间的信息壁垒，帮助你产出高质量、易于理解的文档。 |
| | | \
|**应用场景** |* **起草技术规格说明书** |\
| | 在从零构建系统设计文档时，引导你逐步细化技术方案，确保技术架构、系统依赖、向后兼容性等关键工程细节被完整且有序地记录。 |\
| |* **记录工程决策与项目提案** |\
| | 帮助你结构化地梳理团队决策过程，清晰呈现问题背景、方案权衡（Trade-offs）、未采纳方案的理由以及最终的决策依据。 |\
| |* **编写产品需求文档** |\
| | 该技能可以辅助你准确界定产品目标与功能边界，从目标受众的视角消除需求描述中的歧义，产出逻辑严密的 PRD。 |\
| |* **排查文档盲区 & 验证文档可用性** |\
| | 在定稿或发布重要文档前，通过模拟“无背景知识读者”的视角进行独立测试，发现并修复仅核心参与者能理解、而外部团队易产生困惑的信息断层与逻辑盲点。 |
**使用案例**
* 提示词：
```Plain Text
我想开发一个 AI 翻译软件，需要写一个 PRD。
```
* AI 使用 “doc-coauthoring” 技能后，与我的交互过程：
::::cols
@col 33
第一阶段：收集上下文
在这个阶段，AI 负责提问和梳理信息，我负责做选择题和提供产品设计方向。通过一系列针对性的问题，AI 了解了我的想法（比如产品叫 Smart Translate、主打自定义 prompt、做成需要账号的 web 应用）。
@col 33
第二阶段：分块起草与细化
在这个阶段，AI 负责搭骨架和提供选项，我负责做决定。 AI 起草了 `prd.md` 的核心大纲（产品概述、用户权限、核心流程等）。针对复杂的业务逻辑（比如扣费时机、prompt 怎么拼、模型选哪些），AI 没有直接写死，而是列出了不同的方案，让我来做决策。这保证了 PRD 是真正按照我的意志来编写的。
@col 33
第三阶段：读者视角测试
在这个阶段，AI 负责寻找 PRD 中的潜在问题，我负责填补漏洞。 AI 把自己想象成一个刚拿到这份 PRD 准备写代码的后端开发，专门找文档里含糊不清的地方（比如：只写了注册没写怎么注册、只写了前端限制没写后端要不要校验、没写发给模型的系统提示词用哪种语言）。在我回答这三个问题之后，AI 完善了这份 PRD，使其更加严密。
::::