工具资源推荐

推荐｜14 个值得安装的 Skills

提示

TRAE 是面向开发者、职场人与学生的 AI 办公平台，有 TRAE Work 和 TRAE IDE 两款产品。

TRAE Work 侧重学习、办公与工程执行场景，无论你是开发者、职场人、学生，都可以用它写方案、做分析、处理文件、推进协作，并完成需要持续执行、检查和产出结果的自动化任务。支持桌面端、网页版和移动端，多端协作，随时发起任务、查看进展、持续推进。

TRAE IDE 适合写代码、读项目、改 Bug 等开发工作，更适合期望精细控制自己的代码改动和执行过程的开发者。

本文档精选了 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 的技能市场为不同使用场景提供了多种技能，涵盖数据分析、界面设计、开发工具等领域。你可以直接从中安装所需技能。

体验 TRAE Work网页版
下载 TRAE Work桌面版

图片展示的是TRAE Work技能市场中“Code with SOLO”界面。界面左侧有“Code”和“技能”两个选项卡，其中“技能”选项卡被红色框突出显示。右侧上方有“Code with SOLO”及“全流程开发任务，交付SOLO搞定”的文字。下方有四个功能模块，分别是后端开发、项目构建、项目创意、工具脚本，每个模块配有图标和简要说明。该图片与文档中介绍TRAE Work技能市场的内容相关，直观呈现了技能市场中“Code with SOLO”的界面情况。 — img-878 · 图片展示的是TRAE Work技能市场中“Code with SOLO”界面。界面左侧有“Code”和“技能”两个选项卡

开发工具

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

在以下示例中，AI 调用 “git-commit” 技能，按顺序执行 git status、git diff、git add、git commit 和 git log 命令，高效完成一次符合规范的提交。

图片展示的是在Slack中使用“git-commit”技能进行代码提交的界面。左侧显示“SOLO Code”技能，有“思考”步骤，中间依次执行了`git status`、`git diff`、`git add snake.js`等命令，最后生成了`git commit`命令。右侧显示提交信息，包括Type、Scope、Description、Body等内容，还展示了具体的Commit内容。该图片与上下文介绍的“git-commit”技能按规范执行Git命令，高效完成提交相呼应，直观呈现了技能操作过程。 — img-879 · 图片展示的是在Slack中使用“git-commit”技能进行代码提交的界面。左侧显示“SOLO Code”技能，有“思

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

以下案例中，AI 调用 “react-best-practices” 技能优化了一个 TypeScript 项目。结果如下：

AI 调用该技能后的输出：

图片展示的是Vercel - React性能优化最佳实践技能调用后的代码优化结果。上方有技能名称及“调用技能，帮我检查并优化这个项目的代码”提示。下方代码区域呈现了对`demo.ts`代码的优化内容，包括消除数据请求瀑布流、避免行内组件&CSS替代JS交互状态等多条优化点，如将顺序`fetch`串行请求改为`Promise.all`并行请求，将`UserRow`提取到组件外部等。底部显示1个文件已更改，任务耗时2分48秒。 — img-880 · 图片展示的是Vercel - React性能优化最佳实践技能调用后的代码优化结果。上方有技能名称及“调用技能，帮我检查并

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

消除数据请求瀑布流
将顺序的 fetch 串行请求改为 Promise.all 并行请求，减少等待时间。
img-881 · 界面截图
避免行内组件 & CSS 替代 JS 交互状态
将 UserRow 提取到组件外部，并用 styled-components 的 :hover 伪类替代 onMouseEnter 维护的 JS 状态。
img-882 · 界面截图
渲染健壮性与内存泄漏修复
修复了防抖函数遗漏的 clearTimeout，以及 React 条件渲染数组长度的陷阱（可能导致页面输出 0）。
img-883 · 这张图片展示了两处React开发问题的修复代码，分别对应文档中提及的修复内存泄漏与修复条件渲染陷阱的内容。上方的代码di

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

在以下案例中，AI 测试了一个网站的登录功能。它调用了 “webapp-testing” 技能，使用 Playwright 编写自动化测试脚本 test_login.py，对登录功能进行了端到端测试，并输出测试结果。

