- 博客(203)
- 收藏
- 关注
RSS订阅原创 AI 驱动的增量式编码：前端开发的高效新范式
本文提出了一种"AI驱动的增量式编码"工作流，通过6个严格步骤将AI融入前端开发： 代码流分析：建立系统基线文档 结构化需求收集：消除需求模糊性 UI依赖收集：锁定所有API/Store/类型依赖 增量设计：生成实施蓝图 代码应用：按蓝图修改/生成代码 基线合并：更新系统状态文档 该方法适用于复杂新功能开发、遗留代码改造等场景，强调"设计优先"理念，通过文档化每个环节确保开发质量。案例展示了如何为产品列表添加筛选功能。建议严格顺序执行，避免跳过步骤，并定期合并基线保持
2025-11-20 15:00:56
761
原创 AI 辅助前端增量开发：一种基于“Diff 思想”的实战方案
摘要： 本文提出一种基于 React Diff 算法的 AI 辅助前端增量开发方案，通过标准化流程将单需求开发时间压缩 20% 以上。方案核心是将人工全量代码审查转化为 AI 精准变更追踪，包含 6 个步骤：1) 生成结构化需求快照；2) 标准化需求描述；3) AI 生成 UI 组件；4) AI 自动 Diff 分析变更点；5) 风险导向代码审查；6) 闭环维护更新文档。实际项目验证显示，该方法可将单需求耗时从 4-8 小时缩短至 2 小时。推荐使用 Claude 4.5 + Cursor IDE 工具链实
2025-11-19 14:27:32
733
原创 用 MCP 驾驭任务流：task-manager-mcp 全自动执行
本文介绍了如何利用task-manager-mcp构建全自动任务执行流水线的方案。关键点包括：通过/task-manager-mcp:get-task-rules命令获取任务管理规则；严格的任务完成判定标准，要求创建规范格式的归档文件；采用四步执行法（状态更新、执行准备、执行留痕、归档检查）实现自动化流程；明确任务状态流转逻辑和错误处理机制。该方案通过MCP上下文管理任务状态，实现从任务获取到执行归档的全自动处理，特别强调归档文件作为任务完成的必要凭证，为多人协作提供可追溯性保障。
2025-08-22 17:25:07
1499
原创 Prompt工程完全指南：从基础结构到AI时代的上下文革命
在AI驱动的时代，Prompt已从简单的提示词升级为人机协作的操作系统——它决定了大语言模型的思考路径与输出质量。本文深度解析Prompt的本质、黄金结构的10大模块（从任务上下文到输出格式）、概率与上下文优化原理，以及实用的调试与自动化技巧。通过真实案例展示如何用结构化Prompt驱动高质量代码生成、协调多智能体协作，并展望Prompt工程向上下文工程演进的未来趋势。如果你想让AI更聪明、更可靠地工作，这篇指南是不可错过的全景地图。
2025-08-22 13:42:45
754
原创 用 MCP 玩转任务管理：我的 `task-manager-mcp` 轻量方案
在 AI 驱动开发的工作流中，任务多、依赖复杂、优先级难以把握，常让人陷入“下一步该做什么”的困惑。task-manager-mcp 是一个轻量级 MCP（Model Context Protocol）任务管理服务端，零外部依赖，可直接嵌入现有工作流。它能自动跟踪任务状态、判断依赖完成情况，并智能推荐当前可执行的下一任务。本文将带你快速上手，并附架构图与流程图，助你用最少成本构建高效的任务管理体系。
2025-08-21 19:06:28
1253
2
原创 Claude Code 自定义命令生成子代理
摘要： command-creator 是专为 Claude Code 定制命令开发的智能子代理，能够高效生成结构规范、文档完善的命令文件。其核心能力包括智能需求分析、参数设计、完整实现与质量检查，遵循单一职责、清晰命名等最佳实践。工作流程分为四步：分析命令用途、规划结构、生成文件（含YAML说明、示例等）并验证质量。该工具显著提升命令创建效率，确保符合规范且易于维护，适用于项目或用户级命令开发。输出时提供完整命令文件及使用说明，特别关注错误处理和用户体验。
2025-08-21 09:44:57
1229
原创 Claude Code Git Commit & Push 命令
Claude代码Git提交推送命令 /git:commit-push命令提供全自动化的Git提交流程，包括： 自动分析代码变更 生成符合Conventional Commits规范的提交信息 提交变更并推送到远程仓库 支持自动检测提交类型(feat/fix/docs等)或手动指定类型，内置冲突检测和安全机制。提交信息格式为type: 简短描述(中文)，严格遵循项目规范(70字符限制、小写字母)。命令可带参数指定提交类型和附加信息，适用于各种变更场景，确保提交过程高效且规范化。
2025-08-20 19:12:34
1197
原创 Claude Code NPM 包发布命令
NPM 包发布工具摘要 这个自动化 npm 发布工具提供完整的包发布工作流，支持交互式版本选择和参数传递。主要功能包括： 智能环境检查：验证项目目录、Git状态和npm登录状态 版本管理：支持标准版本(patch/minor/major)和预发布版本(alpha/beta/rc) 构建流程：自动检测并执行构建脚本 变更日志：自动创建/更新CHANGELOG.md文件 发布流程：优先使用cnpm，失败时自动回退到npm Git同步：自动提交版本变更并推送标签 使用方法简单：/npm:publish [版本类型
2025-08-20 17:55:20
436
原创 Claude Code 用户级别开发规则
本文提出了一套兼顾技术卓越与实用性的软件开发标准体系（Claude Code），核心内容包括：架构设计遵循SOLID原则和组合优于继承思想；代码质量强调可读性、简洁性和全面错误处理；开发流程要求搜索先行、测试驱动和安全内置；性能优化注重避免过度设计；项目管理规范工具选择、提交记录和文档维护。整体以提升代码质量、开发效率和长期维护性为目标，通过严谨的标准体系实现技术实践与项目管理的平衡。
2025-08-19 10:48:56
337
翻译 Agent 原理与实战：从零构建简化版Claude Code
摘要 该视频深入解析了AI Agent的核心概念与实现原理。Agent通过整合大模型与外部工具（如文件读写、终端命令），赋予AI感知和改变环境的能力，突破了大模型仅能思考的局限。视频重点介绍了React模式（Reasoning and Acting）这一主流Agent运行机制，其通过"思考-行动-观察"的循环流程完成任务，并详细展示了如何通过精心设计的系统提示词控制这一流程。最后，作者演示了在DeepSeek上模拟React模式的过程，并预告将展示真实Agent的构建代码。视频揭示了Ag
2025-08-12 16:25:52
92
翻译 ADK智能体开发大师课：从入门到专家
YouTube视频摘要：ADK智能体开发入门教程 Brandon Hancock的这期视频教程详细介绍了如何使用Google的Agent Development Kit (ADK)构建AI智能体。课程从基础概念讲起，包括智能体的核心属性（根智能体、名称、模型、描述和指令）、必要的文件夹结构（init.py、env和agent.py文件）以及环境配置（安装依赖、获取API密钥）。视频重点演示了如何创建第一个问候智能体，并通过ADK的CLI工具和Web界面进行交互测试。特别强调了Gemini 2.0 No Fl
2025-08-12 15:34:17
114
原创 从0到1：Google ADK企业级多智能体开发终极指南（二）
本文介绍了如何升级AI研究团队为混合多智能体系统，实现企业级自主智能体开发。通过引入代码执行专家和报告撰写专家，并升级协调智能体架构，构建了一个包含智能规划、代码执行和报告生成的完整工作流。文章详细说明了四类智能体的分工协作流程，并提供了环境准备、网络搜索专家和代码执行专家的具体实现代码。该系统可实现任务自动拆解、数据搜索计算和AI报告生成，展示了高级多智能体系统的开发范式。文中特别强调了代码执行的安全性注意事项。
2025-07-10 18:19:19
831
原创 从0到1：Google ADK企业级多智能体开发终极指南
摘要：基于Google ADK构建企业级多智能体系统实践指南 本文详细介绍了如何使用Google Agent Development Kit (ADK)从零开始构建一个智能体系统，并将其扩展为企业级Web服务。主要内容包括： 基础智能体开发：创建具备网络搜索和文件读取功能的"深度研究智能体" Web服务封装：通过FastAPI将智能体转化为高性能API服务 多智能体协作：利用FastMCP协议实现智能体间的工具共享 企业级开发实践：涉及项目结构、环境管理、安全控制等最佳实践 文章采用逐步
2025-07-10 17:33:41
1692
原创 LangGraph 从0到1：手把手教你实现 ReAct 研究员智能体
本文手把手教你用LangGraph实现一个具备ReAct模式的智能体研究员。核心内容包括：1) 理解ReAct模式（Reason-Action-Observe循环），让AI具备思考-行动-观察的能力；2) 掌握LangGraph三要素：状态管理（共享记事本）、节点（工作站）和边（流程控制）；3) 实战演示：配置Tavily搜索工具和GPT-4模型，定义思考节点和执行节点，构建智能体工作流。通过学习，你将实现一个能自主使用网络搜索工具解答复杂问题的AI研究员。
2025-07-03 15:22:51
948
原创 用元框架思维，系统化构建你的专属AI助手Prompt
本文摘要介绍了如何将Figma JSON节点数据转换为规范的React TypeScript代码的系统方法。任务流程包含9个关键步骤：从分析JSON结构到生成代码框架，包括样式管理、状态设计、逻辑优化和文档注释。方案采用Ant Design组件库和Zustand状态管理，强调类型安全和代码拆分。样式部分要求严格遵循Figma变量体系，Less文件需导入统一的token文件。整个过程注重结构清晰、类型完备和最佳实践，最终输出包含完整代码和设计说明。通过结构化模板和评估矩阵确保输出质量，并支持持续迭代优化。
2025-06-16 18:29:07
408
原创 告别“低效沟通”：AI帮你选对表达框架，开口即重点！
表达框架选择专家摘要 该Prompt旨在帮助用户在不同沟通场景中选择最适合的9种表达框架，以提升表达清晰度、逻辑性和说服力。专家角色需精准分析用户需求，从预设框架中推荐最佳方案，包括DESC模式（职场反馈）、SCQA结构（逻辑阐述）和问题解决五步法等。核心价值在于：快速匹配专业表达结构，降低听众理解成本，增强沟通效率与效果，同时提升用户的专业形象。专家需严格遵守框架限定，确保建议实用可操作，不创造新模型，完全基于用户具体场景进行推荐。
2025-06-16 18:07:22
918
1
原创 Cline Memory Bank 结构化文档持久化 AI 上下文详解
`Memory Bank` 是一个结构化文档系统，允许 Cline 在会话之间保持上下文。它能让 Cline 从无状态的助手转变为持久记忆的开发伙伴，随着时间推移有效地“记住”项目细节。
2025-04-10 20:51:20
2140
原创 Cursor Agent 模式实现复杂工作流的编排与执行
Cursor 中实现类 Dify 工作流编排效果，最大化的利用 Cursor 代码上下文，输出更贴合项目的代码改动，降低人工调整时间。提供一套完整的、可执行的工作流配置文件，支持工作流文件的创建和执行，提供完善的任务流执行机制，提供完整Demo流程演示。
2025-04-10 18:21:52
1181
1
原创 Zustand 状态管理：从入门到实践
Zustand 状态管理指南这篇文章涵盖了 Zustand 的核心概念和常见用法，从基础的 Store 创建、组件交互，到性能优化（Selectors, Shallow Comparison）、异步处理、代码组织（Slices）、功能扩展（Middleware）以及特定场景（计算属性）的解决方案。
2025-03-27 20:32:36
1164
原创 使用 openai-agent-python 和 dify-workflows-mcp 进行前端代码优化
最新发布了MCP（Model Control Protocol）能力，本文将结合进行代码演示，展示如何利用这些工具优化前端代码。创建llm.pyimport os。
2025-03-27 19:35:25
473
原创 AI Agent开发框架分析：前端视角
对于高级应用，可以考虑 LangChainJS + LlamaIndex-js 的组合，前者处理交互逻辑，后者负责数据检索。也是不错的选择，尤其适合希望通过可视化界面快速构建AI功能的前端开发者。对于前端开发者，我推荐。如果需要简化开发流程，
2025-03-10 19:46:07
1580
原创 Cline 如何快速构建一个 MCP Server 应用
开发一个 MCP Server 应用（dify-workflows-mcp ），用于实现在 vscode cline 的 MCP Client 中调用 dify 里面的指定工作流。
2025-03-05 21:04:10
1957
原创 Dify Workflows MCP Server （TypeScript）设计与实战
一个 Model Context Protocol (MCP) 服务器的 TypeScript 实现，将 Dify 工作流作为工具暴露出来，可直接集成到Cline或Roo Code中进行调用。
2025-02-27 13:36:07
3852
2
原创 AI代码标注专家Prompt指令的最佳实践
AI代码标注专家 Prompt 可作为项目级别提示词使用，专门负责为 AI 生成的代码添加特定的注释标记，然后基于 Node 脚本可以初步统计出 AI 代码占比。
2025-02-25 16:21:36
417
原创 实验 Figma MCP + Cursor 联合工作流
使用此 Model Context Protocol 服务器授予 Cursor 对 Figma 文件的访问权限。当 Cursor 可以访问 Figma 设计数据时，它比粘贴屏幕截图等其他方法更能准确地进行代码转化。具体配置方式可直接参考仓库中详细介绍。
2025-02-22 18:41:32
4418
原创 基于 DeepSeek + Gemeni 打造 AI+前端的多人聊天室
一个基于 React 和 Cloudflare Pages(免费一键部署) 的多人 AI 聊天应用，支持多个 AI 角色同时参与对话，提供类似群聊的交互体验。
2025-02-22 12:00:37
4311
原创 基于Deepseek大模型落地代码流程可视化功能
基于VSCode插件体系，开发 DeepSeek Code2Mermaid 功能，将代码的执行流程转为可在线预览的Mermaid流程图，提升代码的可读性。
2025-02-17 12:38:42
585
原创 代码可视化专家Prompt指令的最佳实践
代码可视化专家 Prompt 提示词可作为自定义提示词使用，可基于提供的代码文件、片段输出代码执行流程图。
2025-02-13 18:44:46
630
转载 GitHub Copilot Agent 模式的系统提示词泄漏
今天破解了一下 GitHub Copilot Agent 模式下的系统提示词，可以看出来，它内置了一系列工具：search_codebase：进行自然语言搜索，用于在用户当前工作区中查找与其问题相关的代码或文档注释。run_in_terminal： 在终端中运行一个 shell 命令。edit_file：修改文件file_search：按照 glob 模式在工作区中搜索文件。只返回匹配的文件路径，最多 20 个结果。read_file：读取文件的内容。list_dir：列出目录内容。
2025-02-10 10:05:23
534
原创 LangChain 表达式语言 (LCEL) 的链式使用方法
你可以把它想象成用乐高积木搭建流程，每个积木代表一个组件（比如 LLM、PromptTemplate、输出解析器等），通过 LCEL，你可以像拼积木一样把它们连接起来，形成一个完整的流程。通过理解 LCEL 的核心概念和常用 API，你可以灵活地组合各种组件，实现各种各样的功能。提取出来，并格式化成字符串，添加到输入中，然后传递给下一个 PromptTemplate。以流式方式调用 Runnable 对象，返回一个生成器，可以逐个获取结果。两个链会并行执行，最终返回一个字典，包含两个链的输出结果。
2025-02-07 14:47:31
1188
原创 前端代码整洁度提升专家Prompt指令的最佳实践
前端代码整洁度提升专家Prompt 提示词可作为自定义提示词使用，可对提供的代码进行优化。本次提示词偏向前端开发的使用，如有需要可适当修改关键词和示例。
2025-02-07 14:27:11
467
原创 前端开发架构师Prompt指令的最佳实践
前端开发架构师Prompt 提示词可作为系统提示词使用，可基于用户的需求输出对应的编码方案。本次提示词偏向前端开发的使用，如有需要可适当修改关键词和示例。
2025-02-07 11:07:13
1138
原创 前端组件标准化专家Prompt指令的最佳实践
前端组件标准化专家Prompt 提示词可作为项目自定义提示词使用，本次提示词偏向前端开发的使用，如有需要可适当修改关键词和示例。
2025-02-05 17:16:17
794
原创 代码变更审查Prompt指令的最佳实践
代码变更审查 Prompt 提示词可作为项目自定义提示词使用，本次提示词偏向前端开发的使用，如有需要可适当修改关键词和示例。
2025-01-16 11:40:57
1583
原创 使用 React Testing Library 测试 Antd Form 组件
重点在于对 Form.useForm() 的处理，其返回值包含了Form组件数据管理的相关方法。
2023-09-23 09:46:15
800
翻译 18个强大的JavaScript技能
当你需要写一个递归函数时，你声明了一个函数名，但每次修改函数名时，你总是忘记修改内部函数名。当你在开发过程中需要打印dom元素时，使用console.log往往只能打印出整个dom元素，而你无法查看dom元素的内部属性。当你需要打印出当前页面，但你需要修改当前的布局时。当你需要打印当前页面时。
2023-05-30 14:16:29
326
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人