AI 的“Designer Flow”：我为何搭建通往 Google Stitch 的桥梁

Source: Dev.to

“上下文”问题

我很喜欢 Google Stitch。它能生成惊艳、可直接投产的界面，但它像是孤岛上的存在。如果我生成了一个 “首页”，我的 AI 代理并不知道它的存在。当我随后请求一个 “个人资料页” 时，AI 会重新开始，导致字体、颜色和整体氛围都不一致。我希望我的 AI 代理能够看到我所看到的内容。

所以，我搭建了一座桥

我创建了 stitch‑mcp，一个开源连接器，可将 Google Stitch 直接链接到你的 AI 工作流。它使用 Model Context Protocol (MCP) 为你的代理提供安全、直接的设计项目访问。该桥梁不仅仅是获取文件——它还能让 AI 理解设计本身。

“Design DNA” 功能

最酷的部分是工具 extract_design_context。它不会把成千上万行的 HTML 全部倒进聊天窗口，而是扫描你的页面并提取真正重要的内容：

• 颜色 – 你的精确 Tailwind 调色板。
• 排版 – 你使用的字体及其粗细。
• 结构 – 你的标题、导航栏和按钮是如何构建的。

它会把这些 “Design DNA” 交给你的 AI 代理，使其生成的下一个界面看起来像是同一个应用的一部分。

如何尝试

该项目完全开源，约两分钟即可搭建：

https://github.com/Kargatharaakash/stitch-mcp

如果你试用了，给 GitHub 点个星 ⭐️ 将不胜感激——这有助于让更多人发现它。

祝设计愉快。 🚀