我经常在自媒体上刷到这样的内容：安装一个 Skill，输入一句话，几分钟后就得到一个很炫酷的网站。

Skill 和编程 Agent 确实可以快速搭出页面，但短视频通常没有展示后面的工作。

网站里应该放什么，项目截图怎么选，人物和视频怎么准备，手机上能不能用，链接能不能打开，最后又怎样部署上线，这些都不能只靠一句提示词解决。

所以我想把这件事完整做一遍：把真实项目、摄影、个人介绍和联系方式放进去，把桌面端、手机端、测试和部署全部跑通，而不止于生成一个适合截图的首页。

做完以后，再把实际使用的提示词、命令和检查方法整理成教程。

我做这个网站还有另一个原因。

在 AI 时代，每个人都可以在简历里写自己会使用 AI，这句话已经很难单独证明能力。

个人网站可以让项目被打开、作品被查看、工作方法被解释，访问者也能通过真实链接继续了解。这是一份可以被体验和验证的简历。

这里所说的优质至少包含四件事：内容真实，项目可以访问，页面在桌面和手机上都能使用，后续增加作品时不需要重做整站。

视觉效果只是其中一部分。

https://modelscope.cn/studios/weirdfish/weirdfish

 

这篇教程使用 weirdfish 的实际项目文件、提示词和部署记录。

网站使用 React、Vite 和 TypeScript，代码和命令由编程 Agent 处理。你不需要自己写前端，主要工作是准备内容、选择参考、查看预览、测试交互并告诉 Agent 哪些地方需要调整。

首页人物和视频是可选项，没有 AIGC 素材也可以换成摄影、插画、3D 渲染或普通背景视频。

发布到魔搭研习社前，需要把本文引用的本地图片和视频上传到媒体库，再替换相对路径。

一、先确定网站里到底放什么

不要从颜色、字体和动画开始。先列出已经存在的内容。

weirdfish 当前有七个频道：

HOME        首页视频和一句核心介绍
INDEX       全站入口
PROFILE     个人介绍
SKILLS      从真实项目中整理出的工作方法
PROJECTS    六个 AI 产品和游戏项目
PHOTO       九组摄影作品
CONTACT     邮箱和社交主页

这不是通用模板。栏目数量应该由内容决定。如果只有三个项目和一段个人介绍，HOME / WORK / ABOUT / CONTACT 已经足够。

可以先让编程 Agent 充当内容编辑。它只负责提问和整理，不允许补写不存在的项目与经历：

我要制作一个个人作品集网站。先不要设计页面，也不要写代码。
请每次只问我一个问题，帮助我确认：

- 我希望访问者怎样认识我；
- 最值得展示的项目；
- 项目以外还要展示什么；
- 每个项目有哪些真实截图、链接和制作信息；
- 联系方式；
- 我不希望网站变成什么样。

问完以后整理为栏目清单。每个栏目需要写清已有内容、缺失素材和是否值得保留。
不要虚构项目、职位、数字、奖项和联系方式。内容不足时减少栏目。

整理完成后，先得到一张内容表。每个项目至少需要下面几项：

项目名
一句话说明
我在其中负责什么
两到四张真实截图
公开访问地址
当前状态

网站结构只有在这张表成立以后才值得开始做。

这一轮由你决定展示什么，以及哪些项目真的值得放进简历。Agent 负责提问、归类和指出缺失资料。

整理完以后，不要急着进入页面设计，先人工检查一遍：项目是否真实，职责有没有夸大，截图和链接能否找到，栏目是否存在空壳。

任何一项说不清，就先补资料或删掉栏目。

二、把参考拆成内容、交互和媒体

不知道怎样设计时，先建立参考库

vibe coding 用户不一定熟悉排版、动效和交互设计，也可能很难直接说出自己需要什么。

此时不必要求自己凭空想出一套独到设计。先去完成度较高的网站中找参考，再把看见的效果拆成具体要求。

可以从这些网站开始：

• SiteInspire可以按 Portfolio、Typography、Minimal、Grid Layout 等类别筛选，适合找页面结构、排版和作品展示方式。
• Godly 收录较多现代产品网站和创意站，适合观察滚动、转场、悬停反馈和首屏表现。
• Awwwards收录大量获奖网站，适合研究更强的视觉和交互实验。获奖站往往追求表现力，不要默认所有动效都适合个人简历。

