跳至主要內容
快速开发指南

步骤1: 安装Claude Code

Npm安装

如果您已安装Node.js 18或更新版本

npm install -g @anthropic/claude-code
xz大约 3 分钟开发工具ai工具
常见工作流程

理解代码库

假设您刚加入一个新项目，需要快速了解其结构

  1. 导航到项目根目录

    cd /path/to/project

  2. 启动Claude Code

    claude

  3. 请求高层次概览

    > give me an overview of the codebase

  4. 深入了解特定组件

    > explain the main architecture patterns used here

> what are the key data models

> how is authentication handled?
xz大约 3 分钟开发工具ai工具
设置配置

使用全局和项目级设置以及环境变量配置Claude Code

Claude Code 提供各种设置来配置其行为已满足您的需求。你可以通过在使用交互式REPL时运行/config 命令来配置Claude Code

设置文件

settings.json文件是我们通过分层设置配置 Claude Code 的官方机制：

  • 用户设置--在~/.claude/settings.json中定义，适用于所有项目
  • 项目设置-保存在您的项目目录中
    • .claude/settings.json 用于检入源代码控制并与团队共享的设置
    • .claude/settings.local.json 用于不检入的设置，对个人偏好和实现很有用。Claude Code会在创建时候配置git忽略.claude/settings.local.json
  • 对于Claude Code 的企业部署，我们还支持企业管理策略设置。这些设置优先于用户和项目设置。系统管理员可以将策略部署到：
    • macOS：/Library/Application Support/ClaudeCode/managed-settings.json
    • Linux 和 WSL：/etc/claude-code/managed-settings.json
    • Windows：C:\ProgramData\ClaudeCode\managed-settings.json
xz大约 4 分钟开发工具ai工具
掌握 .claude/ 目录：让 Claude Code 真正懂你的项目

Claude Code 开箱即用已经很强大了，但真正让它如虎添翼的，是学会配置.claude/目录。这个目录是你与Claude之间的"约定"--项目规范、自定义工具、工作流自动化，全部在这里

目录结构总览

your-project/
├── .claude/
│   ├── settings.json          # 权限、MCP、环境变量配置
│   ├── settings.local.json    # 本地私有配置（不提交 git）
│   ├── rules/                 # 自动加载的规则文件（补充 CLAUDE.md）
│   │   ├── security.md
│   │   └── style.md
│   ├── commands/              # 斜杠命令（简单指令）
│   │   ├── commit.md
│   │   └── test.md
│   └── skills/                # 斜杠命令（复杂工作流）
│       ├── review.md
│       └── deploy.md
└── CLAUDE.md                  # 项目说明书（自动加载）
xz大约 7 分钟开发工具ai工具
7 个实用技巧，让Claude Code的Token消耗爆降80%

不要只优化Prompt，更要优化Context

Claude Code 很强大，这在前面的实践文章中我们已经验证过了，但与此同时，也有不少朋友说Token消耗过多，成本过高。

面对这个问题，很多人第一反应是：是不是Prompt写得太啰嗦了？

其实，很多时候真正“烧 Token”的，并不是输入的那句话，而是Claude背后带着的整段上下文。

它们可能包括：

  • 之前的聊天记录
  • 已经读取过的代码文件
  • 工具调用输出
  • 像 CLAUDE.MD这样的记忆文件
  • 系统或后台注入的额外指令
xz大约 5 分钟开发工具ai工具
保姆级喂饭教程：什么是Skills？如何用Skills？

什么是Skills？

Skills翻译成中文就是技能

什么是技能，技能就是你执行某件事的方法论

提示

举个生活中的例子：我会打羽毛球。当球飞过来，我拿起球拍，在合适的时机、用合适的力度急求，让球准确落在对方场地，这一套操作逻辑，就叫做技能

在AI界，Skills就是让大模型按照牟定特定的方法论去行动的机制

有人会说，这不就是提示词吗？

