如何使用Cursor+Claude3.7实现高保真原型图

1.

：准备Claude3.7，可使用官网或者Cursor，使用Cursor时用Ask模式，避免Agent或Composer模式。

​2.

：打开cursor选claude-3.7-sonnet-thinking，用ask模式。提示词结构含“优秀html案例”及需求描述，加优秀案例效果更佳。生成代码长，需多次发送“继续”直至结束。

​3.

：改进提示词，可引入tailwindcss简化代码、优化样式。生成复杂UI如法律法考APP效果欠佳，需进一步引导调整。

​4.

：发现让cursor与任何设计软件无缝协作的办法，代码量更少，可在agent模式下运行。

​5.

：有人用claude3.7生成的html设计稿直接交付甲方完成软件外包单子。

本文讨论了利用Claude生成APP的UI/UX的相关内容，包括实践操作、不同模式对比、进阶操作及变现案例等。

【提示词1】：

你是一位资深全栈工程师，参考 ui_ux_design 设计一个【健康类app】，模拟产品经理提出需求和信息架构，请自己构思好功能需求和界面，然后设计 UI/UX。

要高级有质感，遵守设计规范，注重UI细节。

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

然后像上面那样给我所有页面的 html，写入到一个 sj.html 中（为每个页面创建简单的mockup边框预览，横向排列）。

由于页面较多，你每完成一部分就让我来确认，一直持续到结束。

【提示词2】：

我想开发一个使用《掌控习惯》这部书的原理帮助用户培养好习惯的小程序应用，现在需要输出原型，

请通过以下方式帮我实现原型图的设计：

1、思考用户这个小程序有哪些功能；

2、做为产品经理规划这些页面；

3、作为设计师思考这些原型界面的设计；

4、使用HTML在一个界面上生成所有原型界面，可以使用Font Awesome等开源图标库，请引入 tailwindcss CDN 来完成，而不是编写 style 样式，图片使用 unslash，界面中不要有滚动条出现。让原型更加精美接近真实；

我希望这些页面是可以直接去进行代码开发的；

下图是生成的原型