不要只收藏一张首屏截图。至少打开三到五个完整网站，分别记录：

页面结构参考：栏目怎样组织，访问者先看到什么
导航参考：怎样进入项目、返回首页和切换频道
项目展示参考：封面、详情、截图和外链怎样组合
交互参考：滚动、悬停、转场和加载反馈
移动端参考：导航怎样收起，文字和媒体怎样裁切
不采用的部分：哪些效果会影响阅读、性能或操作

每个网站只承担一种主要参考。可以用一个网站参考结构，另一个参考项目展示，再用第三个参考动效。

不要把多个网站最显眼的效果全部堆到同一页。

把链接、截图和录屏交给 Agent，让它先解释，再开始设计：

下面是我为个人作品集选择的三个参考网站。先不要写代码，也不要直接合成一套设计。
请逐个分析：

- 信息结构和导航；
- 项目内容如何出现；
- 主要交互及其触发方式；
- 桌面与手机端的差异；
- 最值得借鉴的一项机制；
- 不适合我的内容或会影响可用性的部分。

最后给出一份参考分工表：哪个网站只参考结构，哪个只参考项目展示，哪个只参考动效。所有颜色、字体、图形和具体文案重新设计。

这一步会把模糊的“高级一点”“炫酷一点”换成可以实现和验收的要求。

你不需要先成为交互设计师。

再拆解具体参考

这个网站最初参考了小红书创作者「灵灵妮大王」发布的 Annie Xie 个人网站演示。

参考的用途是理解浏览方式，不是直接把一套页面换成自己的名字。

分析参考时，把画面分成三层：

层	要记录什么	最终由什么实现
内容	导航、项目、个人信息、联系方式	HTML 和数据文件
交互	点击导航、整页切换、滚轮推进、手机菜单	React 和 CSS
媒体	人物动作、镜头运动、灯光、透明屏	图片或视频

 

制作中出现过一次动作误判。我们最早以为参考视频中的人物从坐姿站了起来，还围绕这个动作写过镜头。

连续查看视频后才发现，人物没有站起，变化主要来自镜头推进和小幅姿势调整。

控制器的动作也被画面上的文字挡住了一部分，少看几帧就会把动作顺序理解错。

这类错误会直接污染后面的帧、提示词和网页结构。

不要凭印象描述视频，把文件交给 Agent，让它抽帧并制作联系表：

请使用 ffmpeg 每秒抽取 2 帧，并把连续画面排成联系表。动作密集的片段改为每秒 4 帧。

输出文件放进独立的参考分析目录，不修改原视频。完成后告诉我应该重点查看哪些时间段。

 

 

 

参考录屏联系表

可以把视频和联系表一起交给 Agent：

请根据参考录屏和连续抽帧，按时间顺序拆解这个网站演示。

逐段记录：
- 人物动作、视线和手中道具；
- 镜头景别、方向、速度和剪辑点；
- 新出现或消失的元素；
- 用户进行了什么操作；
- 哪些画面属于预先生成的视频；
- 哪些内容需要用 HTML 和 CSS 保持可点击、可复制和可适配。

看不清的地方标注不确定，不要补全。
最后只总结可以复用的浏览逻辑，不输出页面设计。

拆解完成后再决定哪些内容放进视频。

导航、文字、按钮和项目链接应该留在网页里。

视频只负责无法用普通网页自然呈现的人物动作和镜头运动。

参考阶段由你选择网站和判断哪些效果适合自己。Agent 负责抽帧、整理差异和把模糊描述翻译成可执行要求。

人工验收时同时打开参考和拆解结果，逐项确认 Agent 有没有看错动作、导航和页面顺序。

对任何不确定画面，保留“不确定”，不要让 Agent 自动补出一个看似合理的解释。

三、准备人物和首页视频

这一章可以跳过。没有角色视频时，使用一张高质量封面或摄影作品也能完成网站。

先固定人物母图

如果网站需要持续使用同一个角色，先制作一张干净母图。

固定脸型、瞳色、发型、服装结构和左右不对称的配饰。

后续图片都回到这张母图核对身份，不要让一串局部修改图互相传递误差。

 

 

 

人物母图

人物母图不是最终视频任务的直接输入。它的作用是生成和检查首页首帧。

最终视频只使用一张首帧

SIGNAL BLOOM V2 的正式制作链路是：

