codex作品集应用需打包为可分享的交互式网页：先建portfolio_app文件夹并用codex初始化；再生成内联样式的index.html；接着通过metadata.json或agents.md注入项目数据；绑定data-url并用window.open()实现本地跳转与状态反馈；最后压缩为zip并生成base64分享链接。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要把Codex项目成果打包成一个能直接演示、可链接分享、带交互预览的作品集管理应用，而不是只存一堆本地文件夹或截图。
搭建作品集基础结构
在本地新建一个空文件夹，命名为「Portfolio_App」；打开Codex桌面客户端→点击左下角「+ New Project」→选择该文件夹→权限模式选【auto-edit】；Codex会自动创建project.json和README.md，这是后续所有功能的容器。
这一步不能跳过，否则后续生成的HTML页面、交互逻辑、路由配置将无法被Codex识别为可运行应用，只会变成静态文件堆砌。
用自然语言生成可运行前端界面
在项目对话框中输入：“用HTML+CSS+JS写一个单页作品集应用，包含顶部导航栏（Home / Projects / About）、三个作品卡片区域（每张卡片含标题、简短描述、技术标签、‘View Live’按钮），所有样式内联，不依赖外部CDN，代码写在一个index.html文件里。”
Codex会生成完整可运行的index.html。打开它确认能正常显示——如果空白或报错，说明生成时未启用浏览器操作权限，需返回设置页勾选「允许自动打开浏览器预览」。
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像，然后保存
接入真实项目数据并动态渲染
方法一：从本地Markdown项目文件注入内容
把已有的3个Codex项目（如「AI博客_发布流程」「客户反馈归档」「Figma联动工作流」）各自导出一份metadata.json，放入Portfolio_App/data/目录下；然后在index.html的<script>块末尾追加一段fetch逻辑：<br>fetch('./data/AI博客_发布流程/metadata.json').then(r => r.json()).then(data => { /* 插入卡片DOM */ });</script>
方法二：让Codex自动生成数据层
输入指令：“读取当前项目下所有子文件夹，提取每个文件夹里的AGENTS.md第一行标题和description字段，生成一个projects.json数组，字段包括id、title、desc、tags、url，保存到./data/projects.json。”
【必须确保AGENTS.md存在且首行是#开头的标题】
添加交互能力：点击跳转与状态反馈
第一步：为每个“View Live”按钮绑定data-url属性，值填对应项目的Codex本地路径（如file:///Users/xxx/Codex_Projects/AI博客_发布流程）；
第二步：在index.html底部添加脚本，监听按钮点击事件→调用window.open()打开本地项目文件夹；
第三步：在按钮文字旁插入●，初始为灰色，点击后变为绿色并显示“Launched”。
这三步缺一不可。缺少data-url会导致跳转失败；没加window.open()封装，浏览器会拦截file://协议；不加状态反馈，访客无法判断是否触发成功。
打包成可分享链接
在Codex对话中输入：“把整个Portfolio_App文件夹压缩为portfolio_v1.zip，同时生成一个shareable_link.txt，内容为：https://codex.run/share?code=【base64编码后的zip内容】”；
Codex执行后，你会得到两个文件；把shareable_link.txt里的链接发给他人，对方点击即可在浏览器中直接加载并运行你的作品集应用，无需安装Codex。