xz大约 4 分钟开发工具ai工具
前端AI + 面试

  1. SSE与WebSocket区别

    • 通信方向:SSE是服务端单向推送给客户端，WebSocket是双向全双工
    • 协议：SSE基于HTTP,WebSocket是独立的ws/wss协议
    • 数据类型：SSE只支持文本，WebSocket支持文本和二进制
    • 重连：SSE浏览器自带自动重连，WebSocket需要自己写心跳和重连
    • 使用成本：SSE非常简单,前端用EventSource就行；WebSocket需要服务端支持协议升级
    • 使用场景：SSE适合通知、日志流、Ai流式输出;WebSocket适合实时聊天、游戏、协同编辑、直播

    简单理解：

    • SSE：客户端连上去，服务器一直发消息过来
    • WebSocket：客户端和服务器随时可以互相发消息

  2. 对AI基本概念了解:RAG、Agent、FunctionCall、MCP、Skills

    • RAG:先检索外部资料，在让模型回答，用来解决模型瞎编、知识过时的问题
    • Agent: 能自己思考、做计划、调用工具、一步步完成任务的智能体
    • FunctionCall: 模型调用外部接口或函数的标准方式，比如查天气、查数据库
    • MCP: 模块和外部系统、工具之间通信的统一协议，方便对接各种能力
    • Skills: 把常用功能封装成可复用的技能，比如写代码、生成图标、总结文档

    他们的关系： 用户提需求-> Agent作为大脑 -> 用RAG查资料、用FunctionCall调用工具、用Skills执行能力 -> 通信靠MCP协议

  3. 个人AI技能了解(可直接背)

    • 了解大模型基本原理和提示词工程
    • 能基于RAG搭建私有知识库问答
    • 理解Agent工作流程，会使用FunctionCall
    • 能做前端+AI项目，比如对话界面、流式输出
    • 了解多Agent协作和常用框架
    • 能独立完成需求拆解、AI方案设计与落地

  4. 了解主流模型有哪些及各自特点、应用场景

    • 国际模型
      • GPT-4o:总和能力最强，多模态好，代码、推理都很强
      • Gemini: 谷歌多模态，图片、视频理解能力突出
      • Claude: 擅长超长文本、安全性、合规性好
      • Llama: 开源模型，可以本地部署、二次开发
    • 国内模型
      • 文心一言：中文理解好，知识覆盖全面
      • 通义千问：阿里生态，适合电商、客服、业务系统
      • 讯飞星火：语音能力强，教育、医疗场景多
      • Kimi: 超长上下文，适合度文档、总结资料

  5. 用了什么IDE及对比

    • VS Code:生态最丰富、轻量、插件多，日常开发助理
    • WebStorm: 智能提示、代码重构强，适合大型项目和团队
    • Cursor: AI原生编辑器，代码生成、对话一体，AI开发首选
    • Zed: 启动快、操作流畅，最求高效编码可以用

    总结：日常用vs code，大型项目用webstorm，AI项目用cursor，高效编码用zed

  6. 多Agent有了解吗？

    多Agent就是多个智能体分工合作，像一个团队一起完成复杂任务

    • 分工：有的负责规划，有的负责搜索，有的负责写代码，有的负责测试
    • 通信：智能体之间可以传递信息、对齐目标
    • 优点：复杂任务更稳定、逻辑更清晰、更容易维护
    • 常用框架：AutoGen、CrewAI、LangGraph

    简单流程：

    用户提需求->主管 Agent 分配任务 -> 各个智能体分别执行 -> 汇总结果返回给用户

  7. AI在实习部门中应用场景

    • 智能客服、内部问答：用RAG + 对话界面
    • 代码生成、自动补全、代码解释：用Cursor、Copilot这类工具
    • 需求文档、接口文档自动生成与总结
    • 前端页面自动生成-- 根据描述或草图生成代码
    • 数据可视化、报表自动生成：自然语言转图表
    • 测试用例、测试脚本自动生成

  8. Agent底层原理：ReAct、Transformer了解

    • ReAct
      • 就是推理 + 行动
      • 流程：先思考要做什么 -> 调用工具或执行动作 -> 观察结果 -> 在思考-> 直到完成任务
      • 是现在大多数智能体的核心逻辑
    • Transformer
      • 是现在所有大模型的基础框架
      • 核心是自注意力机制，能理解上下文、语义关联
      • 前端层面只要知道：它是模型用来理解语言、生成内容的底层架构

  9. 现有需求如何用AI实现：拆解小需求、AI规划、实现、测试、包含/plan、/spec；标准流程

    1. 需求拆解：把大需求拆成小需求，明确每个模块做什么
    2. AI规划/plan: 明确目标、执行步骤、输入输出、依赖项、时间安排
    3. 方案设计/spec: 确定接口、数据结构、页面逻辑、提示词、异常处理
    4. 实现：前端界面 + 模型调用+ RAG或FunctionCall集成
    5. 测试：测试功能是否正常、有没有幻觉、流式输出是否稳定、异常情况是否处理
    6. 上线与优化：根据效果迭代提示词、流程、模型参数
