CH.01 · 破冰与引言PAIN POINTS
1.1 · 直出页面的两大极端
直出页面两大极端：
“AI 味明显” vs “太朴素”
CH.02 · 基础材料与设计STYLE & DESIGN.MD
2.1 · DESIGN.md 约束开发
参考设计网站，生成 DESIGN.md 约束开发
先做设计说明，再做页面！不要一上来就让 Codex 自由写代码。
.png)
.png)
黄金 Prompt：“不要直接写代码，请先帮我整理一份
DESIGN.md，明确配色、字体感觉、首屏排版及明确禁止出现的 AI 味。”
CH.02 · 基础材料与设计GPT-IMAGE-2 TO HTML
2.2 · GPT-Image2 抽卡复刻
先用 GPT-Image2 抽卡生图，再复刻 HTML
STEP 01
图像模型抽卡生图
充分利用 GPT-Image2 在UI界面的配色、层次感与构图上的天赋。
STEP 02
Codex 复刻 HTML
把图片丢给 Codex：“请完全复刻这张 UI 图的布局与色彩，用原生 HTML/CSS 实现”。
CH.03 · 初版精修与效率FINE-TUNING & CODE EDITS
3.1 · 局部代码精准引用
告别对话微调的“Token 与时间黑洞”
方法①：局部代码段精准引用
用光标高亮目标 <section> 或 <h2> 代码段进行局部 Inline Edit，避免全量重新生成。
上手直接修改关键 CSS 参数
看懂现代模块化 CSS 后，直接上手修改 gap: 16px、font-size、padding 参数，秒级搞定。
CH.03 · 初版精修与效率COWART CANVAS PLUGIN
3.2 · Cowart 无限画布
Cowart 无限画布：多图对比与圈选标注精修
.png)
全景画布视角
打破纯代码与编译界面的隔阂，将各个 HTML 页面与组件自由平铺在无限画布中。
圈选标注局部修改
在画布上直接圈出不满意的地方并写注释：“按 Cowart 中的标注，替换首屏主视觉并调整裁切。”
CH.03 · 初版精修与效率VISUAL DOM EDITOR
3.3 · HTML 可视化编辑器
自建 可视化编辑器：Figma 级的组件编排体验
.png)
点击即选中 & 双击改文字
无需找 DOM 或 Class，点击元素高亮；开启编辑模式直接在页面上修改标题与段落文案。
直观调间距并干净导出
面板直接滑动调节 Padding/Margin、字号与圆角；导出时自动清除调试工具，生成干净 HTML。
CH.04 · 下班远控与网络MOBILE REMOTING & CC-SWITCH
4.1 · cc-switch 保留官方登录
第三方 API 避坑：开启 cc-switch“保留官方登录”
下班没背电脑？
第二天有重要汇报，下班路上或深夜可以用手机随时远程唤醒 Codex 改代码。
关键配置技巧
使用第三方 API 服务时，默认验证机制可能阻塞手机端。开启“保留官方登录”后，即可无缝连通远控引擎。
CH.04 · 下班远控与网络PROXIFIER vs CLASH TUN
4.2 · Proxifier 进程代理
Proxifier 进程代理：远控顺畅且不掉内网
局限对比：Clash TUN 模式容易重定向全局网卡导致内网 VPN 断开；Proxifier
精细化控制进程，完美平衡远控与公司办公。
CH.05 · 移动端预览闭环AI SCREENSHOT RETURN
5.1 · AI 返图
让 AI 直接返图：渲染截图回传对话框
零跳转即时查看
手机控制改完代码后，不用跳转繁琐目录，直接在对话中查看最新页面效果。
推荐 Prompt
“修改完成后，请直接将渲染后的页面效果图截屏发回给对话框”
CH.05 · 移动端预览闭环IOS SHORTCUTS
5.2 · 快捷指令一键预览
iOS 快捷指令：四步拉起浏览器看最新效果
