TRAE × 文章社媒分享组件 Skill

文章社媒分享组件 Skill不在 TRAE 的前十推荐里——TRAE更擅长营销工作与网站、落地页和程序化 SEO，这个 Skill 的重心不完全在这里。它仍然可以正常安装使用，只是如果你要做的就是这件事，可以先看看下面几个更合适的 Agent。

用这个 Agent 跑文章社媒分享组件 Skill，核心优势是自带页面预览。拼接分享链接、规划按钮位置和输出 SVG 图标代码时，可以直接在预览窗口按手机和电脑屏幕尺寸核对排版和触控区，不用把代码贴到外部浏览器里来回切窗口检查。输出移动端原生分享 API 调用代码后，也能直接看实际触发效果。需要注意的是，这个 Agent 读不到本地的办公文档，给指令前要把 Word 或 Excel 里的文章正文和平台列表转成 Markdown 或 CSV 格式。如果项目只是做纯文字的内容分发的 PPT，不涉及网页代码，不要选它。

在这个 Skill 里，拼接分享链接、规划位置布局和输出图标代码三个环节直接吃到了页面预览的红利。把各平台官方分享 URL 的跳转代码和 SVG 图标写进页面文件后，不用额外打开浏览器刷新查错，直接在预览窗口按屏幕尺寸核对标题遮挡、按钮对齐和移动端触控区大小。部署原生分享环节写完 navigator.share 调用代码，也能直接看实际触发效果。判断标准很简单，改完代码当场看预览，如果按钮错位或触控区太小就在代码里直接调尺寸，省掉了来回复制代码查效果的动作。

1. 01

   拼接分享链接

   结合页面预览特性，把 X、LinkedIn、Facebook 等平台的官方分享 URL 拼接好后写入文件，直接在预览窗口点击链接，确认能不能正确带上当前页面的 URL 和标题，不用另外建测试页。

2. 02

   规划位置布局

   结合页面预览特性，写完分享按钮的排版代码，按手机和电脑尺寸在预览窗口核对按钮有没有遮挡正文、对齐有没有错位，发现触控区太小直接改代码里的间距和尺寸，不用切浏览器。

3. 03

   输出图标代码

   在代码文件里写好满足无障碍访问标准的 SVG 图标调用规范，保存后预览窗口直接显示图标渲染效果，如果发现图标颜色不匹配品牌主题或显示不全，在代码里改完当场生效。

4. 04

   确认文章类型

   这个 Agent 无法直接读取 Word 等办公文档里的长文或短帖分类，要手动把文档另存为 Markdown 格式，或者直接在对话框输入具体文章类型，它才能根据类型给出合适的分享组件样式。

把待加分享功能的网页 URL 链接、预设分享文案和目标平台列表整理在 Markdown 文件里。在 TRAE IDE 的对话框直接输入指令，或者把这个 Markdown 文件拖进对话框引用。在 Work 里交代文章内容的写作和研究，在 IDE 里接手页面制作和分享组件的代码生成。进度展示在代码编辑器下方的对话区域，代码会直接写进当前项目的 HTML 或前端组件文件里。

装完先给一个本地测试用的 HTML 文件和一段包含 X、LinkedIn、Facebook 的平台列表。看它在代码里生成的分享 URL 是否带了正确的网页 URL 参数，预览窗口里点这三个图标能不能跳转到对应社媒的发帖框。接着检查移动端预览，看 navigator.share 代码在手机尺寸下能不能唤起系统底部的原生分享菜单。最后检查 SVG 图标的 width 和 height 是否符合最小触控尺寸，看图标的 alt 属性有没有留空。