快速开始

最佳实践

模型

上下文

外部应用授权

TRAE Work 必装的的 14 个 Skill

更新于: 2026-06-11 19:18:41

本文档精选了 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 的技能市场

TRAE Work 的技能市场为不同使用场景提供了多种技能，涵盖数据分析、界面设计、开发工具等领域。你可以直接从中安装所需技能。详情参考技能。

开发工具

git-commit

作者	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` 覆盖历史提交。

作者

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

作者	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` 与缓存策略，降低不必要的重渲染。

作者

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 项目。结果如下：

AI 调用该技能后的输出：

具体优化点（以 diff 形式展示）：

避免行内组件 & CSS 替代 JS 交互状态
将 UserRow 提取到组件外部，并用 styled-components 的 :hover 伪类替代 onMouseEnter 维护的 JS 状态。
渲染健壮性与内存泄漏修复
修复了防抖函数遗漏的 clearTimeout，以及 React 条件渲染数组长度的陷阱（可能导致页面输出 0）。

webapp-testing

作者	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://` 协议在浏览器中打开该文件，然后执行自动化验证。

作者

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

作者	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 演进方向。

作者

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 项目。结果如下：

AI 调用该技能后的输出：

具体优化点（以 diff 形式展示）：

消除布尔属性泛滥
移除了 hasImage、hasIcon、showFooter、isLoading、isError 等大量用于控制 UI 显隐的布尔属性，改为使用 children 组合。
显式变体
用明确的 variant 枚举属性替换了原本单一的 isPrimary 布尔值，为后续增加更多样式（如 secondary、outline）提供了扩展性。
复合组件架构
将原本大而全的庞大 JSX 渲染逻辑（无数个 if/else），拆分为职责单一的小组件，并通过挂载到主组件上对外暴露。

效率提升

agent-browser

作者	Vercel
简介	agent-browser 是一个面向 AI 智能体的浏览器自动化 CLI 工具，用于执行网页交互与数据操作，包括页面导航、表单填写、点击操作、截图、数据提取及 Web 应用测试等，适用于以编程方式控制浏览器的自动化流程。该技能支持的典型请求包括：打开页面、填写表单、点击元素、截图、抓取数据、登录网站等。
应用场景	测试网页中的复杂交互当一个网页包含复杂的表单填写、下拉选择或多步点击时，可以借助该技能来自动化测试该网页。该技能通过快照命令（`snapshot`）获取页面内所有元素的简化标识（如 `@e1`），然后通过批量命令（`batch`）执行操作，从而提升执行效率并降低 Token 消耗。抓取网页中的数据当你需要从多个网页提取特定信息或结构化数据时，可以使用该技能。它支持提取页面链接（`--urls`）及指定元素内容（如 `get text`），并自动处理 Iframe，非常适用于结构化数据采集。响应式布局与视觉回归验证当需要验证网页在不同屏幕尺寸或设备上的表现时，可以使用该技能。它支持动态调整视口分辨率、模拟各类设备（如 iPhone 14），并生成全页面或特定元素的截图；结合 diff 功能，该技能非常适用于 UI 回归测试与布局校验。

作者

Vercel

简介

agent-browser 是一个面向 AI 智能体的浏览器自动化 CLI 工具，用于执行网页交互与数据操作，包括页面导航、表单填写、点击操作、截图、数据提取及 Web 应用测试等，适用于以编程方式控制浏览器的自动化流程。
该技能支持的典型请求包括：打开页面、填写表单、点击元素、截图、抓取数据、登录网站等。

应用场景

测试网页中的复杂交互
当一个网页包含复杂的表单填写、下拉选择或多步点击时，可以借助该技能来自动化测试该网页。该技能通过快照命令（snapshot）获取页面内所有元素的简化标识（如 @e1），然后通过批量命令（batch）执行操作，从而提升执行效率并降低 Token 消耗。
抓取网页中的数据
当你需要从多个网页提取特定信息或结构化数据时，可以使用该技能。它支持提取页面链接（--urls）及指定元素内容（如 get text），并自动处理 Iframe，非常适用于结构化数据采集。
响应式布局与视觉回归验证
当需要验证网页在不同屏幕尺寸或设备上的表现时，可以使用该技能。它支持动态调整视口分辨率、模拟各类设备（如 iPhone 14），并生成全页面或特定元素的截图；结合 diff 功能，该技能非常适用于 UI 回归测试与布局校验。

实践案例

场景：测试一个包含 “选择套餐”、“高级配置”、“完善信息” 三步流程的企业套餐订阅页面。

