- 博客(190)
- 收藏
- 关注
RSS订阅原创 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
702
原创 用元框架思维，系统化构建你的专属AI助手Prompt
本文摘要介绍了如何将Figma JSON节点数据转换为规范的React TypeScript代码的系统方法。任务流程包含9个关键步骤：从分析JSON结构到生成代码框架，包括样式管理、状态设计、逻辑优化和文档注释。方案采用Ant Design组件库和Zustand状态管理，强调类型安全和代码拆分。样式部分要求严格遵循Figma变量体系，Less文件需导入统一的token文件。整个过程注重结构清晰、类型完备和最佳实践，最终输出包含完整代码和设计说明。通过结构化模板和评估矩阵确保输出质量，并支持持续迭代优化。
2025-06-16 18:29:07
347
原创 告别“低效沟通”：AI帮你选对表达框架，开口即重点！
表达框架选择专家摘要 该Prompt旨在帮助用户在不同沟通场景中选择最适合的9种表达框架，以提升表达清晰度、逻辑性和说服力。专家角色需精准分析用户需求，从预设框架中推荐最佳方案，包括DESC模式（职场反馈）、SCQA结构（逻辑阐述）和问题解决五步法等。核心价值在于：快速匹配专业表达结构，降低听众理解成本，增强沟通效率与效果，同时提升用户的专业形象。专家需严格遵守框架限定，确保建议实用可操作，不创造新模型，完全基于用户具体场景进行推荐。
2025-06-16 18:07:22
764
1
原创 Cline Memory Bank 结构化文档持久化 AI 上下文详解
`Memory Bank` 是一个结构化文档系统，允许 Cline 在会话之间保持上下文。它能让 Cline 从无状态的助手转变为持久记忆的开发伙伴，随着时间推移有效地“记住”项目细节。
2025-04-10 20:51:20
1297
原创 Cursor Agent 模式实现复杂工作流的编排与执行
Cursor 中实现类 Dify 工作流编排效果，最大化的利用 Cursor 代码上下文，输出更贴合项目的代码改动，降低人工调整时间。提供一套完整的、可执行的工作流配置文件，支持工作流文件的创建和执行，提供完善的任务流执行机制，提供完整Demo流程演示。
2025-04-10 18:21:52
952
1
原创 Zustand 状态管理：从入门到实践
Zustand 状态管理指南这篇文章涵盖了 Zustand 的核心概念和常见用法，从基础的 Store 创建、组件交互，到性能优化（Selectors, Shallow Comparison）、异步处理、代码组织（Slices）、功能扩展（Middleware）以及特定场景（计算属性）的解决方案。
2025-03-27 20:32:36
950
原创 使用 openai-agent-python 和 dify-workflows-mcp 进行前端代码优化
最新发布了MCP（Model Control Protocol）能力，本文将结合进行代码演示，展示如何利用这些工具优化前端代码。创建llm.pyimport os。
2025-03-27 19:35:25
349
原创 AI Agent开发框架分析：前端视角
对于高级应用，可以考虑 LangChainJS + LlamaIndex-js 的组合，前者处理交互逻辑，后者负责数据检索。也是不错的选择，尤其适合希望通过可视化界面快速构建AI功能的前端开发者。对于前端开发者，我推荐。如果需要简化开发流程，
2025-03-10 19:46:07
1261
原创 Cline 如何快速构建一个 MCP Server 应用
开发一个 MCP Server 应用（dify-workflows-mcp ），用于实现在 vscode cline 的 MCP Client 中调用 dify 里面的指定工作流。
2025-03-05 21:04:10
1731
原创 Dify Workflows MCP Server （TypeScript）设计与实战
一个 Model Context Protocol (MCP) 服务器的 TypeScript 实现，将 Dify 工作流作为工具暴露出来，可直接集成到Cline或Roo Code中进行调用。
2025-02-27 13:36:07
3448
2
原创 AI代码标注专家Prompt指令的最佳实践
AI代码标注专家 Prompt 可作为项目级别提示词使用，专门负责为 AI 生成的代码添加特定的注释标记，然后基于 Node 脚本可以初步统计出 AI 代码占比。
2025-02-25 16:21:36
338
原创 实验 Figma MCP + Cursor 联合工作流
使用此 Model Context Protocol 服务器授予 Cursor 对 Figma 文件的访问权限。当 Cursor 可以访问 Figma 设计数据时，它比粘贴屏幕截图等其他方法更能准确地进行代码转化。具体配置方式可直接参考仓库中详细介绍。
2025-02-22 18:41:32
3822
原创 基于 DeepSeek + Gemeni 打造 AI+前端的多人聊天室
一个基于 React 和 Cloudflare Pages(免费一键部署) 的多人 AI 聊天应用，支持多个 AI 角色同时参与对话，提供类似群聊的交互体验。
2025-02-22 12:00:37
3684
原创 基于Deepseek大模型落地代码流程可视化功能
基于VSCode插件体系，开发 DeepSeek Code2Mermaid 功能，将代码的执行流程转为可在线预览的Mermaid流程图，提升代码的可读性。
2025-02-17 12:38:42
486
原创 代码可视化专家Prompt指令的最佳实践
代码可视化专家 Prompt 提示词可作为自定义提示词使用，可基于提供的代码文件、片段输出代码执行流程图。
2025-02-13 18:44:46
436
转载 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
266
原创 LangChain 表达式语言 (LCEL) 的链式使用方法
你可以把它想象成用乐高积木搭建流程，每个积木代表一个组件（比如 LLM、PromptTemplate、输出解析器等），通过 LCEL，你可以像拼积木一样把它们连接起来，形成一个完整的流程。通过理解 LCEL 的核心概念和常用 API，你可以灵活地组合各种组件，实现各种各样的功能。提取出来，并格式化成字符串，添加到输入中，然后传递给下一个 PromptTemplate。以流式方式调用 Runnable 对象，返回一个生成器，可以逐个获取结果。两个链会并行执行，最终返回一个字典，包含两个链的输出结果。
2025-02-07 14:47:31
1027
原创 前端代码整洁度提升专家Prompt指令的最佳实践
前端代码整洁度提升专家Prompt 提示词可作为自定义提示词使用，可对提供的代码进行优化。本次提示词偏向前端开发的使用，如有需要可适当修改关键词和示例。
2025-02-07 14:27:11
264
原创 前端开发架构师Prompt指令的最佳实践
前端开发架构师Prompt 提示词可作为系统提示词使用，可基于用户的需求输出对应的编码方案。本次提示词偏向前端开发的使用，如有需要可适当修改关键词和示例。
2025-02-07 11:07:13
779
原创 前端组件标准化专家Prompt指令的最佳实践
前端组件标准化专家Prompt 提示词可作为项目自定义提示词使用，本次提示词偏向前端开发的使用，如有需要可适当修改关键词和示例。
2025-02-05 17:16:17
576
原创 代码变更审查Prompt指令的最佳实践
代码变更审查 Prompt 提示词可作为项目自定义提示词使用，本次提示词偏向前端开发的使用，如有需要可适当修改关键词和示例。
2025-01-16 11:40:57
795
原创 使用 React Testing Library 测试 Antd Form 组件
重点在于对 Form.useForm() 的处理，其返回值包含了Form组件数据管理的相关方法。
2023-09-23 09:46:15
721
翻译 18个强大的JavaScript技能
当你需要写一个递归函数时，你声明了一个函数名，但每次修改函数名时，你总是忘记修改内部函数名。当你在开发过程中需要打印dom元素时，使用console.log往往只能打印出整个dom元素，而你无法查看dom元素的内部属性。当你需要打印出当前页面，但你需要修改当前的布局时。当你需要打印当前页面时。
2023-05-30 14:16:29
301
转载 维护好一个复杂项目
维护好一个复杂项目很难，这次分享了两个实践中有用的方案，第一个抱有主人翁心态设计代码，要在设计之初就做好考量，不要寄希望于对没有好好设计的系统做缝缝补补。第二是深入理解为什么现代社会的运作巧妙之处，尽可能把代码架构组织一定程度映射到社会的运作机制上，目前来看，社会最适合代码借鉴的思路就是解耦，再利用庞大的分工协作网络完成单人无法完成的工作。
2023-04-13 14:25:56
143
原创 IDE进阶配置
setting.jsonnode_modules 中展示文件范围配置Vim配置主题颜色修改{ "emmet.syntaxProfiles": { "vue-html": "html", "vue": "html" }, "terminal.integrated.fontSize": 15, "workbench.startupEditor": "newUntitledFile", "files.associations": { "*.tpl": "ht
2022-05-23 15:08:36
441
原创 webpack打包结果运行流程分析
webpack自身的定位是一个模块打包器，他的的理念是万物皆模块。然而其自身只能处理 javascript 模块以及 json 模块，那么何以敢称万物皆可打包呢，这就引出了 loader 机制，loader 可将各式各样的引用资源进行转化，然后输出为 webpack 可以识别的 javascript 模块并进行打包处理。基本配置const path = require('path');/** * 为配置文件提供类型支持 * @type {import('webpack').Configurati
2022-03-20 22:47:12
1114
原创 JavaScript复制图片和下载图片到本地
JavaScript复制图片和下载图片到本地基本代码结构<div className="html-canvas-wrap" ref={canvasWrap}> <div className="html-canvas"> <h3>标题</h3> <p>标题描述</p> <img src={TestImg} alt="" /> </div> <button onClick={handleC
2022-03-20 16:28:29
2081
转载 Jest 模拟 window.location 方法
Jest 模拟 window.location 方法当你要在 jest 中 mock window.location 时，你可能会这么做it('mocks and calls window.location.reload', () => { window.location.reload = jest.fn(); window.location.reload(); expect(window.location.reload).toHaveBeenCalled();});当你运行这个
2021-09-29 17:27:14
4308
原创 React App 配置单元测试环境
React App 配置单元测试环境为什么选择 React Testing Library 而不是 EnzymeCreate-React-App 创建的应用开箱即用Jest 一款 JavaScript 测试框架 创建 Jest 配置文件安装 jest 和 babel-jestnpm i -D jest @types/jest babel-jest 创建 Jest 配置文件 jest.config.js// 根据问答创建配置文件jest --init配置 Jest 测试环境其
2021-08-07 22:56:11
525
原创 封装Form表单组件极简版
确定要实现的功能import React, { useRef } from 'react'import Form from './Form'import FormItem from './FormItem'import Input from './Input'const FormContext = () => { const formRef = useRef(null) // 功能1：提交时获取所有表单数据 const submit = () => { form
2021-07-25 14:12:59
935
原创 Axios请求封装
Axios请求封装支持 get 、post 快捷调用支持重复请求取消支持通用错误处理支持类型推导import request, { AxiosError, AxiosRequestConfig, AxiosResponse, AxiosInstance, Method } from 'axios';import { message } from 'antd';import qs from 'qs';/** * 接口Response出参 */export interface IRe
2021-05-08 14:57:43
518
原创 IE11下polyfill严格模式报错问题总结
问题现象项目运行在IE11中产生报错，错误如下：该错误会阻塞页面加载，导致页面空白。问题分析根据报错的行和列信息找到引发错误的代码var TypedArrayConstructorsList = { Int8Array: 1, Uint8Array: 1, Uint8ClampedArray: 1, Int16Array: 2, Uint16Array: 2, Int32Array: 4, Uint32Array: 4, Float32Array: 4, Fl
2021-04-23 19:42:07
1317
原创 迁移Koa中间件模型至前端业务中
Koa 链式中间件原理常见中间件原理浅析其核心关键点在于中间件的之间的链式调用-实现方法则是在当前中间件中保存下一个中间件的引用洋葱圈模型的实现依赖于 async ... await，这也决定了中间件的固定写法async function commonMiddleware(ctx, next){ try{ // do something await next() // do something } .catch(err){ // handle
2021-03-22 17:46:10
227
原创 实现一个 EventEmitter
实现一个 EventEmitterNode.js的events 模块对外提供了一个 EventEmitter 对象，用于对 Node.js 中的事件进行统一管理。因为 Node.js 采用了事件驱动机制，而 EventEmitter 就是 Node.js 实现事件驱动的基础。在 EventEmitter 的基础上，Node.js 中几乎所有的模块都继承了这个类，以实现异步事件驱动架构。基本使用let events = require('events');let eventEmitter = new
2021-03-14 12:06:37
497
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人