起因

之前写了在coze平台中发布塔罗牌应用的完整经历，随后发布到coze 和 公众号后，感觉有两个限制点：

• 用户输入的要求其实很规范化（生日 出生城市 性别 疑问），但是因为没有web 界面引导用户，结果用了大模型通过对话的形式开始的。这一步，就要和用户聊好几轮。

  

• workflow输出的内容其实很简单：先是3张卡牌，然后是markdown格式的解析说明。

  但是这个效果在小程序上很不好（显示不出图片，文字也是markdown格式的），想要完整体验的话又必须在coze 的应用市场中使用。

  

结合这两个不满意的地方，希望跳出 coze 应用市场 在手机上或电脑上就可以完成塔罗牌的占卜和解析。

还有其他两个动机：

• 我有一个朋友，想了解 cursor 如何在程序开发中提升效率，以及哪些工作是必要且需要注意的。
• 希望在 塔罗牌解读功能之上，再追加一个 用户注册 登入 登出的功能，不使用数据库而是利用飞书多维表格 记录用户用户基本信息。——俗称 上点难度。

效果预览

为了白瞟 vercel的 服务，我把代码更新到了github上（项目代码），并且让vercel 自动同步github 项目的最新版本。

所以理论上，如果你也按照我之前的文章 在coze上做了塔罗牌的工作流， 完全可以复用这套代码 。

登录后页面长这样—— 网页

归根结底，这篇文章是coze 工作流的引申篇——使用AI编程工具，快速对接coze工作流并完成前端展示的任务。

以这个项目为例，捎带记录了各项任务花费的时间，总共三个半天——

几个关键步骤

没有办法把每个过程都展示一遍，这里放几个典型场景说明。可以感受下 cursor 等AI 编程工具的强大之处和能力边界。

阶段1: 需求分析&沟通

我们一上来并不是 发送一句“我要一个塔罗牌web 界面” 给cursor，因为这里的上下文不清晰。此时让cursor 干活，肯定是不符合项目具体要求的 垃圾代码。

所以，这个阶段的正确做法是：沟通需求，生成项目README.md 文档。

得益于coze 平台对于 API 的文档支持到位（https://www.coze.cn/open/playground/workflow_stream_run）。直接使用curl 的命令，将整个工作流（流式响应）交互的过程展示出来——

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 触发coze 指定工作流
curl -X POST 'https://api.coze.cn/v1/workflow/stream_run' -H "Authorization: Bearer pat_YOUR-TOKEN" -H "Content-T
ype: application/json" -d '{
    "workflow_id": "7536640635056619572",
    "parameters": {
        "birthday": "1983-07-21 13:00",
        "gender": "男",
        "city": "上海市",
        "question": "明年结婚 顺利么"
    }
}'

# coze API 网关返回结果（注意：这里是分两批返回数据的：第一批为卡牌信息； 第二批为具体解读信息）
id: 0
event: Message
data: {"content":"卡片信息：\n[{\"name_cn\":\"宝剑骑士\",\"name_en\":\"Knight of Swords\",\"position\":1,\"type\":\"逆位\",\"url\":\"https://t.8s8s.com/photo/tarotphoto/72/knight-swords.jpg\"},{\"name_cn\":\"权杖三\",\"name_en\":\"Three of Wands\",\"position\":2,\"type\":\"正位\",\"url\":\"https://t.8s8s.com/photo/tarotphoto/72/three-wands.jpg\"},{\"name_cn\":\"魔术师\",\"name_en\":\"The Magician\",\"position\":3,\"type\":\"逆位\",\"url\":\"https://t.8s8s.com/photo/tarotphoto/72/magician.jpg\"}]","content_type":"text","node_execute_uuid":"2a52fd2d-4899-411e-828a-9cf965c73921","node_id":"1558566","node_is_finish":true,"node_seq_id":"0","node_title":"塔罗卡片展示","node_type":"Message"}