图片展示了AI测试网站登录功能的界面。左侧是AI的对话窗口，显示AI已使用“webapp-testing”技能，使用Playwright编写自动化测试脚本`test_login.py`，对登录功能进行了端到端测试，并输出了测试结果。右侧是宠物店网站页面，有“立即选购”“探索狗狗专区”等按钮，底部有“正品保障”标识。该图片与上下文紧密相关，直观呈现了AI测试网站登录功能的场景。 — img-884 · 图片展示了AI测试网站登录功能的界面。左侧是AI的对话窗口，显示AI已使用“webapp-testing”技能，使用Pl

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

以下案例中，AI 调用 “composition-patterns” 技能优化了一个 TypeScript 项目。结果如下：

AI 调用该技能后的输出：

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

消除布尔属性泛滥
移除了 hasImage、hasIcon、showFooter、isLoading、isError 等大量用于控制 UI 显隐的布尔属性，改为使用 children 组合。
img-886 · 界面截图
显式变体
用明确的 variant 枚举属性替换了原本单一的 isPrimary 布尔值，为后续增加更多样式（如 secondary、outline）提供了扩展性。
img-887 · 图片展示了SmartCardProps类型的代码对比。红色框出的第2行删除了isPrimary布尔值，新增第3行vari
复合组件架构
将原本大而全的庞大 JSX 渲染逻辑（无数个 if/else），拆分为职责单一的小组件，并通过挂载到主组件上对外暴露。
img-888 · 这张图片是一段代码的diff对比片段，清晰呈现了组件开发前后的代码变化，对应文档中复合组件架构的介绍内容。图片上方标注“

效率提升

agent-browser

作者

Vercel

简介

agent-browser 是一个面向 AI 智能体的浏览器自动化 CLI 工具，用于执行网页交互与数据操作，包括页面导航、表单填写、点击操作、截图、数据提取及 Web 应用测试等，适用于以编程方式控制浏览器的自动化流程。

该技能支持的典型请求包括：打开页面、填写表单、点击元素、截图、抓取数据、登录网站等。

应用场景

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

实践案例

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

图片展示了企业套餐订阅页面，以“专业版”为例。上方有“选择套餐”“高级配置”“完成订单”三个选项卡，当前选中“选择套餐”。页面显示基础版、专业版、企业版三种套餐，专业版被蓝色边框突出显示，价格为$99/月，可选择月付或年付。下方“配置清单”列出专业版包含的团队成员数量等信息，总计$99。右下角有“下一步”按钮。该图片与上下文测试企业套餐订阅流程的实践案例相关，直观呈现了套餐选择环节。 — img-889 · 图片展示了企业套餐订阅页面，以“专业版”为例。上方有“选择套餐”“高级配置”“完成订单”三个选项卡，当前选中“选择套餐”

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

图片展示的是“agent-browser”技能操作日志。日志中记录了多条命令执行情况，如“/bin/agent-browser.js click @e9”“/bin/agent-browser.js snapshot -i”等，每条命令后均有“命令已执行”的提示。这些操作涉及点击、截图、等待等自动化操作，如“click”操作针对不同元素编号的按钮，“snapshot”操作用于截图。该图片与上下文紧密相关，直观呈现了“agent-browser”技能在测试企业套餐订阅页面时的自动化操作过程。 — img-890 · 图片展示的是“agent-browser”技能操作日志。日志中记录了多条命令执行情况，如“/bin/agent-brow

brainstorming

作者

Obra

简介

Brainstorming 是一个强制性的前置设计与需求分析技能，旨在通过协作式对话，将你的初步想法转化为结构化、可执行的设计方案与需求文档。在完成文档并获得用户确认前，禁止执行任何实现类操作（如编写代码、初始化项目等）。

该技能避免了 “需求太简单而无需设计” 的反模式，所有需求均需经过设计阶段，从而降低最终实现的偏差与返工率。

应用场景

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

实践案例

第一阶段：提问

提示词：帮我创建一个宠物用品购物网站。

收到请求后，AI 自动调用 “brainstorming” 技能，在开发前通过一系列提问与我进行头脑风暴，收集关于目标用户、核心功能、设计偏好和技术栈选择的信息。

问题一：