操作与结果：AI 调用 “agent-browser” 技能，通过 click、snapshot 等自动化操作，成功验证了三步流程中的所有交互逻辑（包括价格切换、组件响应、表单校验、数据保留及提交），并发现和修复了一个因 z-index 不当导致按钮被遮挡的层级问题。

brainstorming

作者	Obra
简介	Brainstorming 是一个强制性的前置设计与需求分析技能，旨在通过协作式对话，将你的初步想法转化为结构化、可执行的设计方案与需求文档。在完成文档并获得用户确认前，禁止执行任何实现类操作（如编写代码、初始化项目等）。该技能避免了 “需求太简单而无需设计” 的反模式，所有需求均需经过设计阶段，从而降低最终实现的偏差与返工率。
应用场景	引入全新功能与组件你可以在需要增加新的业务逻辑、开发独立的模块，或在现有系统中扩展新能力等场景中使用该技能。它会引导你明确新需求，梳理现有代码与新功能的耦合度，并提供最终的设计方案。修改或重构现有逻辑当你需要修改或重构现有逻辑（例如臃肿的代码）时，该技能会在修改前先探索现有结构和瓶颈，然后提出针对性的改进方案。拆解并规划大型项目面对搭建类似 Notion 的协作平台等宏大需求时，该技能会在早期阶段对项目范围进行收敛。它会引导你理清各个子系统的依赖关系，确定最小可行性版本（MVP），将整体项目拆分为多个可独立开发的小任务。随后，它会优先为第一个子项目启动设计流程。涉及 UI/UX 的视觉辅助决策当讨论诸如 “仪表盘布局” 或 “页面交互” 等需要直观展示的需求时，该技能会提供基于浏览器的可视化工具（Visual Companion），直接渲染线框图、架构图或多套布局方案。这种直观的对比展示能够帮助你更准确地完成设计相关的决策。

作者

Obra

简介

Brainstorming 是一个强制性的前置设计与需求分析技能，旨在通过协作式对话，将你的初步想法转化为结构化、可执行的设计方案与需求文档。在完成文档并获得用户确认前，禁止执行任何实现类操作（如编写代码、初始化项目等）。
该技能避免了 “需求太简单而无需设计” 的反模式，所有需求均需经过设计阶段，从而降低最终实现的偏差与返工率。

应用场景

引入全新功能与组件
你可以在需要增加新的业务逻辑、开发独立的模块，或在现有系统中扩展新能力等场景中使用该技能。它会引导你明确新需求，梳理现有代码与新功能的耦合度，并提供最终的设计方案。
修改或重构现有逻辑
当你需要修改或重构现有逻辑（例如臃肿的代码）时，该技能会在修改前先探索现有结构和瓶颈，然后提出针对性的改进方案。
拆解并规划大型项目
面对搭建类似 Notion 的协作平台等宏大需求时，该技能会在早期阶段对项目范围进行收敛。它会引导你理清各个子系统的依赖关系，确定最小可行性版本（MVP），将整体项目拆分为多个可独立开发的小任务。随后，它会优先为第一个子项目启动设计流程。
涉及 UI/UX 的视觉辅助决策
当讨论诸如 “仪表盘布局” 或 “页面交互” 等需要直观展示的需求时，该技能会提供基于浏览器的可视化工具（Visual Companion），直接渲染线框图、架构图或多套布局方案。这种直观的对比展示能够帮助你更准确地完成设计相关的决策。

实践案例

第一阶段：提问
提示词：帮我创建一个宠物用品购物网站。
收到请求后，AI 自动调用 “brainstorming” 技能，在开发前通过一系列提问与我进行头脑风暴，收集关于目标用户、核心功能、设计偏好和技术栈选择的信息。
问题一：

问题二：

问题三：

问题四：

第二阶段：输出方案
在获得充足的信息后，AI 输出了一份网页设计方案让我确认。我可以选择接受方案或提出修改意见，待方案设计定稿后再进入开发阶段。

界面设计

figma

作者	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 链接定位到对应的节点，并获取相关的设计上下文，只改需要改的部分，适合做局部调整或增量迭代。

作者

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 链接定位到对应的节点，并获取相关的设计上下文，只改需要改的部分，适合做局部调整或增量迭代。

提示

在使用 “figma” 技能前，你需要从 TRAE Work 的 MCP 市场添加 “Figma AI Bridge” 这一 MCP Server，详细步骤参考此文档。

使用案例

Figma 设计稿：

AI 调用 “Figma AI Bridge” MCP Server 和 “figma” 技能后，其初次生成的代码已具备极高的视觉还原度。

frontend-design