id: 1
event: Message
data: {"content":"{\"output\":\"### 婚姻前景的塔罗解读之旅\\n\\n亲爱的朋友，感谢你分享你的星盘信息和塔罗牌抽取结果。让我们一起来探索明年结婚的顺利程度，并为你提供一些指引。\\n\\n### 🔮 塔罗牌解读\\n\\n1. **逆位宝剑骑士**\\n   逆位的宝剑骑士通常表示冲动和缺乏耐心。在婚姻的背景下，这张牌提醒你，未来的婚姻生活中可能会有一些沟通上的挑战。你需要更加冷静和理性地处理问题，避免让情绪主导你的行为。\\n\\n2. **正位权杖三**\\n   正位的权杖三象征着展望和计划。这张牌暗示你在婚姻的准备过程中，需要更多的规划和远见。它鼓励你与伴侣共同制定未来的计划，并确保你们的目标一致。这张牌是一个积极的信号，表明你们的婚姻有坚实的基础。\\n\\n3. **逆位魔术师**\\n   逆位的魔术师可能表示缺乏自信或资源不足。在婚姻的背景下，这张牌提醒你，未来的婚姻生活中可能会遇到一些意想不到的挑战。你需要更加灵活和适应性强，找到解决问题的新方法。\\n\\n### 🌟 星盘分析\\n\\n你的星盘中有几个关键点值得注意：\\n\\n- **太阳落巨蟹座（第9宫）**\\n  太阳在巨蟹座表明你是一个情感丰富且重视家庭的人。第9宫与远见和哲学有关，说明你在婚姻中会寻求深层次的意义和成长。\\n\\n- **月亮落射手座（第2宫）**\\n  月亮在射手座表明你是一个乐观且热爱自由的人。第2宫与价值观和资源有关，说明你在婚姻中会重视物质和情感上的安全感。\\n\\n- **金星落处女座（第10宫）**\\n  金星在处女座表明你是一个注重细节和实际的人。第10宫与事业和公众形象有关，说明你在婚姻中会寻求稳定和责任感。\\n\\n### 💡 综合建议\\n\\n- **加强沟通**\\n  逆位宝剑骑士提醒你，沟通是婚姻成功的关键。你需要更加冷静和理性地处理问题，避免让情绪主导你的行为。\\n\\n- **共同规划**\\n  正位权杖三鼓励你与伴侣共同制定未来的计划，并确保你们的目标一致。这将是你们婚姻成功的重要基石。\\n\\n- **灵活应对**\\n  逆位魔术师提醒你，未来的婚姻生活中可能会遇到一些意想不到的挑战。你需要更加灵活和适应性强，找到解决问题的新方法。\\n\\n### 🚀 最终指引\\n\\n塔罗牌和星盘都显示，你们的婚姻有成功的潜力，但需要时间和努力。正位权杖三的“展望和计划”意味很强，说明你们需要共同制定未来的计划。关键在于你是否愿意以更成熟的态度去面对婚姻中的挑战。\\n\\n如果你能加强沟通（逆位宝剑骑士），共同规划（正位权杖三），并灵活应对（逆位魔术师），你们的婚姻很可能会在未来取得成功。\\n\\n需要更具体的建议吗？比如如何加强沟通，或是如何共同规划未来？我很乐意继续为你解读。\"}","content_type":"text","node_execute_uuid":"","node_id":"900001","node_is_finish":true,"node_seq_id":"0","node_title":"End","node_type":"End","usage":{"input_count":4117,"output_count":612,"token_count":4729}}

id: 2
event: Done

直接把以上内容粘贴复制给cursor “ASK” 对话框内，告诉它：

1
2

我有一个coze 的workflow ，输入用户的"birthday"，"gender"，"city"和 "question"信息后，会返回塔罗牌url和相关解释文字（markdown格式），我需要一个webui 界面，完成用户信息输入、请求和展示功能。并部署在vercel 平台上。
请评估下具体的任务和开发步骤。

同时引用“.cursorrules”，告诉它我们使用的开发工具和偏好（“可以选择html/css/js就做到的，就不使用react或next.js的方式”）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# Role
你是个具有优秀编程习惯的AI，但你也知道自己作为AI的所有缺陷，所以你总是遵守以下规则：

## 架构选择
1. 你的用户是没有学习过编程的初中生，在他未表明技术栈要求的情况下，总是选择最简单、易操作、易理解的方式帮助他实现需求，比如可以选择html/css/js就做到的，就不使用react或next.js的方式；
2. 总是遵守最新的最佳实践，比如撰写Next.js 项目时，你将总是遵守Next.js 14版本的规范（比如使用app router而不是pages router），而不是老的逻辑；
3. 你善于为用户着想，总是期望帮他完成最省力操作，尽量让他不需要安装新的环境或组件。

