城市建设网站设计最新网页游戏传奇类

城市建设网站设计,最新网页游戏传奇类,广州品牌网站设计建设,如何加强校园网站建设大家好#xff0c;我是顾北#xff01;不知道#xff0c;你以前制作一款 APP 的 UI 设计稿流程是怎么样的#xff1f;反正我以前做的时候#xff0c;找灵感、画线框图、用 Figma/Sketch 抠细节、配颜色、找素材……最后还要给开发演示。一套流程下来#xff0c;没有三五天…大家好我是顾北不知道你以前制作一款 APP 的 UI 设计稿流程是怎么样的反正我以前做的时候找灵感、画线框图、用 Figma/Sketch 抠细节、配颜色、找素材……最后还要给开发演示。一套流程下来没有三五天是搞不定的。但是今时不同往日了今天我想给你看点“魔法”。只需要 5 分钟不仅高保真 UI 图设计出来了而且连可以交互的网页 Demo 都生成了不卖关子先看成品这套极简风格的博客 APP就是我利用Nano Banana Pro配合Gemini 3快速落地的。想知道怎么做的吗全套 Prompt提示词直接公开建议收藏 步骤1定义主视觉首页万事开头难但对 AI 来说只需一段精准的描述。我想做一个 Medium 风格的博客 APP 要求iOS 17 风格、极简、4K 质感。【首页】提示词A high-fidelity 4K screenshot of an iPhone 17 Pro (1290x2796 px, 20px rounded screen corners with Dynamic Island) displaying the Home screen of a minimalist, Medium-style blog application. The overall aesthetic is clean vector UI with a light grey background (#F5F5F5), rounded corner cards, and soft, diffused shadows.Top Status Bar: Standard iOS 17 status bar elements (time, cellular signal, Wi-Fi, battery icon) integrated around the Dynamic Island.Header: Below the status bar, a rounded search bar (12px radius, light grey fill) with the placeholder text 搜索文章、作者 and a search icon. Below that, a segmented control bar featuring four rounded capsule tabs. The first tab, 关注, is active with blue text (#0A5BFF) on a white background with a soft shadow. The other tabs (推荐, 热榜, 专栏) are inactive grey text on a transparent or light grey background.Main Content: A double-column waterfall feed of content cards. Each card has rounded corners and a soft shadow. The cards feature high-quality, 16:10 aspect ratio Unsplash-style lifestyle/nature cover photos at the top. Below the photo is a 2-line truncated article title in dark text. At the bottom of the card, a small author avatar and nickname, followed by a heart icon with a like count (e.g., 1.2k), and publication time (e.g., 2小时前).Floating Button: In the bottom right corner, a large (56px diameter) circular floating action button with a smooth blue-to-white gradient fill, containing a white icon, casting a soft shadow.Bottom Tab Bar: Fixed at the bottom, a clean white tab bar with a thin top border. Three icons with labels: 首页 (Home), 发现 (Discover), 我的 (Profile). The 首页 icon and label are highlighted in the brand blue color (#0A5BFF). The other two are grey. No watermarks划重点提示词中对光影、圆角参数、布局结构的详细描述是生成高质量 UI 的关键。步骤2保持一致性发现页 个人中心很多同学用 AI 做 UI 最头疼的就是 第二张图风格变了。这里有个小技巧让 Nano Banana Pro 参考第一张图垫图/参考模式。我们将【首页】作为参考图输入以下简单的指令AI 就能秒懂你的设计语言。【发现】页提示词深度分析这张原型图参考这张原型图帮我绘制【发现】页面保持图片主体和原图风格一致【我的】页提示词深度分析这张原型图参考这张原型图帮我绘制【我的】页面保持图片主体和原图风格一致看配色、圆角、图标风格完美统一这就是 AI 的理解力。最终效果图如下图所示。可以看到现在AI的理解力已经达到深不可测的能力了。步骤3见证奇迹静态变动态只有图片怎么够我们要的是能给客户、给老板演示的产品这时候轮到Gemini 3上场了。把刚才生成的 UI 图扔给它说出你的愿望先看效果提示词参考我的UI原型图帮我生成一个可以交互方便产品演示的网站稍等片刻Gemini 3 就会直接吐出 HTML/CSS/JS 代码。更多场景实战不只是“画图”看到这里你可能以为这只适合做“漂亮图片”。那你可就大错特错了无论是B端后台 、 低保真线框图还是特定风格 App它都能通吃。只有你想不到的没有它做不到的。场景一产品经理最爱的“低保真线框图”以前用 Axure 画线框图五个页面至少一下午。现在不出五分钟就结束战斗了提示词输出一套微信小程序「校园二手市场」的黑白线框图共 5 张连贯流程①首页商品瀑布流 ②商品详情 ③发布页 ④个人中心 ⑤订单列表使用中文标注保持元素对齐与间距一致整体为低保真风格场景二抖音风格沉浸式 UI客户想要“短视频风格”安排。提示词生成一张 iPhone 15 竖屏高保真原型图展示「抖音」风格短视频 App 的「发现」页顶部搜索栏 分段标签热门附近关注下方双列卡片流每张卡片含封面图、标题、点赞数、时长标签整体采用浅灰背景 圆角卡片 柔和阴影输出 4K 矢量质感场景三B 端图书管理系统哪怕是复杂的后台数据看板也能轻松拿捏。最后看着这些图我不禁想起以前趴在电脑前用 Axure 没日没夜连线的日子。那时设计一套完整的流程图需要好几个小时而现在Prompt 构思 (1分钟) AI 生成 (3分钟) 代码转换 (1分钟) 5分钟完工。工具的进化不是为了替代我们而是为了让我们 把时间花在更核心的“创意”和“逻辑”上 而不是死磕线框和像素。如果你也想提升效率不妨试试这套工作流另外我为大家准备了10万字 AI 使用手册 后台回复“领取资料” 即可免费领取这份 10 万字的 AI 实战宝典。如果觉得这篇教程对你有启发 随手点个赞、在看、转发三连吧~谢谢你耐心看完我的文章~今日互动你在设计工作中最耗时的环节是什么欢迎在评论区告诉我下期教你用 AI 解决它