用AI做原型页面设计（Trae+Claude-3.7）_trae国际版

1.下载trae

Trae 是一个 AI IDE，深度理解中文开发场景。AI 高度集成于 IDE 环境之中，为你带来比 AI 插件更加流畅、准确、优质的开发体验。
国内版下载地址：https://www.trae.com.cn
国际版下载地址：https://www.trae.ai
本次我们要测试claude所以说！要用国际版！

2.安装trae

安装完成运行

因为需要使用AI功能所以需要登录

IDE功能页面如下

3.使用trae(Claude-3.7模型)

选择builder模式，选择Claude-3.7模型。如果是国内版式没有这个模型的，如果你的IP在国内，你也登录不上去。

提示词如下：

#角色你是一位资深前端开发工程师#设计风格优雅的极简主义美学与功能的完美平衡;清新柔和的渐变配色与品牌色系浑然一体;恰到好处的留白设计;轻盈通透的沉浸式体验;信息层级通过微妙的阴影过渡与模块化卡片布局清晰呈现;用户视线能自然聚焦核心功能;精心打磨的圆角;细腻的微交互;舒适的视觉比例;#技术规格1、单个页面尺寸为web自适应，使用html实现2、图标:引用在线矢量图标库内的图标(任何图标都不要带有背景色块、底板、外框）3、图片: 使用开源图片网站链接的形式引入4、样式必须引入 tailwindcss CDN来完成5、不要显示状态栏以及时间、信号等信息6、不要显示非移动端元素，如滚动条7、所有文字只可以使用黑色或白色#任务:设计一套CRM系统原型一、客户管理1，客户信息管理：存储客户基础信息（名称、行业、规模、联系方式等），支持自定义字段扩展（如客户等级、标签分类）。2，联系人管理：记录客户关联联系人的职位、角色、沟通记录等。3，客户跟进记录：记录销售或客服的沟通历史（电话、邮件、面谈等）。4，客户分类与分组：按行业、地区、价值等级等维度分类客户。5，客户生命周期管理： 跟踪客户从潜在客户到成交客户的完整流程。二、销售管理1，销售漏斗：可视化展示销售阶段（如线索→商机→谈判→成交）。2，商机管理：管理潜在订单的详细信息（预计金额、成交概率、竞争对手分析）。3，报价与合同管理：生成报价单、电子合同，关联订单和收款记录。4，销售目标与业绩分析：设定个人/团队销售目标，统计完成率和提成计算。三、营销管理1，营销自动化：邮件群发、短信营销、社交媒体集成。2，活动管理：策划线上/线下活动，跟踪参与客户和转化效果。3，线索管理：分配和追踪市场获取的潜在客户线索。4，客户细分与画像： 基于行为、属性创建客户群体，支持精准营销。四、服务与支持1，工单系统：处理客户投诉、咨询和技术支持请求。2，知识库：存储常见问题解决方案，供客户自助查询。3，客户满意度调查：发送满意度问卷，收集反馈并生成报告。4，SLA管理：定义服务级别协议（如响应时间、解决时限）。五、数据分析与报表1，仪表盘：可视化展示关键指标（销售额、客户增长、转化率等）。2，客户分析：分析客户流失率、复购率、价值贡献（RFM模型）。3，销售预测：基于历史数据预测未来销售趋势。4，自定义报表：支持导出Excel/PDF格式的定制化数据报表。六、系统管理1，用户与权限管理：设置角色权限（如销售、客服、管理员）和数据访问范围。2，操作日志审计：记录用户操作行为，保障数据安全。3，数据备份与恢复：定期备份数据，支持灾难恢复。4，第三方集成：对接ERP、财务系统、邮箱、企业微信/钉钉等。

由于目前该模型免费，一直排队，整体耗时比较长，过程中时不时就中断进行排队，每次排队都有800多人，但是实际的模型工作时间也就几分钟，最终生成完毕后的界面。

4.生成的页面设计效果如下：

claude-3.7