SOLO 必装的 14个 Skills，看这一篇就够了

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

• 体验 TRAE SOLO 网页版

• 下载 TRAE SOLO 桌面版

• 生成规范的提交信息

  在提交代码时，AI 会通过该技能来自动分析暂存区或工作区的代码差异（diff），识别变更类型（如 feat、fix、docs）及作用范围（scope），并生成符合 Conventional Commits 规范的提交信息。提交描述必须使用现在时祈使句，长度不超过 72 字符。

• 按逻辑拆分与暂存变更

  当工作区中存在多项变更时，该技能支持通过文件路径、通配符或交互式方式（git add -p）来暂存特定文件，确保单次提交仅包含一个变更。同时，该技能会严格遵守安全准则，不会将 .env、凭证或私钥等机密文件加入提交列表。

• 安全执行 Git 提交流程

  执行 git commit 时，该技能支持让你以交互式方式修改或覆盖自动生成的类型、范围和描述。同时，它会严格遵循 Git 安全协议：

• 核心性能瓶颈诊断与优化

  针对数据请求与页面加载，该技能重点解决以下两大 CRITICAL 优先级的问题：

• 消除数据请求瀑布流

  将顺序的 fetch 串行请求改为 Promise.all 并行请求，减少等待时间。

• 避免行内组件 & CSS 替代 JS 交互状态

  将 UserRow 提取到组件外部，并用 styled-components 的 :hover 伪类替代 onMouseEnter 维护的 JS 状态。

• 渲染健壮性与内存泄漏修复

  修复了防抖函数遗漏的 clearTimeout，以及 React 条件渲染数组长度的陷阱（可能导致页面输出 0）。

• 前端功能验证

  在本地开发 Web 应用（如 React、Vue、Svelte）时，通过自然语言描述测试需求（如 “测试登录流程”），AI 会调用该技能，自动生成 Playwright 脚本，模拟用户操作并返回结果。

• UI 行为调试与分析

  当你发现页面中某元素渲染异常或交互行为异常时，可向 AI 下达指令（例如：“截取首页完整截图” 或 “检查按钮的 DOM 结构”），AI 会执行该技能中的对应脚本，捕获截图或获取 HTML 内容，并将检查结果返回给你，以帮助你定位问题。

• 多服务应用测试

  若你的应用为前后端分离架构，测试前端功能需后端 API 服务同步运行，只需向 AI 提供项目结构与启动命令，AI 会借助该技能中的 with_server.py 脚本来同时启动所有必需服务，再运行测试脚本，确保在完整的环境中执行测试。

• 静态页面测试

  若你有不依赖服务器的纯静态 HTML 页面，需验证其内容或结构，只需向 AI 提供文件路径与测试需求，AI 会编写脚本并通过 file:// 协议在浏览器中打开该文件，然后执行自动化验证。

• 重构臃肿组件

  当一个组件包含过多业务分支，充斥大量布尔 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 演进方向。

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

• 消除布尔属性泛滥

  移除了 hasImage、hasIcon、showFooter、isLoading、isError 等大量用于控制 UI 显隐的布尔属性，改为使用 children 组合。

• 测试网页中的复杂交互

  当一个网页包含复杂的表单填写、下拉选择或多步点击时，可以借助该技能来自动化测试该网页。该技能通过快照命令（snapshot）获取页面内所有元素的简化标识（如 @e1），然后通过批量命令（batch）执行操作，从而提升执行效率并降低 Token 消耗。

• 抓取网页中的数据

  当你需要从多个网页提取特定信息或结构化数据时，可以使用该技能。它支持提取页面链接（–urls）及指定元素内容（如 get text），并自动处理 Iframe，非常适用于结构化数据采集。

• 响应式布局与视觉回归验证

  当需要验证网页在不同屏幕尺寸或设备上的表现时，可以使用该技能。它支持动态调整视口分辨率、模拟各类设备（如 iPhone 14），并生成全页面或特定元素的截图；结合 diff 功能，该技能非常适用于 UI 回归测试与布局校验。

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

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

