文章介绍了 Codex 的 UI/UX 设计增强工具 UI UX Pro Max，包含 192 条行业设计规则、79 种 UI 风格、192 套配色方案、74 种字体组合，并支持 React、Next.js、Vue、Flutter 等 22 种技术栈。作者演示了如何通过一段提示词在 Codex 中安装配置该 Skill，并用其生成高端 AI SaaS 官网，解决了以往 AI 生成页面廉价感强、配色布局千篇一律的问题。评论区也讨论了 Skill 作为能力封装新形态的意义与实际效果。
本文是一篇 Vibe Coding 网页动效教程（上篇），旨在帮助读者用准确的术语向 AI 描述网页动效。文章先介绍 UI、UX 和 Vibe coding 的概念，提出网页动效的四层结构：技术工具（CSS、Motion、GSAP、Three.js 等）、触发方式、动效类型和 UX 规则。上篇重点讲解触发方式（悬停、焦点、点击、指针、视口、滚动、手势、页面加载、状态变化、定时）及动效类型的基础部分（Easing、Duration 等），每个词条配有可直接使用的提示词示例，帮助读者清晰表达脑中的动效效果。
作者开发了一个可在 Claude Code 或 Codex 中使用的 Previz 独立版 Skill，用于在 AI 视频生成前对提示词进行导演台分镜预览。该工具将视频提示词整理为画幅、时长、空间陈设、人物和逐镜描述，转换成三维场景数据，并用 three.js 在浏览器中渲染成三维白模导演台，支持逐镜播放、自由环视、场记平面图、轴线与接缝检查等，不消耗图像或视频生成额度。文章详细介绍了提示词的识别拆分、缺失信息的处理规则、景别与机位换算、空间坐标组织、场景 JSON 结构、引擎预制件以及自检机制。
作者分享了使用 Codex 结合 Remotion 制作动画的实战经验。文章指出写代码反而是最简单的部分，难点在于动画的节奏、连续性和可读性等细节判断。作者介绍了 Remotion 的帧驱动原理、useCurrentFrame 和 interpolate 等核心 API，以及如何通过 Remotion 官方 Agent Skills 让 Codex 更高效地生成动画代码。文章还系统讲解了时间、状态、Keyframe、Easing、Spring 等动画基础概念，并结合自媒体口播视频的 A-roll、B-roll、动画三类画面整合需求，说明了构建完整视频生产工作流的方法与踩坑经验。
文章展示了作者开发的系列交互式科学应用 Demo，包括黑洞时空扭曲可视化、达芬奇扑翼机机制实现以及科幻彗星探测器等。作者结合了 GPT Images、Nano Banana 2 进行设计，并使用 Gemini 3.1 Pro 编写代码。文章还分享了设计灵感和前端控件交互示例，旨在打造儿时向往的科学杂志风格的互动体验。
文章介绍了一种通过创建 DESIGN.md 文件来规范 AI 辅助网页设计工作流的方法。作者指出，直接使用 AI 生成不同页面（如定价页、着陆页）时，往往会导致风格不统一。解决方法是将字体、配色、动画时间轴、布局规则等提取到 DESIGN.md 中，并将其作为上下文提供给 Claude Design。这样生成的所有页面都能保持一致的视觉风格（如 Liquid Glass 风格），从而实现从“逐个提示”到“系统化构建整个站点”的效率飞跃。
作者分享了6个提示语技巧，用于消除DeepSeek和Codex生成代码动画/UI时的AI味。包括：删除重复无信息的文案、去掉多余的装饰框和阴影、为颜色分配固定用途、统一字号和图标对齐、一屏只讲一件事、优化动效使其服务于叙事和反馈。文中每个技巧都配有具体可用的提示语。作者还预告了正在开发的大剪辑Skill，能用DeepSeek剪出十分钟真人口播视频。
作者推荐了两个开源 AI 设计 Skill：一是 AI Design Skills 中的 landing-page-design，为 Claude Code、Cursor、Codex 等编程工具提供从内容规划到视觉系统的落地页制作规则，包括卖点组织、统一字体配色、按钮悬停、空页面、移动端和无障碍支持等交付细节；二是 Fantastic Posters，内置 33 种设计风格提示词（如瑞士极简、包豪斯、Riso 印刷等），支持自动选风格、上传参考图和 Logo、批量生成海报。作者强调把设计风格沉淀为可反复调用的 AI 工作流，比一次性提示词更有价值，并能解决风格不稳定的问题。
作者介绍了开源项目 AI Design Skills，目前提供 landing-page-design 技能，适用于 Claude Code、Cursor、Codex 等可读取规则文件的 AI 编程工具。它不是现成模板，而是一套从内容到视觉的制作规则：先明确产品定位与用户目标，再组织页面结构；统一字体、间距、配色和动效等视觉系统；并补齐按钮悬停、加载、空页面、报错、表单校验、移动端适配和无障碍等交付细节，避免 AI 生成千篇一律的默认样式。评论区还交流了表单校验保留已填内容等实用经验。
文章介绍了如何搭配使用 Anatomy 和 OpenMAIC 两个开源项目的教学 Skill 来制作交互式教学演示。Anatomy 擅长制作可交互的等距结构插画（SVG/HTML），OpenMAIC 是多智能体互动课堂项目，提供 23 项教学 Skill。作者以电磁继电器控制风扇为例，给出四套提示词模板：课堂讲解（先预测再演示）、复习自测（费曼学习法）、科普讲解（配合事实核查）、口播配图（无声拆解视频），并按用途整理了课程规划、教学方法、授课形式等 Skill 分类表，建议从一个能打开的简单演示开始逐步上手。
作者分享使用 Claude Code 配合 DeepSeek Flash 1017 模型制作两个 Remotion 视频的经历，总成本不到 3 元。一个视频作为个人介绍页的开屏动画，另一个是 52 秒的 Media Kit 视频。作者基本只负责描述想法，通过开启 xhigh 思考模式、配置 workflow 并挂载 remotion-best-practices skill，模型即可直接实现效果。文章还介绍了该 skill 的路由机制：平时只占一句描述的上下文，需要时才按需读取转场、字幕、音效等子文档。作者提到之前担心的缓存命中问题已不存在，命中率超过 98%。
作者分享了 10 条可直接发送给 Codex 或 Claude Code 的 UI 优化提示词，用于提升界面视觉设计。内容涵盖：移除中点分隔符与冗余解释文本、优化文案表达、采用 Radix UI Colors 颜色规范、光学对齐与同心圆圆角、使用 0.5px 边框、精简动画（ease-out 250ms）、限制字号不超过 4 种（最小 12px）、减少用户判断类交互、谨慎使用圆角阴影等。作者还补充回复网友：0.5px 边框在老旧或低分屏设备上可能不适用，提示偏个人经验；另有网友补充了减少冗余 Eyebrow/Overline 眉题的第 11 条建议。
作者用可灵4.0与Seedance 2.5进行五组视频生成对比测试（女团舞、武士打斗、镇妖斗法、森林逃亡、耳机广告），并分析双方效果与成本差异，可灵1080P单价更低。随后作者展示用可灵4.0制作一部都市短剧的完整流程：将可灵MCP/CLI接入Codex，通过GPTS编写剧本，制作白底三栏人物参考图和场景资产，用专业视听语言模板编排视频提示词，再生成、返修和剪辑，全程与AI对话完成，无需剪辑软件。文末附完整提示词和Skill工具推荐。
