文章介绍了中文网站 font-family 的最佳实践：遵循“先西后中、兼顾主流操作系统、最后以通用无衬线字体兜底”的原则。作者给出了 --font-sans 和 --font-mono 两个 CSS 变量配置示例，解释了 Apple 生态、Windows、Android 等系统字体入口的作用，并总结了三条避坑指南：西文字体须写在中文字体之前、中文字体尽量使用英文名称避免编码问题、带空格的字体名必须用双引号包裹。此外还提醒不声明字体时浏览器渲染的是默认字体而非系统字体。
Google 发布新一代旗舰模型 Gemini 4 Argon，主打复杂长流程任务的深度推理，输出 token 上限达 100 万，行业第一。官方跑分 19 项中拿下 14 项第一，第三方测试显示其幻觉率全场最低（15%），且成本仅为 GPT-6 Astra 的六成。作者通过两个实测案例进行对比：俄罗斯方块游戏中 Argon 5 分钟一次写完 4.7 万字符代码，速度是 Astra 的两倍多，验证了长输出能力；但番茄钟前端设计对比中，Argon 功能完整却设计粗糙并有 UI bug，验证了其前端偏弱的爆料。结论：Argon 硬实力强、长代码能力实锤，但前端精细活不是主场。
文章以Punk咖啡馆点单小程序为例，沿着菜单、规格、购物袋、确认订单四个页面，图文讲解15个布局与视觉设计名词，包括信息架构、用户流程、线框图、首屏、视觉层级、栅格、对齐、留白、响应式布局、安全区域、设计变量、语义色、字阶、行高及Padding/Margin。作者还指出固定底栏遮挡内容的常见坑，并给出从定入口、画线框、定边距对齐到小程序内验证的完整排版流程，帮助读者用具体语言描述布局需求，让AI能精准修改页面。
作者认为写代码对程序员来说不是难题，真正卡住人的是审美——界面丑到连自己都不想打开。他分享了偷懒招数：把顺眼的 UI 组件当积木，丢给 AI Agent 自己翻、挑并塞进项目。文章推荐了 5 个 UI 组件资源网站：Beautiful UI、BeUI、Rare UI、Transitions 和 shadcn/ui，链接可直接扔给 Claude Code、Codex 等编码 Agent，让它们自动扒组件、抠代码、调样式并集成到项目中。作者强调不需要懂设计，只要知道在哪里能淘到好看的组件就够了。
作者实测阶跃星辰新模型 Step 5 Preview，认为其前端 UI 能力已进入第一梯队，价格仅为竞品三分之一却达到 K3 水平。测试显示它能高精度复刻 Apple 官网页面，配合 Skills 可实现动效网页设计，还能用 HTML5 Canvas 开发 2D/3D 游戏且操作流畅。作为 Agent 接入 Claude 框架后，它能从 72 页 PDF 中逐页提取数据核算利润率，并审计修复含 1800 多条公式的复杂 Excel 财务模型，揪出 22 处错误并标注不确定项。作者感叹国产模型正在从几家变成一批，整体表现超出预期。
作者以《清明上河图》为题材，用 Codex 辅助开发了一个可横向行走的交互插画项目。文章详细记录了从最初需求定义、视觉规则制定到技术选型的全过程：放弃 Three.js 改用 Canvas 2D 分层绘制，将鸟瞰式原画重构为适合人物行走的宋代街道，包含三个街区、141 位动态人物、虹桥过船和清明时雨等互动事件。开发中通过迭代修复遮挡、坐标、卡顿等问题，将帧率从 25 FPS 优化到 55 FPS，并配套 48 项自动测试，最终实现了用户可参与宋代街市生活的沉浸式体验。
文章介绍如何解决AI生成网页时“不太对，再改一下”这类模糊修改意见难以落地的问题。作者拆解百灵 Ling-3.0-flash-VL 的官方演示，并提出用 Claude Code + Ling-3.0-flash-VL + Playwright MCP 的复现方案：VL 负责看参考图、生成代码和分析差异，Claude Code 负责读写文件和调用工具，Playwright 负责打开浏览器截图。关键细节是保持截图宽度一致，并让模型真正查看截图。作者建议从作品集首屏入手，通过截图对照迭代修改，让“看着不太对”变成可对照的图片差异。
本文是网页动效词典系列的中篇，从第 17 到第 36 个动效词条，系统讲解了三大类网页动效：进阶文字动效（按字符显现、打字机、乱码解码、文字变形）、滚动与空间动效（视差滚动、多层视差、横向滚动、滚动缩放、固定式滚动叙事、图片序列、滚动吸附、进度提示）以及鼠标与指针动效（磁吸按钮、倾斜卡片、光标跟随、聚光灯、跟随眼睛、光标拖尾）。每个词条都说明了效果原理、常见类型、适用场景，并附上可直接使用的 AI 提示词，帮助开发者用 vibe coding 方式实现精致的网页交互效果。
本文介绍如何利用GPT-6 Astra、Blender和Three.js等工具，将文物制作成可拖动、旋转、上线的沉浸式3D交互网页。作者以「文物放大镜·掌上赏珍」和「圆明园兽首·国宝归来」两个项目为例，拆解了从明确主题、3D建模、交互网页制作、多端验证、发布交付到封装Skill的完整六步流程，并分享了建模路径选择、需求描述技巧及手机端适配等实战经验，适合零基础但想动手的读者参考。
作者作为探索 AI 与设计工程化的设计师，复盘了三次搭建自有设计组件库的尝试：第一次直接基于 shadcn/ui 纯 vibe 开发，因现成视觉规范黑盒与覆盖负担而放弃；第二次回到 Figma 定义颜色、变量与基础组件，通过 Figma MCP 交给 AI 批量转换代码，并按视觉骨架将组件分类，但自搭预览环境成为维护包袱；第三次引入 Base UI 无头组件库接管行为结构、以语义 Token 命名视觉规则、用 Storybook 建立反馈回路，一天完成组件库开发。文章总结出关键经验：把设计判断抽象为可命名的 Token 契约、选用无审美包袱的无头底座、用切片沙箱建立反馈回路，为后续 Design Harness 打下稳固基石。
程序员鱼皮实测 OpenAI 最新发布的 GPT-6 Astra 模型，通过 4 个由浅入深的案例评估其能力：3D 程序化城市生成器、3D 奥德赛战争视频动画、复刻 Cursor 的全栈 AI 编程工具，以及操作 KiCad 完成电路板布线。结果显示 Astra 在前端审美、产品设计、生成速度方面较 GPT-5 系列大幅提升，且有自己的产品想法，速度比同级模型快近三分之一；但在精细的 Computer Use 画布交互上仍存在坐标不准等问题，且 Codex 额度消耗明显更快。作者认为 Astra 适合视觉要求高的前端和全栈项目，日常任务用国产模型更划算。
工程师 Matt Dailey 分享如何避免 AI 生成的设计沦为千篇一律的“slop”。他提出七个实践方法：1) 从整体约束出发进行设计，借鉴 Christopher Alexander 的《Notes on the Synthesis of Form》，避免打地鼠式修补；2) 主动删除 Agent 过度添加的冗余元素；3) 在 Figma 等专业设计工具中迭代，避免代码库中的原型引力；4) 使用组件库保持视觉一致性；5) 利用 preview deploy 用真实数据验证设计；6) 收集优秀产品截图作为参考与上下文；7) 通过反复实践和反思培养个人设计品味。文章强调用 AI 做设计需保持人的判断力与整体思维。
作者整理了自己收藏的大量前端 UI/UX 设计资源，并借助 Codex 分类归纳，形成一张面向实际工作的资源地图。文章将设计资源分为五类：真实产品案例（UXSnaps、Mobbin、SaaSFrame）、设计模式与拆解（Design Spells、Component Gallery）、设计系统与 Design Token、组件实现（Base UI、React Aria、shadcn/ui 等）以及质量验收（WCAG 无障碍、性能测试）。作者强调有效的使用顺序是：真实案例提供证据、设计原则解释原因、设计系统形成约束、组件资源加速实现、无障碍与性能完成验收，帮助读者从'抄视觉'升级为'有理由的设计'。
本文介绍如何利用Claude Code在半天内构建出代理机构收费8000-12000美元的营销网站。作者指出，默认提示词只会生成模板化网站，关键在于通过安装设计技能（如frontend-design和ui-ux-pro-max）、参考顶尖设计网站截图、使用结构化提示词，以及进行三轮精细打磨（排版、间距、动效）来达到专业水准。文章还提供了部署到Cloudflare Pages的步骤，并强调通过迭代不断提升网站质量。
AI coding agents can introduce bugs and break codebases without clear constraints. This article presents ten practical rules to guide AI agents, such as reading before writing, avoiding unnecessary dependencies, matching existing style, handling loading/error/empty states, and requiring explanations for changes. These rules help channel agent capabilities safely, reducing breakage and improving reliability.
文章介绍了 Vibe Coding 视觉词典的下篇，详细讲解了滚动与动作、提示与加载、视觉风格三大模块的设计概念与 AI 提示词，涵盖 Scroll Reveal、Parallax、Skeleton Screen 等前端开发技巧。
文章针对 AI 做网页时指令模糊的问题，提出了“视觉词典”概念。通过拆解页面布局、结构、导航和组件四个层级，提供了 26 个具体的网页设计模式（如 Bento Grid、Masonry Layout、Sticky Navbar）。每个词条包含概念说明、适用场景及可直接复制给 AI 的提示词，旨在帮助用户更精准地指挥 AI 生成高质量的网页设计。
React Bits 是一个包含140+免费组件的动画组件源码库，支持复制源码或通过 shadcn CLI 安装。它适合制作产品官网、作品集等需要强视觉效果的页面，可与 shadcn/ui 搭配使用，但需注意部分组件对性能的影响。
本文介绍了 HyperFrames 的两项新功能：Media Effects 和 Media Overlays。前者通过确定性着色器处理视频或图像像素，后者提供可编辑的 HTML/CSS/GSAP 覆盖层。文章详细解释了两者的区别、安装方法、实现代码及使用技巧，强调如何通过命令行或 Studio 界面高效应用这些视觉特效。
本文是一篇微信小程序开发实战教程，以开发抖音、快手、B站短视频去水印工具为例，详细讲解了从注册账号、云开发架构搭建、核心云函数解析（去水印、抽帧）、绕过域名白名单限制、隐私权限配置到最终审核上线的全过程，提供了关键的代码思路和避坑指南。
文章介绍了 HyperFrames 平台新增的调色功能，提供专业的调色套件，包括色轮、RGB曲线、HSL选择、示波器和自定义LUT等。支持通过CLI命令或自然语言交互对视频和图像进行像素级调色处理，所见即所得，并详细说明了实现原理、代码集成方式及最佳实践。
文章对比了 HyperFrames 和 Remotion 两个代码生成视频框架。HyperFrames 基于 HTML/GSAP，零构建、AI 友好，适合从零构建的动画和 AI 自动化管线；Remotion 基于 React，支持视频导入叠加和批量渲染，适合在已有视频素材上合成。作者建议根据底层是否含视频、AI 参与度等场景按需选型。
本文介绍了 Codex 与 Figma 结合的 AI 产品开发工作流。通过 Figma MCP 连接两者，实现了从需求梳理、设计生成到代码开发及浏览器验证的闭环。文章详细讲解了如何利用 Codex 进行需求分析和代码编写，以及如何在 Figma 中进行双向协作与设计评审，大幅降低了产品原型开发的门槛。
作者记录了利用 Claude Code 和 AI 辅助工具，从零开始开发 AI 阅读插件 ReadCue 的全过程。文章探讨了 HTML 在 AI 时代的复兴、全新的设计开发范式，以及程序员如何从手写代码转向架构决策和产品定义。
本文详细介绍了月之暗面发布的 Kimi K3 模型。该模型拥有 2.8 万亿参数和 100 万 token 上下文，性能超越 Claude Opus 4.8 和 GPT-5.6 Sol，对标 Fable 5。文章分析了其定价策略、架构创新以及模型自主优化架构的能力，展示了其在长程编码和 3D 前端开发方面的强大实力。
作者深度实测了国产模型 Kimi K3，利用其一口气开发了6个涵盖前后端、数据库、AI调用及3D游戏的完整项目。结果显示K3在长程任务开发、代码能力及UI设计上表现超预期，体验直逼GPT 5.5和Claude Opus，是国产模型的巨大飞跃。
本文评测了全新上线的 Kimi K3 模型。作者选取了 3D 玻璃折射、WebGL Shader、视差滚动及家具网页动效四个高难度前端场景，与 Claude Opus 4.8 进行对比。结果显示，K3 在多模态理解和自检修正上表现优异，能以 Sonnet 级价格提供接近 Opus 的性能，整体表现惊艳。
文章指出在交互和视频制作中，单纯向 AI Agent 描述动画效果往往效率低下且容易产生误解。为了解决这个问题，文章推荐了一个简短的视频教程，该视频整理并演示了 13 类常见的 Motion 动效名称（如 Push Slide, Staggered Entrance, FLIP 等）。掌握这些标准术语，可以帮助用户更准确地向 AI、设计师或开发者表达需求，大幅提升沟通效率。
本文是一篇零基础的网站开发教程，详细介绍了如何利用 AI 编码助手 Codex 完成从想法到上线的全过程。文章涵盖了方案规划、代码生成、本地预览与调试、GitHub 版本管理，以及使用 GitHub Pages 或 Vercel 进行部署和域名绑定的具体步骤，帮助非技术人员快速搭建个人网站。
文章指出，使用 Codex Skills 不应像逛插件商店一样盲目安装，而应围绕核心工作流进行选择。作者推荐了三个安装阶段：第一阶段优先安装前端设计类（如 frontend-design）和浏览器验收类 Skill，以实现从“写页面”到“审页面”的闭环；第二阶段安装研究类（如 last30days）和内容类 Skill，用于产出高质量长文；第三阶段按需补全 Figma 和销售类 Skill。此外，作者建议通过自定义 AGENTS.md 来固化工作流程，提升 Agent 的执行稳定性。
