MUZI / WEBSITE PRACTICE

个人作品集 · AI 辅助开发

AIGC 作品集网站

把自己的视觉想法,逐步做成网站

我希望这个网站有自己的视觉风格,也能让招聘方看清作品与经历。从首页文字到作品展开,我通过具体反馈,一次次调整页面,再查看效果、决定保留。

当前首页首页当前界面 · 2026.10.16 本地截取,职业介绍已于此前上线。

当前版本已上线,包含首页、作品画册与案例内容。网站持续更新中,本页保留各次调整时的截图与记录。

01

让视觉作品成为阅读入口

目前的展示方向是 AIGC 视觉设计。首页先说明我做什么,作品页以图像、海报和短片呈现视觉表达;案例页补充制作过程,关于我介绍背景与经历。

  1. 首页

    说明身份与创作方向。

  2. 作品展示

    先看图像、海报与短片。

  3. 案例实践

    再了解制作过程和我的选择。

  4. 关于我

    补充建筑背景、经历与创作方式。

网站沿用木子人物形象、暖白与深绿底色、砖红强调和手写字体。标题、正文与编号各有层级,图片保留完整画面。

02

三次具体的页面调整

01 / 首页层级

首页:收拢标题,明确职业介绍

我的要求
英文只留一个标题,名字更突出,文字靠左下角,与浅白绿色遮罩叠在一起。
后来怎么改
英文逐步收拢为一个标题,后来随职业定位改为 AI VISUALS。删掉长介绍,保留中文短句、姓名和作品入口,再调整 AI 的大小、颜色与遮罩范围。
当前首页 · 2026.10.16一个英文标题、职业介绍与作品入口;与早期截图的视口不同。

02 / 作品画册

作品展开:把完整图片放在中心

我的要求
点击作品后的展开方式,希望更简约,也更适合看图。
后来怎么改
把展开后的内容改成一张完整作品,配合系列选择、底部缩略图与左右切换。需要看细节时可以放大,关闭后回到作品入口。
当前画册 · 2026.10.16单张完整作品、系列选择与缩略图导航;上线前的本地截图。

03 / 案例层级

案例阅读:突出重点,也控制颜色

我的要求
序号和关键词不够醒目,段落边界不清楚;尝试多色章节底后,又觉得太花。
后来怎么改
放大章节序号,给少量关键词加色加粗。章节底色统一暖白,保留编号、细线和留白来区分内容。
调整后 · 2026.10.16同一章节:放大序号、强调关键词,保留暖白底;完整章节截图局部。
03

我的选择,怎样变成页面

我负责展示目标、内容和素材选择、视觉反馈与验收;AI 辅助整理方案、实现页面和排查问题。

我负责方向与确认

选择展示内容和视觉方向,用页面位置、截图与具体描述提出反馈。看过修改效果后,再决定保留、继续调整或发布。

AI 辅助整理与实现

将需求整理成方案,完成页面代码、交互和问题排查,并提供本地预览与检查结果,供我查看和确认。

提出需求 → 查看本地效果 → 反馈具体位置 → 调整并确认

技术与维护说明

网站使用 React 与 Vite,内容集中在 JSON 中,保留本地编辑入口。发布经 GitHub 与 Vercel 完成;修改时检查桌面、平板和手机布局,以及构建和数据格式。

访问已上线网站