TRAE做UI设计：从桌面稿到移动端

用 TRAE 把桌面设计稿改成移动端，先重排内容，再调整布局，最后检查网页。通过 Pixso MCP 读取原有画板、组件和样式，在原稿旁新增窄屏方案；保留活动信息、报名字段与提交规则，重新决定手机上先看什么、在哪里填写。设计确认后，再让 TRAE 在现有代码项目中实现对应布局。把桌面稿整体缩小，并不能得到好用的移动页面。

下面以一张科技沙龙报名页为例：桌面左侧介绍活动，右侧填写报名信息；手机则需要让主题、时间地点和报名入口更快进入视线。Pixso MCP把真实画板交给 TRAE，也支持在授权范围内编辑设计，因此这次可以沿着已有方案继续做，而不必重新生成一套风格不同的页面。

桌面上的两列，到了手机不只是上下排列

先看这张页面为什么要改。桌面上，访客能同时看到活动介绍和报名表单；手机上如果简单把右列放在左列之后，可能要滑过介绍、讲师和全部议程，才能找到报名入口。反过来把整张表单放在最前面，用户又还不知道活动何时举行、在哪里参加。

本例采用一个明确顺序：活动主题 → 时间与地点 → 报名表单 → 详细介绍和议程。主题下保留一段简短说明，帮助用户判断是否适合自己；讲师介绍和长议程继续保留，但放到报名区之后，并提供“查看议程”的页内入口。这是一项内容优先级调整，不是通过隐藏文字让手机页面看起来更短。

这里的“立即报名”和“提交报名”不是同一件事：前者把用户带到表单，后者发送已填信息。若首屏按钮只是滚动到报名区域，就不要让它显示提交成功；若表单尚未填写，也不要让底部固定按钮假装已经完成报名。

准备原稿时，保留桌面画板，确认标题、活动信息、表单和议程各自属于哪个容器。已有按钮和输入框组件继续使用。手机稿应当是同一活动的另一种布局，不能在生成时擅自改活动时间、减少必填项或把线下活动换成线上会议。

在TRAE中连接Pixso，先读原稿再创建手机稿

用远程MCP接入当前设计文件

在 TRAE 的 IDE 窗口打开项目，进入设置 → MCP → 添加 → 手动添加。将下面的服务加入配置；已有其他 MCP 服务时，合并这一项，保留其他配置：

{
  "mcpServers": {
    "pixso-remote": {
      "url": "https://pixso.cn/mcp"
    }
  }
}

保存后按客户端提示完成 Pixso OAuth 授权，再确认当前会话可以使用 Pixso 工具。TRAE 也支持项目根目录下的 .trae/mcp.json，采用项目配置时，需要先启用项目级 MCP。第一次接入选定一种配置位置即可，避免同一个服务被重复添加。入口和格式可查看TRAE MCP 配置文档。

这条远程路线不要求 Pixso 客户端持续开启。Pixso MCP 需要全功能席位或研发席位，以及目标文件的查看权限；编辑画板还需要文件编辑权限。企业私有化环境使用自己的服务地址。授权方式与图层链接的获取位置见Pixso 远程 MCP 指南。

在 Pixso 中选中完整的桌面报名页容器，右键复制图层链接。链接中的 item-id 用于定位目标，普通文件分享链接不能替代它。若同一文件有多个历史版本，要明确哪一张是本次适配依据。

第一条指令只分析桌面布局

读取这个 Pixso 科技沙龙报名页的图层链接，先不要修改画布和代码。确认活动主题、时间地点、介绍议程、报名字段及主按钮分别在哪个容器。读取可复用的按钮、输入框、文字样式和布局信息。按手机用户的阅读顺序提出重排方案，保留全部业务文案和字段；指出哪些区域需要改布局，哪些只需调整宽度。返回目标画板名称与截图，确认读到的是这一版。

