教你用WorkBuddy开发自己的微信小程序
本文介绍了如何使用WorkBuddy开发微信小程序，包括添加专家、编写需求、使用微信开发者工具打开项目、获取APPID、真机预览等步骤。文章强调小程序开发本身简单，但上架审核和备案流程较复杂，并提供了相关注意事项。
全部文档 / 标签: 前端
122 篇
Remotion Skills 2.0 发布：子技能化、可交互与审美中立
Remotion 发布 Remotion Skills 2.0，带来三大更新：一是子技能化，将原本单一大文件拆分为 12 个专项技能，由 router 技能按需加载，减少上下文占用；二是可交互，简化核心 API 并打通 Studio 可视化编辑回路，AI 生成的代码可在 Studio 中拖拽编辑并写回源码，形成人机协作工作流；三是审美中立，技能只负责技术正确性，设计决策完全交给用户 prompt，避免 AI 默认审美干扰创作者意图。
How To Build $10K Agency-Quality Websites With Claude Code (The Complete Playbook)
本文详细介绍了如何使用Claude Code在短时间内构建高质量网站，达到代理机构收费8000-12000美元的效果。作者提出了一个五部分流程：加载设计技能、参考优秀网站、编写构建提示、进行润色和部署。通过安装设计技能、使用参考截图、提供结构化提示、分步润色和免费部署，即使非专业开发者也能在一天内完成专业级网站。文章强调约束和品味的重要性，并提供了具体操作步骤和示例。
用Codex手搓个人网页：我的AI协作实战经验
作者学习了Punk大佬的网页系列教程，利用周末两天时间，通过Codex独立完成了一个个人网页的开发并成功上线。文章分享了三个核心经验：1. 开发前需与AI充分沟通设计方案，确保方案清晰可执行；2. 迭代时可将对标网页的动效录屏给AI，通过拆帧理解并复述确认；3. 若无法清晰描述动效，可让ChatGPT生成布局图，再交给Codex实现。作者强调与AI交互的重要性，并计划继续优化网页。
AI 越会写代码，这些基本认识越重要
本文探讨了在Vibe Coding时代，计算机基础（尤其是计算机网络和数据库）的重要性。作者指出，AI虽然能高效生成代码，但开发者仍需理解代码的运行位置、网络访问原理、数据存储与设计、缓存策略等核心概念。文章通过八个问题，从localhost、域名、前端后端划分，到数据持久化、数据模型、缓存与失效，层层递进，强调建立完整技术认知地图对于从Demo到真正产品转化的关键作用。
AI新职业PDE火了：年薪最高22万美元，普通人怎么入行？
文章介绍了AI时代兴起的新职业Product Design Engineer (PDE)，即兼具产品思维、交互设计和前端代码能力的全栈角色。AI降低了生产成本，使得能独立完成从设计到上线的全流程人才变得稀缺。文章详细解析了PDE的职责、与其他角色的区别、转行路径以及国内外就业现状。
如何（以及为何）构建 Agent First 应用
文章介绍了如何使用 Agent-Native 框架构建 Agent First 应用。通过统一的前端动作与 Agent 工具，实现 UI 与 Agent 的双向同步。应用支持通过聊天交互、集成外部 Agent、A2A 通信及自动化任务，且完全开源。
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 和全球分发，非常适合一人公司快速验证产品想法。
自学Vibe Coding，这3个免费开源项目就够了，别买课
文章基于作者的Token消费经验，推荐了三个免费开源项目（Easy-Vibe、vibe-coding-cn、awesome-vibe-coding）作为学习Vibe Coding的替代方案，无需购买昂贵的课程。文章详细介绍了各项目的特点，提供了从入门到接单的详细学习路径，并分析了开源学习在更新速度、内容深度和社区支持上的优势。
正式开源 html-anything：让 AI Agent 输出世界级设计水准的 HTML
文章宣布正式开源 AI 工具 html-anything。该工具历时 3 天开发，包含 1.5 万行代码，旨在解决 AI Agent 输出 HTML 设计差的问题。它内置 75 套技能模板，支持 18 种主流代码 Agent CLI（如 Claude Code、Cursor 等）的自动探测与会话复用，实现零 API Key 成本。同时支持 Markdown、数据及图像等 11 种文件格式转换，并可一键发布至社交媒体或导出高 DPI 图片。
Claude + Figma 彻底改变了网页设计：从想法到落地的革命
文章探讨了 Claude 结合 Figma 如何解决网页设计中最难的部分：从“想法”到“执行”的转化。作者指出，AI 极大地提高了从规划、文案到代码生成的效率，使得一个人就能完成以前需要一个团队的工作。文章强调，未来的核心竞争力不再是单纯的编码或绘画能力，而是人类的审美品位、指导 AI 的能力以及快速交付的速度。
实测7款开源PPT Skill：用审美约束系统打破AI生成丑图魔咒
作者测评了 guizang、zarazhangrui、花叔等大佬开源的 7 个 PPT Skill 项目。文章指出，AI 生成 PPT 丑的核心原因是缺乏审美约束，而这些项目通过将人类美学编译为代码规则解决了这一问题。推荐项目包括 frontend-slides（Vibe Coding 挑图）、huashu-design（多格式输出）、guizang-ppt-skill（杂志风）等，分别适用于演示、协作及修改场景。
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 两种部署方案及常见问题排错指南。
手把手教你用 AI 做一个个人作品集网站
本文是一份保姆级教程，指导读者如何利用 AI（如 CodeX、Claude Code）从零开始构建个人作品集网站。文章强调在 AI 时代，作品集比传统简历更能展示个人能力。作者详细介绍了准备素材、寻找设计风格、生成 Demo、代码上传至 GitHub、部署到 Vercel/Cloudflare 以及购买域名的全过程，并指出这是通过作品重新认识自我、展示个人生命力的过程。
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) 排版规则的长文，极大提升了写作后期的分发效率。