图片展示的是AI在“brainstorming”技能中与用户进行头脑风暴的界面。界面中显示“brainstorming 帮我创建一个宠物用品购物网站”，并有“想尝试”按钮。下方有“思考”板块，用户提问“在开始规划设计之前，我想先了解一下这个宠物用品购物网站的主要定位和目标受众是什么？”，下方有“全品类综合平台”“特定宠物垂直平台”“高端精品/定制路线”等选项，以及“其他”输入框，还有“取消”和“下一步”按钮。该图片与上下文紧密相关，是AI收集用户关于宠物用品购物网站信息的环节。 — img-892 · 图片展示的是AI在“brainstorming”技能中与用户进行头脑风暴的界面。界面中显示“brainstorming

问题二：

图片展示的是AI在收到请求后，调用“brainstorming”技能进行头脑风暴时的界面。界面中列出四个问题，分别是“收到请求后，AI自动调用“brainstorming”技能，在开发前通过一系列提问与我进行头脑风暴，收集关于目标用户、核心功能、设计偏好和技术栈选择的信息”；“问题一”“问题二”“问题三”“问题四”。其中“问题三”对应图片内容，显示AI询问在第一版（MVP）中，希望包含哪些核心业务模式和功能，可多选，选项包括标准电商交易、订阅制服务（Subscription）、社区与内容驱动、商品+服务预约等，还设有“其他”输入框。 — img-893 · 图片展示的是AI在收到请求后，调用“brainstorming”技能进行头脑风暴时的界面。界面中列出四个问题，分别是“收

问题三：

图片展示的是AI在收到请求后，调用“brainstorming”技能进行头脑风暴的界面。界面中列出多个问题，如“您选择的功能非常丰富！包含标准电商、订阅、社区和服务预约，这相当于四个独立的子系统...”等。下方有四个选项，分别是“从‘核心电商交易’开始（推荐）”“从‘订阅制服务’开始”“从‘社区与内容’开始”“暂不拆分，全部一起做”，每个选项后有简要说明。底部还有“取消”和“下一步”按钮。该图片与上下文紧密相关，直观呈现了AI在收集信息后的输出内容。 — img-894 · 图片展示的是AI在收到请求后，调用“brainstorming”技能进行头脑风暴的界面。界面中列出多个问题，如“您选择的

问题四：

图片展示的是AI在收到头脑风暴请求后，输出的网页设计方案确认界面。界面中列出三种技术架构和实现方案，分别是“Next.js + Tailwind 全栈方案（推荐）”“前后端分离（React SPA + Node.js）”“Headless 电商 / 现成后端方案”，并简要说明各自特点。下方有“其他”输入框及“取消”“下一步”按钮。该图片与上下文紧密相关，是AI在收集充分信息后，为“狗狗用品核心电商平台”开发提供技术方案选择的环节。 — img-895 · 图片展示的是AI在收到头脑风暴请求后，输出的网页设计方案确认界面。界面中列出三种技术架构和实现方案，分别是“Next.j

第二阶段：输出方案

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

图片展示的是SOLO Code平台中“brainstorming”技能的对话界面。用户询问关于宠物用品商品网站的主要定位和目标受众，AI先了解用户对补充信息的需求，再围绕MVP（最小可行产品）展开讨论，包括用户（C端）、商品（B端）、功能（MVP）和系统架构等方面。该图片与文档中“brainstorming”技能在开发前收集信息、输出设计方案的内容相关，直观呈现了技能的对话流程。 — img-896 · 图片展示的是SOLO Code平台中“brainstorming”技能的对话界面。用户询问关于宠物用品商品网站的主要定位

界面设计

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 设计稿：

图片展示的是MCP Servers界面。界面顶部有“Trae”“Agents”“MCP Servers”标签，右侧有齿轮和X按钮。下方标题为“MCP Servers”，并显示“MCP List”。列表中有三个项目，分别是“Github”“Figma AI Bridge”“PostgreSQL”，每个项目右侧均有“Added to”标识及不同图标，如“+”“+”“+”等，还设有齿轮图标。该图与上下文介绍的AI调用“Figma AI Bridge”MCP Server和“figma”技能后初次生成代码具备高视觉还原度的内容相关，展示了MCP Server的界面情况。 — img-897 · 图片展示的是MCP Servers界面。界面顶部有“Trae”“Agents”“MCP Servers”标签，右侧有齿轮

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

