前端高级AI助手-如何用AI+工作流的方式提升你的前端开发效率！

🔥在当今快节奏的开发环境中，如何提升工作效率并打开代码思路是每位开发者都在思考的问题。今天，我将为大家手把手搭建一个前端AI助手。这不仅能提升你的工作效率，还能为你提供全新的思考方式。

• 🔜 省流：文章结尾有现成的“前端高级AI助手文件”，注意把文件内容粘出来后，后缀需要改成.json在上传使用。
• 🚪 能用AI-传送门：https://www.nyai.chat/chat?invite=nyai_1141439 偷偷的告诉你，它还有限时免💰的 GPTo 4.0 可以使用 ╰(°▽°)╯
  

前言：现如今的互联网时代，本就内存不大的手机上，要下载各种应用软件，有的时候3-4个手机屏幕都无法装下那么多的应用。所以我就打算用工作流去代替大部分应用场景。例如，今天我要举例的高级前端AI助手

步骤一：组件拖拽与身份设定

首先，我们需要拖动两个气泡文本组件到工作区。在第一个气泡中，填写本工作流的身份信息。这一步骤是为了明确AI助手的角色定位，确保后续交互的准确性。

接下来，在第二个气泡中填写用户输入的引导词。这是为了让AI助手能够理解用户的需求，并提供相应的反馈。

步骤二：定义用户输入

添加一个输入文本组件，并在此处定义一个名为“提问”的变量。这个变量将用于存储用户的输入内容，作为AI助手处理的基础。

步骤三：集成mossAI组件

在工作流中添加AI组件。在USER选项中，填写“高级前端开发”的提示词。这将引导AI根据高级前端开发的背景知识来处理用户的提问。然后在定义一个变量用于存储答案。

提示词：

我是你身边的高级前端开发助手
请说出你的项目细节
我希望你能担任高级前端开发员。我将描述一个项目的细节，你将用这些工具来编码项目。 Create React App, yarn, Ant Design, List, Redux Toolkit, createSlice, thunk, axios. 你应该将文件合并到单一的 index.js 文件中，而不是其他。不要写解释。 我将提供第一个项目的细节：{{提问}}

将这个答案添加到气泡文本组件中进行输出。这样，用户的每一次提问都能得到即时的反馈。

步骤四：实现提问闭环

为了实现无缝的连续提问，我们需要使用跳转组件。由于初始位置已经使用了两个气泡组件，如果不使用跳转，工作流将自动循环回到开始的位置。

通过跳转组件，我们可以将流程跳转到输入文本组件的位置，从而实现完美的提问闭环。这样，用户可以连续不断地进行提问，而不必担心流程中断。

步骤五：发布与效果验证

最后，点击发布按钮，将你的AI助手工作流发布上线。然后，回到主页，亲自体验一下这个无需编写代码的前端AI助手带来的便捷与高效。

通过以上步骤，你已经成功搭建了一个属于自己的前端AI助手。这个工具不仅能提升你的开发效率，还能为你提供全新的思考角度，助力你的前端开发之旅。快来试试吧！

省流：拿文件

注意：把文件内容粘出来后，后缀需要改成.json在上传使用。

能用AI-传送门：https://www.nyai.chat/chat?invite=nyai_1141439