作者	Anthropics
简介	frontend-design 用于生成具备独特风格和高质量的前端界面，满足生产级 UI 标准。它的核心目标是避免生成同质化的“AI 风格” 界面，而是通过选择大胆、明确的美学主题（例如：极简、复古、未来感、野兽派等），并注重排版、色彩、动效、空间布局等细节，来打造具有辨识度和艺术感的前端界面。
应用场景	构建网页组件或页面在从零开始创建一个具体的 UI 时（如一个 React 组件、一个 HTML/CSS 布局，或一个独立的静态页面），该技能会确保这个 UI 不仅功能完善，而且在视觉上具有辨识度。开发完整的 Web 应用或网站在构建落地页、仪表盘或小型网站等产品时，该技能会让 AI 从整体出发，确立一个统一且鲜明的设计风格，并将其全局应用到产物中。美化或重塑现有界面针对已有但设计质量较低的界面，可以使用该技能来提升界面的整体视觉质量，包括优化字体、配色、动效、布局等。

作者

Anthropics

简介

frontend-design 用于生成具备独特风格和高质量的前端界面，满足生产级 UI 标准。它的核心目标是避免生成同质化的“AI 风格” 界面，而是通过选择大胆、明确的美学主题（例如：极简、复古、未来感、野兽派等），并注重排版、色彩、动效、空间布局等细节，来打造具有辨识度和艺术感的前端界面。

应用场景

构建网页组件或页面
在从零开始创建一个具体的 UI 时（如一个 React 组件、一个 HTML/CSS 布局，或一个独立的静态页面），该技能会确保这个 UI 不仅功能完善，而且在视觉上具有辨识度。
开发完整的 Web 应用或网站
在构建落地页、仪表盘或小型网站等产品时，该技能会让 AI 从整体出发，确立一个统一且鲜明的设计风格，并将其全局应用到产物中。
美化或重塑现有界面
针对已有但设计质量较低的界面，可以使用该技能来提升界面的整体视觉质量，包括优化字体、配色、动效、布局等。

在以下案例中，我让 TRAE Work 开发一款 MBTI 心理测试小游戏，可明显观察到使用 “frontend-design” 技能前后的视觉差异：

使用技能前：UI 界面充满了典型的 AI 审美——高饱和度的霓虹渐变色、通用的 “闪亮星星” 图标以及粗壮的无衬线字体。整体视觉显得较为套路化，缺乏心理测试产品应有的神秘、探索感。
使用技能后：UI 质量显著提升。在不失细节和保持体验完整性的前提下，整体设计更简约、独特。克制的暗色调与优雅的衬线排版赋予了 UI 界面一种深邃、神秘的质感。

使用 “frontend-design” 技能前：

使用 “frontend-design” 技能后：

frontend-skill

作者	OpenAI
简介	frontend-skill 适用于打造视觉冲击力强的落地页、网站、应用、原型、Demo 或游戏界面。它强调克制的构图、图像主导的层级、统一的内容结构和精致动效。该技能要求在编写代码前建立明确的视觉基调、内容规划、交互理念。当界面质量更依赖于艺术指导和视觉张力，而非功能堆砌时，该技能可以帮助你交付具有明确设计意图、符合现代审美的作品。其实现方式通常是聚焦于一个核心创意，并通过突出的视觉元素、简洁的文案、严格的间距和令人印象深刻的动效来呈现。
应用场景	构建高质量的落地页与官网该技能可用来构建需要建立强烈视觉焦点的页面。它在设计上强调首屏全画幅视觉、大面积留白与高对比度的文字排版，通过精简的内容结构清晰传达产品信息，避免使用堆叠式卡片与过多装饰元素。开发现代化的 Web 应用该技能可用来开发强调效率和信息密度的软件界面，它会采用克制的层级关系和极简风格（类似 Linear 的设计语言），采用合适的字体排印和间距来组织内容，仅保留必要的边框和强调色，去除多余的阴影与渐变背景，且仅在真正代表交互的模块上使用卡片，以确保界面的整洁与易读性。开发高质量的原型与 Demo 该技能可用来制作对视觉质量、叙事性和动态效果有较高要求的演示项目。设计上强调图像的叙事作用，要求使用具有临场感的高质量真实摄影图，避免使用抽象的 3D 渲染或带 UI 边框的网图。同时严格限制动效的数量，仅保留 2-3 个能改变页面氛围的核心动效，确保整体的交互克制但令人印象深刻。

作者

OpenAI

简介