图片展示的是Figma设计稿界面，显示了MCP Servers相关设置。界面中“MCP list”下有“+ Add”按钮，下方列出了三个MCP Server，分别是“Github”“Figma AI Bridge”“PostgreSQL”，每个Server右侧均有“Ready”状态标识和“Added to”图标。该图片与上下文紧密相关，上下文提到AI调用“Figma AI Bridge”MCP Server和“figma”技能后，初次生成的代码具备极高视觉还原度，此图直观呈现了MCP Server的设置情况。 — img-898 · 图片展示的是Figma设计稿界面，显示了MCP Servers相关设置。界面中“MCP list”下有“+ Add”按钮

frontend-design

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

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

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

使用 “frontend-design” 技能前：

图片展示的是“心理探索体验”界面。背景为黑色，上方有紫色星星图标及“心理探索体验”文字。中间大字“Discover Your True Self”中“Discover”为白色，“Your True Self”为紫色。下方文字说明“穿越迷雾，遇见真实的自己。完成这段沉浸式心理探索，解锁你的专属人格色彩与维度密码。”最下方有一个白色圆形按钮，内有“开始探索”文字及右箭头。该图片位于介绍“心理探索体验”技能使用前后界面变化的上下文段落中，展示了使用该技能后的界面样式。 — img-899 · 图片展示的是“心理探索体验”界面。背景为黑色，上方有紫色星星图标及“心理探索体验”文字。中间大字“Discover Yo

图片展示的是一个名为“frontend-design”的技能使用前后对比的界面设计示例。使用该技能前，界面背景为白色，文字为黑色，整体较为简洁。使用后，背景变为深色，文字颜色和背景形成对比，突出显示“frontend-design”技能名称。图片下方是问卷调查界面，显示“当你在一个大型聚会上时，你通常会？”的问题，有A、B两个选项，A选项为“主动去认识新朋友，享受人群中的能量”，B选项为“和几个熟人待在一起，或者早点离开”。 — img-900 · 图片展示的是一个名为“frontend-design”的技能使用前后对比的界面设计示例。使用该技能前，界面背景为白色，文

图片展示的是MBTI性格测试结果界面，显示个性类型为INTP，即逻辑学家。上方有“YOUR PERSONALITY TYPE”字样，下方大字呈现INTP，再下是对其的描述，称其为具有创造力的发明家，对知识有止不住的渴望，享受发现宇宙运转原理的过程。底部有“#分析”“#客观”“#好奇”“#创新”标签，以及“保存专属海报”和“重新测试”按钮。该图片与上下文介绍的MBTI性格测试结果相关，直观呈现了INTP类型的性格特点。 — img-901 · 图片展示的是MBTI性格测试结果界面，显示个性类型为INTP，即逻辑学家。上方有“YOUR PERSONALITY TY

使用 “frontend-design” 技能后：

图片展示的是“灵魂光谱”技能的界面。背景为深色渐变，中央有白色英文“EXPLORE YOUR INNER SELF”及中文“灵魂光谱”。下方说明通过12个深度的直觉选择探索独特心智模式与灵魂底色，提示跟随第一直觉作答。底部有一个灰色圆形按钮，内有白色文字“开始探索 →”。该图片位于介绍“灵魂光谱”技能使用前后界面变化的上下文段落中，展示了使用该技能前的界面样式。 — img-902 · 图片展示的是“灵魂光谱”技能的界面。背景为深色渐变，中央有白色英文“EXPLORE YOUR INNER SELF”及中

图片展示的是“frontend-design”技能使用前后对比中的一个界面设计测试题。背景为深色渐变，上方显示“01/12”。问题为“当你置身于一个全新的社交场合时，你通常会？”，选项A是“主动与不同的人交谈，享受结识新朋友的过程”，选项B是“倾向于和熟悉的人待在一起，或者独自观察”。该图片位于介绍“frontend-design”技能使用前后界面设计变化的上下文段落中，用于直观呈现技能使用前后的界面设计效果对比。 — img-903 · 图片展示的是“frontend-design”技能使用前后对比中的一个界面设计测试题。背景为深色渐变，上方显示“01/1

图片展示的是MBTI性格测试中“逻辑学家”（The Logician）的INTP类型结果。上方显示“YOUR AURA TYPE”及“INTP”，下方为“逻辑学家”英文名称。下方有四个滑动条，分别对应内向（I） - 外向（E）、直觉（N） - 感觉（S）、情感（F） - 思考（T）、判断（J） - 感知（P），各条滑动条均指向左侧。底部文字说明该类型具有创造力的发明家，对知识有着不可抑制的渴望。图片与上下文介绍的MBTI性格测试结果相关。 — img-904 · 图片展示的是MBTI性格测试中“逻辑学家”（The Logician）的INTP类型结果。上方显示“YOUR AURA