人物母图
  -> 生成并人工确认首页首帧
  -> 只把这一张首帧提交给 Seedance
  -> 得到 720p 原始视频
  -> 超分和转码为网页版本

正式任务没有同时上传人物母图、参考视频、V1 首帧或其他关键帧。唯一输入是下面这张图：

 

 

 

SIGNAL BLOOM V2 唯一首帧

真实生成参数如下：

参数	数值
模型	doubao-seedance-2-0-260128
模式	单首帧图生视频
时长	15 秒
画幅	16:9
分辨率	720p
音频	关闭
水印	关闭
有效任务	1 个

成片的动作按时间段写，不把所有要求堆在一个段落里：

0.00-2.20 秒   坐姿、呼吸、眨眼和低密度环境粒子
2.20-3.10 秒   肩侧打一次响指
3.10-4.20 秒   闪切后透明屏已经完整悬浮
4.20-5.80 秒   两段高速短弧穿梭和两次玻璃擦镜
5.80-8.20 秒   正脸近景，紫色光片出现并被触碰
8.20-11.80 秒  触碰后碎片与光流增加
11.80-12.80 秒 人物看向镜头并眨眼
12.80-15.00 秒 信号收束，黑玻璃擦镜，进入黑场

完整提交提示词放在本文附录。

一些生成视频的tips：

• 用一张母图固定人物身份。
• 单独制作一张符合镜头要求的首帧。
• 最终视频只上传确认过的首帧。
• 动作、摄影和特效用逐秒时间轴描述。
• 只有结尾必须落到精确画面时，才考虑增加尾帧。

早期失败视频后来已从工作区清理，当前保留的是关键帧和诊断记录。

因此这里不展示一段已经不存在的失败视频，也不把它写成所有视频模型都会出现的通用规律。

为网页导出视频

最终网页使用 1440p 桌面版本和 1080p 移动版本。把原始成片交给 Agent，让它完成网页转码：

请使用 ffmpeg 为首页视频导出桌面版和移动版。

要求：
- 桌面版 2560 × 1440，移动版 1920 × 1080；
- H.264、yuv420p、faststart；
- 移除音轨，不覆盖原始成片；
- 导出以后用 ffprobe 检查编码、分辨率、帧率和时长；
- 返回文件路径和检查结果。

人物和视频阶段由 Agent 负责生成准备、媒体处理和技术检查。

你负责逐张确认人物身份，并把视频从头到尾正常播放几遍。

暂停检查脸、手、瞳色、服装和配饰是否漂移，再以正常速度感受动作是否自然、镜头是否太快或太慢、特效是否抢走主体。

单帧正确不代表整段视频看起来舒服，两种检查都要做。

四、让编程 Agent 建立网站

准备好内容和媒体后，再让 Agent 开始写前端。

weirdfish 使用 React 18、Vite 6、TypeScript 和 CSS Modules。

第一轮任务只建立信息架构、数据层和基本页面，不要一次要求所有动画：

请在当前项目中制作一个个人作品集网站，使用 React、Vite 和 TypeScript。

开始前检查已有代码、图片和视频。只使用我提供的真实项目、文字和联系方式，不要虚构内容。

要求：
- 网站包含 HOME、INDEX、PROFILE、SKILLS、PROJECTS、PHOTO、CONTACT；
- 顶部导航切换频道，每个频道占满当前视口；
- 文字、项目数据、图片路径和外链集中到 data 文件；
- 每个项目必须有真实截图和公开访问地址；
- 首页视频使用 muted、playsInline、poster 和桌面/手机片源；
- 图片需要 alt，非首屏图片使用懒加载；
- 支持 prefers-reduced-motion；
- 不引入非必要依赖。

先实现可用结构和响应式布局，不做复杂动画。
完成后运行测试、TypeScript 检查和生产构建。

项目文字、截图和外链应该集中管理，以后更新项目时只改一处。

具体数据类型和目录由 Agent 决定，你不需要创建 TypeScript 接口或手工移动源码。

第一轮只做栏目和导航。

让 Agent 给出本地预览地址以后，你需要逐页打开，判断内容顺序是否合理、哪些页面太空、项目是否容易找到。

确认结构以后再做视觉，视觉确认后再增加动效。

不要让 Agent 在第一轮同时完成结构、视觉和复杂交互，否则看到问题时很难说清应该改哪一层。

