https://zcj-git520.github.io/categories/%E6%8A%80%E6%9C%AF%E6%95%99%E7%A8%8B/ Recent content in 技术教程 on Chengji Zhao's blog Hugo -- gohugo.io zh-cn Thu, 30 Apr 2026 10:00:00 +0800 https://zcj-git520.github.io/p/claude-code-skills-%E5%AE%8C%E5%85%A8%E6%8C%87%E5%8D%97%E5%8F%91%E7%8E%B0%E5%92%8C%E5%AE%89%E8%A3%85%E6%8A%80%E8%83%BD%E6%8F%92%E4%BB%B6/ Thu, 30 Apr 2026 10:00:00 +0800 https://zcj-git520.github.io/p/claude-code-skills-%E5%AE%8C%E5%85%A8%E6%8C%87%E5%8D%97%E5%8F%91%E7%8E%B0%E5%92%8C%E5%AE%89%E8%A3%85%E6%8A%80%E8%83%BD%E6%8F%92%E4%BB%B6/ Claude Code 的 Skills 生态系统让 AI 具备专业化能力。本文将带你了解如何发现和安装 Skills，提升 AI 编程效率。 一、什么是 Skills CLI？ Skills CLI（npx skills）是开放技能生态系统的包管理器。Skills 是模块化包，为 AI Agent 扩展专业能力。 核心命令 npx skills find [query] - 交互式搜索或关键词搜索 npx skills add <package> - 从 GitHub 等来源安装技能 npx skills check - 检查技能更新 npx skills update - 更新所有已安装技能 浏览技能：https://skills.sh/ 二、何时使用 Find Skills 技能？ 当用户表达以下需求时使用： 问"如何做 X"（X 可能是常见任务） 说"找一个做 X 的技能" 问"你能做 X 吗"（X 是专业能力） 想扩展 AI 能力 想搜索工具、模板或工作流 三、使用步骤 步骤 1：了解用户需求 识别： https://zcj-git520.github.io/p/%E5%89%8D%E7%AB%AF%E8%AE%BE%E8%AE%A1%E5%AE%8C%E5%85%A8%E6%8C%87%E5%8D%97%E6%89%93%E9%80%A0%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E4%BC%98%E7%A7%80%E7%9A%84-web-%E5%BA%94%E7%94%A8/ Sat, 25 Apr 2026 10:00:00 +0800 https://zcj-git520.github.io/p/%E5%89%8D%E7%AB%AF%E8%AE%BE%E8%AE%A1%E5%AE%8C%E5%85%A8%E6%8C%87%E5%8D%97%E6%89%93%E9%80%A0%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E4%BC%98%E7%A7%80%E7%9A%84-web-%E5%BA%94%E7%94%A8/ 前端设计不仅仅是让页面"好看"，更是让用户能用得舒心。本文将带你了解前端设计的核心概念、常用框架、以及 Claude Code frontend-design skill 的使用方法。 一、什么是 frontend-design skill？ frontend-design 是 Claude Code 的官方技能，专门用于生成独特、生产级的前端界面。它能帮助： 构建 Web 组件、页面或应用 生成创意十足、精细的代码 避免"AI slop"（通用的 AI 美学） 安装方法 /plugin marketplace add anthropics/frontend-design /plugin install frontend-design 或直接在插件市场搜索 “frontend-design” 安装。 二、设计思维 在使用 frontend-design 之前，需要明确以下要素： 1. 目的（Purpose） 这个界面解决什么问题？谁是用户？ 2. 风格（Tone） 选择一个极端的风格方向： 极致简约 - brutalist / 极简主义 奢华精致 - luxury / refined 复古未来 - retro-futuristic 有机自然 - organic / natural 活泼俏皮 - playful / toy-like 杂志风格 - editorial / magazine 艺术装饰 - art deco / geometric 粉彩柔和 - soft / pastel 工业实用 - industrial / utilitarian 3. https://zcj-git520.github.io/p/superpowersclaude-code-%E9%9C%80%E6%B1%82%E5%B7%A5%E7%A8%8B%E5%8C%96%E8%BE%85%E5%8A%A9%E6%8F%92%E4%BB%B6/ Wed, 15 Apr 2026 10:00:00 +0800 https://zcj-git520.github.io/p/superpowersclaude-code-%E9%9C%80%E6%B1%82%E5%B7%A5%E7%A8%8B%E5%8C%96%E8%BE%85%E5%8A%A9%E6%8F%92%E4%BB%B6/ Superpowers 本质上不是"自动开发工具"，而是一个将需求→计划→执行→审查流程工程化的辅助系统。 1. 安装 Superpowers 在 Claude Code 中执行： /plugin marketplace add obra/superpowers /plugin install superpowers@superpowers-marketplace 或直接在插件市场搜索 “superpowers” 安装。 2. 头脑风暴（Brainstorm） 目的 将"模糊需求"转化为"可执行需求"，让你冷静下来思考。不可能一句话生成那么多功能，每个细节都需要考虑清楚。用这个 skill 可以让你的需求更清晰。 方法 /superpowers:brainstorm 或使用 Claude Code 自带的 Plan Mode： /plan 实际效果 自动引导多轮问题澄清 提供多个可选方案（类似产品经理讨论） 用户只需"选择 + 修正" 建议 不要一开始写完整需求文档，先通过 Brainstorm 收敛方向，再进入下一步。 3. 生成开发计划（Planning） 目的 将需求转化为结构化开发任务（Task Breakdown）。 命令 /superpowers:writing-plans 输出内容 通常包含： 任务拆分 - 将大需求拆解为可执行的小任务 技术方案 - 选择合适的技术栈 开发步骤 - Step-by-step 具体实现路径 风险点 - 识别可能的问题和应对措施 建议 计划要可执行（Executable），每一步尽量具备"输入 / 输出"。 https://zcj-git520.github.io/p/claude-code-%E5%AE%8C%E5%85%A8%E6%96%B0%E6%89%8B%E6%8C%87%E5%8D%972026%E7%89%88%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/ Fri, 20 Mar 2026 10:00:00 +0800 https://zcj-git520.github.io/p/claude-code-%E5%AE%8C%E5%85%A8%E6%96%B0%E6%89%8B%E6%8C%87%E5%8D%972026%E7%89%88%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/ 很多开发者用了 Claude Code 一段时间后，感觉「好像也没那么神奇」——写出来的代码时对时错，改着改着把不该动的文件也改了，长时间对话后回答开始偏题。问题不在工具本身，在于缺少一套正确的使用框架。 这份《Claude Code 完全新手指南》共 12 章，从最基础的安装配置讲起，深入 Agent Loop 工作原理、上下文管理策略、CLAUDE.md 项目记忆配置，再到 Subagents 专用子代理、Hooks 自动化触发器、Worktree 并行任务隔离等进阶功能，最后提供三套直接可用的实战 SOP。 第一章 认识 Claude Code 1.1 一句话理解 Claude Code Claude Code 是 Anthropic 基于 Claude 模型打造的终端 AI 编程 Agent。它不是聊天机器人，也不是代码补全插件——它是一个可以直接操作你代码仓库的 AI 软件工程师： 理解整个代码库（多文件、多语言、多层依赖） 自主规划任务，跨文件编写和修改代码 执行 Shell 命令、运行测试、验证结果 处理 Git 工作流（commit / PR / merge conflict） 通过 MCP 协议连接数据库、API 等外部工具 核心认知——你的角色转变 Claude Code 最核心的变化：你的角色从「写代码」变成「描述需求 + 设定边界 + 审查结果」。 Claude 越能干，你越要注意：给清晰边界和验证标准，是用好它的关键。没有边界，它会改出你不想要的代码；没有验证标准，它不知道什么叫做对。 1.2 与 AI IDE 的核心区别 工具 本质 使用方式 最适合场景 Claude Code CLI Agent 终端命令行 Repo 级自动化、大规模重构、DevOps Cursor AI IDE 编辑器（内联） 逐行辅助、实时补全、单文件精细操作 Windsurf AI IDE 编辑器（内联） 代码上下文感知、内联建议 Claude.