【Code With SOLO】0基础靠SOLO，4小时搭建卡片笔记+看板web app作为灵感记录库

[Saicyanan]

我平常是flomo的重度使用用户、业余时间也会写写网文， 构建这个工具的初衷就是希望在卡片笔记的基础上增加看板模式方便自己的创作工作流。

关于murmurs——
很多时候我们会有一闪而过的念头、在生活中被触动的瞬间、看到不错想记录下来的句子、偶尔自己对自己的一些小碎碎念…
就像加缪说的，一切伟大的思想和行动都有一个微不足道的开始。
希望你在卡片上记录下的这些小小念头，在未来的某天可以让你创造出一个世界：）

一、界面展示

二、App原型及功能介绍

除了flash示例内容中的时间切片设定参考自最近玩的剧本杀世界观外，其余文字内容和示例部分均原创。

三、Trae coding 实践过程

原型生成关键Prompt

1
现在你需要写一个 html网页小工具：
一张便签式卡片图样上有一个多行的文本输入框，点击可翻转，正面有淡灰色文字提示可键入关键词 / 标签，反面有淡灰色文字提示可键入内容。
下面有一个创建按钮，点击创建按钮后可创建一张新卡片，可创建无限张灵感卡片，每张卡片代表一个场景/镜头/情节单元。
创建按钮下面有一个看板按钮，点击看板按钮后会展示所有创建卡片，长按任意卡片拖拽排序，形成一个可自定义的“故事板/分镜板”。

2
卡片样式优化成薄荷绿半透明质感、 整体风格现代、毛玻璃质感。具体配色风格可参考应用程序flomo

3
背景颜色色号调整为#fbc0e9
所有按钮颜色调整为#b5d4fc，且透明度为70%
看板模式参考图片样式调整、小字呈现关键词/标签

4
将“故事版分镜工具”改为“murmurs”
在右上角添加四个emoji作为按钮，分别是、、、，作为四种拥有独立看板的卡片模式类型。
点击进入新的创建卡片界面，标题改为“Scene Deck”、正面有淡灰色文字提示可键入关键词 / 场景，反面有淡灰色文字提示可键入内容。

5、
修改Script卡片中正面有淡灰色文字提示可键入发生了什么？反面有淡灰色文字提示可键入给此刻的画面定调…
Script中的看板模式参考tapnow创作过程中的工作流看板，非线性陈列展示，而是像脑图一样带着脉络铺开，随意拖移。参考图片，如果不能完成可以暂停此条指令需求操作，并告诉我你需要的材料、内容。

<>

6、
请帮我为这个 HTML 小工具添加完整的 PWA 支持，在部署后用户可以在手机浏览器里“添加到主屏幕”，获得类似原生 App 的体验。
生成一个 manifest.json，应用名称叫“murmurs”，图标先用一个通用占位符（我可以后续替换），主题色 #fbc0e9，启动模式 standalone。
生成一个最简单的 service-worker.js，实现离线缓存（缓存所有静态文件），并在 install 事件中预缓存 index.html、当前的所有 CSS 和 JS 文件。
在 index.html 里添加必要的 meta 标签和 link 引入 manifest.json，并注册 service worker。
所有文件统一放在项目根目录，代码注释清晰，方便我理解每个部分的作用。
确保 PWA 在部署后首次访问即可激活“添加到主屏幕”提示。
请直接生成或修改这些文件，保持我原有的功能不变。

7、
之前请求的封装需要的文件是否少了一个css文件，如果是的话请生成

8、
结合最新的这些产物汇总和文件路径再生成一个package.json使我可以在vercel中完成静态托管，注意Next.js 的格式要求

原型展示workflow

Trae-Github-Vercel-Web

1. Trae 生成html工具原型
2. Trae 生成、整理、汇总可以在Vercel静态托管的文件
3. 所有文件导入Github仓库
4. 再从Vercel中关联Github仓库部署
5. 生成链接前端展示

四、原型展示

链接（需要科学上网）：murmurs-lucky.vercel.app

演示视频：https://www.bilibili.com/video/BV1NDRXBhETW/?pop_share=1&spm_id_from=333.40164.0.0&vd_source=15c7e0a93ed792325c11812a9b65efdd

五、使用感想

你产生一个念头
看别人怎么写、用什么样的指令（已被验证系统的每一个具体操作）
将你的念头「通过他人经验证系统的动作/指令/步骤表达」具象化
先形成属于你这个念头的最小mvp模型/demo/原型
再继续不断优化表达动作
最终形成只属于你的系统/产品

与Trae交互后心得tips：

1、要学会清晰地表达需求，日常可以多用markdown记录、将语言中的水分挤干。
2、图像指令的产出效率远大于文字指令本身，可以生成图片或者找到可参考的图片让Trae生成，再用清晰的文字指令调整细节。

[用户18]

我还蛮喜欢，你的猛男粉配色

[Saicyanan]

谢谢谢谢！多多支持！