pnpm 12.4 将多语言项目（npm、Python、Cargo）的依赖安装、构建、测试与缓存纳入同一套工作区配置。一条 pnpm install 可安装三个生态的依赖，新增的 pipeline 功能通过任务依赖图编排构建与验证流程，并支持基于输出的缓存复用，减少重复构建。配套的 pnpr 服务提供跨机器的共享缓存、制品托管和多语言软件包的批量事务发布。文章还讨论了这些能力对 Agent 工作流的意义：仓库明确声明执行规则后，自动化工具可减少临场推断。最后指出了实验功能的成熟度限制、pnpr 的许可证差异，以及针对混合仓库而非纯 Python 项目的适用场景。
文章讨论了 AI 生成前端页面虽然速度极快，但产出常带有模板味的问题。作者建议通过浏览 Layers 网站来提升界面高级感。与过去 Dribbble 上流行无法落地的概念稿不同，Layers 上吸引人的是克制的真实产品细节，如字形切换的微动效、干净的间距节奏和组件状态变化的自然过渡。作者认为，AI 把写界面的门槛降到地板上后，细节反而更加刺眼，一个产品看起来像粗糙玩具还是成熟软件，差异往往不在于功能结构，而在于那几处带品味的手感判断。
作者 DerrickLi 非计算机专业出身，借助 AI 工具 Codex 搭建了自己的个人网站。文章记录了完整建站过程：先规划网站内容框架（个人介绍、作品、文章、Skills、联系入口），再反复打磨 UI，从最初追求科技感动效失败，到通过 MotionSites 素材参考最终实现电影感页面，强调有具体参考能让沟通更高效。部署阶段经历预览发布、域名接入、HTTPS 配置等调试。作者总结了定内容、选画面、做上线三步流程，并强调网站上线后仍需持续积累作品和文章内容。
作者Emily Lai花3天时间、使用180+个提示词，借助多个前沿AI模型从零构建个人网站。工具栈包括：Grok用于研究个人网站参考和品牌方向，Claude Fable 5/5.1负责设计稿、代码和UX优化，GPT 6 Astra用于3D渲染和速度优化，Aside浏览器作为harness驱动屏幕，Wispr Flow语音转提示词。作者详细分享了从设计概念、品牌技能对比（如Impeccable、taste-skill）、BRAND.md创建，到内容整理的完整工作流。最终选择了'The Desk'记事本风格UI设计，包含工作、健康实验和公开学习内容。
作者基于几个月的实际使用体验，为Google Gemini正名，介绍了三个好用的工具：网页版Gemini速度极快、多模态能力强，适合处理长PDF、长视频等海量内容，回答风格自然有人味；Antigravity改版为Agent终端后掌控感下降，但前端交互和多模态理解依然出色；NotebookLM被作者誉为封神的第二大脑，可聚合各类资料建立个人知识库，无幻觉输出，还能生成PPT报告、知识导览图，以及将专业文档转为双人访谈播客，极大提升学习和工作效率。作者最后给出了三工具的日常使用搭配建议。
本文面向零编程基础的初学者，系统介绍 AI Coding 的完整学习路线。作者指出 AI Coding 的核心不是让 AI 写完所有代码，而是人负责目标设定、判断与验证，AI 辅助开发各环节。文章将学习路线分为五个阶段：学会控制 AI、做出第一个网页、读懂 AI 生成的代码、把网页变成带登录和数据的小产品、处理上线后的问题，并给出 30/60/90 天实践计划、四个新手练习项目、可直接复用的提示词模板、上线前检查清单以及按阶段整理的学习资源（MDN、freeCodeCamp、CS50、Claude Code 等），帮助新手从生成代码走向做出可维护、可发布的产品。
作者实测OpenAI新发布的GPT-6 Astra模型，认为其综合能力追平Claude Fable 5，OpenAI重回黄金时代。文章从三方面展开：一是速度大幅提升，任务完成时间从数小时缩短到十余分钟；二是前端和审美能力史诗级强化，一句话即可生成高精度3D网页模型；三是代码能力追平Fable 5，能从本质层面发现并修复系统深层问题，并介绍Codex实验性跨窗口笔记功能。作者还分享了为超级模型简化的AGENT.md配置建议，强调聪明模型需要更少限制规则。
作者以截图美化工具 RicoScreenshot 为案例，完整拆解了 Vibe Coding 的六步工作流：读懂项目、建立视觉规范、规划功能、开发实现、视觉交互调整、测试上线。文章强调每个环节做正确的事：先用 AGENTS.md 让 AI 理解项目架构，用 DESIGN.md 统一视觉规则，用 TODO.md 管理需求和进度；开发阶段一次只做一个功能，并重视亲自使用后的体验判断。该流程基于开源项目 image-beautifier 二次开发，纯前端实现，适合作为新手的第一次完整项目练习。
文章探讨 AI 生成中文页面排版难看的根本原因：不是审美问题，而是语言结构问题。作者指出 AI 默认的 CSS 参数（负字距、1.4 行高、Inter 字体栈）都是为拉丁文设计的，而汉字等宽、信息密度高、可用的层级手段少，与字母排版从根上不同。文章分析了标题过长、断行不当、细字重浅灰、照搬多列网格等常见症状，并给出可直接使用的排版处方：正文 16–18px、行高 1.75–2.0、字距为 0、一行 30–45 字、字体栈首位用 PingFang SC，以及给 AI 修改中文排版的速查表。
作者开源了 RICOUI DESIGN，一个基于 DESIGN.md 的设计系统工作台。DESIGN.md 是一种结构化 Markdown 文档，集中记录品牌的颜色、字体、间距、组件规则与设计约束，人和 AI 都能读取。工作台支持创建、编辑、预览 DESIGN.md，浏览内置品牌设计参考库，可通过 AI 从公开网站生成初稿，并将文档派生为 Design Tokens、CSS 和 ZIP 供前端与 AI 工具使用。文章详细介绍了 DESIGN.md 的结构约定、从品牌参考到自有设计库的使用流程、AI 生成与安全边界、派生检查机制及云端存储方案，强调以 DESIGN.md 作为唯一源文件维护设计规范。
文章介绍 Vercel 如何用 design.md 文件、CSS 样式表和评测闭环，解决 AI Agent 生成页面总「差一点」、需要反复人工修整的问题。核心方法是把工作拆成三层：design.md 写设计判断（读者、信息层级、拒绝的套路），CSS 承接字号、间距、表格等机械性版式约束且不占模型上下文，评测闭环把每次返工转化为可复查的规则。作者强调规则要从模糊感觉翻译成可观察动作，如「别丑」改为「表格全宽」。测试显示公开场景下机械故障从 91 次降到 39 次，约少 57%。建议从一类高频产物入手，把高频修改沉淀为规则，逐步减少返工。
作者分享了使用 Codex 结合 Remotion 制作动画的实战经验。文章指出写代码反而是最简单的部分，难点在于动画的节奏、连续性和可读性等细节判断。作者介绍了 Remotion 的帧驱动原理、useCurrentFrame 和 interpolate 等核心 API，以及如何通过 Remotion 官方 Agent Skills 让 Codex 更高效地生成动画代码。文章还系统讲解了时间、状态、Keyframe、Easing、Spring 等动画基础概念，并结合自媒体口播视频的 A-roll、B-roll、动画三类画面整合需求，说明了构建完整视频生产工作流的方法与踩坑经验。
作者实测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有所退步。
本文介绍了如何用 Codex 在 30 分钟内零代码搭建个人网站。作者 Miles Ma 详细讲解了完整流程：在 Spaceship 购买域名并注册 Cloudflare；在 Codex 中新建项目并整理个人资料、文章和图片；让 Codex 通过 Computer Use 分析参考网站（如 Immersive Garden）的结构、风格和交互；确认规划后生成第一版，并在浏览器中逐处迭代修改；最后通过 wrangler 授权部署到 Cloudflare 并绑定域名上线。文章还介绍了如何利用子域名（如 cv、course、tools）在同一域名下扩展在线简历、课程和工具页面，实现一人低成本持续维护个人站点的最佳实践。
文章探讨 AI 做设计时“形似神不似”的问题，指出症结在于设计背后的“为什么”没有被写进 AI 可读的上下文。作者拆解了多家硅谷大厂的实践：Vercel 通过 200 多轮评估循环筛选规则，用 design.md 使视觉错误减少 57%；Google 开源了 Stitch 的 DESIGN.md 规范；Atlassian 实测发现 DESIGN.md 适合原型和定制场景，生产环境用 MCP 更省更准；Anthropic 的 Claude Design 则反向从代码库自动提取设计系统。社区还把 60+ 大厂风格反向工程成 design.md。文章认为设计系统正被 AI 重写，并给出五条落地建议。
设计工程师 Olav 分享了 blume.codes 落地页的构建经验，阐述核心设计理念：注意力是零和的，想脱颖而出必须提升标准。文章详解四大独特元素：视差 Hero 效果（用 Codex 生成分层图像并合成滚动视差）、完全可交互的产品演示（通过 Turborepo monorepo 复用 UI 包，使落地页与 Electron 应用共享组件并自动更新）、花朵主题的旅程矢量线，以及主题切换器。作者强调 AI 编码工具（Codex、Claude Code）让高质量建站变得触手可及，并分享了借助提示词工程实现视觉效果的完整流程与迭代经验。
本文是 Codex 实战教程，作者以「一页」阅读打卡小程序为例，完整演示从零到发布微信小程序的流程：先用 Figma 确定页面设计，可通过 Codex 生成 SVG 草案再导入 Figma 制作可点击原型；再通过 Figma MCP 让 Codex 读取设计稿，按 WXML、WXSS、JavaScript 技术栈生成微信原生小程序代码；随后导入微信开发者工具模拟运行、调试报错；最后手机预览、上传体验版并提交审核发布。文章面向零代码基础的读者，强调只需写清楚提示词和提供设计稿，无需看懂代码即可完成开发。
本文详细记录了作者在广州某高校图书馆 AI 工作坊上，带领学员使用腾讯 WorkBuddy 将手头资料（如数据表、规章文件）制作为交互式智能问答网站的完整过程。文章涵盖：让 WorkBuddy 生成可视化网站、接入 DeepSeek API 实现自由问答、通过中转函数保护 API key 安全、用 Codex 操控 Chrome 自动完成腾讯云部署等环节。作者还分享了 API key 三道安全防线、部署踩坑经验（教程过时、云函数超时、日期偏差排查）以及成本控制（全班提问仅花两毛二），并强调数据授权与隐私边界的重要性。
Google 和 Microsoft 正在共同推动 WebMCP——一个由 Chrome 与 Edge 团队开发的浏览器 API，让网站能够向 AI Agent 声明自己可执行的操作。文章对比了 Agent 访问应用的六种方式（原始 API、后端 MCP 服务器、computer use、浏览器自动化、WebMCP、内置助手），指出 WebMCP 是唯一同时满足'使用自己的 Agent、零配置、获得真实具名操作'三个条件的方案。声明式描述优于让 Agent 从像素猜测：无需 API key、登录随浏览器会话免费获得、可用操作随页面状态动态变化、支持 JSON Schema 兼容主流模型。文章还展示了注册工具的 JavaScript 代码与纯 HTML 表单的极简接入方式，认为这可能是多年来 Web 最大的变革。
本文是海报构图系列的下册，涵盖第 17–32 种构图方法，重点讲解 Grid System 与构图的关系。上册聚焦焦点、平衡与视线动势，下册处理内容增多时的秩序问题。文章分为三部分：分割与条带（上下分屏、水平带状）、网格系统（单栏手稿、多栏编辑、模块网格、瑞士非对称网格、Bento 层级卡片、棋盘交替）以及图文关系（满版主视觉、大字主导等）。每种构图均提供视线路径分析、适用场景、避坑指南，并给出图像模型提示词和可直接落地的 HTML/CSS 提示词两套表达方案。
文章介绍如何用四个专业化 Agent（项目经理 Piper、后端 Bay、前端 Fin、测试 Tess）组成一个多智能体工程团队，解决多 Agent 协作中交接时上下文丢失的经典问题。Grok Bot 的优势在于所有 Bot 共享同一台持久化云计算机器，状态以文件形式保存在磁盘上，消息只传递路径，使接手的 Bot 能完整继承前一 Bot 的知识。作者通过磁盘任务板 board.md、五个强制交接纪律的 Skill 以及 InsForge 后端平台实现全自动功能交付流水线。
匿名模型 Ox Alpha 揭晓为智谱 GLM-5.3 Flash，320B 参数、MIT 开源、原生多模态、1M 上下文，限时价格仅为 Opus 4.8 的 1/40。作者通过三个前端场景实测：仅凭一张图用 Three.js 复刻玻璃折射海报、看录屏视频还原 60 片玻璃螺旋彩带交互网站、将静态体素海报改造为滚动揭示的 3D 网页，均表现出顶级多模态理解与代码能力，远超同价位的 DeepSeek V4 Flash，接近 Fable 5 但便宜约百倍。作者认为其把'便宜又够用'的行业斩杀线大幅推进，让预算有限的创作者也能用上前沿智能。
作者用相同的提示词、品牌素材和数据让 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 美元。实验还发现当提示词足够具体时，两者产出几乎一致。
本文介绍了如何在不写代码的情况下使用 Claude 的 Artifacts 功能构建网站。用户只需用自然语言描述需求，Claude 即可生成网页代码并实时预览，还可通过对话迭代修改布局、配色、内容等。文章强调了建站前的准备工作：明确网站目的、目标受众和页面结构，并指出该方法适合落地页、作品集、企业官网等简单网站，复杂项目仍需额外工具与专业知识。
作者推荐一款名为 dembrandt 的工具，可以一键提取任意网站的设计 UI 标准。相比用截图向 AI 描述设计，该工具能直接输出标准化的 UI 设计规范，供 AI 使用，实现设计完美复刻。工具官网为 dembrandt.com，并在 GitHub 开源。适合前端开发者和设计师快速借鉴优秀网站的设计体系。
作者介绍了他开发的免费 Claude Code Skill——Scrollcraft，它将网页滚动体验本身变成设计的一部分。该 Skill 不提供固定模板，而是通过访谈式提问确定访客旅程、情感方向、信任证明和素材，再结合 Kie.ai 生成缺失的图片和视频，并通过验证 harness 截图检查关键帧。作者用它约 30 分钟重构了 AI Automation Society 网站，强调了'每个主张都要有证明'的设计理念，并展示了在多个不同类型网站上的多样化输出效果。
daisyUI 团队发布 Nexus Dashboard 4.1，包含 8 种仪表盘布局（CRM、电商、Gen-AI、增长、AI Ops、财务、SRE、安全运营）、落地页、文件管理器与聊天应用布局、Gen-AI 应用页面、认证页面等，并提供 15+ UI 区块、50+ 布局示例、100+ 交互示例及 10 个额外仪表盘模板，支持 HTML、React、Next.js、SvelteKit 等多种技术栈。
文章整理了5个面向前端和UI设计师的免费提效工具：VibePrompts 提供251套成熟UI提示词，可快速生成可上线的Tailwind代码；OpenMotion 是Mac端免费动效设计工具；Gooey 提供React流体特效开源组件；Kitbitz 含2000+免费手绘插画素材；Renotch 可将Mac刘海自定义为开发者控制面板。这些资源适合独立开发者和UI爱好者收藏使用。
本文面向非计算机专业的 Vibe Coding 爱好者，整理了 12 个前端网页基础术语，包括 Frontend、HTML、CSS、Markdown、Component、State、DOM、Title Tag、Page Metadata、Favicon、Open Graph 和 Web App Manifest。每个术语都配有通俗解释、图示和可直接复制给 AI 的指令示例，帮助读者在与 AI 协作时更精准地描述需求、定位问题，提升开发效率。
作者分享了使用 Vibe Coding 进行 UI 设计的实践经验，总结了 7 个关键技巧：明确页面目标、具体化视觉描述、从产品提取视觉元素、使用参考图、描述交互流程、明确限制条件、多设备测试。这些方法能帮助 AI 生成更顺眼、更完整的产品级 UI。