frontend-skill 适用于打造视觉冲击力强的落地页、网站、应用、原型、Demo 或游戏界面。它强调克制的构图、图像主导的层级、统一的内容结构和精致动效。
该技能要求在编写代码前建立明确的视觉基调、内容规划、交互理念。当界面质量更依赖于艺术指导和视觉张力，而非功能堆砌时，该技能可以帮助你交付具有明确设计意图、符合现代审美的作品。其实现方式通常是聚焦于一个核心创意，并通过突出的视觉元素、简洁的文案、严格的间距和令人印象深刻的动效来呈现。

应用场景

构建高质量的落地页与官网
该技能可用来构建需要建立强烈视觉焦点的页面。它在设计上强调首屏全画幅视觉、大面积留白与高对比度的文字排版，通过精简的内容结构清晰传达产品信息，避免使用堆叠式卡片与过多装饰元素。
开发现代化的 Web 应用
该技能可用来开发强调效率和信息密度的软件界面，它会采用克制的层级关系和极简风格（类似 Linear 的设计语言），采用合适的字体排印和间距来组织内容，仅保留必要的边框和强调色，去除多余的阴影与渐变背景，且仅在真正代表交互的模块上使用卡片，以确保界面的整洁与易读性。
开发高质量的原型与 Demo
该技能可用来制作对视觉质量、叙事性和动态效果有较高要求的演示项目。设计上强调图像的叙事作用，要求使用具有临场感的高质量真实摄影图，避免使用抽象的 3D 渲染或带 UI 边框的网图。同时严格限制动效的数量，仅保留 2-3 个能改变页面氛围的核心动效，确保整体的交互克制但令人印象深刻。

在以下案例中，我让 TRAE Work 开发一个 AI 协作平台的首页，主题为 “Work with AI”，可明显观察到使用 “frontend-skill” 技能前后的视觉差异：

使用技能前：界面呈现了典型、模版化的 AI 风格，包括居中排版，高饱和度的双色渐变与夸张的环境光晕。整体视觉虽然炫酷，但带有浓重的 “AI 味”，缺乏品牌个性。
使用技能后：UI 设计成功跳出了常规的 AI 审美框架，整体采用左对齐结构，页面排版更具特色。同时，单色高亮、直角按钮以及收敛的光影处理，让整体视觉更具克制、深邃的质感。

使用 “frontend-skill” 技能前：

使用 “frontend-skill” 技能后：

哪个前端设计 skill 更适合我？

	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 上的某个页面或组件，精准地写成代码，并且要求视觉和行为上的高度还原。	你没有设计稿，需要从零构建一个页面。你需要这个界面非常独特、吸引眼球、具有强烈的艺术风格。	你没有设计稿，需要从零构建一个页面。你的界面侧重于功能性和信息获取效率，强调克制的设计风格、清晰的信息层级。

数据分析

chart-visualization

作者	ByteDance
简介	chart-visualization 技能可以帮你快速将数据可视化。它会根据数据特征，从 26 种图表类型中自动选择最合适的一种，并提取生成图表所需的参数。随后，它会通过 Node.js 脚本生成高质量的图表图片，并返回图片 URL 及完整参数信息。
应用场景	多维数据对比通过该技能，AI 可将时间序列与分类数据转换为折线图、柱状图或双轴图，帮助你观察核心指标随时间的变化趋势及周期性波动，并在同一视图中对比不同类别的数据的差异。例如，你可以用该技能来同时展示多项产品的销量变化与利润数据，用于评估业务的整体表现。复杂层级与拓扑网络梳理针对具有层级关系或流向关联的非线性数据，AI 可以通过该技能生成相应的组织架构图、网络关系图或桑基图。通过解析节点与连接关系，呈现层级结构、流转路径及关键转化情况，适用于梳理系统结构、分析资源流向或分析用户行为路径等场景。地理性数据可视化当数据包含地理信息或需要对数据统计分析时，AI 可以通过该技能生成区域地图、轨迹图，以及箱线图、直方图。它既可展示数据在空间上的分布情况，也可展示数据的分布特征，如数据的集中趋势、中位数及异常值，特别适用于区域市场监控和底层数据特征排查。

作者

ByteDance

简介

chart-visualization 技能可以帮你快速将数据可视化。它会根据数据特征，从 26 种图表类型中自动选择最合适的一种，并提取生成图表所需的参数。随后，它会通过 Node.js 脚本生成高质量的图表图片，并返回图片 URL 及完整参数信息。

应用场景

