切图仔

Claude Code Plugins Market

这是一个 Claude Code 插件市场项目，用于托管和分发自定义的 Claude Code 插件。

项目简介

本项目基于 Claude Code 的插件系统构建，提供了一个本地插件市场，让你可以轻松安装、管理和分享 Claude Code 插件。

什么是 Claude Code 插件？

Claude Code 插件可以扩展 Claude Code 的功能，包括：

• 自定义命令（Commands）- 添加新的斜杠命令
• 专业 Agent（Agents）- 创建针对特定任务的智能助手
• 事件钩子（Hooks）- 响应特定事件执行自动化操作
• Skills - 为 Agent 提供可复用的技能
• MCP 服务器（MCP Servers）- 集成外部工具和服务

项目结构

cc-plugins-market/
├── README.md                    # 项目说明文档
├── .claude-plugin/
│   └── marketplace.json         # 插件市场配置
└── plugins/                     # 插件目录
    └── qietuzai/                # 切图仔插件
        ├── README.md            # 插件文档
        ├── .claude-plugin/
        │   └── plugin.json      # 插件配置
        ├── .mcp.json            # MCP 服务器配置
        ├── agents/              # Agent 定义
        │   └── qietuzai.md
        └── hooks/               # 事件钩子
            ├── hooks.json
            └── check-figma-api-key.sh

已包含的插件

切图仔 (Qietuzai)

自动从 Figma 设计稿生成前端 UI 代码的 Claude Code Agent。

主要功能：

• 🎨 自动从 Figma 提取设计数据
• 📦 智能下载图片资源（SVG/PNG）
• 🔍 自动检测项目类型（Nuxt/Next.js/React/Vue/Angular）
• 📝 生成符合框架规范的代码
• ✅ 自动验证资源路径和引用

了解更多： plugins/qietuzai/README.md

如何使用

1. 安装插件

1.1 Claude Code 中添加市场

# 或直接安装特定插件
/plugin marketplace add https://github.com/fiftyk/cc-plugins-market

1.2 命令行添加市场

claude plugin marketplace add https://github.com/fiftyk/cc-plugins-market

开发新插件

基本步骤

1. 创建插件目录结构

   mkdir -p plugins/your-plugin/{.claude-plugin,agents,commands,skills,hooks}
   

2. 创建插件配置文件 (.claude-plugin/plugin.json)

   {
     "name": "插件名称",
     "version": "1.0.0",
     "description": "插件描述",
     "author": {
       "name": "作者名称"
     }
   }
   

3. 添加功能组件

   • Commands: 在 commands/ 目录下创建 .md 文件
   • Agents: 在 agents/ 目录下创建 .md 文件
   • Hooks: 在 hooks/ 目录下创建 hooks.json 和对应的脚本
   • Skills: 在 skills/your-skill/ 目录下创建 SKILL.md
   • MCP Servers: 在根目录创建 .mcp.json

4. 编写文档 创建详细的 README.md，包括：

   • 功能特性
   • 安装步骤
   • 使用方法
   • 配置选项
   • 常见问题

5. 本地测试

   # 卸载旧版本（如果存在）
   /plugin uninstall your-plugin
   
   # 重新安装
   /plugin install your-plugin@本地市场
   
   # 验证安装
   /help
   

开发最佳实践

1. 使用语义化版本

   • 遵循 major.minor.patch 格式
   • 重大更改增加 major 版本
   • 新功能增加 minor 版本
   • Bug 修复增加 patch 版本

2. 完善的文档

   • 清晰的功能说明
   • 详细的使用示例
   • 常见问题解答
   • 配置说明

3. 组件独立测试

   • 单独测试每个 command、agent、hook
   • 确保在不同场景下都能正常工作
   • 验证与其他插件的兼容性

4. 遵循 SOLID 原则

   • 单一职责：每个组件只做一件事
   • 开闭原则：可扩展但不需修改
   • 接口隔离：提供清晰的接口
   • 依赖倒置：依赖抽象而非具体实现

相关资源

官方文档

• Claude Code 官方文档
• Claude Code 插件指南
• MCP 协议文档

开发工具

• Figma Developer MCP
• Claude Code GitHub

贡献指南

欢迎贡献新的插件或改进现有插件！

提交新插件

1. Fork 本项目
2. 在 plugins/ 目录下创建你的插件
3. 编写完善的文档和测试
4. 提交 Pull Request

贡献要求

• 插件必���有完整的 README.md 文档
• 必须包含 plugin.json 配置文件
• 代码需要经过测试验证
• 遵循项目的代码规范和最佳实践

许可证

本项目采用 MIT 许可证。详见各插件目录下的��体许可说明。

反馈与支持

如有问题或建议：

• 提交 Issue
• 参与 Discussions

---

注意: 此项目正在积极开发中，插件功能和 API 可能会有变化。建议关注项目更新并定期同步最新版本。