xz大约 4 分钟开发工具ai工具
一文吃透AST与LSP--为什么AI代码工具都离不开它

前言

你有没有好奇过：Cursor、Claude Code、OpenCode这些AI工具，为什么能精准找到函数定义、秒级定位引用，而不是像grep那些瞎匹配

答案藏在两个核心技术里：** AST(抽象语法树)和 LSP(语言服务器协议)**

本文将从"是什么->为什么->这么工作->怎么用"，用JS代码实战 + 流程图，彻底讲透两者的关系、LSP的核心原理，以及AI工具偏爱他的底层逻辑

一、先搞懂基础: AST 和 LSP 分别是什么？

在聊关系之前，先用 『大白话 + 类比』 搞懂两个核心概念，避免被术语劝退

xz大约 7 分钟开发工具ai工具
AI 漫剧制作

提示词结构

  • 景别：远景、全景、中景、进景、特写、大特写、极端特写
  • 视角：正面平视、侧面视角、背面视角、斜侧视角、俯视、仰视、四分之三测
  • 画面内容：超现实的中国南方喀斯特地貌山水景观，前景...中景...远景..
  • 画面美学：色调、风格、光影、构图
  • 画质：8k、超清、史诗级没学、电影质感等

demo

风景

超现实的中国南方喀斯特地貌山水景观，远景，清晨时分，多座陡峭的石灰岩孤峰拔地而起，山峰覆盖着极其茂密的青绿色亚热带植被，中景偏右是一座高大陡峭的喀斯特孤峰，岩壁上覆盖着茂密的青绿色亚热带植被，山谷间流动着洁白的晨雾与云海。画面中远景处，掩映在山林与云雾间隐约有一座古朴的中式飞擔建筑(露出一半)，旁边有一道银白色的瀑布从山崖倾泻而下，建筑往后连着几座山峰比建筑要高，右侧前景用翠绿的竹叶作为自然画框，增加画面层次。天空是澄澈的湛蓝色，点缀着蓬松的白色积云。整体风格是电影级写实，色彩清新明快，氛围宁静悠远、仙气缭绕，充满东方禅意与仙侠秘境感，8K分辨率，细节丰富，光影柔和通透。

xz大约 5 分钟开发工具ai工具
AI 应用开发入门：前端也可以学习 AI

前言

该篇主要是分享自己作为一个前端工程师学习 AI 的历程。你将学习到：

  • 如何选择学习路线
  • 学习AI相关的基础概念
  • 学习AI 应用开发的基本技术方案
  • 学习基于LLM开发一个简单的AI编程助手

寻找方向

1.1 面对焦虑和兴趣

现在 AI 领域发展迅速，新的概念和技术层出不穷。不会让人产生两种情绪

  • 焦虑：面对未知技术概念 + "程序员即将被AI取代"的话题
  • 兴趣：作为技术人，面对向 AI 这样的新兴技术又感觉到异常兴奋
xz大约 31 分钟开发工具ai工具
xz
Copyright © 2026 xz