多维数据对比
通过该技能，AI 可将时间序列与分类数据转换为折线图、柱状图或双轴图，帮助你观察核心指标随时间的变化趋势及周期性波动，并在同一视图中对比不同类别的数据的差异。例如，你可以用该技能来同时展示多项产品的销量变化与利润数据，用于评估业务的整体表现。
复杂层级与拓扑网络梳理
针对具有层级关系或流向关联的非线性数据，AI 可以通过该技能生成相应的组织架构图、网络关系图或桑基图。通过解析节点与连接关系，呈现层级结构、流转路径及关键转化情况，适用于梳理系统结构、分析资源流向或分析用户行为路径等场景。
地理性数据可视化
当数据包含地理信息或需要对数据统计分析时，AI 可以通过该技能生成区域地图、轨迹图，以及箱线图、直方图。它既可展示数据在空间上的分布情况，也可展示数据的分布特征，如数据的集中趋势、中位数及异常值，特别适用于区域市场监控和底层数据特征排查。

使用案例一：

提示词：

帮我生成一张双轴图，用来展示“2025年各季度线上与线下营收及核心指标趋势对比”。
X 轴的含义为“季度”，包含四个季度：Q1（春季）、Q2（大促季）、Q3（淡季）、 Q4（年末旺季）。
Y 轴的含义为 “营收规模”。
这张图需要包含以下两个数据系列：
第一个系列是“线上营收（百万元）”，数据依次为：320、580、410、750。
第二个系列是“线下营收（百万元）”，数据依次为：450、480、430、620。
两个系列的数据都使用柱状图展示。此外，需要应用 academy 主题，并且自定义两个系列的颜色面板依次为： #5B8FF9 （蓝色）、#5AD8A6 （绿色）。

AI 使用 “chart-visualization” 技能后生成的图表：

使用案例二：

提示词：

帮我生成一张网络关系图，用于梳理“电商交易核心微服务架构拓扑”。
首先，系统包含以下10个核心节点：
API网关、用户服务、商品服务、订单服务、支付服务、促销服务、消息队列（MQ）、库存服务、关系型数据库（DB）、缓存集群（Redis）。
它们之间的调用和依赖流向关联如下：
- API网关 -> 用户服务 (说明: 身份鉴权)
- API网关 -> 商品服务 (说明: 浏览商品)
- API网关 -> 订单服务 (说明: 创建订单)
- 用户服务 -> 缓存集群(Redis) (说明: 读取会话)
- 商品服务 -> 缓存集群(Redis) (说明: 读取热点商品)
- 商品服务 -> 关系型数据库(DB) (说明: 商品主数据)
- 订单服务 -> 用户服务 (说明: 验证用户状态)
- 订单服务 -> 商品服务 (说明: 获取商品快照)
- 订单服务 -> 促销服务 (说明: 计算优惠)
- 订单服务 -> 库存服务 (说明: 扣减库存)
- 订单服务 -> 关系型数据库(DB) (说明: 订单落库)
- 订单服务 -> 支付服务 (说明: 发起支付)
- 支付服务 -> 消息队列(MQ) (说明: 支付成功事件)
- 消息队列(MQ) -> 订单服务 (说明: 更新订单状态)
- 消息队列(MQ) -> 库存服务 (说明: 释放超时库存)
图表宽度设为 900，高度设为 600，使用 academy 主题。

AI 使用 “chart-visualization” 技能后生成的拓扑图：

data-analysis

作者	ByteDance
简介	data-analysis 技能基于 DuckDB（嵌入式分析型 SQL 引擎），用于处理用户的 Excel（.xlsx/.xls）和 CSV 文件，并对结构化数据进行分析与探索。整体流程包括：理解用户需求、检查文件结构以及执行数据分析。该技能通过统一的 Python 脚本完成数据结构检查、基于 SQL 的查询和统计摘要生成，支持多工作表 Excel 文件处理，以及聚合、筛选、表关联（`join`）等操作，并可将结果导出为 CSV、JSON 或 Markdown 文件。
应用场景	数据结构理解与初步探索在获取新的 Excel/CSV 文件后，快速查看表结构、字段类型、数据规模及样例数据，用于建立对数据内容的基本认知。 SQL 查询与数据筛选基于明确条件对数据进行查询、过滤和排序，从原始数据中提取所需结果，适用于定向的数据检索与问题验证。聚合统计与指标分析通过分组与聚合计算（如 SUM、AVG、COUNT），生成关键指标或对比不同维度的数据的表现，是最常见的分析场景。多表关联与综合分析若一个 Excel 文件包含多个工作表或需要同时分析多个文件，该技能会通过 `join` 来关联数据，然后对跨源数据进行整体分析，例如对订单、用户与商品数据的整合与分析。

作者

ByteDance

简介

