TRAE × 邮件订阅表单 Skill

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

用 TRAE IDE 跑「邮件订阅表单 Skill」，核心红利落在「规划视觉与无障碍」这个环节。表单的输入框、按钮尺寸和移动端适配，改完直接在右侧预览窗口按手机和电脑屏幕核对，省掉把代码贴进外部浏览器测试的来回切换。代价是它不读本地的 Word 和 Excel，所有的受众画像和激励物资料要先转成 Markdown 或 CSV 放进目录。如果你的最终成果只是一份 PPT 提案，不需要落地真实的网页，不要选这个 Agent。它是为要做活动页和程序化 SEO 页面的团队准备的。

这个特性直接改变「规划视觉与无障碍」环节的做法。设计表单字段和按钮时，TRAE IDE 右侧的预览窗口会跟着代码实时刷新。修改输入框的间距、字号或按钮颜色后，直接切到手机或电脑尺寸看实际渲染效果。不用把 HTML 复制到 Chrome 里刷新查错。只要预览窗口里的输入框对齐、按钮在移动端不超出屏幕，这个环节就算通过，直接进入开发检查表的交付阶段。

1. 01

   规划视觉与无障碍

   在 IDE 里改代码，右侧预览窗口直接看表单在手机和电脑上的排版。输入框对比度和焦点状态是否符合无障碍标准，看预览画面的实际渲染，不用另外开浏览器做测试。

2. 02

   读取项目上下文

   把现有的项目上下文文件放进项目根目录的 `.agents/skills/` 文件夹。Agent 直接读本地文件里的受众画像和价值主张，不需要额外开对话框手动粘贴长文本。

3. 03

   确认激励物内容

   如果要调用外部脚本生成折扣码或资料包链接，Agent 会停下来要求确认。需要在对话框里回复同意，它才继续把激励物信息写进表单的文案字段里。

办公文档要先另存为 Markdown 或 CSV。在 TRAE IDE 的项目根目录下找到 `.agents/skills/` 文件夹，把技能目录和转好的文本资料都放进去。在 IDE 的对话框里直接交代页面制作任务，比如“读取目录里的受众画像，做一个手机端的邮件订阅弹窗”。任务跑起来后，在 IDE 底部的终端窗口看执行进度，代码生成和预览都在主界面完成，不用切到 Work 端。

安装完后，新建一个空的 HTML 文件，让它在文件里写一个包含邮箱输入框和提交按钮的标准组件。观察右侧预览窗口，如果切到手机尺寸后输入框宽度自适应、按钮没被截断，且控制台没有红色的代码报错，说明环境跑通了。再让它生成一份包含字段名称的 Markdown 清单，看是不是符合无障碍标准的检查表。