需求澄清
从一句模糊需求开始，让 Agent 协助拆成作品展示、案例结构、页面路由和可执行改动。
IMAGINATION TO SYSTEM
CODEX
Next.jsBuild passed
Codex as Design Engine
设计想法交给 Codex
变成可运行系统
我把个人网站当成一次真实实验：用 Codex 读取项目、拆解任务、修改代码、运行检查， 再通过浏览器和设计判断，把 vibe coding 变成可控的设计开发流程。
Codex Run Log
> read context
> locate routes
> patch UI
> browser verify
01
Context
02
Code
03
Build
04
Browser
Core Thesis
AI 不替代设计判断，但可以放大设计师的执行力、组织力和跨工具落地能力。
01 / Project Background网页只是结果，
网页只是结果，
工作流才是项目。
一开始的需求很模糊：我只是想重新整理个人网站、补充作品详情、让面试表达更稳定。 但真正的问题不是缺少一个页面，而是作品、内容、代码、面试讲述和文件维护之间没有形成系统。
所以这个项目的目标变成了：用 AI Agent 协助我把个人作品集从“静态展示”重构成一个 可持续维护的个人品牌系统。它既能展示作品，也能沉淀案例叙事、面试稿和后续修改入口。
02 / Collaboration Flow
AI Agent 协作流程
我把 AI 当成可以进入文件、理解上下文、执行任务和验证结果的协作者，而不是一次性生成页面的工具。
内容系统化
用 Codex 协助整理 Wbit 案例逻辑，把零散内容重组为可讲述的 UX 叙事。
进入代码环境
让 Agent 读取 Next.js 项目结构，定位路由、组件、样式和素材，再按反馈执行修改。
验证与迭代
通过构建检查、浏览器预览和人工审美反馈，持续修正内容、排版和交互细节。
03 / Collaboration RolesAI 不是替我设计，
AI 不是替我设计，
而是承担不同协作角色。
这个项目里，我没有把 Codex 当成“一次性生成页面”的工具，而是把它拆成四种工作角色。 设计师负责判断问题和质量边界，Agent 负责把判断落到文件、页面和可验证结果里。
Planner
把模糊目标拆成任务
Designer
我提出方向、判断优先级、确认什么值得做。
Agent
Codex 帮我拆成页面结构、内容模块、开发步骤和检查清单。
Builder
进入真实项目执行
Designer
我提供设计反馈，决定是否保留、删减或重排。
Agent
Codex 读取代码、修改组件、同步素材、处理构建错误。
Reviewer
用浏览器做质量检查
Designer
我判断页面是否高级、逻辑是否顺、文案是否像人话。
Agent
Codex 打开页面、检查 DOM、观察真实渲染状态，并根据反馈继续迭代。
Archivist
保留项目上下文
Designer
我决定哪些入口需要标注，方便未来继续修改。
Agent
Codex 生成 README、文件注释和修改说明，让项目不依赖一次性记忆。
04 / Codex Development StackCodex 不只是写代码，
Codex 不只是写代码，
它能接住一整轮开发。
这个项目里，Codex 更像一个可以进入本地开发环境的执行型 Agent。它的价值不是给我一段答案， 而是把设计反馈接到项目文件、构建检查和真实页面验证上。
01
Context Reading
先读懂现有 Next.js 路由、作品数据、组件结构、资源目录和历史修改，不从空白页面乱生成。
02
Task Planning
把“太像 PPT”“标题撑内容”“同步到网站”这类设计反馈，拆成文件、模块、优先级和检查项。
03
Code Editing
在真实项目里新增作品数据、专属详情页组件、静态资源和样式逻辑，而不是只给一段示例代码。
04
Build & Debug
每轮关键改动后运行 build，检查类型、路由、静态生成、资源路径和页面是否能稳定加载。
05
Browser Verify
在真实页面检查首屏、滚动、文字是否可见、图片是否加载、背景是否露白和交互是否合理。
06
Context Memory
把关键入口、同步目录、组件职责和修改方式标注清楚，让下一次迭代可以接着往下做。
理解目标NEXT
读取代码NEXT
定位文件NEXT
执行修改NEXT
运行检查NEXT
浏览器验证NEXT
根据反馈迭代
05 / Skills & Vibe Coding把 vibe coding
把 vibe coding
变成可控的设计开发。
我理解的 vibe coding 不是随手让 AI 乱写，而是设计师把方向、审美和验收标准讲清楚， 再让 Codex 通过 Skills 和本地工具把想法快速落到可运行页面里。
Codex Skills In This Project
Browser Skill
把设计验收从“凭感觉看截图”推进到真实浏览器：打开页面、检查 DOM、确认首屏、滚动和资源加载状态。
Documents Skill
把案例内容继续转成面试逐字稿、项目说明文档或可投递材料，让网页内容和面试表达保持一致。
Local Tooling
通过命令行、构建工具和文件系统协作，完成资源同步、路径检查、构建验证和局部问题排查。
Reusable Context
把文件说明、编辑入口和同步规则留下来，减少下一轮对话重新解释项目的成本。
Vibe Coding Rules01 02 03 04
先定判断标准
每次开做前先说清楚要高级、要长图叙事、要代码布局、要可维护，而不是只给一句“做漂亮点”。
把灵感变成任务
把即时想法拆成页面结构、内容模块、视觉层级、文件修改和验证动作，让 Agent 可以稳定执行。
保留人工审美权
Codex 可以快速试错，但是否像 PPT、是否空、是否阅读顺，最后都由设计师判断。
用验证结束一轮
每轮不是生成完就结束，而是通过 build、浏览器和人工反馈确认结果，再决定下一步。
06 / Prompt To Execution
从设计反馈到 Codex 执行
真正有价值的不是“我让 AI 写了代码”，而是 Codex 能根据设计反馈进入真实项目上下文， 完成查找、修改、验证；而我负责判断方向、边界和结果是否成立。
01 / Input
“这个案例太像 PPT 了，标题在撑内容。”
Codex Action
把页面从卡片堆叠改成更长图式的 UX 叙事，重排为项目背景、用户分析、竞品分析、解决痛点、交互详解、视觉推导、页面展示和总结。
My Judgment
我判断问题不在视觉装饰，而是叙事结构空、分析链路不完整，所以要求先补 UX 逻辑再优化视觉。
Outcome
Wbit 详情页从视觉展示转成完整 UX case study。
02 / Input
“不要用长图，同步代码布局到网站详情页。”
Codex Action
识别个人网站的作品路由，把独立 Wbit HTML/CSS/素材同步进 public 目录，再用专属组件嵌入到 /work/wbit-ai-platform。
My Judgment
我判断作品集需要可继续维护的网页结构，而不是一张无法编辑的静态图片。
Outcome
网站详情页展示真实代码布局，而不是一张图片。
03 / Input
“内容没加载出来。”
Codex Action
检查 DOM、滚动位置、控制台和首屏渲染状态，定位到滚动恢复与动画透明度问题，修改 ScrollRestoration 和 Hero。
My Judgment
我没有把它当成“服务器没跑”的问题，而是要求从浏览器状态、DOM 和样式层级一起排查。
Outcome
首页重新打开时稳定显示首屏内容。
07 / Key Case以 Wbit 详情页为例，
以 Wbit 详情页为例，
把 AI 用在真实迭代里。
Wbit 原本只是一个已经做完但没有系统整理的项目。通过 Agent 协作，我把它补充成完整的 UX 案例叙事：项目背景、用户分析、竞品分析、解决痛点、交互详解、视觉推导、页面展示、业务验证和总结。
根据设计反馈反复调整排版、留白、标题层级和视觉气质
把独立详情页同步回个人网站，并保留可维护的文件标注
把修改入口、同步目录和关键组件标注清楚，避免后续维护断档
08 / Problems & Solutions
过程中遇到的问题
内容散
Before
作品和素材分散，案例只有页面结果，缺少完整叙事。
After
用 Agent 协助重构项目背景、用户分析、竞品、交互、视觉和总结。
页面难维护
Before
修改入口不清楚，容易忘记哪些文件控制详情页。
After
给独立详情、网站承载入口和同步目录都加了说明与标注。
效果难判断
Before
只看代码无法判断排版、留白、标题层级和真实观感。
After
每次关键修改后打开浏览器检查真实渲染状态，用设计反馈继续迭代。
09 / Validation Loop让 AI 输出进入
让 AI 输出进入
可验证循环。
AI 生成的东西不能直接当结果。这个项目里，每次重要修改都要经过代码、构建、浏览器和设计反馈， 直到它变成一个可以被使用和继续维护的页面系统。
Code
修改组件、路由、样式、资源路径
Build
运行构建检查类型、路由和静态生成
Browser
打开真实页面，查看 DOM、首屏和资源加载状态
Design Feedback
根据审美、留白、逻辑和文案继续迭代
Context
把关键文件、入口和修改方式沉淀下来
10 / Codex Application Value
Codex 真正帮我放大的能力
设计师的控制力
不是把任务扔给 AI，而是持续定义目标、限制范围、判断质量和决定取舍。
Agent 的执行力
Codex 负责跨文件查找、代码修改、资源同步、运行命令和浏览器验证。
真实项目的连续性
每次修改都进入同一个代码库和同一套页面系统，不是孤立的一次性生成。
可复用的方法
形成从需求澄清、上下文读取、执行修改到验收迭代的一套协作方法。
11 / MethodologyAI Agent 协作不是一句 Prompt，
AI Agent 协作不是一句 Prompt，
而是一套可验证的工作流。
设计师定义问题
明确目标、判断优先级、给出审美反馈和业务边界。
Agent 执行与连接
跨文件修改、同步资源、运行构建、打开浏览器验证。
上下文持续沉淀
把路由、组件、资源和修改入口标注清楚，让下一轮协作可以继续接上。
AI协作Codex AgentVibe Coding前端落地设计工作流