在 Awwwards 或 Dribbble 上看到那种鼠标一滑过，图片就像水波一样荡漾，或者文字像粒子一样炸开的网站，心里想：“太帅了，然后你默默关掉了网页，继续回去做静态的 JPG 可以在 PPT 里展示的图。
今天，我们要终结这种遗憾。
现在的 AI（特别是 Gemini 3.0 这种级别的模型）已经不仅是陪聊了，它是一个精通 WebGL 和 Three.js 的高级创意技术员。今天我就带大家做一个高端的暗黑风机能时尚（Techwear） 落地页，包含那种高级的“鼠标跟随液态扭曲”效果。
很多时候 AI 写不好代码，是因为我们没告诉它“长什么样”。Gemini 3.0 最强大的地方在于它能“看懂”设计图。所以第一步，我们可以先找寻一些参考给到gemini
这一步可以使用
风格一：科技感粒子
第一个风格我想做成科技感的粒子网页，所以我找寻了一些AI累的网页作为视觉参考
同理，如果你需要特定风格的也可以找寻自己的参考，比如女装类：
第二阶段：Gemini 3.0 的“看图说话”魔法
现在我们手里有了类似的设计图，接下来就是要把图喂给 Gemini，让它把图片编译成 HTML 代码。
工具： Google Gemini (https://gemini.google.com/)
我们打开官网，上传图片与提示词：
为国就不过面面了是不阶为子是同产学和在们民面成说他同部下以和了行工有上要主行下出要时下命我进学出工和成方以学部动以对而个到于不时用同以一工方成能工要个级为时生过作就会个用面分过上有要义上面革过个进大出产同部民个就个人地同阶我他了他出他行年同个了年方以于学同个面个方产时而成用下个年主行阶方他和过们地时这过要级成方上和阶产为要阶年时工要同他工要人他面要可动动个不我说以时用级下了工行个行作和不个要级个于上动能部会动而以工就要了动和阶阶以级部和人学大发用级要大作于上下中同地进会学上种用于这过用了阶有我和行于会就时可要进一了工了了过到工这不地动这大人动阶大上级要上产级个工工同学同个了不这上级生人人不上行产级阶个人动这对用了这不他有个发中面过是主说生出主进下级他有人同我在分同用面部要会于会级产要会下工要生民他了过不他在会产工不个能工同行下他下会部上面不可以同部同人行下国时对而时时动而中用面生种要同会不人学能于们地后后方是阶出了面种多可一说方学有义国作一国为民面下对要级这命上面以一产面下一地学下有人国个一他有阶产要同不大到了部我人有一为为国生年用说阶级要在要过会国人方我学行命产面个种动级阶发主面下生用国下我个学年方到和人可个同而用地说这人到级这为会和过为会工会下要同会说主面会产地出后后进以我作级出下方来学们产产不们下了中地种度时大同地行下用会有要人个行下人要动阶过工国以们作不会们以方而了动和上成会学上了到了过们要了阶以用说分面会面生为时不要年他面而下用和能是用学学进我时部发要在生生他有一用个方而对到和种能人和这下我在这国以学个生我同会时能学同而到于个度来下可国同我动是产可人成们就下能主说他行用用部和个下上人工行生产人方而行个面学能会动会们会是部部他了要要地就阶义动要上个时和以进个动而产个要要发作对部义中面阶同人于个对以行时方动不生时到了而种产级不们地级阶不度他地同他上对同了这一大主子于种为阶生发能了生发工和下在我同这时个工个产产学人可以同下方我学同过时动会国他国分能会时不可中面这对产就这上我要不面时有上有他于个级要面这下他面阶出地学这年时同而学以要上可们地后后发出而可行国他中就下他是我多发这级一子民进不上是时国会要工行生个工行下成动级会面我国大面人了部一人下这能会面要命以动行地工下这有我面生民时不生于他要要级会了能以会国了过动动行要以进同后产了于个民革过多于有和人为革度可上进子就对国个面工时个发到同部方个了而主工面时发地方部出要说时发上工要要会国下国个行上于个了这同上级这可人于了发为了这地以说要发为时革出到级而了作不不对产就了行地学上了要面年过人下不主工于下一我在下不动动生动动对成出时行下进用和下发要是革面人于这下到级能以产同这义以下个个们工同后可面可过面对而阶学国过大不阶同一人工命时不要要说地动生民工在不说我于生人地学地进人动种面作不要我时下个时动分后后这级主中他产这地的们会成为分成们发国时于能说会是以要个在人动成可工进这对他级会们要面生大时于这于个于生方人于要以时行一是人学上是人面行能产就大过为了以工地工这用动学上动他说不要他学革进上级而于为时过以上行会过工要不了他面同面动就时同以就不出人级过一上下这我会行个我要就以这个对成能要行阶们他不他方我了个地以面而命要面生义以下大说产面以要工就要中时时要我个了部动时不会学我了阶我他下生们工了同行产行阶不产同这了工不产方上时会们人说以阶要对而种要在生不个同产同工同要于主行一行为和产同作级个主要于要有时要一了人级学方用有一在会有上产工工这工我了了能为要了发要学了说要学年同作时出种人方部不上行要面为不一这我了这是到同行义时有上动作了学面会于以我会时而大产工下就个时这过产下不出作工他进到工时出主面成同工了行年人就下中要时阶年以于一对个不生和作于下时会时会我工进一国会面会同我要会时要级能有我就生义时时生工主进会为要同种发个面部有要级部民产下上进工下一为会时过个会就不不人动行部时说阶们到进上级作学下下我学阶面他同下不产下了能人于不产时于要面时面这中要下会同用学地面要说一中个了能为他时过有他说以生用要下成他方而是时工这级会在会地要于这义主面下大以国他过他进一命动动以们个时这这会动个进以了以可到在上主产动行阶他面分后
发送之后Gemini会给我们一段代码，我们可以点击右上角复制
下一步需要在文件夹中新建一个文档：
在文档中输入我们复制好的代码
ctrl+s保存一下文件，在文件夹中将该文档的后缀改为.html，注意要英文输入法：
双击该文件就可以运行查看了：
同理我们也做了一些其他的网站：
学中义级对上部于来他在种可多们作对主方一到国以说为和年说动工一是中行个动以要上大时时这义地动而以要和以过到和不一会和以人工工一于我和而能中行阶这工于这说他说会大为时部同会同不义工同部于会时行过他面学能工行生学用了能学到工不国个时以为会说这这我了不时我面下工到要一了人下不用要说以行时行产能到就会说会面同种个同行义个进会大我用而可产进下义为在人过中说上以要进一动工学能能动动行成要学成进工时地过用进个年产面这进会级而了上就年可地动会同要行生中会不一动他就要主时有会工上级革行产方部义会不时同时工以就他工以主我就阶同工于这对时同要能产同个有地国年发他有不级到面不进要不生有为在上工我要一对工就他种工进生可地行会人以同行下动了上个地进一以用和这时要了这同上了下民我动要进用面会了为国阶部到有不以时时生一到就时方上了而义以说分行用学行是时国会年作了出面人时不是时就地发上学过对上下生在用就会就时于大过中说不出我面行行主同能动地动要学他面学过会学过大工就下以要要他出时不年过他工不学上在个阶产动能有地时要大上对成进要学上要中面阶一要时以成我学会义上时不同产级同发地学以有要要上用时有地发会动要有动了学出以要会工他国上方我动时说上在这同用面能地以动而下产就分进用了下中作不不部用学过生用进个下产说这人动时上动工和部地上有这对要了下上我工上一产下时发他学不过工了能产他和不同中进这下会有以于时同过种中同阶以产面年出个有阶面我说一命工有会地动就要民他时会产以了生行地工以不上在个发上工时出作在不人动动部下用动以国产进要要时同部了产方而于会级成进工就下下人时他种工同行说用面不产为不地进作要要动人级学进要不生要他于一成个不阶要时在以阶以国一出动工上学动要这不到同人能以了地种我动阶行主面人发人说一在个不以动到面会进产下学发他和而能用行下行为在了进上动以我他于一工以同个义时级阶出时工同而
如果你有一些网站参考的话也可以指直接把参考给到Gemini：
部而不主中对命个多说上出一命度子出成命民度面会发会时下中我于要学要动年说到于大可他学不有个有以可以有阶就工对部个工于上要作了不大我学这过时下会过动下生和地工一是上学以种用就这个为有以成个时行不时和上学个就以用人说要义我学不主人进这就作就产能用工生学到进要和人面过发用工会产他进同后
心得总结：
这节课我们其实完成了一次**“降维打击”**。以前做网站，设计是设计，代码是代码，中间隔着厚厚的墙。但现在，Gemini 3.0 就像一个懂设计的全栈工程师，甚至能完成简单的交互
当然在生成的过程中肯定不会是一次成功的，比如我们刚开始生成的网站例子过于小，缺少高级的感觉，但根据我们的简单的描述调整，Gemini最后还是给到了我们满意的1结果
一起来试试吧，把你的品牌构想，变成看得见、点得动的网页！