data-analysis 技能基于 DuckDB（嵌入式分析型 SQL 引擎），用于处理用户的 Excel（.xlsx/.xls）和 CSV 文件，并对结构化数据进行分析与探索。整体流程包括：理解用户需求、检查文件结构以及执行数据分析。
该技能通过统一的 Python 脚本完成数据结构检查、基于 SQL 的查询和统计摘要生成，支持多工作表 Excel 文件处理，以及聚合、筛选、表关联（join）等操作，并可将结果导出为 CSV、JSON 或 Markdown 文件。

应用场景

数据结构理解与初步探索
在获取新的 Excel/CSV 文件后，快速查看表结构、字段类型、数据规模及样例数据，用于建立对数据内容的基本认知。
SQL 查询与数据筛选
基于明确条件对数据进行查询、过滤和排序，从原始数据中提取所需结果，适用于定向的数据检索与问题验证。
聚合统计与指标分析
通过分组与聚合计算（如 SUM、AVG、COUNT），生成关键指标或对比不同维度的数据的表现，是最常见的分析场景。
多表关联与综合分析
若一个 Excel 文件包含多个工作表或需要同时分析多个文件，该技能会通过 join 来关联数据，然后对跨源数据进行整体分析，例如对订单、用户与商品数据的整合与分析。

使用案例

待分析的 Excel 文件（sales_data_2025.xlsx）中的数据：

AI 调用 “data-analysis” 技能后的分析结果，经人工核算，AI 提供的数据完全准确。

内容创作

canvas-design

作者	Anthropics
简介	canvas-design 技能用于生成静态视觉设计作品（如海报、艺术页、封面），并可将作品输出为 `.md`、`.pdf` 和 `.png` 文件。它的执行流程分为两个步骤：生成设计原则：首先，该技能会生成一份设计原则文档（`.md`），以确立创作的核心理念。完成画布作品：然后，基于这份设计哲学，完成最终的视觉设计。该技能强调通过构图、色彩、图形、留白和少量文字进行艺术表达，并要求所有输出均为原创，严禁模仿或复制现有作品。
应用场景	海报设计该技能可用来制作线下活动、艺术展览或主题分享会的宣传海报。你只需提供活动主题，该技能会自动帮你完成排版：它会以图形、色块和几何分割为主来构成画面，并仅在画面特定位置保留标题、时间等少量核心文本。封面设计该技能可用来为行业报告、白皮书、电子书或音乐专辑等制作封面。它会将你提供的主题转化为视觉元素，例如网格、纹理等抽象图形，然后最终会生成一张带主标题的静态图像，可直接作为长篇文档或出版物的封面。系列视觉图集该技能可用来制作一组风格一致、但内容不同的图像。例如：一套四张的节气明信片、同一场活动的三天倒计时海报，或类似实体画册的连贯配图。该技能会先固定一套色彩和图形规则，再在此基础上连续生成多张构图各异的图片，确保整组物料在视觉风格上属于同一系列。

作者

Anthropics

简介

canvas-design 技能用于生成静态视觉设计作品（如海报、艺术页、封面），并可将作品输出为 .md、.pdf 和 .png 文件。它的执行流程分为两个步骤：

生成设计原则：首先，该技能会生成一份设计原则文档（.md），以确立创作的核心理念。
完成画布作品：然后，基于这份设计哲学，完成最终的视觉设计。

该技能强调通过构图、色彩、图形、留白和少量文字进行艺术表达，并要求所有输出均为原创，严禁模仿或复制现有作品。

应用场景

海报设计
该技能可用来制作线下活动、艺术展览或主题分享会的宣传海报。你只需提供活动主题，该技能会自动帮你完成排版：它会以图形、色块和几何分割为主来构成画面，并仅在画面特定位置保留标题、时间等少量核心文本。
封面设计
该技能可用来为行业报告、白皮书、电子书或音乐专辑等制作封面。它会将你提供的主题转化为视觉元素，例如网格、纹理等抽象图形，然后最终会生成一张带主标题的静态图像，可直接作为长篇文档或出版物的封面。
系列视觉图集
该技能可用来制作一组风格一致、但内容不同的图像。例如：一套四张的节气明信片、同一场活动的三天倒计时海报，或类似实体画册的连贯配图。该技能会先固定一套色彩和图形规则，再在此基础上连续生成多张构图各异的图片，确保整组物料在视觉风格上属于同一系列。

使用案例一：

提示词：

帮我生成一张海报，用于展示早春的美好景色，就像诗句 “草长莺飞二月天，拂堤杨柳醉春烟” 中描写的一样唯美。

AI 使用 “canvas-design” 技能后的输出：
AI 生成的海报：

使用案例二：

提示词：

帮我生成一组四季（春、夏、秋、冬）系列的明信片，整体风格需要偏中式、诗意。

