AI生成UI界面的提示词（1）

最新推荐文章于 2025-06-03 21:31:47 发布

Steins_Gate_0

最新推荐文章于 2025-06-03 21:31:47 发布

阅读量327

点赞数

分类专栏： AI提示词文章标签：人工智能 ui

原文链接：https://www.sunzhongwei.com/claude-37-generates-prompt-words-appwebsite-ui-design-drafts

版权

AI提示词专栏收录该内容

1 篇文章

订阅专栏

Claude 3.7 生成 APP/网站 UI 设计稿的提示词 - 提示词 - 大象笔记

首页关于我哼哼读书笔记搜索

Claude 3.7 生成 APP/网站 UI 设计稿的提示词

更新日期: 2025-03-14 阅读次数: 629 字数: 677 分类: 提示词

搜索

在浏览小红书时（@大象卷大葱），发现了一个不错的 AI 提示词模板，用于生成 APP/网站 UI 设计稿。非常实用，可以直接在 VSCode Github Copilot 插件的 Edits 中一键生成设计稿的 HTML 网页代码。

例如，我想开发一个颜色搭配的 App。

生成的设计稿效果

先看效果，就是网页啦：

提示词

我想开发一个颜色搭配的 App，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发： 1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。 2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。主界面的颜色搭配方案要控制在一个屏幕内，方便截图分享到社交网络。 3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。 4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。拆分代码文件，保持结构清晰： 5、每个界面应作为独立的 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 代码，并确保其可用于实际开发。

报错问题

在生成的过程中，不但需要耐心等待两分钟，而且还会经常遇到报错，例如：

“❎ Sorry, the response hit the length limit. Please rephrase your prompt.”

这个感觉是，即便你是 github copilot pro 账号，也是有一定频率或者 token 限制的。遇到这个错误，不要慌。

先点击 keep ，并保持已有的生成的设计稿代码。然后继续把前面的提示，继续黏贴一遍，提交。

github copilot 会非常智能的延续之前没有完成的页面开始继续生成，不会重复生成。

Based on the existing files, I'll create the remaining interfaces for your color harmony app: saved.html, profile.html, and details.html to complete the high-fidelity prototype

是不是 github copilot pro 该升级成 business 了？

再就是，遇到第二多的错误是：

Sorry, your request failed. Please try again. Request id: xxx Reason: Please check your firewall rules and network connection then try again. Error Code: net::ERR_HTTP2_PROTOCOL_ERROR.

这个也只能重试。总之，需要的是耐心，设计稿效果还是非常惊艳的。

微信关注我哦 👍

大象工具微信公众号

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，查看更多联系方式

相关文章 🔍

所有分类

生活	跑步清单足球鲁班探索孤独的美食家驾驶电视剧收纳奶爸健康 game 电影周末 joke
Geek	健身 Laravel Git Vim MySQL Linux UI Windows SVN 纪录片管理 Shell 游记工具手机 BackboneJS 自建博客 Mac DNS Tornado CDN Django Python AngularJS 理财前端 Nginx 爬虫 Redis Javascript Browser 浏览器推广 OAuth CSS PHP Social Networks 安全运维创业杂记 VueJS Android Image IDE Java ReactJS 数据分析 SQLite RESTful 读书笔记家电 ecshop Vagrant wordpress docker SEO GTD magento mongodb nodejs weex 冷知识 ruby iOS 微信小程序 AI CMS 快应用 backpack 广告联盟 OA 短信 UWP Win CSharp Tampermonkey graphviz 钉钉 WPS 数据字典微信公众号 Fuchsia Adobe XD SQL Server thinkphp 代码规范商业模式 Flutter 头痛的问题 serverless 视频制作国际化 golang 服务器 Kotlin 网站建设 5G 笔记本图片 spark spring 物联网 InfluxDB 图像识别 postgre rust 提示词
成长的烦恼	闲言碎语待产不睡觉写作程序员孙心然语录原则大鸿语录
地球	植物时间中文赚钱国家地理烟台一生伏首拜阳明 emoji 弟子规英文国际贸易