# 本规则由 AI进化论-花生 创建，版权所有，引用请注明出处

## 开发习惯
1. 开始一个项目前先读取根目录下的readme文档，理解项目的进展和目标，如果没有，则自己创建一个；
2. 在写代码时总是有良好的注释习惯，写清楚每个代码块的规则；
3. 你倾向于保持代码文件清晰的结构和简洁的文件，尽量每个功能，每个代码组都独立用不同的文件呈现；
4. 当遇到一个bug经过两次调整仍未解决时，你将启动系统二思考模式：
   - 首先系统性分析导致bug的可能原因
   - 提出具体的假设和验证思路
   - 提供三种不同的解决方案，并详细说明每种方案的优缺点
   - 让用户根据实际情况选择最适合的方案

## 设计要求
1. 你具有出色的审美，是apple inc. 工作20年的设计师，具有出色的设计审美，会为用户做出符合苹果审美的视觉设计；
2. 你是出色的svg设计师，当设计的网站工具需要图像、icon时，你可以自己用svg设计一个。

## 对话风格
1. 总是为用户想得更多，你可以理解他的命令并询问他想要实现的效果；
2. 当用户的需求未表达明确，容易造成误解时，你将作为资深产品经理的角色一步步询问以了解需求；
3. 在完成用户要求的前提下，总是在后面提出你的进一步优化与迭代方向建议。

这样通过几轮对话后，就可以告诉cursor 让它产出一个比较良好的项目说明文档——README.md。

注意：具体细节在项目推进中，可以逐步细化和完善。这里有个初步的框架和清晰的目标就可以。

报错时，如何找到问题原因，并进行修复

即便已经告诉 cursor：根据coze workflow 返回的数据显示塔罗牌卡片信息和解读信息，但是在初期执行时因为任务和代码数量比较多，cursor 可能还是会“失焦”——丢失任务细节。

对应的解决办法有两个：

• 通过浏览器的 “开发者模式” 查看服务端或浏览器显示的数据，将相关报错作为补充信息告诉cursor。

  cursor 会根据具体的报错信息和项目结构，分析相关代码，特别是逻辑关系调用 AI 工具在这方面效率很高。

  

  当然这种方式（小段报错直接发给AI 编程工具）适用于小问题的修修补补，大问题反而不建议直接修改，原因后面也会提到。

• 重要的功能节点，一定安排相关的测试项目。

  如上面代码的修复成功后，cursor 生成了测试页面：

  

  通过模块化的测试页面，一方面可以帮助验证功能和代码的有效；另一方面也可以提高后续代码调整后反复验证的效率。

  所以，重要的功能测试都有相关的测试页面—— 例如：卡牌图片效果测试

  

阶段2: 讨论script.js 代码拆分（重构）方案

关键代码重构一定要慎重：先讨论清楚，再进行，这一步很可能因为设计不清楚或者需求太复杂，导致回滚。

• 重构的必要性讨论：

  肯定是 利 > 弊才会考虑 进行代码重构。

  例如，本项目中 script.js 不断添加新功能，导致代码一度达到1300多行 原有 script.js 代码放这里。

  这个长度 超出了AI编程工具一次代码修改量的最佳长度（还是那个问题，代码过长可能会导致编程模型注意力分散，写出一些无用代码的可能性变高）。

  同时在这个文件中，还融合了城市数据、应用入口、markdown格式渲染等好几个功能。

  所以这个1300多行的代码拆分后，是有利于，后续功能实现和迭代的。

  

• 重构的方案讨论：

  AI 编程工具在讨论这个过程中，有时会给你提一个过于激进的方案。

  这个过程中，人在其中的判断很重要，可能要讨论好几次——

  

• 评估重构对现有项目的影响

  如果项目结构和模块清晰，这里的影响范围一般会比较可控。

  但如果是已经上线的代码，有着诸多“历史原因”，这里的影响评估就要非常小心了，指不定哪里有个“牵一发而动全身”的遗留代码。

• 操作过程中尽量按照 “子任务执行” –> “测试” 的步骤循环进行。并且尽量 一次就解决一个问题。

  前面提到的重要功能的测试模块，此时就能帮助我们快速完成原有基础功能是否正常的判断，同时还有利于定位问题原因。

  

