实战 Google Stitch + AI 编码工具：利用 MCP 协议打通 UI 设计与代码实现的闭环

本文记录了一次利用 Google 的 AI 设计工具 Stitch 与 AI 编码工具（通过 MCP 协议）联动，自动优化网页 UI 的实测过程。作者通过在配置文件中添加 Stitch 的 MCP 服务地址，成功让 AI 调用设计 API 提取颜色、字体等设计系统参数，并自动将其落实到本地项目代码中。实测结果显示，经过 AI 自动改造的页面美观度较原版有显著提升，尽管与设计图的精确还原度仍存差距，但这一工作流展示了“设计即代码”的巨大潜力。作者指出，未来通过调整工作流，让 Stitch 先根据现有网页生成设计，再由 AI 进行代码实现，效果将更为精准。