{"version":"6","id":"clyg0t79o003l15272e7gu0ab","name":"moss机器人","events":[{"id":"cfhcmfqmayt8ozjnttxc60uk","outgoingEdgeId":"evybmxjo956ieoftpncv1iza","graphCoordinates":{"x":17.39,"y":2.89},"type":"start"}],"groups":[{"id":"mbc81gi0tczz1jf4qpfd7o66","title":"身份","graphCoordinates":{"x":19.28,"y":79.26},"blocks":[{"id":"kps49f28geajq0e8j78phn51","outgoingEdgeId":"avy8fn6i20gvc9hkh1vxpx9h","type":"text","content":{"richText":[{"type":"p","children":[{"text":"我是你身边的高级前端开发助手"}]}]}}]},{"id":"n2zhg0vg22cxfxglht7ak7ks","title":"提示词","graphCoordinates":{"x":19.39,"y":271.1},"blocks":[{"id":"u97okkjxhokmx15awp2x0obp","outgoingEdgeId":"y4xw2tvtu59hxd50mrciqdch","type":"text","content":{"richText":[{"type":"p","children":[{"text":"请说出你的项目细节"}]}]}}]},{"id":"idk11r90q8g972wtkgq6o78o","title":"提问","graphCoordinates":{"x":21.35,"y":454.8},"blocks":[{"id":"owe8ms3s7t0qq02um17t62yf","outgoingEdgeId":"uutjwue769dam95m85x8rp0v","type":"text input","options":{"variableId":"vhtxfsicb5fbqsdszvemt11u5"}}]},{"id":"xfwzgb82g8khan94xgpk0x1c","title":"mossAI","graphCoordinates":{"x":422.9,"y":-97.73},"blocks":[{"id":"ov5omwz3ffvrcttu704qlsda","outgoingEdgeId":"mzmiz0t6e3yi1wfskv9fhoqh","type":"openai","options":{"action":"Create chat completion","model":"gpt-4o-mini","messages":[{"role":"user","content":"我希望你能担任高级前端开发员。我将描述一个项目的细节，你将用这些工具来编码项目。 Create React App, yarn, Ant Design, List, Redux Toolkit, createSlice, thunk, axios. 你应该将文件合并到单一的 index.js 文件中，而不是其他。不要写解释。 我将提供第一个项目的细节：{{提问}}"}],"responseMapping":[{"variableId":"vzfuezpd3bzghkzkow1ivnjxx"}]}}]},{"id":"f0zj6q28eh4u2l2n6hn3fzvh","title":"答案","graphCoordinates":{"x":928.2,"y":106.72},"blocks":[{"id":"j6vha4v3aflb3c9f3qz3w0m9","outgoingEdgeId":"jmqmnqe60bj7tdmk7fd8235l","type":"text","content":{"richText":[{"type":"p","children":[{"text":"{{答案}}"}]}]}}]},{"id":"jufn3khz4h8ov2pv14k07lfk","title":"跳转闭环","graphCoordinates":{"x":923.9,"y":358.11},"blocks":[{"id":"o2rgzdzvrwlqv2sp7b0dzd55","type":"Jump","options":{"groupId":"idk11r90q8g972wtkgq6o78o"}}]}],"edges":[{"id":"avy8fn6i20gvc9hkh1vxpx9h","from":{"blockId":"kps49f28geajq0e8j78phn51"},"to":{"groupId":"n2zhg0vg22cxfxglht7ak7ks"}},{"id":"evybmxjo956ieoftpncv1iza","from":{"eventId":"cfhcmfqmayt8ozjnttxc60uk"},"to":{"groupId":"mbc81gi0tczz1jf4qpfd7o66"}},{"id":"y4xw2tvtu59hxd50mrciqdch","from":{"blockId":"u97okkjxhokmx15awp2x0obp"},"to":{"groupId":"idk11r90q8g972wtkgq6o78o","blockId":"owe8ms3s7t0qq02um17t62yf"}},{"id":"uutjwue769dam95m85x8rp0v","from":{"blockId":"owe8ms3s7t0qq02um17t62yf"},"to":{"groupId":"xfwzgb82g8khan94xgpk0x1c"}},{"id":"mzmiz0t6e3yi1wfskv9fhoqh","from":{"blockId":"ov5omwz3ffvrcttu704qlsda"},"to":{"groupId":"f0zj6q28eh4u2l2n6hn3fzvh"}},{"id":"jmqmnqe60bj7tdmk7fd8235l","from":{"blockId":"j6vha4v3aflb3c9f3qz3w0m9"},"to":{"groupId":"jufn3khz4h8ov2pv14k07lfk","blockId":"o2rgzdzvrwlqv2sp7b0dzd55"}}],"variables":[{"id":"vhtxfsicb5fbqsdszvemt11u5","name":"提问"},{"id":"vzfuezpd3bzghkzkow1ivnjxx","name":"答案"}],"theme":{},"selectedThemeTemplateId":null,"settings":{"general":{"isBrandingEnabled":true}},"createdAt":"2024-07-10T15:54:26.700Z","updatedAt":"2024-07-23T10:27:30.563Z","icon":null,"folderId":null,"publicId":"moss-e7gu0ab","customDomain":null,"workspaceId":"1602314-SXYWA","resultsTablePreferences":null,"isArchived":false,"isClosed":false,"whatsAppCredentialsId":null,"riskLevel":null}