文案库 · 小红书

用AI直出可编辑UI：MCP工作流分享

辣味章鱼（AI版） · 2026-10-09 · 赞 672 · 收藏 819 · 评论 17 · 读取于 2026-10-26

看原帖 ↗

要点（每条带原文引文）

  • 传统AI生成App UI图无法手动编辑，修改细节需重新消耗Token。 — ✓ “生成的UI图不能手动编辑” (0:03)
  • 使用MCP协议可将AI与设计工具打通，使AI读取设计数据并融入工作流。 — ✓ “我们的AI没有跟设计工具打通” (0:10)
  • 演示案例为健身打卡App，通过三步流程实现可重复编辑的原型图。 — ✓ “三步教会你做出可以重复编辑的原型图” (0:24)
  • 第一步安装MCP：在AI Agent中输入指令安装Pixel MCP以打通链路。 — ✓ “输入安装pixelMCP” (0:44)
  • 第二步生成设计：将画板链接发送给AI，指定主题后AI自动在画板内生成可编辑的按钮和文字。 — ✓ “把我们的画板的链接复制以后发给我们的AI agent” (1:00)
  • 第三步页面细化：通过一句话指令生成同主题的不同页面（如体重记录页），延续原有风格。 — ✓ “一句话生成同一个主题的不同页面” (1:18)
  • 支持通过指令调整配色方案，并对文字或按钮大小进行直接微调。 — ✓ “一句话生成不同的配色方案” (1:34)
  • 该工作流将健身App制作时间缩短至1小时，并投入日常使用。 — ✓ “我只用了一小时就完成了这个健身打卡APP” (1:48)
  • MCP技术降低了设计师对AI生成随机性的依赖，提高了生产效率。 — ✓ “大大提高我们的设计生产效率” (1:53)

要点由 LinkDigest 的模型写出，引文逐字核对过：✓ 在原文里找到了，✗ 没找到。

热评

  • MCP是什么啊 · 3 条回复
  • pixso需要充会员才可以用吗？ · 2 条回复
  • 用Claude可以吗 · 1 条回复
  • 可以问下电脑用的shimac最新吗 · 1 条回复
  • @点点 总结视频 · 1 条回复

画面文字（前 10 行）

  • 0:00 辣味章鱼 / 小红书
  • 1:00 设计文件 / MCP 已连接 / 复制链接成功，文件未开启分享，仅协作者可访问 / 调整权限 / 图层 组件 资源 AI / 搜索图层名称 / 页面 / 页面 1 / 快速创建容器 / AI生成设计稿 / AI能做什么 / 创建一个类似钉钉的办公APP / 手机 430 x 932 / 网页 1280 x 800 / 平板 834 x 1194 / 自定义 100 x 100 / 将其保存为自定义模板 / 我们要把我们的画板的链接 / 设计 原型 D2C / 封面 / 背景 EFEFEF 100% / 本地变量 Beta / 本地样式 / 导出
  • 2:00 小红书 / 辣味章鱼 / 我们的设计生产效率

逐字稿

哈喽,你用AI做APP是不是也遇到过这种情况? 生成的UI图不能手动编辑,即使烧了一大堆token,就还是看起来像一个非常粗糙的demo。 问题就在于我们的AI没有跟设计工具打通。 你用了MCP之后呢,我们的AI就能读取设计工具的数据,真正的融入我们的设计工作流。 所以我这一期我想分享一下我和MCP的一些心得。 我会用一个健身打卡APP作为案例,三步教会你做出可以重复编辑的原型图,即使是生活中的一些小灵感也能变成APP快速落地。 首先第一步MCP安装,我们需要用到一个AI agent和一个能用AI做原型图的平台।这里我用codexc和pixelMCP来演示。 我们打开画布,左上角打开MCP配置…

这里只显示前 300 字。 登录后免费看完整逐字稿（已读过的链接不扣积分）

读了什么

  • 图上文字 39 行
  • 逐字稿 21 段 (129 / 129 s)
  • 画面文字 3 行，带出现时间
  • 抽帧间隔不超过 60 秒
  • 没读到：on-screen text between sampled frames not read: a transcript-first read takes 3 frames, about one every 0:43
  • 没读到：comments: the top 5 of 17 read from the share page; the rest of the thread not read

只有计数和一句样例；全文留在原帖。

LinkDigest

读你自己的链接

贴一条小红书、抖音、B站、微博、公众号、YouTube 或 TikTok 链接，几十秒后拿到文案、逐字稿、图上文字和要点。

digest console
resolvefetchreaddigest

Try an example below, or paste your own link.

try

相关内容

本页由 LinkDigest 读取公开内容后生成的要点与引文；原文版权归作者，引用请注明原文链接。如需下架，请通过 /app/feedback 告知。 原文链接 · support@linkdigest.dev