拆分后效果——

阶段3: 逐步推进认证系统任务

• 该阶段属于项目新增重大功能。

  同样的，不能一开始就 让AI 工具直接动手改，否则也是改出一堆问题代码，到头来给自己徒增一堆烦恼。

  最佳实践，也简单：把之前的 “需求讨论分析 –> 任务计划产生 –> todolist ” 再走一遍。甚至让cursor 先生成相关功能的伪代码，突出相关函数功能和逻辑。

  

  最后再安排cursor 按照约定的步骤&计划执行，就会非常省心：

  因为这样做之后，既可以保证AI编程工具知道自己当前具体的任务（一次聚焦一个子任务），也知道上下文（上一步完成了什么，这一步完成后如何测试等等）。

  在这种框架下推进，即使遇到问题，也是局部优化调整的事情。不会耽误太多时间。

• 简单数据的增删改查，完全可以考虑飞书多维表格的API 接口实现。

  例如，这里用户信息查询的接口 ——

  

  而且表格形式的数据更方便展示，例如这里记录的用户登录信息——

  

• 如果遇到技术架构&方案等高阶问题，记得让AI 编程工具提供三个不同的解决方案。

  然后，由开发者 分析哪个方案在当前项目更合适。当然 AI 编程工具在信息对比和汇总方便很厉害。

  例如，这里关于用户登录后，页面的显示效果就有两套不同的方案，方案差异和优缺点一目了然——

  

PS：

使用飞书多维表格，有两个前置准备工作：

1. 需要创建“企业自建应用”，应用中的 “APP ID” 和 “APP Secret” 分别对应 vercel 中的环境变量“FEISHU_APP_ID”和“FEISHU_APP_SECRET”。

   

2. 用到的多维表格，需要在“文档应用”中添加“企业自建应用”的“可编辑”权限。

   

当前阶段AI 编程工具的现状（能力边界）

• 任务描述不清时，让工具直接改动反而会导致更多的问题。

  解法： 先别着急直接生成代码，而是使用“chat” 模式。多聊几轮，聊得越具体，产生的文档 （任务文档、项目文档）越清晰，越有利于后续开发中聚焦。

• AI 编程工具 习惯性的添加代码 ，当代码长到一定程度，它会“忘记”代码的细节。

  解法： 尝试保持代码模块化和结构，如果个别代码太长，该拆分就拆分。

• 如果功能比较多，在设计时 最好考虑代码模块化。

  一来是保持项目结构清晰，二来 减少重复代码和过长代码， 三来 结构化的代码无论是人类还是AI 都是更容易理解和阅读的。

• 调用外部模块的时候，可能遇到 AI 编程工具自己都弄不清楚的情况，它也会尝试联网搜索。

  解法： 对于外部的模块，很可能升级个版本 接口格式就变了，所以最佳的实践还是前面提到的 做好测试工程。

• 复杂问题的解决方法可能有多个，不要让AI 自动解决。

  解法： 此时开发者最好 多问一句“你给我提供 三个不同的方案，并详细对比它们间的差异”。往往，它可以帮助我们判断哪个方案更合适当前的项目。

• 当前 AI 编程工具提高的是实施效率，但关键节点的判断决定它还做不了。

  这也就意味着，在这种模式下如果人判断错了，后续失败或返工的结果也是开发者自己承担。不能过度依赖 这套工具。

未来畅想（胡言论语）

我相信未来随着AI 编程工具越来越智能，开发过程中的 反馈和自我修复能力应该会大大进化：

• 尤其是涉及UI 的部分，AI 工具可直接得到最终页面效果图，然后以图识别出页面效果和问题。然后，询问用户是否让它自动完成“修改” –> “测试” –> “反馈” 这一套流程。

• 当出现 报错时，AI 工具可以从多个维度 搜集问题信息，进而归类整理出问题根本原因，然后提交、对比三个解决方案。

• 另外，大家有没有想过 为啥AI 编程工具先火了，并且反响还不错。

  但是，其他高科技行业 如造车、芯片制造哪怕是视频生成 都没有这么高效&可行。。。这背后也有 代码本身就是优秀的结构化数据的原因。