用Codex手搓个人网页：我的AI协作实战经验
作者学习了Punk大佬的网页系列教程，利用周末两天时间，通过Codex独立完成了一个个人网页的开发并成功上线。文章分享了三个核心经验：1. 开发前需与AI充分沟通设计方案，确保方案清晰可执行；2. 迭代时可将对标网页的动效录屏给AI，通过拆帧理解并复述确认；3. 若无法清晰描述动效，可让ChatGPT生成布局图，再交给Codex实现。作者强调与AI交互的重要性，并计划继续优化网页。
相关文档
Remotion小白裁缝秘诀Ⅰ：组件和案例演示
本文是Remotion入门系列的第一篇，介绍基于React的视频制作工具Remotion及其常用组件。作者整理了十个官方动态案例，包括旋转文字轮、文字高亮、画中画转场、柱状图、地图飞行、胶囊字幕、示波器、屏幕消息、旋转卡片和液态轮廓，说明各自适用场景。文章还推荐了Remotion Elements、RenderComp Free、RemotionUI、Remocn、snapcn等资源站点，帮助读者通过代码控制视频效果，更顺畅地与AI协作制作产品演示和口播动画。
AI Design Skills 开源：一套让 AI 编程工具做出好设计的规则
作者介绍了开源项目 AI Design Skills，目前提供 landing-page-design 技能，适用于 Claude Code、Cursor、Codex 等可读取规则文件的 AI 编程工具。它不是现成模板，而是一套从内容到视觉的制作规则：先明确产品定位与用户目标，再组织页面结构；统一字体、间距、配色和动效等视觉系统；并补齐按钮悬停、加载、空页面、报错、表单校验、移动端适配和无障碍等交付细节，避免 AI 生成千篇一律的默认样式。评论区还交流了表单校验保留已填内容等实用经验。
Codex-OpenPencil 快速上手篇
本文是 Codex-OpenPencil 插件的快速上手教程，以设计一个服装购物 APP 为例，完整演示从安装、打开画布、确认风格、扩展页面、选中元素口喷修改，到图片生成与搜索、保存设计资产，再到设计稿转代码的全流程。插件免费开源，提供支持平移缩放的无限画布，Codex 负责理解需求并调用工具，OpenPencil 负责设计展示与编辑，可 100% 还原生成 HTML、Vue、React、SwiftUI 等框架代码。文章还介绍了看板、教程图、对比图、PPT 等其他应用场景及常见问题处理方法。
Apple Design：提升 AI 界面设计品味的 Skill 合集推荐
作者分享在开发 APP 时使用的 Apple Design Skill，它将 Apple WWDC 设计分享中的界面与动效原则整理成 AI 指导，帮助改善界面层级、反馈和整体连贯性，效果接近苹果原生 App 风格。该 Skill 来自 Linear 设计师 Emil Kowalski 开源的 AI Agent Skills 项目（GitHub Star 近 4w），还包括设计工程总则、动画制作与审查、原型方案生成、移动端网页优化、Swift 编写、UI 组件库选择等多个实用 Skill，适合前端与设计开发场景使用。
用 Astra 高保真复刻视觉动效的 4 个实操案例与提示词秘诀
作者通过四个实操案例展示如何用 Astra 进行视觉动效高保真复刻：高级动效视频复刻、业务介绍动效视频改写、ElevenLabs 动态背景复刻（WebGL+GLSL 技术栈）以及语音交互光球效果移植。文章强调分步验证、单点把控的方法论，如先验证背景再加图文音轨、把视觉效果与交互功能拆开验证等，并分享核心提示词「一边参考原片一边修改直到近乎一样」，总结 AI 自查与人工定点反馈两种协作路径，附通用 Prompt 模板与止损建议，展示普通人无需懂代码也能参与 AI 视觉制作的生产力价值。
Codex 实战系列｜零代码个人网站搭建
本文介绍了如何用 Codex 在 30 分钟内零代码搭建个人网站。作者 Miles Ma 详细讲解了完整流程：在 Spaceship 购买域名并注册 Cloudflare；在 Codex 中新建项目并整理个人资料、文章和图片；让 Codex 通过 Computer Use 分析参考网站（如 Immersive Garden）的结构、风格和交互；确认规划后生成第一版，并在浏览器中逐处迭代修改；最后通过 wrangler 授权部署到 Cloudflare 并绑定域名上线。文章还介绍了如何利用子域名（如 cv、course、tools）在同一域名下扩展在线简历、课程和工具页面，实现一人低成本持续维护个人站点的最佳实践。
Codex 实战系列｜零代码微信小程序开发
本文是 Codex 实战教程，作者以「一页」阅读打卡小程序为例，完整演示从零到发布微信小程序的流程：先用 Figma 确定页面设计，可通过 Codex 生成 SVG 草案再导入 Figma 制作可点击原型；再通过 Figma MCP 让 Codex 读取设计稿，按 WXML、WXSS、JavaScript 技术栈生成微信原生小程序代码；随后导入微信开发者工具模拟运行、调试报错；最后手机预览、上传体验版并提交审核发布。文章面向零代码基础的读者，强调只需写清楚提示词和提供设计稿，无需看懂代码即可完成开发。
Multica 从入门到上手，搭建你的第一支 AI Agent 团队
本文是 Multica 的入门教程，介绍如何搭建和管理 AI Agent 团队。Multica 将多个 AI（如 Codex）聚合到同一平台协作，内置负责人 Mika 负责任务拆解与分配。文章讲解了安装配置、创建智能体、发送任务、审核结果、组建小队等核心用法，并解释了 Skill、自动化、CC Switch 等功能。作者强调关键权限（付费、删文件、发布等）应保留人工确认，最后给出适合小白的七步上手顺序。
ChatCut 安装、初始化与使用教程
本文介绍了ChatCut视频剪辑工具的运行逻辑、安装配置方法及实际使用流程。ChatCut通过Codex代理调用云端服务完成剪辑、配音、字幕和动效生成，支持可视化编辑与导出。文章详细解析了从需求输入到成片输出的全过程，并评价了其优缺点。
保姆级教程：AI视频动效系统
作者介绍了一套自研的视频动效系统，旨在利用AI技术辅助视频制作。该系统通过GitHub开源，用户只需三步即可生成专业视频动效：安装系统、修改文案数字、渲染下载。此外，该系统可与Codex结合，甚至喂给本地Agent（如Cola）进行动效管理。
从0到1速通Codex终极保姆教程
本文是一份关于OpenAI Codex的详细保姆级教程。作者介绍了Codex的安装、界面设置、模型选择、AGENTS.md配置以及Skills插件系统的使用。通过实战演示，文章手把手教你如何使用Codex从零开发网页和App，展示了其作为顶级Agent产品的强大自动化开发能力和批注修改功能。
画过10,000+张 UI 高保真，我的设计审美心得（1）：8 条原则 + 5 个常用 AI 设计 Skill
作者基于 10 年 UI/UX 设计经验，结合 AI 工具实践，总结出一套设计审美方法论。文章实测了 5 个 GitHub 上星数最多的 AI 设计 Skill：UI UX Pro Max（自动匹配行业风格）、Taste Skill（原创设计方向）、Impeccable（逐块打磨去 AI 味）、Emil Kowalski Skills（动效细节）、Hallmark（上线前检查），并配以场景演示。作者还分享了 8 条可复用的设计原则，包括先定义再动手、拆解好设计不照搬、先出全貌再逐块改、统一视觉规则等，强调工具在变但好的设计判断力依然无法被 AI 替代。