• 引入全新功能与组件

  你可以在需要增加新的业务逻辑、开发独立的模块，或在现有系统中扩展新能力等场景中使用该技能。它会引导你明确新需求，梳理现有代码与新功能的耦合度，并提供最终的设计方案。

• 修改或重构现有逻辑

  当你需要修改或重构现有逻辑（例如臃肿的代码）时，该技能会在修改前先探索现有结构和瓶颈，然后提出针对性的改进方案。

• 拆解并规划大型项目

  面对搭建类似 Notion 的协作平台等宏大需求时，该技能会在早期阶段对项目范围进行收敛。它会引导你理清各个子系统的依赖关系，确定最小可行性版本（MVP），将整体项目拆分为多个可独立开发的小任务。随后，它会优先为第一个子项目启动设计流程。

• 涉及 UI/UX 的视觉辅助决策

  当讨论诸如 “仪表盘布局” 或 “页面交互” 等需要直观展示的需求时，该技能会提供基于浏览器的可视化工具（Visual Companion），直接渲染线框图、架构图或多套布局方案。这种直观的对比展示能够帮助你更准确地完成设计相关的决策。

问题二：

问题三：

问题四：

• 将 Figma 设计稿实现为代码

  通过该技能，AI 可以把 Figma 中的某个页面、组件或模块实现为精确的前端代码。适用于对视觉一致性要求极高的场景，比如产品官网、落地页、营销页等。

• 用现有组件实现 Figma 设计

  当设计稿与现有项目的设计系统存在差异时，可以用这个技能做转换。在尽量还原 Figma 视觉效果的前提下，AI 会优先复用项目中已有的组件和样式规范（如 color、typography、spacing 等），避免重复实现或引入不一致的写法。

• 按节点实现或修改代码

  当你只需要实现或修改 Figma 中的某个具体部分（比如按钮、卡片或一个模块）时，可以直接针对这个节点来开发。通过 Figma 链接定位到对应的节点，并获取相关的设计上下文，只改需要改的部分，适合做局部调整或增量迭代。

Figma 设计稿：

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

• 构建网页组件或页面

  在从零开始创建一个具体的 UI 时（如一个 React 组件、一个 HTML/CSS 布局，或一个独立的静态页面），该技能会确保这个 UI 不仅功能完善，而且在视觉上具有辨识度。

• 开发完整的 Web 应用或网站

  在构建落地页、仪表盘或小型网站等产品时，该技能会让 AI 从整体出发，确立一个统一且鲜明的设计风格，并将其全局应用到产物中。

• 美化或重塑现有界面

  针对已有但设计质量较低的界面，可以使用该技能来提升界面的整体视觉质量，包括优化字体、配色、动效、布局等。

• 使用技能前：UI 界面充满了典型的 AI 审美——高饱和度的霓虹渐变色、通用的 “闪亮星星” 图标以及粗壮的无衬线字体。整体视觉显得较为套路化，缺乏心理测试产品应有的神秘、探索感。

• 使用技能后：UI 质量显著提升。在不失细节和保持体验完整性的前提下，整体设计更简约、独特。克制的暗色调与优雅的衬线排版赋予了 UI 界面一种深邃、神秘的质感。

使用 “frontend-design” 技能前：

使用 “frontend-design” 技能后：

• 构建高质量的落地页与官网

  该技能可用来构建需要建立强烈视觉焦点的页面。它在设计上强调首屏全画幅视觉、大面积留白与高对比度的文字排版，通过精简的内容结构清晰传达产品信息，避免使用堆叠式卡片与过多装饰元素。

• 开发现代化的 Web 应用

  该技能可用来开发强调效率和信息密度的软件界面，它会采用克制的层级关系和极简风格（类似 Linear 的设计语言），采用合适的字体排印和间距来组织内容，仅保留必要的边框和强调色，去除多余的阴影与渐变背景，且仅在真正代表交互的模块上使用卡片，以确保界面的整洁与易读性。

• 开发高质量的原型与 Demo

  该技能可用来制作对视觉质量、叙事性和动态效果有较高要求的演示项目。设计上强调图像的叙事作用，要求使用具有临场感的高质量真实摄影图，避免使用抽象的 3D 渲染或带 UI 边框的网图。同时严格限制动效的数量，仅保留 2-3 个能改变页面氛围的核心动效，确保整体的交互克制但令人印象深刻。

