作者 DerrickLi 非计算机专业出身，借助 AI 工具 Codex 搭建了自己的个人网站。文章记录了完整建站过程：先规划网站内容框架（个人介绍、作品、文章、Skills、联系入口），再反复打磨 UI，从最初追求科技感动效失败，到通过 MotionSites 素材参考最终实现电影感页面，强调有具体参考能让沟通更高效。部署阶段经历预览发布、域名接入、HTTPS 配置等调试。作者总结了定内容、选画面、做上线三步流程，并强调网站上线后仍需持续积累作品和文章内容。
本文介绍了如何用 Codex 在 30 分钟内零代码搭建个人网站。作者 Miles Ma 详细讲解了完整流程：在 Spaceship 购买域名并注册 Cloudflare；在 Codex 中新建项目并整理个人资料、文章和图片；让 Codex 通过 Computer Use 分析参考网站（如 Immersive Garden）的结构、风格和交互；确认规划后生成第一版，并在浏览器中逐处迭代修改；最后通过 wrangler 授权部署到 Cloudflare 并绑定域名上线。文章还介绍了如何利用子域名（如 cv、course、tools）在同一域名下扩展在线简历、课程和工具页面，实现一人低成本持续维护个人站点的最佳实践。
作者基于 10 年 UI/UX 设计经验，结合 AI 工具实践，总结出一套设计审美方法论。文章实测了 5 个 GitHub 上星数最多的 AI 设计 Skill：UI UX Pro Max（自动匹配行业风格）、Taste Skill（原创设计方向）、Impeccable（逐块打磨去 AI 味）、Emil Kowalski Skills（动效细节）、Hallmark（上线前检查），并配以场景演示。作者还分享了 8 条可复用的设计原则，包括先定义再动手、拆解好设计不照搬、先出全貌再逐块改、统一视觉规则等，强调工具在变但好的设计判断力依然无法被 AI 替代。
作者分享了6个提示语技巧，用于消除DeepSeek和Codex生成代码动画/UI时的AI味。包括：删除重复无信息的文案、去掉多余的装饰框和阴影、为颜色分配固定用途、统一字号和图标对齐、一屏只讲一件事、优化动效使其服务于叙事和反馈。文中每个技巧都配有具体可用的提示语。作者还预告了正在开发的大剪辑Skill，能用DeepSeek剪出十分钟真人口播视频。
作者分享了 10 条可直接发送给 Codex 或 Claude Code 的 UI 优化提示词，用于提升界面视觉设计。内容涵盖：移除中点分隔符与冗余解释文本、优化文案表达、采用 Radix UI Colors 颜色规范、光学对齐与同心圆圆角、使用 0.5px 边框、精简动画（ease-out 250ms）、限制字号不超过 4 种（最小 12px）、减少用户判断类交互、谨慎使用圆角阴影等。作者还补充回复网友：0.5px 边框在老旧或低分屏设备上可能不适用，提示偏个人经验；另有网友补充了减少冗余 Eyebrow/Overline 眉题的第 11 条建议。
本文是 Codex-OpenPencil 插件的快速上手教程，以设计一个服装购物 APP 为例，完整演示从安装、打开画布、确认风格、扩展页面、选中元素口喷修改，到图片生成与搜索、保存设计资产，再到设计稿转代码的全流程。插件免费开源，提供支持平移缩放的无限画布，Codex 负责理解需求并调用工具，OpenPencil 负责设计展示与编辑，可 100% 还原生成 HTML、Vue、React、SwiftUI 等框架代码。文章还介绍了看板、教程图、对比图、PPT 等其他应用场景及常见问题处理方法。
本文介绍用AI搭建个人网站的最佳实践：先整理个人内容到飞书文档，再参考优质网站让AI抓取代码与风格。作者系统整理了8大类60多个网页设计资源，涵盖组件库（shadcn/ui、Aceternity UI、Magic UI等）、动效与3D工具（Motion、GSAP、Three.js、Spline等）、整站灵感网站（Awwwards、Land-book等）、产品界面参考（Mobbin、Page Flows等）以及配色素材、AI建站和Claude Skills等类别。每个资源均附特色说明与具体用法，可让AI直接复用代码和Prompt，适合从零搭建或迭代优化个人网站时收藏使用。
本文介绍了一套将 Figma 设计稿高保真还原到既有前端工程的 Agent 自动化流程。作者总结了五类高频还原问题：设计语义丢失、多页面样式不统一、标注与真实界面混淆、素材导出策略模糊、旧页面局部改造被全量覆写。解决方案包括：通过项目级规范、知识索引和错误情况补充构建实现约束层；采用双层组件映射（语义判断 + 真实 API 确认）提升组件复用率至接近 100%；推行标注前缀协议与三类素材标签；引入时间戳版本快照机制避免循环中重复拉取设计数据以降低成本；并建立统一视口、状态流转、固定数据等五重比对前提，形成六步视觉闭环流程，最终差异率低于 0.15 阈值，还原度超过 90%。
作者实测Claude Fable 5.1新模型，发现其在长时间Agent任务、浏览器自动化和电脑自动化方面显著提升，达到甚至超越Codex GPT 5.6的水准。缓存读取成本下降75%。作者用一句话提示语让模型完成goodcase.ai网站的UI批量优化、提示语分类系统和热度衰减算法更新。还基于杜威十进分类法、分面分类、洛克索引法、瓦尔堡好邻居法则和卢曼卡片盒笔记法等五个理论，让Fable 5.1制作了文件整理skill（carl-file-organizer）。通过3D版愤怒的小鸟游戏测试，Fable 5.1完成度高于GPT 5.6 Sol，包含4种鸟和8个关卡，物理反馈细致。但写作能力相比Opus 4.6有所退步。
设计工程师 Olav 分享了 blume.codes 落地页的构建经验，阐述核心设计理念：注意力是零和的，想脱颖而出必须提升标准。文章详解四大独特元素：视差 Hero 效果（用 Codex 生成分层图像并合成滚动视差）、完全可交互的产品演示（通过 Turborepo monorepo 复用 UI 包，使落地页与 Electron 应用共享组件并自动更新）、花朵主题的旅程矢量线，以及主题切换器。作者强调 AI 编码工具（Codex、Claude Code）让高质量建站变得触手可及，并分享了借助提示词工程实现视觉效果的完整流程与迭代经验。
作者用相同的提示词、品牌素材和数据让 Claude Code（Opus 5）和 Codex（GPT-5.6 Sol）各构建八个网站，从设计质量、Agent 数量、耗时、输出 token 和 API 成本多维度对比。结果是 Codex 在开放式设计环节赢得六轮中的五轮，效率优势显著：Codex 仅用 9 个 agent、约 5 小时、55 万 token、约 100 美元，而 Claude Code 用了 25 个 agent、14 小时、近 300 万 token、约 444 美元。实验还发现当提示词足够具体时，两者产出几乎一致。
文章介绍如何利用 Codex 插件简化 Cloudflare 和 Vercel 的部署流程。通过安装插件并授权，用户只需输入指令即可完成域名接入 CDN 和项目部署，极大地降低了建站门槛，特别适合新手。
本文是建站系列的第四篇，提供了详细的 Vercel 部署教程。文章介绍了 Vercel 的免费额度与商业模式，涵盖了注册流程、单文件及 Fork 模板项目的部署步骤。重点讲解了如何配置框架预设和环境变量，并提供了利用 AI 辅助排查部署失败问题的方法。最后，针对国内访问 Vercel 不稳定的问题，作者给出了绑定自定义域名等解决方案。