这一步要得到实际对象和具体调整。例如“报名表单由桌面右侧卡片移到活动摘要之后”，比“整体更适合手机”有用。TRAE 如果只返回一段设计建议，没有调用工具读取目标，就还没有拿到这张原稿；先确认工具已启用、授权账号正确，再继续。

Pixso 新版远程 MCP 提供图层、组件和样式读取，也提供设计编辑、截图与布局检查。让 Agent 根据当前工具清单完成任务，不把旧教程中仅本地可用的工具名称搬进远程流程。具体范围可查工具与权限说明。

保留桌面原稿，在旁边生成窄屏画板

确认信息顺序后，再授权创建手机稿。本例先以 390px 宽画板观察布局，后面还会在浏览器中检查其他宽度。新画板与原稿分开放置并清楚命名，便于比较；不要直接把唯一的桌面画板改窄。

在这个桌面画板所在页面新增一份390px宽的手机方案，保留原画板、原组件和共享样式。手机顺序为活动主题与简短说明、时间地点、报名表单、详细介绍和议程。字段改为单列，长地址和标题自然换行；复用已确认的按钮与输入框，不修改活动文案和报名规则。只创建和调整这份手机方案，不改其他页面。完成后返回新增画板链接，截图并检查文字溢出、容器嵌套及对齐。

检查时同时看画面和结构：文本是否仍可编辑，表单有没有漏字段，主按钮是否沿用正确组件，长文案是否被固定高度裁掉。如果 Agent 只是插入了一张整页图片，虽然外观相似，也没有完成“可编辑手机稿”的目标。

一次修改未完成时，先查看已经新增了哪些节点，再补剩余部分。不要直接重跑整条创建指令，避免画布上出现多张重复手机稿。后续修改继续指定新画板及具体区域，例如“只调整时间地点区的换行，保留标题、表单和议程顺序”。

画板确定了，网页还需要真正的响应式规则

两张设计稿不等于两套网页，更不等于已经写好断点。Pixso 中的桌面与手机画板表达布局决策；浏览器里的页面还要处理窗口连续变化、真实字体、长内容和操作状态。同一套业务内容应尽量由一套页面结构承载，再通过布局规则适配不同宽度。

把桌面和手机两个图层链接都交给 TRAE，同时打开已有代码项目。让它先读取当前页面、组件和样式方案，沿用原来的框架和路由。已有报名接口、校验与反馈继续保留；这次是适配任务，不需要新建登录、支付或第二套表单系统。

先保证阅读顺序，再安排两列位置

一个常见问题是：手机视觉上已经把表单移到前面，但键盘焦点仍先经过后方长内容。原因可能是只用 CSS 的 order 改了视觉位置，DOM 中的阅读顺序没有相应考虑。对于这个报名页，可以让文档顺序先符合手机的主要阅读路径，再用 Grid 将桌面表单安排到右列。

例如将页面拆为活动摘要、报名表单、详细内容三个语义区域；桌面用两列组织它们，窄屏恢复单列。下面只表达布局关系，具体类名和宽度应接到现有项目中：

.event-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem);
  grid-template-areas:
    "summary signup"
    "details signup";
  gap: 2rem;
  align-items: start;
}
.event-summary { grid-area: summary; min-width: 0; }
.event-signup { grid-area: signup; min-width: 0; }
.event-details { grid-area: details; min-width: 0; }

@media (max-width: 52rem) {
  .event-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "summary" "signup" "details";
    gap: 1.5rem;
  }
}

这里的 52rem 是这份布局的起始设定，不是所有页面都应该采用的标准。实际选择断点时，观察表单最小可读宽度、左侧标题和外侧留白：两列开始互相挤压，就应调整布局，而不是等到某个设备名称对应的固定尺寸。

如果项目已有响应式 Token、栅格组件或容器规则，就让 TRAE 沿用它们，不把这段示例整段复制到全局样式。尤其不要同时保留一套桌面表单和一套手机表单，再用显示隐藏切换；重复字段可能带来重复 ID、校验不一致和两份输入状态。