AI 使用 “canvas-design” 技能后的输出：
AI 生成的明信片：

byted-seedream-image-generate

作者	ByteDance
简介	byted-seedream-image-generate 是一个基于火山引擎 Seedream（豆包·星绘）大模型开发的高效图像生成 skill。它能够通过文本提示词直接生成高质量、多风格的图像。支持文生图（Text-to-Image）、图生图（Image-to-Image）、批量生成、自定义图片尺寸以及水印控制。该技能提供三个不同的模型版本以应对不同需求： 4.0：适合日常使用，快速生成所需图像，响应迅速且稳定。 4.5：细节表现更优，适合处理复杂的图像。 5.0：提供最高的图像质量，且支持联网搜索工具及自定义输出格式。
应用场景	根据文本生成图像（文生图）当你只提供文字描述，希望通过自然语言提示词直接生成符合语意的高质量图片时，可以使用该技能。创作多种风格的艺术作品当你需要生成特定艺术风格的美术作品时，例如动漫、写实、3D、水彩、插画等丰富多样的视觉风格，可以使用该技能。制作创意项目的视觉物料当你需要为创意项目、营销策划、海报设计或产品方案设计制作引人注目的配图与视觉素材时，可以使用该技能。集成 AI 生成图像能力当你的工作流或开发任务中，需要通过 “AI 生成图像” 的能力来提升效率时，可以使用该技能。转换参考图的风格（图生图）当你已经有一张参考图片，希望在此基础上将其转换成不同艺术风格的图片，或者保留原图结构进行二次创作时，可以使用该技能。批量产出图片当你需要在单次请求中一次性批量生成多张图片，可以使用该技能。产出专业级高质量图片当你对图像的细节、光影、构图有极高要求，需要专业的、可直接用于展示或生产环境的图片时，可以使用该技能。

作者

ByteDance

简介

byted-seedream-image-generate 是一个基于火山引擎 Seedream（豆包·星绘）大模型开发的高效图像生成 skill。它能够通过文本提示词直接生成高质量、多风格的图像。支持文生图（Text-to-Image）、图生图（Image-to-Image）、批量生成、自定义图片尺寸以及水印控制。
该技能提供三个不同的模型版本以应对不同需求：

4.0：适合日常使用，快速生成所需图像，响应迅速且稳定。
4.5：细节表现更优，适合处理复杂的图像。
5.0：提供最高的图像质量，且支持联网搜索工具及自定义输出格式。

应用场景

根据文本生成图像（文生图）
当你只提供文字描述，希望通过自然语言提示词直接生成符合语意的高质量图片时，可以使用该技能。
创作多种风格的艺术作品
当你需要生成特定艺术风格的美术作品时，例如动漫、写实、3D、水彩、插画等丰富多样的视觉风格，可以使用该技能。
制作创意项目的视觉物料
当你需要为创意项目、营销策划、海报设计或产品方案设计制作引人注目的配图与视觉素材时，可以使用该技能。
集成 AI 生成图像能力
当你的工作流或开发任务中，需要通过 “AI 生成图像” 的能力来提升效率时，可以使用该技能。
转换参考图的风格（图生图）
当你已经有一张参考图片，希望在此基础上将其转换成不同艺术风格的图片，或者保留原图结构进行二次创作时，可以使用该技能。
批量产出图片
当你需要在单次请求中一次性批量生成多张图片，可以使用该技能。
产出专业级高质量图片
当你对图像的细节、光影、构图有极高要求，需要专业的、可直接用于展示或生产环境的图片时，可以使用该技能。

提示

在使用 byted-seedream-image-generate 技能前，你需要在火山引擎官网上进入 “火山方舟” 的控制台，然后在 “API Key 管理” 部分生成你的 API 密钥，在 “模型广场” 中开通 Doubao-Seedream 模型。
在给 AI 下达指令时，你需要告诉它你的 API Key 和需要调用的模型。

使用案例

提示词：

根据以下文字生成一张图片：一座赛博朋克风格的未来城市夜景，密集的高层建筑与巨型霓虹广告牌交错分布，屏幕上滚动着数字与全息影像。街道与空中充满蓝紫与粉色霓虹灯光，强烈对比与高饱和色彩营造出压迫而繁华的氛围。飞行汽车在城市高空穿梭，多层立体交通系统与狭窄街巷交织。建筑表面带有雨水与反光效果，地面湿润，倒映出霓虹灯与广告光影。空气中弥漫轻微雾气与光晕，增强空间纵深与氛围感。整体为电影级光影效果，细节丰富，广角视角，超写实风格，无人物，重点表现城市环境。

