Edon Wang's Blog

写在 2026 年的开头2026 年开年，AI 圈最火的词之一，是 Skills。 如果把大模型比作一颗恒星，知识与推理只是它的光；Skills 则是它伸出的手：能触达仓库、能点亮终端、能调度工具、能穿行在企业流程与权限边界之内，把“会说”变成“能做”。 我愿意用一个更粗粝、也更真实的比喻来描述今天的 Skills： 现在说 Skills，像是游戏里一件件掉在地上的白装。 白装很多，捡起来很容易，但大多不成体系：接口不统一、质量不稳定、可观测性缺失、边界模糊，能用但不敢押上关键战役。 但我相信，2026 年会发生一件更重要的事：这些白装会升级。 它们会变成绿装、蓝装，甚至紫装——不是“看起来更酷”，而是从能跑到可靠，从好用到可控，从单件到套装，从个人玩具到组织资产。 接下来我想回答一个更现实的问题：当 Skills 从散落地上的白装开始升级，它会如何改变两类程序员的命运与分工？ 为便于讨论，我暂时把技术工作分成两类：基石与业务。 基石程序员：打造装备的人。 业务程序员：使用装备的人。 我认为两者相辅相成。只有打造装备的人造出的装备品质足够高、使用装备的人技巧足够好，人类文明...

引言在《AI时代前端开发指南》中，我们探讨了如何利用 AI 提升个人与团队的产能。如果说大语言模型（LLM）是拥有无限潜力的“最强大脑”，那么 Agent Skills（AI 技能） 就是它的“双手”与“工具箱”。 单纯的对话框交互（Chat）往往止步于“咨询”与“生成”，而引入 Skills 后的 Agent 才能真正触达你的代码仓库、执行终端命令、甚至遵循你团队独有的代码规范。本文将深入解构 Agent Skills 的核心概念，并手把手教你如何打造专属的 AI 技能包。 一、Agent Skills 是什么简单来说，Agent Skills 是赋予 AI Agent 特定能力的插件包。 想象一下，刚出厂的 LLM 就像一个博学但对你项目一无所知的实习生。它懂 Python、JS，但不懂你们公司的 utils 库；它懂设计模式，但不懂你们团队的 CSS 命名规范。 Skills 的本质就是“上下文（Context）”与“指令（Instruction）”的标准化封装。 通过 Skill，你可以： 注入领域知识：让 AI 瞬间学会某个冷门框架的配置写法（如 hexo-butte...

原始要求你是一个资深react开发者，你最擅长使用antd和umijs为基石的阿里技术栈全家桶，包括但不限于：Umi.js、Umi Max、Antd、Antd Mobile、Antd Pro、Antd Pro Components、Antd Charts。样式你喜欢使用less和react中模块化导入样式。你擅长使用Threejs处理3d需求，AR需求你擅长使用mind-ar库。你习惯把组件放进components文件夹中，保证index.tsx主文件的代码整洁。 生成的英文提示词You are a Senior React Developer and a recognized expert in the Alibaba technology stack. You possess deep architectural knowledge and practical mastery of the entire Umi/Ant Design ecosystem. Your code is clean, modular, and production-ready. Core ...

引言2025 年对于 React 社区来说，注定是不平凡的一年。React 19 的稳定版发布本应是普天同庆的里程碑，但随之而来的却是一连串基于 React Server Components (RSC) 的安全警报。 特别是近期被披露的 CVE-2025-66478，这个评分高达 10.0 的顶级灾难性漏洞，直接将 Next.js 15 和 16 推上了风口浪尖。作为一个被官方（Vercel & Meta）强力扶持、甚至被视为“默认最佳实践”的架构模式，RSC 为何频频翻车？Next.js 又为何成为了黑客眼中的“筛子”？本文将从技术原理、架构缺陷以及未来前景三个维度，深入剖析这场“官方押宝”背后的安全危机。 一、RSC 漏洞频发的根本原因：边界模糊的代价RSC 的核心愿景是美好的：让服务器组件直接访问后端资源（如数据库），同时保持客户端组件的交互性。 但这种“全栈混合”的模式，打破了传统 Web 开发中前后端物理隔离的“安全屏障”。近期爆发的三大 CVE 漏洞正是这一代价的直接体现： 1. 顶级灾难：CVE-2025-66478 (CVSS 10.0)这是一个允许远...

引言从 GitHub Copilot 的横空出世，到 GPT-4 的惊艳亮相，再到近期 Gemini 3.0 在代码生成领域的“傲视群雄”，每一次 AI 能力的代际跃迁，似乎都会在技术圈引发一轮“前端已死”的讨论。 作为一名在一线摸爬滚打多年的前端开发者，我也曾经历过从“切图仔”到“工程师”的转型焦虑。面对近两年 AI Coding 能力的指数级爆发，我更倾向于将其视为一次生产力的重构而非职业的终结。本文将结合最新的技术趋势，探讨如何理性看待 AI 能力的双刃剑效应，以及新时代前端开发者应如何调整身位，驾驭这股不可逆转的浪潮。 一、辩证看待 AI Coding 能力的爆发AI 不会取代你，但会使用 AI 的人会。要理解这句话，首先需要客观分析 AI Coding 目前的能力边界。 1. AI 的“超能力”与“阿喀琉斯之踵”当前的 AI Coding 工具（如 Cursor, Trae, Gemini Code Assist）在处理标准化、重复性任务上已经展现出了超越人类的效率。 消除重复劳动 (Boilerplate Killer)：无论是写一个 React 组件的样板代码，...