可以把每轮工作限制写进提示词：

这轮只处理页面结构和内容顺序，不增加复杂动画。

完成后请：
- 启动本地预览；
- 告诉我每个频道怎样进入；
- 列出需要我人工确认的内容和视觉问题；
- 保持服务运行，等待我体验后再修改。

不要要求我手工编辑代码。我会用页面、设备、操作和期望结果描述问题，你负责定位并修改实现。

这一阶段由 Agent 写代码、组织数据和准备预览。你负责逐页查看和决定结构是否成立。

验收标准不是页面能打开就算完成，还要确认进入网站后能否在几秒内看懂这是谁的简历、怎样查看项目、怎样找到联系方式。

五、加入项目、摄影和真实外链

当前 PROJECTS 中有六个项目：AI 名人沙龙、AI 共创小说、诸子争鸣、你也来吵、牛马地下城和慢慢岛。

每个项目只使用真实截图，并提供公开的魔搭项目页。

项目入口不能只是看起来像按钮的装饰。

让 Agent 为每个项目加入真实外链，并用自动测试约束所有项目必须有合法 URL：

请为每个项目加入明确的“打开项目”入口，使用项目数据中的真实公开地址，并在新标签页安全打开。

补充自动测试，确保每个项目都有合法 URL，切换项目时入口会同步更新。完成后保持预览运行，让我逐项点击验收。

摄影内容使用九个系列，共 86 张照片。

总览只放每组封面，进入系列后再加载组内图片。

相机原图交给 Agent 批量导出最长边 2400 像素的 WebP，并保留原文件。

 

 

 

摄影总览

每张图片的数据至少包括尺寸、预览地址、详情地址和能描述画面的 alt。

系列顺序、封面和照片数量也放进数据文件，不要写死在组件内部。

作品入站阶段由你决定哪些项目和照片能代表自己，Agent 负责压缩、接入、写测试和修复路径。

人工验收需要逐个项目点击外链，确认没有跳错页面；检查每张截图是否属于当前项目，人物或产品主体有没有被裁掉；打开每个摄影系列，判断封面能否代表整组作品。

自动测试可以发现链接字段为空，却无法判断一张封面是不是选得合适。

六、再增加交互和响应式处理

网站结构稳定后，再逐项增加交互。

全屏频道导航

每个频道占满动态视口，顶部导航修改当前频道状态。

URL hash 同步为 #home、#projects 等地址，刷新和分享后仍能回到对应页面。

手机端不要硬塞桌面导航。

使用独立菜单，并检查菜单打开后不会遮住关闭按钮。

 

首页响应式视频

桌面加载 1440p，较窄设备加载 1080p。

视频只作为背景，标题、导航和操作按钮继续由网页组件提供。

把这项要求交给 Agent，不需要自己编写 标签。

 

PROJECTS 滚轮视频

PROJECTS 入口有一段 179 帧视频。

桌面滚轮和手机拖动控制当前帧，播放到结尾后再进入六个项目目录。

这种交互必须处理边界：

• 首帧继续向上时，把控制权还给网站导航。
• 尾帧继续向下时，进入项目目录。
• 触屏拖动不能同时触发浏览器页面滚动。
• 项目按钮和外链不能被父级拖动区域吞掉点击。
• 视频加载失败时，提供重试和直接进入项目目录两个按钮。

最后一项来自线上真实情况。

CDN 偶尔会让 MP4 请求失败。

如果项目目录只能通过视频结尾进入，访问者会被卡住。

媒体可以失败，内容入口不能一起消失。

交互阶段由 Agent 实现状态、动画、键盘与触屏规则，并用自动测试覆盖明确边界。

你负责真实手感。用鼠标、触控板和手机分别操作，不要只让 Agent 模拟点击。

重点判断导航响应是否拖沓，滚轮何时接管和归还是否自然，动画会不会让人等待，按钮有没有清楚反馈，手机拖动是否容易误触。

手感没有统一答案，但你需要明确选择自己愿意长期使用的版本。

七、Agent 做自动检查，用户做人工验收

自动测试和人工验收解决的是两类问题。

Agent 可以判断链接字段是否存在、构建是否通过、控制台有没有报错，却不知道一段动画是否让你不耐烦，也不知道角色的头被裁掉以后是否仍然好看。

先让 Agent 完成技术检查

