WorkBuddy连接墨刀AI做原型设计：从小程序需求到可交互页面

做一个教育类小程序原型，首页很好画，但真正进入产品讨论后，首页只是其中一页：课程怎么找，作业怎么提交，学习进度在哪里看，连续打卡有什么反馈，积分又如何使用，这些都要在原型里交代清楚。
这篇文章记录一个AI生成教育类小程序的原型设计思路：任务从WorkBuddy开始，通过连接器调用墨刀AI，先把产品需求转成一组移动端页面，再检查页面之间的跳转和状态，最后保留继续修改的入口。重点在于让一份不完整的想法变成产品、设计和开发都能讨论的材料。

一、WorkBuddy和墨刀AI分别负责什么

WorkBuddy适合承接任务和上下文，你可以在一段对话里描述产品目标、页面范围和交互要求，再通过连接器调用墨刀AI生成原型。墨刀AI承担的是产品设计相关的生成工作，包括PRD、HTML交互原型、React/Vue应用和图片，也能读取、导入、导出墨刀已有的原型画布。
使用前，在WorkBuddy左侧的“专家·技能·连接器”中的连接器搜索“墨刀AI”，添加并按提示填写墨刀AI账号的个人令牌。连接成功后，可以去新建任务，确认输入框附近出现墨刀AI，再开始描述产品需求。
这一步看起来只是配置，但会影响后续工作。先说清楚希望生成什么，是PRD、可预览的HTML原型，还是React/Vue应用；再说明目标设备、页面数量和需要演示的操作。如果你只输入“设计一个教育小程序”，AI需要自行猜页面，生成结果就很难用于评审。

二、把教育产品拆成用户要完成的任务

这次案例设计的产品可以理解为一个面向学生的学习小程序。它至少要处理四类任务：查看课程，提交作业，了解学习进度，以及通过打卡和积分形成持续学习的反馈。
对应到页面，可以先列出课程首页、作业提交、学习进度、打卡激励和个人学习空间等页面。页面清单只是起点，还要写出关键路径。例如，用户从课程首页进入某门课程，提交作业后能看到提交状态；在学习进度页查看已学课程和总体进度；打卡后获得积分，并能看到连续打卡天数和可兑换奖励。
给墨刀AI的指令可以这样写：

用墨刀AI生成一个教育类小程序的移动端HTML交互原型，面向需要完成课程学习和作业提交的学生。包含课程首页、作业提交、学习进度、打卡激励和个人学习空间五个页面。课程首页展示搜索、课程分类和课程卡片；作业提交页包含标题、截止时间、附件或文本提交状态；学习进度页展示已学课程和总体进度；打卡激励页展示连续打卡天数、打卡日历、积分和奖励。底部导航可以在主要页面之间切换，课程卡片、提交按钮和打卡按钮需要有可点击反馈。生成375×900移动端可预览原型。

这个提示词里有几个关键点：

• 第一，说明了使用人群和产品任务；
• 第二，把页面及页面内容写了出来；
• 第三，明确哪些位置需要交互，而不是只要求页面“看起来完整”。

如果产品还有确定的颜色、字体或品牌组件，也可以补充；尚未确定的规则则应标记为待确认，不要让AI自行决定。

三、生成小程序原型后怎么检查

WorkBuddy调用墨刀AI后，生成了五个移动端原型页面，并在右侧面板上预览。课程首页包含搜索框、课程分类和课程卡片；作业提交页围绕标题、截止时间和提交内容展开；学习进度页展示课程完成情况；打卡激励页展示连续打卡天数、打卡日历、积分和可兑换奖励。
先看页面之间能不能走通，比如课程卡片是否可以进入学习内容？提交按钮点击后有没有成功状态？打卡日期是否能区分已完成、今天和未完成？底部Tab切换后，页面是否保持当前任务的上下文？这些问题比先调整渐变色或卡片圆角更重要。

再看状态有没有遗漏，作业提交至少要考虑未填写、提交成功和超过截止时间；学习进度要能区分没有开始、进行中和已完成；打卡激励要考虑当天已打卡、连续中断和积分不足。AI可以先把页面骨架和部分状态生成出来，但状态是否符合业务规则，仍要由产品经理和设计师确认。
案例中还展示了打卡激励页的具体内容：连续打卡天数、累计打卡次数、今日学习时长、打卡日历、积分余额和可兑换课程券。这些信息放在同一页时，层级要清楚。用户首先要看到今天是否完成打卡，其次才是长期累计数据和奖励信息。

四、生成后怎么继续修改和交付

第一版原型不需要一次解决所有细节，发现课程卡片缺少学习状态，可以在同一任务中提出：“保留现有五个页面，在课程卡片上增加未开始、学习中和已完成三种状态，点击课程后进入对应详情。”如果打卡页需要补充中断提示，也可以只说明新增状态和触发条件，不必重新描述整个产品。
墨刀AI连接器能生成HTML原型，就很适合在WorkBuddy右侧快速预览和演示。需要进入设计工作台继续调整时，可以使用返回的墨刀文件或进一步要求导入为可编辑原型。但原型可以继续编辑，不是说就已经完全满足要求，还是需要后续调整把控。

如果团队还没有明确的需求文档，可以先让墨刀AI生成PRD，整理目标用户、功能范围、页面清单、业务规则和待确认问题；如果要验证前端实现，再明确要求生成React或Vue应用，并说明使用本地模拟数据还是接入已有接口。PRD、HTML原型和前端应用分别对应需求讨论、交互验证和实现验证，最好按阶段使用。

五、把AI原型放回真实的评审流程

教育小程序的原型完成后，还要和老师、学生、教务或运营人员一起看。学生关心课程和作业是否容易找到，老师关心提交内容和截止时间是否清楚，运营人员可能更关注打卡、积分和奖励规则能否维护。不同角色提出的意见，应该回到具体页面和状态，而不是只记录一句“再优化一下”。
WorkBuddy连接墨刀AI后，能把一段产品想法推进到可预览、可评审、可继续修改的阶段。可以先用对话整理需求，再生成一版可点击原型；发现路径或状态问题，继续在原任务中修改；确认页面结构后，再进入墨刀工作台细化组件和视觉。这样，AI参与的是起稿和迭代，产品判断、设计取舍和研发验证仍然由团队完成。

注：文中部分配图由AI生成。