我是一名 UI设计师，做界面好几年了，但是写代码并不擅长。之前一直想弄个个人作品集网站，设计稿在 Figma 里小半年，就是没动力去写 HTML/CSS/JS。毕竟上班已经画了一天图，下班实在不想再跟括号尖括号较劲。
我的任务其实很具体：把自己做过的几个项目，做成能在线打开、好看、手机上看也不崩的网页。难点不在设计，在设计落地。我得把稿子变成真网页。这东西对我还有点额外的用，我平时接点私活，作品集就是我的门面，算半个一人公司的招牌。
用的工具：Figma 出设计稿，对话类 AI（ChatGPT、Claude 都试过，国内通义也用）写代码，最后自己本地跑起来看效果。
怎么做的，中间其实拐了个弯。
一开始我图省事，直接把 Figma 截图丢给 AI，说"照着这个写一个网页"。第一次出来的东西能看，但一缩放就乱，字体也不是我设计的那套，我稿子里深色背景配霓虹黄强调色的细节全丢了，丑得我想关掉。
后来我改了做法，才顺过来：
-
先自己把设计稿拆成结构：哪是导航、哪是项目卡片、哪是 footer，把间距和配色先定成变量。比如主色我用近黑背景，强调色定成霓虹黄那类亮色，不是普通的黄。
-
把这些设计说明而不是光截图，连同关键截图一起给 AI，让它先输出一套 CSS 变量和设计规范，再写页面。
-
AI 出代码后我自己本地跑，哪里崩了截图回扔给它修。响应式那块我专门让它按手机宽度重写了两遍才稳住。
-
最后交互细节（hover 动效、滚动渐显）是我自己调的，AI 给的太花哨，不符合我要的干净、有冲击力的感觉，我给砍了大半。
结果大概三天，从零到网站能上线。要是我自己硬写，估计得磨两周还未必好看。产出了一个深色主题、霓虹黄点缀的个人作品集，手机端也能正常看，发出去还有人问是谁做的。
踩坑提醒，这些是真坑，省得你们再踩一遍：
-
AI 第一次给你的代码别直接信，尤其响应式，它经常桌面端完美、手机端炸裂，一定自己用手机宽度看一眼。
-
它特别爱加一堆没必要的动画和阴影，设计师的审美反而得你来把关，该砍就砍。
-
字体和版权。AI 默认用的字体不一定能商用，我最后换成了免费可商用的，这块得自己查，别偷懒。
-
配色它经常会理解偏，比如我把强调色定成霓虹黄，它给我渲染成浅黄绿，这种细节必须逐处核对。
-
代码别全让它写，核心布局和交互逻辑你最好懂一点，不然它改一处崩三处，你修不动。
给后来者的建议，三条能直接照做：
-
别只丢截图，先自己把设计拆成结构加规范（配色、间距、字体变量）再给 AI，出来的东西准得多。
-
让它先出设计规范（CSS 变量）再写页面，后面想改配色改间距都快。
-
审美和版权这两件事必须自己守，AI 给的好看不一定对、也不一定合规，别被它带跑。
要是你也是设计师、卡在稿子做完了但变不成网页，可以照这个方法试一试，主要是用设计师思维引导AI去做事情。