手机底部按钮，先解决它和表单的关系

先让表单内的提交按钮在正常文档流中工作。若活动介绍较长，确实需要一个持续可见的报名入口，可以让底部入口定位到表单，并使用“填写报名信息”等明确文案；最终提交仍由表单负责。用户开始填写后，不要再让另一条浮层盖住输入框、错误提示或提交区。

移动键盘弹出时，可见区域会缩小。仅给底部按钮加 position: fixed，不能保证它始终位于合适位置；安全区留白也不能代替键盘遮挡检查。对这张页面，优先采用正常流提交，把固定入口作为可选增强，分别观察聚焦输入、显示错误、滚动到表单末尾三种情况。

根据桌面与手机两个Pixso图层，调整当前报名页的响应式布局。保持同一套表单、接口和校验，不复制第二份字段。文档阅读顺序为活动摘要、报名表单、详细内容，桌面再通过布局形成左右两列。窄屏时允许标题和地址换行，提交按钮放在表单内；已有底部入口不能遮挡输入与错误。先说明预计修改的组件和样式，再实施；不改业务规则或无关页面。

具备企业版全功能席位或研发席位、文件位于企业空间时，也可使用 Pixso 的 D2C+ 设计转代码作为起点；生成后仍需接回本项目的组件和报名逻辑。如果这次是 TRAE 根据读取的设计信息修改现有代码，就按这条路线继续，不需要把普通 MCP 读取称为已经执行了 D2C+。

从390px到桌面，检查中间宽度和真实操作

设计稿检查与网页检查要分别完成。在 Pixso 中确认新增画板的内容、组件、换行和层级；在浏览器中启动修改后的页面，检查 CSS、字体、事件与接口反馈。设计工具里的布局检查不会替你打开手机键盘，也不会证明报名提交已经正常。

本例可先观察 390px、768px 和 1280px，再连续拖动窗口。特别留意从一列切回两列的附近宽度：表单是否突然变得过窄，标题是否挤到按钮上，图片是否拉伸。只在最窄和最宽各截一张图，容易漏掉中间区间的问题。

1. 长内容：换成长活动标题、两行地点和较长字段提示，确认文本仍完整，页面没有横向溢出。不要靠缩小全站字号或隐藏溢出来掩盖问题。
2. 键盘与焦点：用Tab进入报名表单，观察顺序是否合理；在手机上聚焦末尾字段，确认输入内容、错误和提交入口都能到达。
3. 提交失败：在测试环境触发失败结果，保留已填信息，错误出现在相关位置。屏幕变窄不能让反馈被固定按钮盖住。
4. 内容一致：桌面和手机的活动时间、地点、字段要求保持一致。适配只改变呈现，不悄悄改成另一场活动。
5. 既有功能：重新走一遍原来正常的报名路径，再运行项目已有的相关检查，确认样式改动没有破坏提交、校验和成功反馈。

发现问题后，把修改指向具体区域。例如：“只修768px附近表单过窄的问题，保留当前阅读顺序与接口；不要调整活动主题和议程。”完成后回到相同宽度、相同内容再次查看，才能知道这次改动是否解决了原问题。

最终交接时保留桌面与手机画板链接、主要重排规则、网页入口和修改文件。设计稿与代码后续不会自动实时同步：增加一个报名字段、调整活动信息顺序后，要让对应画板与页面一起更新。如果还需要补齐从设计到可运行页面的完整流程，可以继续阅读设计师Vibe Coding工作流。

TRAE 与 Pixso 的配合，最有价值的地方是让适配始终有同一份设计依据：先在画布中决定信息如何重排，再把这些决定落实为网页规则。保留已有内容和组件，集中修好窄屏上的阅读、填写与提交，比重新生成一张看起来像手机页面的图更容易交付。