章节目录
关于这个网站
借 AI 将想法写成网页，让作品在浏览之间展开。
当 AI 让想法落地变得更容易，我想尝试把自己的作品集做成一个网站。跳出平面图片的限制，让排版、动效和交互一起参与表达，也给自己的设计多留一些尝试的空间。我先用 MindNode 梳理内容与交互，再借助 Codex 搭建初版框架，将原型导入 Figma 完善视觉设计，最后回到 Codex 还原界面、实现细节。在设计稿与实际网页之间反复调整，逐渐做成了你现在看到的样子。这个过程也让我不断练习如何使用 AI，以及如何判断、选择和打磨一个设计。
- 项目
- 个人设计作品集
- 我的角色
- 独立设计与实现规划、原型、视觉、AI 辅助开发与测试发布
- 实现方式
- Figma + Vibe Coding
- 状态
- 持续完善中
关于这次制作
做一个属于自己的网站
以前整理作品集，总要把设计压进一页页 PDF 里。画面能留下，动效、交互和浏览的节奏却很难讲清楚。AI 让设计师亲手搭建网站变得更可行，我也想借这个机会，把作品从静态页面里带出来。从一个想法开始，边设计、边实现、边调整，让网站慢慢长成我想要的样子，也在这个过程中练习 Vibe Coding，把对视觉的判断延伸到真实的网页体验中。
页面怎么安排
先留下印象，再让作品把话说完整。
我把首页安排成一次由浅入深的认识：先用视觉和身份介绍建立印象，再把最有代表性的项目展开给你看。看过作品之后，再总结能力、交代经历，让每一项优势都有前面的项目作为依据，也让你知道这些能力是怎样积累起来的。最后回到生活中的我，留下一个可以继续聊下去的入口。
认识我
- 01
封面
用底部大字和整体氛围，定下网站的视觉基调。
- 02
我的不同侧面
设计、摄影与跑步，呈现我的兴趣和跨领域经历。
- 03
个人定位与制作故事
用 slogan 表达我的设计理念与个人定位，再展开这个网站的制作故事。
- 04
从不同角度认识我
从五个角度介绍自己，呈现我的优势、想法与对设计的理解。
看作品
- 05
精选作品
展开代表项目，通过独立案例页展示设计过程与细节。
- 06
更多项目
补充不同领域的实践，展示更完整的项目范围。
了解更多
- 07
设计能力
结合前面的作品，归纳我在视觉、界面、AI 与摄影方面的能力和优势。
- 08
工作经历
把项目放回职业经历中，说明我在不同团队中的工作与职责。
- 09
联系我
用摄影与跑步的生活片段收尾，留下联系方式。
- 10
封底
为浏览画上句号，也保留返回首页和联系我的入口。
从想法到网页
在设计稿和浏览器之间，把想法一点点做出来。
内容和顺序确定后，我先借助 Codex 搭建框架，再进入 Figma 完善界面，最后回到浏览器里检查和调整。整个过程由我确定设计方向，借助 AI 完成代码实现。
框架与界面
我先让 Codex 搭出可以浏览的初版，把模块顺序和内容放进去，看看实际的页面长度和浏览节奏。随后将原型导入 Figma，进一步调整字体、图片比例、留白和界面细节。先有一个能看的框架，再逐步确定每个部分的样子。
设计与实现
界面确定后，我把设计稿交给 Codex 进行视觉还原。涉及动效时，再结合参考网页、截图和录屏，说明触发的位置、变化的过程和预期效果。一次只处理具体的问题，完成一部分就放进网页里看，再继续调整。
检查与调整
我会在实际浏览中检查文字、间距和交互，也遇到过嵌入网页滚动到底后无法带动外层页面、鼠标闪烁、中文字体粗细不一致等问题。我把这些现象记录下来，借助 AI 排查和修正，再重新操作确认。
交互细节
滚动、切换，和一点点停留。
这里挑选首页中几处值得实际体验的交互。当前先用页面截图展示，后续会换成操作录屏，并补充每一处交互的设计原因。
从第一眼开始
PORTFOLIO 字母依次展开，在流动的黑白背景中，定下网站的视觉基调。
现在的版本
未完待续，内容会逐步完善。
后续会陆续补充项目内容、制作过程和交互演示，也会根据实际浏览体验调整页面细节。
网站框架已完成，
继续补充项目与制作细节。
- 已放入
个人介绍、实时网站预览与制作记录的阅读结构。
- 接下来
逐段补充制作动机、真实设计取舍与操作录屏。
- 继续保留
随着作品更新，慢慢完善这份网站。