核心内容摘要
从零开始学习bn.js：构建安全的密码学应用
Gemini 3是Google最新的多模态/代理AI模型。
之前我展示了如何将Gemini 3用于UI设计在这篇文章中我想向你展示如何充分利用这个工具进行Web设计。
如果你想要创建一个网页的快速原型你不再需要为此使用Figma。
你可以直接在Gemini中开始。
1️、Gemini设置在编写提示之前你需要确保你启用画布Gemini 3的视觉/生成UI输出区域选择Gemini 3思考模型它将提供更稳健的输出
提示格式和示例当涉及提示编写时Gemini可以更好地理解你提供的指令的细微差别。
所以我建议按以下格式构建提示上下文用一两句话解释你想要构建的内容要求以项目符号列表格式列出要求输出解释工具的理想输出这是一个用于着陆页设计的提示示例context 为新的移动AI应用设计高保真度着陆页。
风格 干净、几何形状、鲜艳的强调色、高级感觉。
/context requirements - 带有手机模型倾斜的Hero。
- 功能行图标 文本、社会证明、定价部分。
- 具有强大排版的CTA部分。
- 一致的间距节奏。
- 包括亮色和暗色版本。
/requirements output 以高保真度模型化设计 /output如你所见我使用了XML格式的提示。
它不仅对Gemini 3有效而且对ChatGPT也有效查看我的文章4种让ChatGPT发挥最大作用的验证方法以
获取更多实用的提示编写技巧*快速说明*你可以在输出中发现模型化这个关键词但很多时候Gemini会将这个关键词解释为源代码而不是图像。
查看和共享输出Gemini 3将生成未来页面的源代码。
而且很棒的事情是它还会在画布中直接显示页面的预览。
你可以在代码和预览选项卡之间跳转以更好地理解Web设计的细微差别。
如果你想与他人共享预览你可以直接点击共享复制画布的链接并在浏览器中打开。
原文链接用Gemini 3做Web设计 - 汇智网