调用 Doubao-Seedream-5.0-lite 模型

我的 api key 是 02892fdb-xxxx-xxxx-ae7f-2bc01511640f

AI 使用 “byted-seedream-image-generate” 技能后生成的图像：

doc-coauthoring

作者	Anthropics
简介	doc-coauthoring 是一款引导你编写结构化文档的技能。当您提出写作需求时（例如，“帮我写一个文档”、“写一个 PRD”），它会通过一个协作流程，将你的零散想法转化为逻辑清晰、内容完整的文档。其工作流包含三个阶段：收集上下文：用户提供所有相关背景信息，AI 通过提问来补充和澄清必要信息。分块起草与细化：通过头脑风暴与编辑，逐步完善各个部分内容读者视角测试：在定稿前，模拟一位不了解背景的读者来审阅文稿，以发现潜在盲点。这一机制旨在消除 AI 与你之间的信息壁垒，帮助你产出高质量、易于理解的文档。
应用场景	起草技术规格说明书在从零构建系统设计文档时，引导你逐步细化技术方案，确保技术架构、系统依赖、向后兼容性等关键工程细节被完整且有序地记录。记录工程决策与项目提案帮助你结构化地梳理团队决策过程，清晰呈现问题背景、方案权衡（Trade-offs）、未采纳方案的理由以及最终的决策依据。编写产品需求文档该技能可以辅助你准确界定产品目标与功能边界，从目标受众的视角消除需求描述中的歧义，产出逻辑严密的 PRD。排查文档盲区 & 验证文档可用性在定稿或发布重要文档前，通过模拟“无背景知识读者”的视角进行独立测试，发现并修复仅核心参与者能理解、而外部团队易产生困惑的信息断层与逻辑盲点。

作者

Anthropics

简介

doc-coauthoring 是一款引导你编写结构化文档的技能。当您提出写作需求时（例如，“帮我写一个文档”、“写一个 PRD”），它会通过一个协作流程，将你的零散想法转化为逻辑清晰、内容完整的文档。
其工作流包含三个阶段：

收集上下文：用户提供所有相关背景信息，AI 通过提问来补充和澄清必要信息。
分块起草与细化：通过头脑风暴与编辑，逐步完善各个部分内容
读者视角测试：在定稿前，模拟一位不了解背景的读者来审阅文稿，以发现潜在盲点。

这一机制旨在消除 AI 与你之间的信息壁垒，帮助你产出高质量、易于理解的文档。

应用场景

起草技术规格说明书
在从零构建系统设计文档时，引导你逐步细化技术方案，确保技术架构、系统依赖、向后兼容性等关键工程细节被完整且有序地记录。
记录工程决策与项目提案
帮助你结构化地梳理团队决策过程，清晰呈现问题背景、方案权衡（Trade-offs）、未采纳方案的理由以及最终的决策依据。
编写产品需求文档
该技能可以辅助你准确界定产品目标与功能边界，从目标受众的视角消除需求描述中的歧义，产出逻辑严密的 PRD。
排查文档盲区 & 验证文档可用性
在定稿或发布重要文档前，通过模拟“无背景知识读者”的视角进行独立测试，发现并修复仅核心参与者能理解、而外部团队易产生困惑的信息断层与逻辑盲点。

使用案例

提示词：

我想开发一个 AI 翻译软件，需要写一个 PRD。

AI 使用 “doc-coauthoring” 技能后，与我的交互过程：

第一阶段：收集上下文
在这个阶段，AI 负责提问和梳理信息，我负责做选择题和提供产品设计方向。通过一系列针对性的问题，AI 了解了我的想法（比如产品叫 Smart Translate、主打自定义 prompt、做成需要账号的 web 应用）。

第二阶段：分块起草与细化
在这个阶段，AI 负责搭骨架和提供选项，我负责做决定。 AI 起草了 prd.md 的核心大纲（产品概述、用户权限、核心流程等）。针对复杂的业务逻辑（比如扣费时机、prompt 怎么拼、模型选哪些），AI 没有直接写死，而是列出了不同的方案，让我来做决策。这保证了 PRD 是真正按照我的意志来编写的。

第三阶段：读者视角测试
在这个阶段，AI 负责寻找 PRD 中的潜在问题，我负责填补漏洞。 AI 把自己想象成一个刚拿到这份 PRD 准备写代码的后端开发，专门找文档里含糊不清的地方（比如：只写了注册没写怎么注册、只写了前端限制没写后端要不要校验、没写发给模型的系统提示词用哪种语言）。在我回答这三个问题之后，AI 完善了这份 PRD，使其更加严密。

TRAE Work 移动版快速开始

模型