一条指令生成专业UI！看大模型如何1分钟做好遥感数据集平台精美原型

本篇带你使用大模型 ——Claude 3.7 来完成产品UI的构思设计，只要简单的指令，分分钟就能生成一个产品的全套UI设计

作为产品经理的我，经常要构思产品功能，最后落在系统原型设计上，过程中也要参考友商的产品，实际上比较费时费力的。

这两天网络上很多开发者使用Claude最新发布的3.7模型，快速构建出APP的UI设计，非常惊艳。

我也尝试了一番，效果及其amazing！分享给大家。

📌设计一个SAR影像数据管理平台

最近在做有关开源数据归集的工作，所以刚好把需求提给AI。

先来看看惊艳的效果。

首先是【平台首页】

数据管理平台首页

然后是【数据标注页面】，除了SAR影像是我手动替换的，其他都是AI自行引入，样式很科技风，同时功能也非常丰富，不输于一个商用产品~~ 是不是看起来像模像样的。

数据标注页面

再来一个【数据集分布管理大屏】，地球是自动生成的！背后直接带了mapbox代码。

数据集分布可视化大屏

🛠什么提示词

Claude 3.7的能力非常强，可以说在UI设计方面横扫其他模型。

我上面的应用，提示词是这样的：

我要构建一个sar数据集管理平台，主要服务于模型训练的数据集管理。请模拟用户来提出需求，请自己构思好功能需求和界面，然后设计 UI/UX，请给出所有页面的html代码，需要高保真效果。

可以转换成一个提示词模板，你直接复制使用。

我要构建一个**** ，主要功能是****。请模拟用户来提出需求，请自己构思好功能需求和界面，然后设计 UI/UX，请给出所有页面的html代码，需要高保真效果。

推荐拟使用Cursor来完成，10美元可以用很多次了。而使用原生的Claude还是挺贵的，我实测下来，生成两三个页面基本要花费1$左右的费用。

🚀Cursor中使用

在Cursor中，直接使用Ask模式,老版本是Chat模式。

✅模型选择 claude-3.7-sonnet-thinking，或者claude-3.7-sonnet，都可以。

直接输入提示词，AI就能自动分析需求，并完成相关代码。

🎨进阶操作

通过prompt的细化，比如引入tailwindcss，还可以对效果进行提升。

这里引用网络一位开发者老哥的案例。

网友开发者做出的效果

具体的Prompt如下：

你是一位资深全栈工程师，参考 ui_ux_design 设计一个【产品需求】，模拟产品经理提出需求和信息架构，请自己构思好功能需求和界面，然后设计 UI/UX。 仅支持暗色模式，要高级有质感（运用玻璃拟态等视觉效果），遵守设计规范，注重UI细节。 请引入 tailwindcss CDN 来完成，而不是编写 style 样式，图片使用 unslash，界面中不要有滚动条出现。 然后像上面那样给我所有页面的 html，写入到一个 sj.html 中（为每个页面创建简单的mockup边框预览，横向排列）。 由于页面较多，你每完成一部分就让我来确认，一直持续到结束。

你可以复制研究下这个prompt，效果也很棒。

老哥案例的引用地址，更详细内容可以看他的文档

https://ew6rccvpnmz.feishu.cn/wiki/ILO2waqXLi1EvqkuKHvcceMOnVd

✅需要说明的是，这次AI生成的只是UI成果，并非是一个完整的应用。当然这个成果稍微修改确认，就可以用来做设计稿、甚至真实开发。可以说节省了很多精力、时间。推荐大家都在工作中来试用。

如何学习大模型 AI ？

由于新岗位的生产效率，要优于被取代岗位的生产效率，所以实际上整个社会的生产效率是提升的。

但是具体到个人，只能说是：

“最先掌握AI的人，将会比较晚掌握AI的人有竞争优势”。

这句话，放在计算机、互联网、移动互联网的开局时期，都是一样的道理。

我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在人工智能学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多互联网行业朋友无法获得正确的资料得到学习提升，故此将并将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。

第一阶段（10天）：初阶应用

该阶段让大家对大模型 AI有一个最前沿的认识，对大模型 AI 的理解超过 95% 的人，可以在相关讨论时发表高级、不跟风、又接地气的见解，别人只会和 AI 聊天，而你能调教 AI，并能用代码将大模型和业务衔接。

• 大模型 AI 能干什么？
• 大模型是怎样获得「智能」的？
• 用好 AI 的核心心法
• 大模型应用业务架构
• 大模型应用技术架构
• 代码示例：向 GPT-3.5 灌入新知识
• 提示工程的意义和核心思想
• Prompt 典型构成
• 指令调优方法论
• 思维链和思维树
• Prompt 攻击和防范
• …

第二阶段（30天）：高阶应用

该阶段我们正式进入大模型 AI 进阶实战学习，学会构造私有知识库，扩展 AI 的能力。快速开发一个完整的基于 agent 对话机器人。掌握功能最强的大模型开发框架，抓住最新的技术进展，适合 Python 和 JavaScript 程序员。

• 为什么要做 RAG
• 搭建一个简单的 ChatPDF
• 检索的基础概念
• 什么是向量表示（Embeddings）
• 向量数据库与向量检索
• 基于向量检索的 RAG
• 搭建 RAG 系统的扩展知识
• 混合检索与 RAG-Fusion 简介
• 向量模型本地部署
• …

第三阶段（30天）：模型训练

恭喜你，如果学到这里，你基本可以找到一份大模型 AI相关的工作，自己也能训练 GPT 了！通过微调，训练自己的垂直大模型，能独立训练开源多模态大模型，掌握更多技术方案。

到此为止，大概2个月的时间。你已经成为了一名“AI小子”。那么你还想往下探索吗？

• 为什么要做 RAG
• 什么是模型
• 什么是模型训练
• 求解器 & 损失函数简介
• 小实验2：手写一个简单的神经网络并训练它
• 什么是训练/预训练/微调/轻量化微调
• Transformer结构简介
• 轻量化微调
• 实验数据集的构建
• …

第四阶段（20天）：商业闭环

对全球大模型从性能、吞吐量、成本等方面有一定的认知，可以在云端和本地等多种环境下部署大模型，找到适合自己的项目/创业方向，做一名被 AI 武装的产品经理。

• 硬件选型
• 带你了解全球大模型
• 使用国产大模型服务
• 搭建 OpenAI 代理
• 热身：基于阿里云 PAI 部署 Stable Diffusion
• 在本地计算机运行大模型
• 大模型的私有化部署
• 基于 vLLM 部署大模型
• 案例：如何优雅地在阿里云私有部署开源大模型
• 部署一套开源 LLM 项目
• 内容安全
• 互联网信息服务算法备案
• …

学习是一个过程，只要学习就会有挑战。天道酬勤，你越努力，就会成为越优秀的自己。

如果你能在15天内完成所有的任务，那你堪称天才。然而，如果你能完成 60-70% 的内容，你就已经开始具备成为一名大模型 AI 的正确特征了。

这份完整版的大模型 AI 学习资料已经上传CSDN，朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】