• 使用技能前：界面呈现了典型、模版化的 AI 风格，包括居中排版，高饱和度的双色渐变与夸张的环境光晕。整体视觉虽然炫酷，但带有浓重的 “AI 味”，缺乏品牌个性。

• 使用技能后：UI 设计成功跳出了常规的 AI 审美框架，整体采用左对齐结构，页面排版更具特色。同时，单色高亮、直角按钮以及收敛的光影处理，让整体视觉更具克制、深邃的质感。

使用 “frontend-skill” 技能前：

使用 “frontend-skill” 技能后：

• 多维数据对比

  通过该技能，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” 技能后生成的拓扑图：

• 数据结构理解与初步探索

  在获取新的 Excel/CSV 文件后，快速查看表结构、字段类型、数据规模及样例数据，用于建立对数据内容的基本认知。

• SQL 查询与数据筛选

  基于明确条件对数据进行查询、过滤和排序，从原始数据中提取所需结果，适用于定向的数据检索与问题验证。

• 聚合统计与指标分析

  通过分组与聚合计算（如 SUM、AVG、COUNT），生成关键指标或对比不同维度的数据的表现，是最常见的分析场景。

• 多表关联与综合分析

  若一个 Excel 文件包含多个工作表或需要同时分析多个文件，该技能会通过 join 来关联数据，然后对跨源数据进行整体分析，例如对订单、用户与商品数据的整合与分析。

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

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

1. 生成设计哲学：首先，该技能会生成一份设计哲学文档（.md），以确立创作的核心理念。

2. 完成画布作品：然后，基于这份设计哲学，完成最终的视觉设计。

• 海报设计

  该技能可用来制作线下活动、艺术展览或主题分享会的宣传海报。你只需提供活动主题，该技能会自动帮你完成排版：它会以图形、色块和几何分割为主来构成画面，并仅在画面特定位置保留标题、时间等少量核心文本。

• 封面设计

  该技能可用来为行业报告、白皮书、电子书或音乐专辑等制作封面。它会将你提供的主题转化为视觉元素，例如网格、纹理等抽象图形，然后最终会生成一张带主标题的静态图像，可直接作为长篇文档或出版物的封面。

• 系列视觉图集

  该技能可用来制作一组风格一致、但内容不同的图像。例如：一套四张的节气明信片、同一场活动的三天倒计时海报，或类似实体画册的连贯配图。该技能会先固定一套色彩和图形规则，再在此基础上连续生成多张构图各异的图片，确保整组物料在视觉风格上属于同一系列。

• 提示词：

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

• AI 生成的海报：

• 提示词：

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

• AI 生成的明信片：

• 4.0：适合日常使用，快速生成所需图像，响应迅速且稳定。

• 4.5：细节表现更优，适合处理复杂的图像。

• 5.0：提供最高的图像质量，且支持联网搜索工具及自定义输出格式。

• 提示词：

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

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

1. 收集上下文：用户提供所有相关背景信息，AI 通过提问来补充和澄清必要信息。

2. 分块起草与细化：通过头脑风暴与编辑，逐步完善各个部分内容

3. 读者视角测试：在定稿前，模拟一位不了解背景的读者来审阅文稿，以发现潜在盲点。

• 起草技术规格说明书

  在从零构建系统设计文档时，引导你逐步细化技术方案，确保技术架构、系统依赖、向后兼容性等关键工程细节被完整且有序地记录。

• 记录工程决策与项目提案

  帮助你结构化地梳理团队决策过程，清晰呈现问题背景、方案权衡（Trade-offs）、未采纳方案的理由以及最终的决策依据。

• 编写产品需求文档

  该技能可以辅助你准确界定产品目标与功能边界，从目标受众的视角消除需求描述中的歧义，产出逻辑严密的 PRD。

• 排查文档盲区 & 验证文档可用性

  在定稿或发布重要文档前，通过模拟“无背景知识读者”的视角进行独立测试，发现并修复仅核心参与者能理解、而外部团队易产生困惑的信息断层与逻辑盲点。

• 提示词：

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