本文面向非计算机专业的 Vibe Coding 爱好者，整理了 12 个前端网页基础术语，包括 Frontend、HTML、CSS、Markdown、Component、State、DOM、Title Tag、Page Metadata、Favicon、Open Graph 和 Web App Manifest。每个术语都配有通俗解释、图示和可直接复制给 AI 的指令示例，帮助读者在与 AI 协作时更精准地描述需求、定位问题，提升开发效率。
作者介绍了其公众号 Markdown 编辑器 Rico MD 的一次重大更新：接入开源排版 SKILL「gzh-design-skill」的主题体系，新增 7 套公众号排版主题（如摸鱼绿、红白色系、石墨极简风等），支持自定义封面模板字段、文末互动卡、文档与图片打包导出、标题正文行高间距自定义等功能。文章还说明了主题版权与 AGPL-3.0 许可处理方式，以及适配中舍弃的部分。该工具支持左侧 Markdown 编辑、右侧实时预览、一键复制到公众号后台，在线版与开源仓库均已提供。
作者开源了 RICOUI DESIGN，一个基于 DESIGN.md 的设计系统工作台。DESIGN.md 是一种结构化 Markdown 文档，集中记录品牌的颜色、字体、间距、组件规则与设计约束，人和 AI 都能读取。工作台支持创建、编辑、预览 DESIGN.md，浏览内置品牌设计参考库，可通过 AI 从公开网站生成初稿，并将文档派生为 Design Tokens、CSS 和 ZIP 供前端与 AI 工具使用。文章详细介绍了 DESIGN.md 的结构约定、从品牌参考到自有设计库的使用流程、AI 生成与安全边界、派生检查机制及云端存储方案，强调以 DESIGN.md 作为唯一源文件维护设计规范。
文章宣布正式开源 AI 工具 html-anything。该工具历时 3 天开发，包含 1.5 万行代码，旨在解决 AI Agent 输出 HTML 设计差的问题。它内置 75 套技能模板，支持 18 种主流代码 Agent CLI（如 Claude Code、Cursor 等）的自动探测与会话复用，实现零 API Key 成本。同时支持 Markdown、数据及图像等 11 种文件格式转换，并可一键发布至社交媒体或导出高 DPI 图片。
作者 Leo Xiang 乘着“HTML 做 PPT”的热潮，开发了一款“好看卡片”生成器。该工具支持一键生成小红书、即刻、X 等平台的社交媒体卡片，提供 11 个主题及 8000+ 设计语言组合，并包含信息图效果。
文章盘点了近期爆火的 5 个 Agent Skills 开源项目：Google Android 官方的安卓开发技能包 android/skills、K-Dense 的 177 项覆盖多学科的 AI 科学家技能库、rehan-remade 的万能游戏 Mod 工具、QingYunA 的一页式 HTML 回答方案，以及 oil-oil 的 UI 设计师技能。这些项目展示了 Skills 生态的爆发：官方下场教 AI 写安卓、Agent 变身科研专家、一句话改游戏、答案自带排版、AI 具备审美能力，标志着 Agent Skills 正成为下一代 AI 能力扩展标准。
作者回顾了X上关于md和HTML哪个是AI时代更好文档格式的争论，认为两者都是AI原生的文档语言。文章介绍了腾讯WorkBuddy新上线的独立文件浏览器功能，支持Word、Excel、PPT、md、HTML等格式在一个窗口中打开，实现「人机双写」：用户可直接编辑，AI可随时参与修改。作者通过多个实测案例展示功能：md转HTML说明书、Excel数据转可视化看板、Word审校稿局部补充、PPT选中元素让AI修改、PDF配合AI对话阅读等，认为这是目前人机协作编辑方面系统集成最成熟的实践。
文章基于《Refactoring UI》一书，精选出 20 条实用的 UI 设计黄金军规，配合前后对比图讲解。作者指出在 AI 编码工具（Claude Code、Cursor 等）抹平写代码门槛后，UI 设计美感成为区分玩具与商业产品的关键壁垒。内容涵盖：为设计定好风格基调、先灰度后上色、用字重和颜色而非字号建立视觉层级、通过弱化凸显重点、按钮按主次分级、从过度留白开始做减法、间距的亲疏之别、动态调整行长与行高、以基线而非居中对齐等可工程化落地的设计原则，帮助开发者补齐 UI 设计这块最后拼图。
本文翻译自 Polar 官方博客，介绍其新设计系统 Orbit 背后的思考。随着 LLM 和 Coding Agent 大量参与前端 UI 开发，传统基于 Tailwind 字符串的样式写法导致设计一致性难以保障。Orbit 的核心思路是：将设计规范从文档升级为代码约束——Token 按设计意图命名（如 background-card），通过 StyleX 构建类型安全的 Box 组件作为唯一样式入口，禁止直接使用原始 div，并在 CI 中以 Oxlint 规则强制执行，使偏离设计系统的代码在机制上无法通过。文章强调文档只是概率性建议，CI 才是确定性契约。
本文是 Vibe Coding 网页动效词典的下篇，从第 37 个词继续，涵盖组件反馈、布局过渡与页面转场三大板块。内容包括折叠展开、锚定浮层、弹窗过渡、抽屉、标签页切换、轮播等组件动效；数字计数、骨架屏、加载指示、成功错误反馈等结果反馈动效；布局过渡、共享元素转场和页面转场等空间变化动效。每个词条均配有常见类型、适用场景和可直接使用的 AI 提示词示例，最后介绍第四层 UX 规则（反馈、操作暗示等），帮助零基础开发者用提示词驱动 AI 实现专业网页动效。
作者分享了在发布 X Article 时遇到的痛点：图片无法随粘贴的网页内容自动上传，需要逐张手动查找、上传并拖放到对应位置，流程繁琐易错。在尝试现有 Markdown 转 X Article 工具后仍不满意，于是自己开发了插件 X Article Bridge。该插件可将已写好的 Markdown 或 HTML 送入打开的 X Article 草稿，支持批量选择图片并按路径匹配、逐张通过 X 官方媒体入口上传并还原到原文位置、单独处理封面选择。作者认为内容工具的价值在于消除发布流程的最后一公里，让写作发布从手工搬家变成交付前检查。
本文是一篇 Vibe Coding 网页动效教程（上篇），旨在帮助读者用准确的术语向 AI 描述网页动效。文章先介绍 UI、UX 和 Vibe coding 的概念，提出网页动效的四层结构：技术工具（CSS、Motion、GSAP、Three.js 等）、触发方式、动效类型和 UX 规则。上篇重点讲解触发方式（悬停、焦点、点击、指针、视口、滚动、手势、页面加载、状态变化、定时）及动效类型的基础部分（Easing、Duration 等），每个词条配有可直接使用的提示词示例，帮助读者清晰表达脑中的动效效果。
作者以截图美化工具 RicoScreenshot 为案例，完整拆解了 Vibe Coding 的六步工作流：读懂项目、建立视觉规范、规划功能、开发实现、视觉交互调整、测试上线。文章强调每个环节做正确的事：先用 AGENTS.md 让 AI 理解项目架构，用 DESIGN.md 统一视觉规则，用 TODO.md 管理需求和进度；开发阶段一次只做一个功能，并重视亲自使用后的体验判断。该流程基于开源项目 image-beautifier 二次开发，纯前端实现，适合作为新手的第一次完整项目练习。