Next.js 16 正式发布，作为 2025 年末的重磅更新，它标志着 Next.js 从“激进探索”走向“成熟稳定”。本次更新不仅将 Turbopack 设为默认构建工具，带来了数倍的性能提升，更通过 Cache Components (use cache) 重构了复杂的缓存机制，让开发者拥有了更直观的控制权（参见 @Next.js 16 发布公告）。 本文将深度解析 Next.js 16 的核心更新，并提供详细的迁移与使用建议。 一、功能更新与技术解析1. Cache Components：缓存机制的范式转移Next.js 16 引入了 @Cache Components，这是对原有缓存系统的重大重构。 核心变化：从 Next.js 13-15 的“默认缓存”转变为“默认动态，按需缓存”。这解决了以往“缓存黑盒”难以调试的问题。 技术解析：通过新的 @’use cache’ 指令，开发者可以显式地标记组件、函数或页面进行缓存。编译器会自动生成缓存键值。这也标志着 Partial Prerendering (PPR) 的完全成熟与落地。 便利性：消除了对 revalidat...

引言Gemini 3.0 是谷歌最新一代大型模型系列，在推理、工具使用和多模态理解上迈出了一次“代际跃迁”。对前端开发者而言，它不只是“更快的代码补全”，而是能在设计、生成、调试、评审的整条链路上提供更强、更稳定的智能支撑。本文结合最新官方资料与实践，系统解析 Gemini 3.0 的技术要点、在前端领域的能力提升、开发者使用指南与工作流变革。 技术调研官方资料与版本信息 开发者指南（Gemini API）：Gemini 3 开发者指南，包含模型能力、思考等级、温度设置、结构化输出、函数调用与工具使用参数等细节（详见文末参考链接）。 IDE 能力（Gemini Code Assist）：Gemini 3 已在 VS Code 与 IntelliJ 的智能体模式中逐步开放，具备模型自动回退与来源标注等能力，适合落地日常工程（详见文末参考链接）。 模型介绍（DeepMind）：官方对 Gemini 3 的定位、对比与基准数据，明确强调其在前端质量、屏幕理解和复杂交互生成上的显著提升（详见文末参考链接）。 前端代码生成能力的改进点 更强的屏幕与界面理解：在 ScreenSpot-P...

角色你是 Next.js 开发专家与架构师，擅长以现代、类型安全的技术栈构建高性能、可维护的 Web 应用。 使命在 Next.js 16 上为用户提供设计、开发、调试与优化支持；除代码外，给出经过验证的架构模式、性能优化与最佳实践，帮助规避常见陷阱。 核心技术栈 Next.js 16：App Router、RSC/客户端组件、Route Handlers、Server Actions、Metadata、Streaming、构建优化。 React 19：Canaries、Actions、use 系列钩子，并与 Next.js 16 深度集成。 TypeScript：严格类型、复杂类型与泛型设计，提升可维护性与可靠性。 Tailwind CSS：原子化开发，配合 shadcn/ui 构建复杂、响应式与美观的 UI。 Valtio：代理模型、派生状态、订阅，与 RSC 的协同使用。 ESLint：遵循官方与现代规则（eslint-config-next），以静态分析保障质量。 shadcn/ui：components.json 配置、@/co...

评测维度与方法 产品定位与开源生态 工作流/Chatflow 能力与可视化调试体验 插件/工具生态与扩展方式 模型支持与迁移成本 知识库/RAG 质量与可观测性 Agent 框架与协作能力 部署与私有化（SLA、并发与稳定性） 分发渠道与二次集成 团队协作/LLMOps（日志、评测、标注、灰度） 成本与学习曲线 对比总览表（扣子 vs Dify） 维度 扣子（Coze） Dify 定位与性质 一站式 AI Agent 开发平台，强调零/低代码搭建智能体与工作流，面向从个人到企业的端到端落地；国内版对接豆包大模型，围绕工作流、图像流、知识库、插件等生态构建 3 5 2 开源的 LLM 应用开发与运行平台，融合 BaaS 与 LLMOps，覆盖工作流、RAG、Agent、Prompt IDE、监控分析与 API 等，适合从原型到生产的全生命周期 4 2 是否开源 官方推出了开源版 Coze Studio（基于扣子平台核心引擎），可本地/私有部署 3 5 完全开源（活跃社区+企业落地案例），可自部署并进行二次开...

引言随着大语言模型（LLM）与多模态能力的迅猛发展，前端工程正从“以人为中心的界面开发”走向“以智能为内核的人机协同”。本指南面向一线前端工程师与 Team/Tech Lead，聚焦“如何在真实工程中系统性引入 AI，提高个人与团队产能，并确保可控、可复用、可验证”。文风与结构参考系列文章《提示词工程（一）：基本概念与设计原则》和《提示词工程（二）：高级提示技术与应用实践》，建议结合阅读： 基础篇：/2025/08/19/提示词工程-提示词基本概念/ 进阶篇：/2025/08/19/提示词工程-提示词提示技术进阶/ 一、AI 对前端的影响（从个体到团队） 个人效率跃迁 代码生成/改写：组件骨架、测试桩、类型补全、错误修复、迁移脚本 上下文理解：快速扫读代码库、生成函数文档、提炼接口契约 重复性工作自动化：样式批量整理、文案本地化、接口 Mock/数据合成 体验设计升级 个性化与自适应 UI：基于用户画像与上下文动态调整交互与密度 智能输...