从一句想法到可运行的作品。这里记录用 AI 协作写代码时，值得留下的做法、问题和思考。
这是 Afei 的个人作品集，也是一份 Vibe Coding 笔记。这里记录实际工作中的系统协作，也关注如何把模糊的念头说清楚、做出来、亲手验证。
围绕 C4C、Commerce 与 Agent，持续梳理业务流程、系统数据和 AI 协作之间的连接。
关注售后工单的状态流转、字段映射、工时与明细数据，以及附件处理。把业务问题转成可核对的接口数据和验证步骤。
接触 SAP Commerce 定制场景，关注报价、订单和客户数据与 C4C 之间的同步，让系统交互服务于完整的业务流程。
探索把知识检索与实时业务查询结合的方式：区分文档经验和系统事实，并关注来源引用、权限边界与结果验证。
关于想法、提示词与验证。每篇都可以直接往下读。
Vibe Coding 可以让原型来得很快。每轮只推进一个能看见、能检查的小目标，想法就不会淹没在代码里。
描述谁要做什么，以及成功时会看见什么。
先完成一条从输入到结果的路径。
让 AI 实现，自己打开页面、操作和反馈。
检查改动、错误和边界，再决定下一步。
“做一个记录灵感的网站”听起来是个目标，实际还差一步：访客要做什么？内容写在哪里？关闭页面后会不会丢？先回答这些问题，AI 才有机会交出能检查的结果。
第一版可以只要求：输入一条灵感，点击保存，刷新页面后还能看见它。这个描述有输入、有动作、有结果，也有一条明确的验证方法。分类、搜索和账号都可以等第一条路径跑通后再决定。
把任务交给 AI 时，先说明现有代码在哪里、哪些文件可以改、哪些功能暂时不需要。要求它先读项目，再实现最小的一版。范围越清楚，越容易发现它是否理解错了问题。
第一版的任务，是证明这个想法可以被使用。
完成后亲自走一遍：输入空内容会怎样，保存后刷新会怎样，手机上能否顺利操作。每发现一个问题，就把它变成下一轮更具体的任务。
返回文章目录 ↑长提示词不一定更有效。真正重要的是让协作者知道目标、现状、边界和验收方式。少了这些信息，生成的代码也许很漂亮，却未必解决眼前的问题。
目标：让访客保存一条灵感，刷新后仍能看见。 现状：先阅读当前页面和已有代码。 边界：不引入新框架，不添加登录功能。 验收：说明改了什么，并实际检查保存与刷新。
这样的提示允许 AI 自己选择实现细节，同时把结果锁定在可验证的行为上。如果已有设计、报错或限制，也直接放进上下文，别让它靠猜。
反馈最好描述观察到的事实：“点保存后列表没更新，刷新后才出现”，比“感觉不对”更容易定位。要求先找原因，再改共享路径；改完重复刚才失败的操作。
返回文章目录 ↑这个网站本身就是一件小作品。需求很简单：有个人作品集的身份，也有写 Vibe Coding 笔记的空间。第一版选择静态 HTML 和 CSS，文章直接写在页面里，不需要数据库、登录或构建步骤。
首页保留了作品集名称，用文章目录连接每篇完整内容。读者可以从标题进入，也可以顺着页面一直往下读。备案编号放在首页底部，直接链接到备案查询系统。
服务器用 Caddy 提供静态文件和 HTTPS。发布时检查域名是否指向服务器、网页是否返回成功、HTTP 是否跳转到 HTTPS，再在桌面和手机宽度下检查布局与导航。页面能打开只是开始，链接、文字和阅读体验都要亲自看一遍。
能跑是开始，验证才算完成。
之后新增文章，只要继续编辑页面并发布即可。等内容真的多到难以管理，再考虑引入静态站点生成工具；现在，保持简单更方便持续写下去。
返回文章目录 ↑