frontend-skill

作者

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” 技能前：

图片展示的是“Work with AI”界面设计的“frontend-skill”技能使用前的页面。背景为深色，左侧有紫色光晕，右侧有绿色光晕。中间大字“与AI共创无限可能”引人注目，下方文字提示不要被时代洪流淹没，掌握AI工具、优化工作流、释放创造力与生产潜能。底部有“开启AI时代”和“探索案例”两个按钮，以及“用下拉菜单”提示。该图片与上下文紧密相关，直观呈现了使用该技能前的界面设计情况。 — img-905 · 图片展示的是“Work with AI”界面设计的“frontend-skill”技能使用前的页面。背景为深色，左侧有紫

使用 “frontend-skill” 技能后：

图片展示的是“Work with AI”界面设计的“frontend-skill”技能使用后的效果。背景为深色，左侧有“WORK WITH AI”及“人类与AI共创边界”等文字，右上角有“立即开始”按钮。下方文字说明不要被时代潮流淹没，掌握顶尖AI工具重塑工作范式，释放真正创造力，并有“开启未来”按钮。该图片与上下文紧密相关，直观呈现了使用该技能后界面设计的变化，强调了其带来的视觉特色和质感提升。 — img-906 · 图片展示的是“Work with AI”界面设计的“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 可以通过该技能生成区域地图、轨迹图，以及箱线图、直方图。它既可展示数据在空间上的分布情况，也可展示数据的分布特征，如数据的集中趋势、中位数及异常值，特别适用于区域市场监控和底层数据特征排查。

使用案例一：

提示词：

PLAIN TEXT

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

AI 使用 “chart-visualization” 技能后生成的图表：
img-907 · 这是AI使用“chart-visualization”技能生成的分组柱状图，用于展示2025年各季度线上与线下营收及核心

使用案例二：

提示词：

PLAIN TEXT

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

AI 使用 “chart-visualization” 技能后生成的拓扑图：
img-908 · 界面截图

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 来关联数据，然后对跨源数据进行整体分析，例如对订单、用户与商品数据的整合与分析。

使用案例

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

这张图片是待分析的Excel文件（sales_data_2025.xlsx）中的订单数据，表格包含订单编号、客户名称、订单日期、商品类目、单价、购买数量、是否为VIP共7列信息。表格内记录了从2025年1月到12月的多条订单数据，涵盖图书文娱、家居用品、电子产品、服装鞋帽、运动户外等多个商品类目，部分客户具备VIP身份，部分订单的购买数量与单价也清晰列出，这些数据将用于data-analysis技能的多表关联与综合分析，为后续的订单、用户与商品数据整合分析提供基础。 — img-909 · 这张图片是待分析的Excel文件（sales_data_2025.xlsx）中的订单数据，表格包含订单编号、客户名称、订

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

图片展示了使用“data-analysis”技能对“sales_data_2025.xlsx”文件数据进行分析后的结果。内容涵盖数据概览，如总订单数、总销售商品数、总销售额等；商业类目表现，如电子产品、家用电器等类目的销售额及订单数；VIP与客户贡献度，VIP客户贡献了8,244.8的营收，非VIP客户贡献了4,810.3；2025年销售趋势，呈现波动趋势，如钢笔销量3月最高、6月最低等；以及总结与建议，如重点推广与营销电子类产品、加强VIP客户关系管理等。 — img-910 · 图片展示了使用“data-analysis”技能对“sales_data_2025.xlsx”文件数据进行分析后的结果。

内容创作

canvas-design

作者

Anthropics

简介

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

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

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

应用场景

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

使用案例一：

提示词：

PLAIN TEXT

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

AI 使用 “canvas-design” 技能后的输出：
img-911 · 图片展示了AI生成的“春晓雾霭”海报作品交付内容。画面中呈现了“spring_poster.png”文件，其大小为206
AI 生成的海报：
img-912 · 这是AI运用canvas-design技能生成的春季主题海报，契合内容创作中构建统一视觉风格并生成连贯素材的要求。画面以

使用案例二：

提示词：

PLAIN TEXT

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