不需要自己在终端逐条运行命令，把交付前检查完整交给 Agent：

请完成当前个人网站的交付前检查。

你负责：
- 运行 npm test、npm run typecheck 和 npm run build；
- 启动本地预览并保持服务运行；
- 检查桌面 1440 × 900 和手机 390 × 844；
- 查看控制台错误、失败的网络请求和横向溢出；
- 验证导航、项目外链、摄影入口和媒体失败降级；
- 修复能够明确复现的问题，并重新运行相关检查。

最后给我本地预览地址、自动检查结果、已经修复的问题，以及仍需要我人工判断的内容。不要用自动截图代替我的最终验收。

当前版本有 54 项自动测试，覆盖导航、项目数据、项目外链、媒体重试、滚轮帧控制和关键组件结构。

这些测试是 Agent 的工作证据，不是用户体验已经合格的证明。

用户做四轮人工验收

打开 Agent 给出的预览地址，自己完成下面四轮检查。

不要只看它返回的截图。

第一轮看内容。

逐页确认项目名称、个人介绍、职责、照片、邮箱和外链是否准确。

每个项目都要点出去，确认落到正确页面。

第二轮看审美。

先不要操作，在每个页面停留几秒，观察第一眼会看向哪里。

检查文字层级是否清楚，留白是否舒服，颜色是否互相抢夺，图片裁切有没有损伤主体，各页面看起来是否属于同一个网站。

和参考站并排查看时，只比较结构与节奏，不要求像素级模仿。

第三轮测交互手感。

完整走一遍真实访问路径：从首页进入项目，推进滚轮视频，切换六个项目，打开摄影系列，再找到联系方式。

留意响应是否及时、动画是否让人等待、滚轮接管是否突然、按钮反馈是否清楚。

然后故意快速滚动、连续点击和反向拖动，看看页面是否失控。

第四轮看手机。

尽量使用真实手机，而不只缩小桌面浏览器。

检查菜单是否容易打开和关闭，按钮是否方便点，文字是否需要放大才能看，人物和照片有没有被过度裁切，页面是否左右晃动，拖动项目视频时是否经常误触浏览器滚动。

把主观感受说成 Agent 能修改的问题

用户不需要知道是哪一条 CSS 或哪个组件出了问题，但反馈要包含发生位置和实际操作。可以使用下面的格式：

页面：
设备和窗口大小：
我做了什么操作：
实际看到或感受到什么：
我希望它怎样变化：
优先级：阻塞使用 / 明显影响体验 / 可以以后再改

例如，不要只说“项目页不顺”。可以写：“Mac 触控板，1440 × 900。在 PROJECTS 视频播到最后一帧后继续向下滚，要滚三次才进入目录。我希望下一次明确的向下输入就进入目录。”

Agent 可以据此复现、修改并重新交给你验收。

使用 modelscope-studio Skill 部署

部署不需要自己拼 Git 和 API 命令。让编程 Agent 使用 modelscope-studio Skill，并明确当前项目要发布到魔搭创空间：

请使用 $modelscope-studio 部署当前个人网站。

这是一个 Static 创空间。部署前先运行测试、TypeScript 检查和生产构建，检查仓库中没有 API Key、Token、摄影原片和临时生成文件。

如果同名创空间已经存在，更新现有创空间，不要创建新的项目。完成代码同步和推送后，等待创空间自动部署并检查状态。最后返回线上地址。
Skill 会处理创空间识别、敏感信息检查、代码同步和状态检查。

代码推送后，创空间会自动部署，不需要再点击重新部署，也不需要手动调用部署接口。

状态变成 Running 后，由你亲自打开线上地址，再走一遍首页、项目、摄影和联系方式。

重点观察本地预览与线上版本有没有字体、媒体加载速度或交互差异，并在手机网络下重新打开一次。

Agent 可以继续检查状态和错误日志，但线上视觉与手感仍由你确认。

具体配置可以查看魔搭创空间文档。

此后新增项目或摄影系列，只需补充数据和媒体，再重复构建与浏览器验收。

 

附录：SIGNAL BLOOM V2 完整提交提示词

下面是首页正式视频唯一有效任务使用的完整提示词。

它只配合上文的唯一首帧使用，不适合作为不带素材的通用提示词。

完整提示词约 1400 字，日常阅读可跳过，需要复用请点击阅读原文，跳转查看