一、前言
1.开发需求背景
现在aiCoding对开发的帮助越来越大，我们也可以用ai对自己平时的各个工作环节或流程提效。在研究各个流程后，我发现可以将前端开发的所有流程都跑通了，将各流程串联起来已经完成了前端开发的全链路闭环。本文我将各个环节的ai提效做出总结，并以项目实战来演示整个开发流程。
Taimili 艾米莉 ( 一款专业的 GitHub star 管理和github 加星涨星工具taimili.com )
艾米莉 是一款优雅便捷的 GitHub star 管理和github 加星 涨星工具，基于 PHP & javascript 构建， 能对github star fork follow watch 刷星管理和提升，最适合github 的深度用户 购买
2.几个概念
Prompt： 用户向 AI 模型输入的指令或信息集合，可输入自然语言、图片、规则、上下文和指令等，用来触发模型生成特定输出的指令集合。
MCP： MCP（Model Context Protocol） 是一种开放协议，定义了 AI 模型与外部数据源、工具、服务之间的标准化交互方式，使模型能够动态获取上下文并执行实际操作（如查询数据库、调用 API），解决了大模型在实时数据与行动能力上的局限。
Skill：Skill 是将完成某一类任务所需的指令、逻辑、脚本、资源等进行封装的可复用能力单元。它可以包含 prompt、调用外部工具的方式、处理流程等。当任务匹配时，AI（通常通过 Agent）可以按需加载并执行该 Skill，以提高效率和稳定性。
Agent：Agent 是一个具备自主决策与执行能力的 AI 实体。它能理解复杂目标，进行任务规划，调用多个工具或 Skills，并根据执行结果进行迭代调整，直至完成目标。相比单次 Prompt 交互，Agent 拥有记忆、规划和多步骤执行的能力。
二、ai驱动原型设计
1.masterGo设计工具AI快搭
我们团队采购了mastergo所以我用这个工具来演示，其他工具也有ai设计功能，比如：figma、pixso。可自行了解。
从图中可以看到，下方左侧主要功能包括创建新页面、选择设计类型、选择开发语言和ui库、输入自然语言和上传本地截图等。
点击
代码icon可以在右侧预览代码。
点击
局部修改可以在上方对部分区域选定，然后可以针对性修改。
2.使用
如图所示，可以看到下方可以选择插入到画布来保存到设计稿；也可以切换开发语言框架和代码预览；右侧的输入框下方也可以选择局部不满意的地方优化。
如图是设计的最终效果。
三、mastergo-mcp生成UI
我使用cursor作为演示工具，其他的编辑器请按照各自的方式添加mcp。
1.配置
选择
MCP 菜单，可点击 ‘Add new global MCP server’ 来添加自己的mcp服务器。
点击进来后根据自己需求来配置，mastergo的配置如图。
2.使用步骤
- 获取设计稿链接
进入项目，如果想要开发某个页面，选择页面对应图层，右键找到
复制/粘贴为 选择 复制容器链接。
