如何（以及为何）构建 Agent First 应用
文章介绍了如何使用 Agent-Native 框架构建 Agent First 应用。通过统一的前端动作与 Agent 工具，实现 UI 与 Agent 的双向同步。应用支持通过聊天交互、集成外部 Agent、A2A 通信及自动化任务，且完全开源。
🏷️ 前端
21 篇Claude Design 与 HyperFrames 的无创意工作流
本文介绍了 Anthropic 的 Claude Design 工具如何与 HyperFrames 结合，通过 HTML/CSS 直接将设计转化为视频。文章详细阐述了工作流程、品牌系统集成及实际案例，展示了从设计到渲染的无缝衔接。
Kimi K3 登顶设计榜单的秘密
Kimi K3 在单次前端竞技场中排名第一，Elo 评分达 1408。其成功归功于独特的思维链模式，在推理过程中模拟 Agent 工作流，通过大量代码迭代和心理测试，实现了更精细的设计和外部依赖集成。
tldraw 不仅仅是白板：你可以构建的 14 种应用
文章介绍了 tldraw 作为一个可编程的 React 无限画布 SDK 的强大功能。除了基础的白板功能，它支持将 React 组件转化为画布形状、构建可视化的工作流自动化、集成 AI 视觉交互、实现多人实时协作以及作为持久化应用数据存储。tldraw 适用于构建各种空间软件，从架构图到 AI Agent 管道。
用 Skills 给 AI Agent 注入设计品味
介绍了开源技能库 emilkowalski/skills，它能为 AI 编程 Agent 注入设计品味，解决 AI 生成 UI 动画和交互时缺乏质感的问题。文章详解了其核心功能、安装方法、实操流程，并对比了 Taste-Skill、Hallmark 等类似工具的差异。
设计师专用的 AI Agent Skills 库开源
MengTo 开源了一个名为 Skills 的项目，包含 75+ 个专为设计师和前端开发者准备的 Agent Skills。这些 Markdown 格式的操作手册可加载到 Codex、Claude、Cursor 等 AI 工具中，将优秀工作流和规范固化，使 AI Agent 能按最佳实践完成设计任务，输出更稳定专业。
做视频，装这 6 个 Skills 就够了！
文章介绍了 6 款适用于 AI 编程 Agent 的视频处理 Skills，包括 HyperFrames、FFmpeg、OpenMontage、Remotion、Video-Use 和 Manim。作者指出，做视频的痛点在于脚本、转码等重复性工作，通过为 AI 安装这些技能，可以实现从图文转视频、素材剪辑、批量生成到科普动画的流程自动化。文章详细对比了各工具的适用场景，并建议小白从 FFmpeg 和 Video-Use 入手。
文章转视频实战：从音频处理到 Cue 校准的技术复盘
作者分享了将文章转化为网页视频的全过程。文章详细探讨了从使用 Voicebox 生成 TTS 音频的尝试，到发现逐段生成音色漂移、整段切分不准等问题，最终采用“整章音频 + cue 时间轴”的解决方案。内容涵盖了 TTS 技术选型、前端播放逻辑以及踩坑后的工具化思考。
10分钟上线网站：Vercel保姆级教程，含部署失败排坑指南
本文是建站系列的第四篇，提供了详细的 Vercel 部署教程。文章介绍了 Vercel 的免费额度与商业模式，涵盖了注册流程、单文件及 Fork 模板项目的部署步骤。重点讲解了如何配置框架预设和环境变量，并提供了利用 AI 辅助排查部署失败问题的方法。最后，针对国内访问 Vercel 不稳定的问题，作者给出了绑定自定义域名等解决方案。
不会写一行代码，我用Codex给自己做了个网站，全程0元 | 建站系列【1】
本文是建站系列教程的第一篇，主要介绍如何在不编写任何代码的情况下，利用AI Codex、GitHub和Vercel搭建一个免费的个人网站。作者详细拆解了从生成代码、保存文件到部署上线的全流程，并提示了新手易错点（如文件命名）及国内访问的注意事项。
Claude + Remotion 自媒体视频全流程制作教程
本教程介绍如何利用 Claude Code（AI 编程助手）和 Remotion（视频代码框架）自动化制作自媒体视频。用户无需编写代码，只需通过自然语言下达指令，即可完成从环境搭建、脚本生成、配音合成到最终视频渲染的全过程。文章详细解析了搭建流水线、单期制作及后期调整的提示词技巧，适合制作科普、资讯、教程等类型的短视频内容。
土豆哥一人公司手册：30分钟全球部署指南
文章介绍了如何利用 Cloudflare Workers 和 Pages，在 30 分钟内、零成本完成一个产品等待列表的全栈部署。涵盖了从安装 Wrangler 工具、创建 D1 数据库、编写后端 API 到前端页面构建的全过程。该方案无需维护服务器，支持自动 HTTPS 和全球分发，非常适合一人公司快速验证产品想法。
HTML 做 PPT 与社交媒体卡片生成器
作者 Leo Xiang 乘着“HTML 做 PPT”的热潮，开发了一款“好看卡片”生成器。该工具支持一键生成小红书、即刻、X 等平台的社交媒体卡片，提供 11 个主题及 8000+ 设计语言组合，并包含信息图效果。
有趣的交互式科学应用创意 Part 2
文章展示了作者开发的系列交互式科学应用 Demo，包括黑洞时空扭曲可视化、达芬奇扑翼机机制实现以及科幻彗星探测器等。作者结合了 GPT Images、Nano Banana 2 进行设计，并使用 Gemini 3.1 Pro 编写代码。文章还分享了设计灵感和前端控件交互示例，旨在打造儿时向往的科学杂志风格的互动体验。
Hermes WebUI 终极指南：在浏览器中掌控你的 AI 终端
本文介绍了专为 Hermes Agent 打造的 WebUI 可视化控制台。该工具采用 Python 原生后端与 Vanilla JS 前端，旨在提供零框架、零构建的秒级启动体验。文章详细阐述了其核心功能，包括流式输出、思维链可视化、内嵌文件浏览器及安全护栏，并提供了原生与 Docker 两种部署方案及常见问题排错指南。
DESIGN.md：网页设计的极致工作流升级
文章介绍了一种通过创建 DESIGN.md 文件来规范 AI 辅助网页设计工作流的方法。作者指出，直接使用 AI 生成不同页面（如定价页、着陆页）时，往往会导致风格不统一。解决方法是将字体、配色、动画时间轴、布局规则等提取到 DESIGN.md 中，并将其作为上下文提供给 Claude Design。这样生成的所有页面都能保持一致的视觉风格（如 Liquid Glass 风格），从而实现从“逐个提示”到“系统化构建整个站点”的效率飞跃。
如何用 AI 构建价值 5000 美元的落地页
文章作者 Prajwal Tomar 分享了如何利用 AI 工具（主要是 Lovable）和精准的提示词，打造出一个具有电影级滚动效果、3D 模型和 Shader 动效的高端落地页。文章的核心观点是：AI 生成的页面之所以显得平庸，是因为提示词缺乏具体性。作者详细展示了从 Hero 区域的 3D 倾斜、Spline 3D 模型集成、WebGL 特效到滚动驱动的层级堆叠架构的实现过程，强调了具体参数、代码片段引用以及空间架构定义的重要性。
是网页！更是极致的 PPT 替身：这款 Skill 正在重塑我的录屏演示炫酷场景！
作者冰河分享了一款自用的 PPT 展示类 Skill，能将内容自动转化为 10 种世界级设计风格的网页幻灯片。该工具支持横竖屏切换，适用于视频背景、演讲、作品集展示等场景。文章详细介绍了从“深色科技极简”到“胶片暗房”等十种视觉风格的特点，并提供了该 Skill 的百度网盘下载地址及使用方法。
开源我的写作三件套：封面生成+公众号排版+X排版
作者烁皓开源了一套写作辅助工具，旨在解决文章发布过程中的格式痛点。工具箱包含封面生成器、MD转微信排版和MD转X排版三个零依赖的浏览器工具。用户只需编写 Markdown 源文件，即可一键生成文章封面、适配微信公众号的富文本以及符合 X (Twitter) 排版规则的长文，极大提升了写作后期的分发效率。
Claude Design 系统提示词（中文版）
这是一份 Claude 的设计系统提示词，旨在指导用户通过协作的方式，利用 HTML 创建经过深思熟虑、工程化良好的设计交付物。文档详细规定了工作流程、输出规范（如文件命名、代码拆分、版本控制）、技术限制（React/Babel 版本、样式对象命名）以及设计方法论（探索现有资源、提供多选项变体）。此外，还涵盖了文件跨项目访问、上下文管理、提问技巧等操作指南。
HyperOpen：开源 Hyperliquid 客户端及数据层
文章介绍了 HyperOpen，一个开源的 Hyperliquid 永续合约交易客户端。该项目旨在填补 Hyperliquid 生态在客户端层的开放性缺口，提供交易、投资组合分析、金库分析等功能，并拥有全面的性能分析和正式验证的代码库，致力于提升协议的透明度和社区参与度。