10分钟极速生成APP原型图UI稿，Winsurf结合Claude3.7实战教程-课多多

　　前段时间，一位同事找我，希望Cita能帮设计一款APP的原型图。虽然我对前端设计和原型工具几乎是”零”经验，但刚好就在前几天接触到了一些关于AI辅助原型设计的文章，特别是还支持直接导入Figma。

　　于是，我迅速翻阅了收藏夹，找到了那篇文章。然后打开了最近正在体验的AI编程神器——Winsurf。花了不到几分钟，一个不错的原型图就做好了。当我将效果图给同事看时，他惊讶地连连称赞，AI做出来的这效果简直太棒了!

　　今天，Cita就把这整个过程分享给大家!

　　AI编程工具 —— Winsurf

　　网址：https://windsurf.com/

　　打开官网，下载并安装Winsurf。

　　刚好最近Winsurf还限额免费哦，可以薅羊毛了~~

　　提示词模板

我想开发一个{XXX的App}，需要输出高保真的SVG原型图，请按照以下要求帮我完成所有界面的原型设计：
## 需求分析
1. 分析这个App的主要功能和用户需求，确定交互逻辑和关键UI界面

## 设计规范
1. 设计风格：符合iOS/Android最新设计规范，使用现代化UI元素
2. 画板尺寸：375x812像素（iPhone标准尺寸）
3. 视觉层级：遵循三级明暗层级关系，符合Figma设计规范

## SVG技术要求
1. 单文件SVG
2. 全矢量图形界面，确保高清晰度和可缩放性
3. 使用`<symbol>`标签定义可复用的矢量图标
4. 使用`<image>`标签链接Unsplash高质量图片资源

## 界面增强要求
1. 真实UI元素：使用符合平台设计规范的真实UI组件，而非简单占位符
2. 动态数据可视化：在适当位置添加数据可视化元素

## 必须包含的页面
[在此列出你需要的所有页面，例如：]
1. 启动/引导页
2. 登录/注册页
3. 主页/Dashboard
4. 个人资料页
5. 设置页
6. [其他你需要的页面...]

## 每个页面的具体内容要求
[在此详细描述每个页面应包含的具体内容和功能元素]

请按照以上要求生成完整的SVG原型图（每个界面一个SVG），确保设计精美、专业，并能直接用于开发参考。

　　生成原型图

　　打开Winsurf，选择文件夹，选择Claude3.7的模型，然后将提示词粘贴上去，把想要开发的App名字替换就可以了。

　　如果有指定要包含哪些页面和具体要求，可以在最后两项里面输入。

　　注意：文件夹尽量不要包含中文!

　　效果展示

　　如果不需要考虑支持Figma编辑，可以直接让AI生成网页，效果会更好

　　SVG在线预览网站

　　生成的SVG代码还可以粘贴到一些SVG在线预览网站上预览效果，这里就从网上随机选了一个，试了效果还可以

　　网址：https://www.svgviewer.dev/

　　Figma

　　网址：https://www.figma.com/

　　Create – Design File