如何用 AI 构建价值 5000 美元的落地页
文章作者 Prajwal Tomar 分享了如何利用 AI 工具（主要是 Lovable）和精准的提示词，打造出一个具有电影级滚动效果、3D 模型和 Shader 动效的高端落地页。文章的核心观点是：AI 生成的页面之所以显得平庸，是因为提示词缺乏具体性。作者详细展示了从 Hero 区域的 3D 倾斜、Spline 3D 模型集成、WebGL 特效到滚动驱动的层级堆叠架构的实现过程，强调了具体参数、代码片段引用以及空间架构定义的重要性。
相关文档
DESIGN.md：网页设计的极致工作流升级
文章介绍了一种通过创建 DESIGN.md 文件来规范 AI 辅助网页设计工作流的方法。作者指出，直接使用 AI 生成不同页面（如定价页、着陆页）时，往往会导致风格不统一。解决方法是将字体、配色、动画时间轴、布局规则等提取到 DESIGN.md 中，并将其作为上下文提供给 Claude Design。这样生成的所有页面都能保持一致的视觉风格（如 Liquid Glass 风格），从而实现从“逐个提示”到“系统化构建整个站点”的效率飞跃。
Opus 5.5 的 20 种开源技能
作者整理了 20 种与动画、物理、3D、声音及交付相关的开源技能与工具库，涵盖 Remotion、HyperFrames、Anime.js、React Spring、PixiJS、p5.js、Paper.js、Matter.js、Three.js、Rapier、OGL、tsParticles、glTF Transform、GL Transitions、OBS Studio、Chatterbox、Tone.js、faster-whisper、OpenCut 和 FFmpeg。每个工具附有简介和 GitHub 链接，覆盖从视频渲染、动画编排、图形绘制到配音、字幕转录和视频编码交付的完整创作流程。
把复杂硬件变成简单有趣的课程：ESP32 版
作者 Dilum Sanjaya 发布了一个交互式学习应用 learn-esp32.vercel.app，延续其此前的 Arduino 学习工具，将复杂的 ESP32 硬件知识拆解为一个个简单电路课程，帮助初学者逐步上手。该应用使用 Opus 5.5 构建。帖子引发众多网友好评，有人建议将其开源，作者表示考虑构建一个开源项目，让任何人都能贡献自己的电路创意。该工具展示了 AI 辅助开发在硬件教育领域的应用潜力。
Codex 终于有自己的 UIUX 设计外挂了
文章介绍了 Codex 的 UI/UX 设计增强工具 UI UX Pro Max，包含 192 条行业设计规则、79 种 UI 风格、192 套配色方案、74 种字体组合，并支持 React、Next.js、Vue、Flutter 等 22 种技术栈。作者演示了如何通过一段提示词在 Codex 中安装配置该 Skill，并用其生成高端 AI SaaS 官网，解决了以往 AI 生成页面廉价感强、配色布局千篇一律的问题。评论区也讨论了 Skill 作为能力封装新形态的意义与实际效果。
从0搭建个人网站：8大类60+UI设计必备清单
本文介绍用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，适合从零搭建或迭代优化个人网站时收藏使用。
小白 3D 创作系列 02 -- 用 AI 开发会随音乐舞动的 3D 网站
作者 Kobin 分享用 AI 逐步开发个人 3D 网站「观星台」的完整过程。文章从让 GPT 生成视觉效果图讲起，逐步拆解实现路径：先区分网页内容（HTML/CSS）与 Three.js 场景，再依次实现粒子签名、作品星座、由星点组成的粒子人物侧影，接着通过统一色板、亮暗关系和轻量 Bloom 提升画面质感，然后将滚动与章节状态绑定实现场景过渡，最后接入音乐让星空随节奏变化。每个阶段都给出可直接交给 AI 编码工具的练习指令与检查方法，适合想用 AI 入门 3D 网页创作的读者按序实践。
用AI做小程序：7步补齐设计规范
本文介绍了用AI开发小程序时如何补齐设计规范，解决多个页面字体、按钮、圆角不统一的问题。文章分7步讲解：确定规范适用范围与存放位置、统一字体与文字层级、按用途分配语义色、统一形状间距与图形元素、把规则封装为可复用组件与变体、统一状态与交互反馈，以及通过Design Token落实到代码并用验收标准逐页检查。最后给出常见坑（规范与代码各改各的）的解决方法、维护流程和一段可直接使用的提示词，帮助AI持续按同一套规则产出页面。
小程序怎么才好用？15个交互名词看图懂
文章以模拟的Punk咖啡馆点单小程序为例，图文讲解15个常见交互名词：导航栏、TabBar、页内Tabs、卡片、单元格、按钮、点击热区、表单校验、选择器、轻提示、对话框、操作面板、骨架屏、空状态与错误状态、无障碍。沿“选咖啡→选规格→加入购物袋→确认订单”的完整点单路径，说明每一步页面应有的回应，如选中状态、数量与总价更新、加载与失败提示等。最后强调提交后要区分等待、失败和结果不明三种情况，结合服务端幂等防止重复下单，并给出用AI按业务补齐交互的模板。
AI 海报也能像 PSD 一样分图层了：只换猫，其他都不动
文章介绍如何利用蚂蚁百灵开源的 Ming-Image-0.1-Design 系列模型实现 AI 海报的分层编辑。Design 模型负责生成文字渲染稳定的设计图，Design-Layer 模型将设计图拆分为透明图层。作者还用 React 构建了 Ming Studio 工作台，串起生成、拆层、局部替换、保存导出的完整流程。通过提示词预先规划元素布局、按编辑需求分层，实现只替换海报中某一元素（如猫）而保持其他部分不变，并解决了背景残留等细节问题，让 AI 生成图从一次性图片变成可继续编辑的设计稿。
实测 Claude Sonnet 5.5，做 AI 代码动画这块断档领先 gpt6 但 3D 拉了
作者实测 Anthropic 新发布的 Claude Sonnet 5.5，与 Opus 5.5 对比其在代码动画、HTML PPT、3D 网页和写作等场景的表现。结果显示 Sonnet 5.5 价格便宜 50%、速度快 30%，代码动画效果领先 gpt6，执行力强、交付完整，但 3D 建模不如 Opus 5.5，且缺少 Opus 那种“创意溢出”。写作方面 Sonnet 5.5 节奏感甚至优于 Opus。作者总结其定位为及格线以上的执行模型，适合批量改 bug、文档整理等任务，建议与 Opus 5.5 组合使用以降本提速。
做独立站或 AI 产品最耗时往往不是后端而是磨一个高转化落地页
作者分享了一套 Landing Page 高效工作流：先用 saaslandingpage.com 灵感库浏览数百个顶级 SaaS 产品的真实落地页，学习 Hero Section 和价值主张的设计；再借助 website-rebuild-skill（基于 Claude Code / AI Agent 的网站复刻工具）以像素级精度抓取结构、样式并重构干净代码。工作流为：选定对标案例，用 Skill 自动化重构基础骨架，替换自己的文案与品牌资产，可节省约 90% 前端排版时间，将原本一天的页面打磨工作大幅压缩，同时保证高质量还原。
我用 GPT 6 Astra 做了一个 3D 版的《桃花源记》（文中含提示词）
作者宝玉分享用 ChatGPT Pro 的 GPT 6 Astra 制作 3D 版《桃花源记》网页的完整过程。通过一套详细的提示词，让 AI 将课文拆成 20 幕，实现可拖动视角、跟随原文叙事的'循文入境'体验。针对 TTS 朗诵不佳的问题，改用央视李立宏的真人朗诵并配以 SRT 时间戳同步；再由 Codex 做工程化优化，将音频独立、更换真实环境音，文件从 5.6MB 缩至约 777KB。文章总结了几点体会：明确审美与验收标准比堆形容词更重要，声音是交互的一部分，不同 AI 工具分工协作。文末附有可复用的完整提示词模板，可套用于其他古文场景制作。