AI 使用 “canvas-design” 技能后的输出：
img-913 · 这张图片展示的是AI使用“canvas-design”技能后生成的内容，具体为主题“诗意共购（Poetic Resona
AI 生成的明信片：

图片展示的是AI使用“canvas-design”技能生成的明信片。左侧由多根不同粗细的线条组成，线条颜色从深绿渐变至浅绿，排列成不规则的竖条状。右侧上方有“夏长”二字，下方依次排列着“清风半夜鸣蝉”“工”字。该图片与文档中介绍AI使用“canvas-design”技能生成明信片的内容相契合，直观呈现了AI生成的明信片样式。 — img-915 · 图片展示的是AI使用“canvas-design”技能生成的明信片。左侧由多根不同粗细的线条组成，线条颜色从深绿渐变至浅

图片展示的是AI使用“canvas-design”技能生成的明信片。画面主体为一个由橙色和红色构成的圆形，圆形内有白色线条。明信片右下角有“秋收”二字，下方是“江清月近人”及一个红色印章。该图片与文档中介绍AI使用“canvas-design”技能生成明信片的内容相契合，直观呈现了AI生成的明信片样式。 — img-916 · 图片展示的是AI使用“canvas-design”技能生成的明信片。画面主体为一个由橙色和红色构成的圆形，圆形内有白色线

图片展示了一张名为“冬藏”的明信片。画面中，黑色线条构成的线条图由左下角向右上角延伸，线条末端有红色圆点。画面右侧有“冬藏”二字，下方是“独钓寒江雪”的诗句，最下方还有一个红色的“工”字。该图片是AI使用“canvas-design”技能生成的，与文档中介绍AI生成明信片的内容相关，展示了AI设计的明信片样式。 — img-917 · 图片展示了一张名为“冬藏”的明信片。画面中，黑色线条构成的线条图由左下角向右上角延伸，线条末端有红色圆点。画面右侧有“冬

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 生成图像” 的能力来提升效率时，可以使用该技能。
转换参考图的风格（图生图）
当你已经有一张参考图片，希望在此基础上将其转换成不同艺术风格的图片，或者保留原图结构进行二次创作时，可以使用该技能。
批量产出图片
当你需要在单次请求中一次性批量生成多张图片，可以使用该技能。
产出专业级高质量图片
当你对图像的细节、光影、构图有极高要求，需要专业的、可直接用于展示或生产环境的图片时，可以使用该技能。

提示

在使用 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” 技能后生成的图像：
img-918 · 图片展示的是AI使用byted-seedream-image - generate技能生成的赛博朋克风格未来城市夜景图片

doc-coauthoring

作者

Anthropics

简介

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

其工作流包含三个阶段：

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

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

应用场景

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

使用案例

提示词：

PLAIN TEXT

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

AI 使用 “doc-coauthoring” 技能后，与我的交互过程：
- 第一阶段：收集上下文
  在这个阶段，AI 负责提问和梳理信息，我负责做选择题和提供产品设计方向。通过一系列针对性的问题，AI 了解了我的想法（比如产品叫 Smart Translate、主打自定义 prompt、做成需要账号的 web 应用）。
  img-919 · 图片展示了AI与用户关于开发AI翻译软件的PRD（产品需求文档）的对话。用户希望开发一个AI翻译软件，AI先了解用户需求
- 第二阶段：分块起草与细化
  在这个阶段，AI 负责搭骨架和提供选项，我负责做决定。 AI 起草了 prd.md 的核心大纲（产品概述、用户权限、核心流程等）。针对复杂的业务逻辑（比如扣费时机、prompt 怎么拼、模型选哪些），AI 没有直接写死，而是列出了不同的方案，让我来做决策。这保证了 PRD 是真正按照我的意志来编写的。
  img-920 · 该图片是一段关于AI辅助产品需求文档（PRD）撰写及优化的操作指南内容截图，呈现了相关操作的具体要求与步骤，涉及产品定义
- 第三阶段：读者视角测试
  在这个阶段，AI 负责寻找 PRD 中的潜在问题，我负责填补漏洞。 AI 把自己想象成一个刚拿到这份 PRD 准备写代码的后端开发，专门找文档里含糊不清的地方（比如：只写了注册没写怎么注册、只写了前端限制没写后端要不要校验、没写发给模型的系统提示词用哪种语言）。在我回答这三个问题之后，AI 完善了这份 PRD，使其更加严密。
  img-921 · 界面截图