返回首页

第17篇:Codex App 边玩边赚钱实战教学:那些不为人知的使用秘诀

✏️ @gengdaJ(逸尘) · Mon May 11
📎 查看原文
📎 来源: @gengdaJ 原帖

cover

上一篇我讲了 Codex App 从 0 到 1 入门,重点是带大家认识 Codex 界面以及进行一些基础配置。

image

地基已经搭建好了,就要开始用 Codex App 干一些真正能提效降本的事情,把它全方位地赋能到业务里面。

今天这篇就带大家进入一些实战场景,体验一下 Codex 那些不为人知的使用秘诀,从基础到略难,从功能到场景,一次性帮你把 Codex 啃透!🔥

  • 牛马打工人必备:用 Codex 做 Word、PDF、PPT(图片型 VS HTML 型)、Sheets 四件套。
  • 手搓酷炫 3D 视频:用 Codex + HyperFrames / Remotion(three.js)做《国产动画十大电影》。
  • 早起早睡身体好:用 Codex 实际制作一个排版精美的分析早睡早起的网站,在 Vercel 上线部署,然后用Codex操控OpenRouter做对比实验,测试新模型Ring的能力。
  • 自媒体人必备:用 Codex 制作图文长教程——让 Codex 自己操控自己,多对话并行,截图打码一把梭。
  • 电商选品上架自动化:Codex + Playwright 操控浏览器,无痛实现拼多多商品批量上架。
  • 边学边玩,再边把钱赚了,是我的目标,也与各位大佬共勉,话不多说,直接开始!

    一、牛马打工人必备:用 Codex 做 Word、PDF、PPT、Sheets 四件套

    以前如果你要做一套活动方案、项目汇报、课程交付、咨询报告、员工培训材料,可能要先花几个月熟练使用这些工具。

    但是现在在Codex里面只需要一句提示词,就能生成排版精美、数据准确的Word、PDF、PPT、Sheets。

    我为了展示Codex生成四件套的能力,做了一个demo:

    📋 复制可用
    请在当前对话里做一个办公四件套演示任务,主题是《Codex App 内容生产工作流》。要求:
    1. 生成 Word 文档、PDF 文件、PPTX 演示稿、XLSX 表格四类真实文件;
    2. 每个文件都要有实际内容,不要空文件;
    3. 生成后告诉我每个文件的真实路径;
    4. 尽量生成一个预览或文件清单,方便我截图放进教程;
    5. 最后给出验收清单,确认四个文件都存在、能打开、不是占位内容。
    

    验收结果: 1.Word 文档验收截图:

    image

    2.PDF 文件验收截图:

    image

    3.PPT 演示稿验收截图:

    image

    4.Sheets 表格验收截图:

    image

    当然,在我没有给出skill或者优化后的提示词的情况下,能做出这样的效果,已经非常优秀了!

    众所周知,现在X最火的PPT制作方法,绝对是打破传统的HTML绘制PPT,现在相关爆火的Skill也是数不胜数,其次直接生成图片PPT也是一个另辟蹊径的办法。

    下面我将用“进阶版”PPT的操作路径给大家带来一些启发:

    路线一:图片型 PPT

    图片型 PPT 的意思是:先让 Codex 生成一张张 16:9 的视觉图片,再把这些图片铺到 PPT 里。

    每一页 PPT 本质上就是一张完整图片。

    效果还是蛮不错的,因为底层是GPT2-imge。

    当然,这种方式生成的PPT并非无法编辑,还是有很多方法滴,如果感兴趣,可以私信找我要文档~

    路线二:HTML 型 PPT

    HTML 型 PPT 是最近非常火的一条路线。

    说白了,就是不用传统 PPT 软件,而是用 HTML、CSS、JS 直接写幻灯片。

    它的好处是:

  • 可以在浏览器里直接预览;
  • 可以做动画;
  • 可以做交互;
  • 可以用代码控制布局;
  • 可以方便截图、导出、录屏;
  • 很适合和 Codex 这种代码执行型工具配合。
  • X上面有很多开源火爆的Skill,大家用Grok搜索一下就能让Codex安装一下使用了。

    image

    二、手搓酷炫 3D 视频:Codex + HyperFrames / Remotion 做《国产动画十大电影》

    前面是打工人刚需,下面开始玩一点酷的,主打一个劳逸结合。

    我之前让 Codex + HyperFrames / Remotion (three.js) 做了一个《国产动画十大电影》的 3D 视频:

    image

    核心思路:

  • Codex 负责写项目、改代码、跑渲染、排查错误
  • three.js 负责 3D 画面
  • Minimax负责旁白配音
  • yt-dlp下载部分视频
  • Remotion / HyperFrames 负责把网页动画变成视频
  • 本地工具统一音量
  • 最后输出 MP4 成片
  • 详细步骤就是:

    1.先把目标视频的需求给Codex说清楚——“我需要一个做《国产动画十大电影》的视频,16:9....(更多描述参考下面的模板),你自己去网上找素材下载。”

    2.和Codex对齐需求——”如果有任何不清楚的地方,或者需要我继续判断的地方,请一定要停下来问我问题,进行信息对齐。“

    3.开启“超高”和“完全访问权限”,让Codex@browser和@computer use自己去操作,当然@chrome也可以(但是我一直超时没成功过)。

    4.得到成片,然后就是把不满意的地方和Codex说,让它修改。

    当初我想要做这么一个视频的思路,很简单,我就是想验证Codex“自动写脚本——搜索素材——自动下载——自动识别高光片段——自动配音——自动剪辑”这条链路跑通。

    然后迁移到商业化就是,调用GPT2-image、seedance2.0、elevenlabs等API,90%自动化地完成上述整个思路,赋能到AI流量变现、AI电商带货、AI前端获客、AI广告宣传等真实场景里面。

    至于怎么写脚本、怎么生成图片、怎么制作视频,这是一门大学问,需要千锤百炼去苦修试错,不是朝夕就能学会的,而且细分到每一个垂直领域所需要掌握的技巧又是完全不同的。

    但是怎么生成一个视频,快速上手玩,有一个通用模板可以给大家快速上手:

    📋 复制可用
    目标:
    受众:
    目标平台:unspecified / YouTube / Shorts / Reels / TikTok / 官网 / 会议现场
    时长:
    比例 / 分辨率 / FPS:
    语言:
    场景数量与每场时长:
    主体 / 角色:
    动作:
    场景 / 背景:
    镜头 / 构图:
    光线 / 色彩 / 风格:
    字幕 / 画面文字:
    音频:旁白 / 语言 / 音色 / 语速 / 音乐 / SFX
    转场:
    关键帧 / 参考图 / 角色一致性资产:
    品牌 / 法务 / 无障碍:
    数据变量 / 占位符:
    输出要求:先给 scene list,再给 final prompt,再给 render metadata JSON
    

    关于纯AI视频这一块,我之前这篇推文也有分享过我汇总的影视基础知识:

    image

    三、早起早睡身体好:一条提示词做网站,并部署到 Vercel

    现在玩 AI 的人,很多都有一个共同问题:作息乱。

    原因可能就是。。。AI太好玩了——本来只是想改一个提示词,然后顺手又刷了一堆X、莫名其妙调用Codex跑一个任务,最后这个任务又停不下来了。。。这就是曾经的我。。。

    我知道用AI很爽,但身体遭不住,健康才是革命的本钱。所以我趁这次写“Codex代码教程“的机会,让 Codex 做了一个网站,主题是“早睡早起身体好”

    让Codex写代码,跑出一个小网站或者小App真的很简单:

    📋 复制可用
    请重新帮我生成一个网站,主题是早睡早起。
    要求:
    1. 页面要排版精美;
    2. 可以有 3D 动画效果;
    3. 分析早睡早起的好处;
    4. 给出普通人能执行的步骤;
    5. 做成真实可运行的网站;
    6. 最后启动本地预览,并部署到 Vercel。
    

    涉及到上线部署(别人通过链接能访问你的这个网站)这里可能需要你配置一下Vercel插件(“插件”里面搜Vercel就行):

    image

    Codex 最后做出来的不只是一个静态页面(已经部署到:https://codex-1-html-css-js-2.vercel.app/,大家可以自由访问),他还做了:

  • 一个 3D 昼夜节律视觉场景;
  • 早睡早起好处说明;
  • 晚间关机流程;
  • 早晨启动流程;
  • 7 天调整计划;
  • 自测打分;
  • 常见误区;
  • 参考资料和免责声明。
  • 当然,这只是一个很基础的网站,如果想要做前端后端都完备的网站,那么难度会高一些,但是没关系,Codex都能帮你解决的,记得选择“计划模式”,先有方案,再写代码,效果会好很多。

    image

    image

    除了让Codex自己写项目之外,其实还能白嫖官方网页版AI生成的代码——我直接打开相应的网页版AI,把我的项目需求告诉它,让它返回相应的代码,这一招在测试新模型的时候特别好用。

    Openrouter上面经常会有新的模型,这个时候很多人很懒,只想等着AI博主测试完了看效果,但是这样其实自己永远不清楚模型的真实能力。

    一个一个测确实费时间,其实有一个小技巧——直接让Codex去Openrouter上测试。

    最近 OpenRouter 上又新出现了一个模型:Ring-2.6-1T (free),是蚂蚁家的第一个推理大模型()。

    我本来想把 Ring-2.6-1T 接到 Claude Code 里面,然后让 Codex 去操作 Claude Code,看这个模型在 agent 编程场景里的真实表现。但实际操作的时候遇到一个限制:Codex 现在不能直接操控我本机里已经打开的 Ghostty / Claude Code 终端界面,所以这条链路不好测。

    于是我换了一个更直接的办法:让 Codex 打开 OpenRouter 官网,在 Chat Playground 里选择 Ring-2.6-1T (free),然后把上面那条非常普通的“早睡早起网站”提示词和本地 frontend-design skill 里的审美原则提炼成提示词丢给它,让它直接生成一个单文件 HTML 网站。

    image

    它生成出来的版本,我也部署了一份,大家可以直接打开看效果:

    https://ring-sleep-site.vercel.app/

    老实说,这个结果非常不错吧,简洁美观。白嫖Token成功!

    所以,如果你刚好想用一种高效的办法测试新模型的能力,我建议你可以通过 Codex + OpenRouter 免费试试 Ring 模型。国产大模型现在确实不是只能看参数和榜单,拿来干活也已经很有水平了。

    此外,这个思路其实还可以迁移,Codex里面只能用GPT5.5模型,但是网页端GPT可以用GPT5.5 pro,据说这个模型比Codex写的代码好用,所以我这个思路迁移到GPT5.5pro可以说是非常牛逼!这个秘密别公开出去了,咱自己用就行。。。

    image

    四、自媒体人必备:用 Codex 制作图文长教程

    这一节是我自己非常常用的一个场景,我相信会对很多写长文章恐惧症的朋友也会有所帮助。

    自媒体人最痛苦的是什么?不是不会写,而是“搜索素材——找选题——搭结构——写文章——配图片/视频”这套流程花费时间太多了,往往写一篇文章几个小时就过去了。。。

    所以,我直接干脆让Codex来写,我上一篇爆了92W阅读的《Codex App 从0到1完整入门教程:把这个超级APP的每一个细节抽丝剥茧讲清楚》其实80%都是由Codex完成!

    包括文章、截图、打码、配封面图,我做的就是20%的纠正和补充工作。

    image

    但是,为什么很多人用AI写出的就是一坨。。。而我能用Codex写出那么高阅读的文章?这就涉及到“提示词的准确度”和“风格迁移学习”。

    写作,不是给AI一个方向,让它琢磨,而是你要把“自己写这篇文章的思路”告诉它,让它帮你加速这个过程,这篇文章的核心和内容基本和你脑海想的别无二致,只是AI把这个琐碎的过程给自动化了。

    所以,有一篇AI写的好文之前,是这个写作的人脑海里面有画面、有思路。

    我拿我之前的这篇文章举个例子:我知道要介绍Codex的主界面以及Codex的设置,那么我给Codex的指令就是:

    📋 复制可用
    “你来操作Codex APP本身,你挨个分析Codex主界面每个按钮的功能,然后再打开Codex的设置,按照左边导航栏的顺序,一页一页仔细地介绍。注意把隐私的地方打码。@computer use”
    

    然后是把自己过去写作的经验沉淀为一个Skill,方便Codex了解自己的写作习惯、语言风格,才能写出更贴合自己水平的好文。比如,我自己就沉淀了一个“Yichen tutorial writing”(用过去的长文章提炼的),然后让Codex调用这个skill来帮我写作

    下面是另外一个实战demo,大家可以看看效果:

    image

    还有一个更牛逼的操作,让Codex同时开几个对话跑任务,自己监控自己,比如现在这篇文章的初稿,就是Codex开了五个窗口跑完的,大幅提高了效率!

    五、电商选品上架自动化:Codex + Playwright 实现拼多多商品批量上架

    最后讲一个真正能降本的业务场景。我之前和一个电商的老板连麦,他现在主要做拼多多,店铺在迅速扩张。

    他们遇到的痛点非常典型:

  • 链接数量很多;
  • 一个链接下面有多个 SKU;
  • 表格里有几千行数据;
  • 当前在售链接有几百个
  • 开新店时,需要重新建几百个商品链接;
  • 每个 SKU 都要填库存、拼单价、规格编码、商品编码、参考价等字段;
  • 日常还要维护价格和编码变化;
  • 人工对着表格往后台填,慢,而且容易错。
  • 这就是非常适合自动化的场景,因为它不是创意判断。

    它本质上是:

    把表格里的结构化数据,稳定地填进网页后台。

    第一条思路:Computer Use

    我最开始给他的思路,是用 Codex 的 Computer Use。

    也就是让 Codex 直接看屏幕、操控电脑、打开表格、识别后台字段,然后把内容填进去。

    因为我想着Codex可以操作电脑,之前我跑了相关的数据库任务、X长文章任务都非常丝滑,所以推荐他首先用这个

    只要把表格路径、后台页面、字段对应关系讲清楚,Codex 就可以像一个会看屏幕的人一样操作。

    但是Codex拒绝访问拼多多后台,所以只能换第二条思路——用Codex调用playwright!

    image

    第二条思路:Playwright

    Playwright 是什么?你可以把它理解成“让代码操控浏览器”。

    它不是靠眼睛看屏幕,而是直接识别网页里的按钮、输入框、下拉框。

    这个其实更适合批量任务。因为Computer Use 像一个人坐在电脑前看屏幕操作,Playwright 像一个自动化脚本,直接去找网页元素,不会抢鼠标和屏幕。

    然后这条思路就打通了:

    flowchart LR A["商品底表"] --> B["整理字段映射"] B --> C["Playwright 打开后台"] C --> D["填写商品基础信息"] D --> E["填写 SKU 价格和库存"] E --> F["上传图片和视频"] F --> G["截图暂停人工确认"] G --> H["确认后批量运行"] H --> I["输出成功/失败日志"]

    image

    Codex 在这里负责什么

    这个项目里,Codex 不只是调用了一个playwright,它负责了整条链路:

  • 读取原始 Excel;
  • 分析哪些列有用;
  • 重新整理成标准上架表;
  • 让你确认字段映射;
  • 写 Playwright 自动化;
  • 用已登录浏览器打开拼多多后台;
  • 先跑一个商品;
  • 截图暂停,让人工确认;
  • 记录成功、失败和错误截图;
  • 稳定后批量跑;
  • 最后把流程沉淀成 Skill。
  • 把成功的经验沉淀成skill,这就从“一次性帮我填表”,直接升级成“公司可复用的自动化流程”,大大节约了后续的踩坑成本

    image

    六、常见踩坑与解决方案

    跑完这五个场景,我踩过的坑比成功案例多得多😅。下面把最有代表性的几个整理出来,可能会帮你节省大量时间。

    坑1:Computer Use 不是万能的

    现象:让 Codex 用 Computer Use 操作拼多多后台,直接被拒绝访问。

    根因:部分网站会检测自动化操作(浏览器指纹、WebDriver 标记、无头模式等),拼多多这类平台的反爬机制尤其严格。Computer Use 本质是「看屏幕 + 模拟键鼠」,和真人操作的行为模式依然有差异。

    解法:

  • 首选 Playwright:它不是模拟键鼠,而是直接走 Chrome DevTools Protocol 操控浏览器内核,配合 `stealth` 伪装更接近真人;
  • 复用已登录浏览器:让 Playwright 连接你手动登录过的 Chrome 实例(`--remote-debugging-port`),绕过登录态检测;
  • Computer Use 和 Playwright 的分工:Computer Use 适合开放网站(Google 搜索、文档编辑、X 发帖),Playwright 适合有反爬保护的后台系统。
  • 坑2:Codex 不能操控本机已打开的终端

    现象:想让 Codex 去操作本机 Ghostty / Claude Code 终端窗口,发现它只能看屏幕,无法接管输入。

    根因:Codex 的 Computer Use 能识别屏幕内容,但不能向外部终端进程发送命令。同时终端类应用的界面元素(光标位置、输入焦点)对自动化来说是黑盒。

    绕路办法:

  • 如果目标是「用某个网页版 AI 的能力」(如 ChatGPT Pro、Ring),让 Codex 直接打开网页版操作;
  • 如果目标是「让 Codex 调用 Claude Code」,目前不可行,需要等 Codex 放宽白名单。可以考虑用 Codex 直接完成 Claude Code 能做的事情;
  • 在 Codex 内置终端里直接执行 CLI 命令 -- 这个是可以的,Codex 对自己的终端有完整控制权。
  • 坑3:提示词给方向不给思路 → 产出垃圾

    现象:跟 Codex 说「帮我写一篇关于 XX 的文章」,输出确实是一坨。

    根因:Codex 不知道你的知识结构、审美偏好、目标读者的认知水平。你给方向,它就自由发挥;你给思路,它就加速执行。

    解法:

  • 写之前自己搭框架:核心观点 → 文章结构 → 每段要点(一句话就行);
  • 把框架作为提示词给 Codex,让它「加速流程」,不是「从零创作」;
  • 沉淀写作风格 Skill(用你过去的高质量文章提炼),让 Codex 模仿你的语气和排版习惯。
  • 七、跑完这五个场景后,我对 Codex 的理解

    如果只把 Codex 当聊天助手,对话一下,实在就太浪费了。。。

    你可以用它来生产文字、图片和视频——写图文教程(自媒体)、做精美的hyperframes视频(自媒体)、AI视频带货、接广告商单

    你可以用它来解析微信聊天数据(https://github.com/mcncarl/yichen-skills/tree/main/wechat-local-vault)——赋能私域、提升话术、业务挖掘

    你可以用它来自动化操控浏览器——电商AI提效、自媒体多平台同步

    你可以用它来做AI PK——打开网页,同时调用gemini、chatgpt、claude、grok等网页版AI的最强模型,来帮你深度研究或者思考

    你可以用它来自动测试Openrouter的新模型,看一下每次的神秘模型的能力边界

    你可以用它来调用监督别的AI干活——这一步的潜力是无限大的,但是唯一遗憾的是Codex不能监督别的终端干活,也就是说不能去监督Claude Code,希望以后能够放宽白名单。

    八、我建议的小白学习路线

    如果你是刚开始用 Codex App,不要一上来就挑战最复杂的电商自动化。

    建议按这个顺序:

  • 先让它生成几张图片,提示词可以去苍何老师的提示词网站学习(https://gpt-image2.canghe.ai/);
  • 再让它生成 Word、PDF、PPT、XLSX;
  • 再让它做一个 HTML 小网页;
  • 再让它启动本地预览;
  • 再让它部署到 Vercel;
  • 再让它做图文教程;
  • 再尝试 HTML PPT;
  • 再尝试视频动画;
  • 最后再碰业务自动化。
  • 这个顺序会比较丝滑,因为你会一点点建立和Codex信任——先看到它能生成资料、网站,看到它上线,看到它操作浏览器。

    最后你才会真的理解:哦,原来 Codex App 不是一个聊天框,它是无所不能的超级助手!

    九、关于价格和使用事项

    关于Codex的使用方法:免费版两个对话就用完了,所以大家上手一般至少需要充值一个GPT的Plus会员,但是我这种用量比较大的就开了个100刀的,实测下来一周差不多用完。

    如果有需要GPT Plus、pro充值的朋友,可以来找我(yichen10801或yichen365ai),帮大家节省充值时间同时,我会给出几乎成本价,和大家交个朋友。

    如果大家在和Codex对话过程中遇到以下情况:

    image

    解决办法是:

    第一,不要只配置 `HTTP_PROXY`、`HTTPS_PROXY`、`ALL_PROXY`,还要补上 WebSocket 用的 `WSS_PROXY`、`WS_PROXY`,因为新对话可能走的是 `wss://` 连接; 第二,把这些代理变量写进 `~/.codex/config.toml`,让 Codex 的子进程能用代理; 第三,再用 `launchctl setenv` 把同样的代理写进 macOS 图形应用启动环境,这样从 Dock/Finder 打开的 Codex Desktop 也能吃到代理; 第四,设置完成后必须完全退出 Codex 再重新打开,不是只关窗口,因为旧进程不会自动继承新的代理环境。 核心思路就是:同时覆盖 HTTP 代理、WebSocket 代理,以及 Codex Desktop 自己的启动环境。

    最后,祝大家使用Codex愉快!如果有业务场景繁琐、需要优化的老板,也欢迎联系我。

    image

    image

    image

    📎 出典: @gengdaJ 原文

    cover

    前回はCodex Appのゼロからの入門編をお届けしました。Codexの画面構成と基本設定を中心に解説しました。

    image

    基礎が整ったので、いよいよCodex Appで本当に効率化・コスト削減につながる作業を始め、ビジネスにあらゆる角度から活用していきましょう。

    今回の記事では、実戦的なシーンをいくつか体験しながら、Codexのあまり知られていない活用秘訣をご紹介します。基礎からやや高度な内容まで、機能からシーンまで、Codexを一気にマスターしましょう!🔥

  • 社畜必須:CodexでWord・PDF・PPT(画像型VS HTML型)・Sheetsの四種神器を作成。
  • クールな3D動画を自作:Codex + HyperFrames / Remotion(three.js)で「国産アニメ映画トップ10」を制作。
  • 早寝早起き:Codexで早寝早起きを分析する美しいレイアウトのWebサイトを作成し、Vercelにデプロイ。さらにCodexでOpenRouterを操作し新モデルRingの能力を比較検証。
  • クリエイター必須:Codexで画像付き長文チュートリアルを作成——CodexにCodex自身を操作させ、複数チャットを並行実行し、スクリーンショットからモザイク処理まで一括で。
  • EC選品・出品の自動化:Codex + Playwrightでブラウザを操作し、Pinduoduoへの商品一括出品をシームレスに実現。
  • 遊びながら学び、ついでに収益化も——これが私の目標です。前置きはこのくらいにして、早速始めます!

    一、社畜必須:CodexでWord・PDF・PPT・Sheetsの四種神器を作成

    これまで、イベント企画書・プロジェクト報告・コース教材・コンサルレポート・社員研修資料などを作るには、まず数ヶ月かけてこれらのツールを使いこなせるようになる必要がありました。しかし今はCodexでたった一行のプロンプトで、美しいレイアウトと正確なデータを含むWord・PDF・PPT・Sheetsを生成できます。

    Codexの四種神器作成能力を紹介するため、以下のデモを行いました:

    📋 コピペ可
    このチャットでオフィス四種神器のデモタスクを実行してください。テーマは「Codex App コンテンツ制作ワークフロー」。要件:
    1. Word文書、PDFファイル、PPTXプレゼンテーション、XLSXスプレッドシートの4種類の実ファイルを生成;
    2. 各ファイルに実際のコンテンツを含め、空ファイルにしない;
    3. 生成後、各ファイルの実際のパスを通知;
    4. スクリーンショットをチュートリアルに使えるよう、プレビューまたはファイル一覧を生成;
    5. 最後に4ファイルすべてが存在し、開け、プレースホルダーでないことを確認する検収チェックリストを提示。
    

    検収結果:1.Word文書 / 2.PDFファイル / 3.PPTプレゼンテーション / 4.Sheets スプレッドシート

    image

    image

    image

    image

    もちろん、スキルや最適化されたプロンプトを与えていない状態でこのクオリティは非常に優秀です!

    ご存知の通り、現在Xで最も話題のPPT作成方法は、間違いなく従来の殻を破ったHTML描画PPTです。関連するバズりスキルも数え切れないほどあります。以下では「応用編」PPTの操作パスで皆さんにヒントをお届けします。

    ルート1:画像型PPT

    画像型PPTとは:まずCodexに16:9のビジュアル画像を1枚ずつ生成させ、それらの画像をPPTに配置する方法です。各スライドは本質的に1枚の完成画像です。GPT2-imageがベースなので、かなり良い仕上がりになります。もちろん編集可能です。興味があればDMでどうぞ。

    ルート2:HTML型PPT

    HTML型PPTは最近非常に注目されています。従来のPPTソフトを使わず、HTML・CSS・JSで直接スライドを書きます。メリット:ブラウザで直接プレビュー可能;アニメーション・インタラクションが作れる;コードでレイアウト制御可能;スクリーンショット・エクスポートが容易;Codexとの相性が抜群。Xには多くのOSSスキルがあります。Grokで検索すれば使えます。

    image

    二、クールな3D動画を自作:Codex + HyperFrames / Remotionで「国産アニメ映画トップ10」

    ここからは少しクールなことを。以前Codex + HyperFrames / Remotion (three.js) で3D動画を作りました。

    image

    基本構想:Codexがプロジェクト作成・コード修正・レンダリング実行・エラー調査を担当。three.jsが3D映像。Minimaxがナレーション。yt-dlpが動画DL。Remotion / HyperFramesがWebアニメを動画に変換。ローカルツールで音量統一。最終MP4出力。

    詳細手順:1.目標動画の要件をCodexに明確に伝える。2.要件すり合わせ——不明点は一旦停止して質問。3.「超高」と「フルアクセス」をオンにして@browserと@computer useで操作させる。4.完成品の不満点を修正。

    当初この動画は「自動スクリプト→素材検索→自動DL→ハイライト検出→自動ナレーション→自動編集」のパイプライン検証が目的でした。そして商業化すればGPT2-image・Seedance 2.0・ElevenLabs等APIで90%自動化し、AIトラフィック収益化・EC・集客・広告に活用できます。

    動画を作り始めるための汎用テンプレート:

    📋 コピペ可
    目標:/対象視聴者:/対象プラットフォーム:/長さ:/アスペクト比/解像度/FPS:/言語:
    シーン数:/主体/キャラクター:/アクション:/シーン/背景:/カメラ/構図:
    光/色彩/スタイル:/字幕/画面テキスト:/音声(ナレーション/声色/速度/音楽/SFX):/トランジション:
    ブランド/法務/アクセシビリティ:/出力要件:シーンリスト→最終プロンプト→レンダリングメタデータJSON
    

    image

    三、早寝早起き:一行プロンプトでWebサイトを作りVercelにデプロイ

    AIが楽しすぎて生活リズムが乱れる——かつての私です。健康こそが革命の元手。Codexに早寝早起きサイトを作らせました。

    📋 コピペ可
    早寝早起きをテーマにしたWebサイトを生成。要件:1.美しいレイアウト 2.3Dアニメーション 3.メリット分析 4.実行可能ステップ 5.実際動作 6.Vercelにデプロイ。
    

    Vercelプラグイン(プラグインで検索)の設定が必要かもしれません。

    image

    出来上がったサイト(https://codex-1-html-css-js-2.vercel.app/):3D概日リズム+メリット解説+シャットダウン/起動ルーティン+7日間プラン+自己評価+よくある誤解+参考資料。

    image

    さらにWeb版AIのコードを無料活用する技:CodexでOpenRouterを操作し新モデルをテスト。Ring-2.6-1T (free)を試し、https://ring-sleep-site.vercel.app/ にデプロイ。かなり良い結果。国産大規模モデルは十分実用的です。この発想をGPT-5.5 Proに適用すればさらに強力。この秘密は内緒で。

    image

    四、クリエイター必須:Codexで画像付き長文チュートリアルを作成

    長文が苦手な方に役立つセクションです。「素材検索→テーマ選定→構成→執筆→画像配置」に数時間——私はCodexに書かせています。前回92万インプレッションの記事は80%がCodex製。記事・スクリーンショット・モザイク・カバー画像含め、私は20%の修正だけ。

    image

    重要なのは「方向性」ではなく「思考プロセス」をAIに伝えること。例:

    📋 コピペ可
    Codex APP自体を操作して、メイン画面の各ボタン機能を順番に分析し、設定を左ナビ順に1ページずつ丁寧に紹介。プライバシー部分はモザイク処理。@computer use
    

    過去の執筆経験をスキル化(私は「Yichen tutorial writing」)してCodexに呼び出させれば、自分のスタイルで書けます。

    image

    さらにCodexに5つのウィンドウを並行実行させ、自分で自分を監視させることで効率が大幅UP。

    五、EC選品・出品の自動化:Codex + PlaywrightでPinduoduo商品一括出品

    EC事業者の典型的課題:リンク数膨大、複数SKU、数千行データ、新店舗時に数百リンク作成。各SKUに在庫・単価・規格コード等入力。手作業は遅くミスも多い。これはクリエイティブ判断ではなく、構造化データの安定入力——自動化に最適。

    1つ目のアプローチ:Computer Use → CodexがPinduoduo管理画面へのアクセスを拒否 → Playwrightへ切替。

    image

    Playwrightは「コードでブラウザ操作」。目で見るのではなくWeb要素を直接識別。Computer Useより一括タスク向き。

    パイプライン:商品マスターテーブル→フィールドマッピング→Playwrightで管理画面→商品基本情報入力→SKU価格・在庫入力→画像/動画UP→スクリーンショット・人手確認→一括実行→成功/失敗ログ出力。

    image

    Codexの役割:Excel読み取り→列分析→標準テーブル再整理→フィールドマッピング確認→Playwright自動化記述→ブラウザ操作→テスト実行→スクリーンショット・確認→ログ記録→一括実行→スキル化。成功体験をスキル化すれば「会社で再利用可能な自動化フロー」に。

    image

    六、よくあるハマりポイント

    ハマり1:Computer Useは万能ではない——一部サイトは自動化検出。Playwrightを第一選択に。ログイン済みブラウザ再利用でログイン状態検出回避。Computer Useはオープンサイト向き、Playwrightはアンチスクレイピングのある管理画面向き。

    ハマり2:Codexはローカルターミナルを操作できない——外部ターミナルプロセスにコマンド送信不可。回避策:Web版AIを直接操作、またはCodex内蔵ターミナルでCLI実行(これは可能)。

    ハマり3:方向性だけで思考プロセスがない→ゴミ出力——書く前に自分でフレームワークを組み、それをプロンプトとして渡す。執筆スタイルのスキルを蓄積。

    七・八・九(まとめ)

    Codexを単なるチャットアシスタントにしておくのはもったいない。文字・画像・動画制作、WeChatチャット解析、ブラウザ自動操作、AI対決、OpenRouter新モデル自動テスト、他のAI作業監視——可能性は無限大。

    初心者おすすめ学習順:画像生成→Word/PDF/PPT/XLSX→HTML小Webサイト→ローカルプレビュー→Vercelデプロイ→画像付きチュートリアル→HTML PPT→動画アニメーション→ビジネス自動化。

    価格:無料版は2回で終了。最低Plus会員。ヘビーユーザーはPro(100ドル/週)。チャージ必要な方はyichen10801またはyichen365aiまで。プロキシ設定はHTTP_PROXY等に加えWSS_PROXY/WS_PROXYも必要。~/.codex/config.tomlとlaunchctl setenvの両方に設定し、Codex完全終了後再起動。

    image

    image

    image