我用Cursor开发小程序，从0到1的真实记录

用户8070

2025年3月26日修改

一、引言

•
72小时用Cursor打磨出我的首款小程序-健康习惯养成器​

•
为什么要做这个小程序？—— 刚开始没什么想法，然后和deepseek对话之后，让他给出一些建议，才开发了这款小程序​

•
为什么选择Cursor工具？—— 工欲善其事必先利其器（前后用过trae和deepseek, 使用过之后都放弃了....）​

common.docs_name - LarkCCM_Docs_Menu_Image

36%

37%

27%

二、开发前准备

1.
原型设计：简单的界面设计思路​

(ps: 以下相关提示词来源：参考自AI破局星球 + 自整理)

🥇

我想开发一个健康习惯养成器，现在需要输出高保真的原型图，​

请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：​

1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。​

2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。​

3、高保真 UI设计:作为 UI设计师，设计贴近真实 i0S/Android 设计规范的界面，使用现代化的 UI 元​

素，使其具有良好的视觉体验。

4、HTML 原型实现:要高级有质感(比如玻璃拟态、渐变等视觉特效)，使用 HTML + Tailwind CSS(或 Bootstrap)生成所有原型界面，并使用 FontAwesome(或其他开源 UI组件)让界面更加精美、接近真实的 App 设计。​

5、请引入 tailwindcss CDN 来完成，而不是编写 style 样式，图片使用 unslash，界面中不要有滚动条出现​

拆分代码文件，保持结构清晰:

6、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。- index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。​

•
真实感增强： ​

•
界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。 ​

•
使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。 ​

•
添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。​

请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。​

我用Cursor开发小程序，从0到1的真实记录​

我用Cursor开发小程序，从0到1的真实记录