https://zcj-git520.github.io/categories/ai%E7%BC%96%E7%A8%8B/ Recent content in AI编程 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），每一步尽量具备"输入 / 输出"。