AI 插件开发工具插件系统【免费下载链接】claude-plugins-officialOfficial, Anthropic-managed directory of high quality Claude Code Plugins.项目地址https://gitcode.com/GitHub_Trending/cl/claude-plugins-official点击查看免费下载本文是 Claude Code 官方 Playground 技能playground skill中Code Map 模板code-map.md的完整实战指南。当你想让 Claude 生成一个可交互的代码库架构浏览器——用 SVG 画布呈现组件关系、数据流、分层架构并支持点击组件留下反馈意见、最终拼装成一份可直接回喂给 Claude 的 Prompt 时就应使用本模板。读完本文你将掌握该模板的布局规范、控件设计、画布渲染模式、评论系统与 Prompt 生成规则并能基于真实代码库预填数据产出一个单文件、零依赖、开箱即用的架构可视化工具。一、模板定位Playground 家族中的架构可视化分支在 Playground 插件plugins/playground的体系中一个 Playground 是一个自包含的 HTML 文件一侧是交互控件另一侧是实时预览底部是带复制按钮的 Prompt 输出区。用户调整控件、可视化探索最后把生成的 Prompt 复制回 Claude Code 继续对话。playground 技能SKILL.md预置了六套模板按场景分流design-playground.md — 视觉设计决策组件、布局、间距、配色、字体data-explorer.md — 数据与查询构建SQL、API、管道、正则concept-map.md — 概念学习与探索概念图、知识盲区、范围映射document-critique.md — 文档审阅建议 批准/拒绝/评论工作流diff-review.md — 代码审查git diff、提交、PR支持逐行评论code-map.md —代码库架构组件关系、数据流、分层图Code Map 模板的独特之处在于它的核心交互是点击组件留下评论。与 Concept Map 模板拖拽节点、手绘边的画布交互见 concept-map.md不同Code Map 使用 SVG 画布呈现静态架构图用户通过点选组件 → 写评论来传递对特定模块的反馈这些评论最终被拼进生成的 Prompt形成一份带上下文的架构改造请求。二、整体布局左控件、右画布、下输出模板给出的标准布局如下----------------------------------------------------- | | | | Controls: | SVG Canvas | | • View presets | (nodes connections) | | • Layer toggles | with zoom controls | | • Connection | | | type filters | Legend (bottom-left) | | | | | Comments (n): ---------------------------------- | • List of user | Prompt output | | comments with | [ Copy Prompt ] | | delete buttons | | -----------------------------------------------------三个区域职责明确左侧控件区视图预设View presets、图层开关Layer toggles、连接类型过滤器Connection type filters以及Comments (n)评论列表每条评论含删除按钮。右上 SVG 画布区节点 连接构成的架构图带缩放控制Zoom controls左下角放置图例Legend。底部 Prompt 输出区实时拼装的自然语言 Prompt附带[ Copy Prompt ]复制按钮。这套布局继承并实例化了 Playground 技能的核心要求——控件写状态、渲染读状态、Prompt 实时更新见 SKILL.md 的 State management pattern。在实现时建议用一个统一的state对象承载所有可配置值任何控件变更都触发updateAll()同时刷新画布与 Prompt。三、控件设计五种决策类型模板将 Code Map 的控件归纳为五类决策每类对应一种控件形态决策控件示例系统视图预设按钮Full System、Chat Flow、Data Flow、Agent System可见图层复选框Client、Server、SDK、Data、External连接类型带颜色指示的复选框Data Flow蓝、Tool Calls绿、Events红组件反馈点击组件弹出评论弹窗弹窗内嵌 textarea 供填写反馈缩放级别/−/reset 按钮缩放 SVG 查看细节设计要点视图预设是一键状态快照。每个预设应把图层的可见性、连接类型的过滤、缩放级别一次性对齐到一个有意义的组合如Full System全开、Data Flow只留数据连接这符合技能要求中3-5 个命名预设首屏默认好看的规范。图层与连接类型用复选框分离控制让用户既能按纵向分层也能按横向连接语义聚焦系统局部。颜色是连接类型的第二标识复选框旁的颜色指示点让用户无需看图例即可理解当前过滤语义。四、画布渲染SVG 节点与贝塞尔连线Code Map 的架构图用svg元素承载节点与路径均由 JavaScript 动态生成。模板给出了五个关键模式节点Nodes圆角矩形含标题与副标题文件路径。连接Connections贝塞尔曲线路径 箭头标记marker按类型套用不同样式。分层组织Layer organization按 Y 坐标横向分带如y: 30-80 Clienty: 130-180 Server同一层的节点处于同一水平带内。点击评论Click-to-comment点击节点 → 打开弹窗 → 保存评论 → 节点出现视觉指示如彩色边框。过滤Filtering按图层切换节点可见性按类型切换连接可见性。核心数据模型与渲染函数如下const nodes [ { id: api-client, label: API Client, subtitle: src/api/client.ts, x: 100, y: 50, w: 140, h: 45, layer: client, color: #dbeafe }, // ... ]; const connections [ { from: api-client, to: server, type: data-flow, label: HTTP }, { from: server, to: db, type: data-flow }, // ... ]; function renderDiagram() { const visibleNodes nodes.filter(n state.layers[n.layer]); // Draw connections first (under nodes), then nodes connections.forEach(c drawConnection(c)); visibleNodes.forEach(n drawNode(n)); }实现时有两个必须遵守的顺序约束先画连接、后画节点。连接绘制在底层节点覆盖其上避免连线穿头。渲染前先按图层过滤节点。state.layers是一个以图层名为键的布尔对象直接决定节点是否出现在画布上连接是否绘制则按type过滤。缩放zoom建议以g分组的 transform 或 viewBox 缩放实现与 /−/reset 三个按钮绑定。五、连接类型与视觉样式五种语义五套样式模板建议定义3-5 种连接类型每种类型拥有独立的颜色与线型让架构图中数据怎么流、谁调用谁、谁订阅谁一眼可辨类型颜色线型用途data-flow蓝#3b82f6实线请求/响应、数据传递tool-call绿#10b981虚线(6,3)函数调用、API 调用event红#ef4444短虚线(4,4)异步事件、发布/订阅skill-invoke橙#f97316长虚线(8,4)插件/技能激活dependency灰#6b7280点线导入/require 依赖关系线型通过 SVG 的stroke-dasharray实现6,3表示 6px 实线段 3px 空段虚线节奏的不同直接承载语义差异——这正是事件是高频短促的、技能激活是低频长程的这类直觉映射。箭头用 SVGmarker定义按颜色分别命名marker idarrowhead-blue markerWidth8 markerHeight6 refX7 refY3 orientauto polygon points0 0, 8 3, 0 6 fill#3b82f6/ /marker绘制连接时只需在路径上设置marker-endurl(#arrowhead-blue)即可复用对应的箭头orientauto保证箭头方向始终跟随曲线切线方向。连接类型过滤器切换时直接对连接元素按type增删可见性即可。六、评论系统Code Map 的灵魂交互模板明确指出点击评论功能是 Code Map 的关键差异化能力。完整工作流分四步点击节点→ 打开弹窗展示组件名、文件路径与 textarea。保存评论→ 加入评论列表节点获得视觉指示彩色边框。查看评论→ 侧栏列出组件名、评论预览与删除按钮。删除评论→ 从列表移除更新节点视觉状态重新生成 Prompt。评论数据必须携带组件上下文而不是孤立的文本state.comments.push({ id: Date.now(), target: node.id, targetLabel: node.label, targetFile: node.subtitle, text: userInput });targetLabel与targetFile是两条关键字段它们让后续生成的 Prompt 能够以API Client(src/api/client.ts)……这种带精确锚点的形式呈现反馈而不是某个组件需要改进这种无法定位的模糊描述。这与此技能对 Prompt 输出的一贯要求一致——提供足够上下文让它在脱离 Playground 的情况下仍可执行见 SKILL.md。七、Prompt 输出把架构语境与用户反馈合成自然语言指令Prompt 输出区的职责是把系统上下文 用户评论合成一段可执行的指令模板给出如下格式This is the [PROJECT NAME] architecture, focusing on the [visible layers]. Feedback on specific components: **API Client** (src/api/client.ts): I want to add retry logic with exponential backoff here. **Database Manager** (src/db/manager.ts): Can we add connection pooling? Current implementation creates new connections per request. **Auth Middleware** (src/middleware/auth.ts): This should validate JWT tokens and extract user context.三条生成规则需要严格遵循只包含用户添加过的评论不编造、不遗漏。如未展示完整系统必须说明当前可见图层focusing on the [visible layers]让接收方知道分析的视野边界。输出是自然语言指令不是数据倾倒value dump。这一点与技能层的通用约束完全一致——Prompt 输出应使用自然语言只提及非默认的选择见 SKILL.md 的 Prompt output pattern 与 Common mistakes。一个高质量输出的实践技巧在每一条评论前附加该组件对应的文件路径相当于给 Claude 一个明确的去读哪里的锚点用户评论正文保留原话这样回喂给 Claude 时能保留用户的真实意图与语气。八、用真实数据预填充让 Playground 开箱即用模板建议为特定代码库预填真实数据而不是让用户从空画布开始节点15-25 个关键组件携带真实文件路径连接20-40 条关系基于实际的 import/调用关系图层逻辑分组如 UI、API、Business Logic、Data、External预设Full System、Frontend Only、Backend Only、Data Flow。节点按图层排布在水平带内并保持一致的间距横轴 x 均匀分布、纵轴按层分带。预填充的价值在于把探索一个陌生系统的门槛降到最低用户打开页面看到的就是真实架构接下来只需点选、过滤、评论。从源码结构看预填充数据与画布渲染共享同一套nodes/connections数据结构见上文第四节代码因此预填充本质上只是把真实系统的架构信息序列化成数组渲染层无需任何额外改动。九、图层配色浅色主题下的六层调色板模板为浅色主题提供了一套按层划分的节点填充色同时保持了同色系内的明度递进图层节点填充色描述Client/UI#dbeafeblue-100React 组件、hooks、页面Server/API#fef3c7amber-100Express 路由、中间件、处理器SDK/Core#f3e8ffpurple-100核心库、SDK 封装Agent/Logic#dcfce7green-100业务逻辑、Agent、处理器Data#fce7f3pink-100数据库、缓存、存储External#fbcfe8pink-200第三方服务、外部 API配色遵循 Tailwind 风格色板blue/amber/purple/green/pink 各取 100 级相邻图层的色相差异足够大、可快速区分而同一色系pink-100 vs pink-200用于区分数据层与外部服务这对语义相近的图层。若 Playground 需要支持深色主题可参考同族模板 diff-review.md 中浅色/深色双模式的实现思路该模板给出了明暗两套背景、文件卡片与增删行的配色方案为节点填充色准备深浅两套映射。十、适用主题七类典型场景模板列举了 Code Map 的典型适用主题代码库架构浏览器模块、导入关系、数据流微服务地图服务、队列、数据库、API 网关React 组件树组件、hooks、context、stateAPI 架构路由、中间件、控制器、模型Agent 系统prompts、tools、skills、subagents数据管道数据源、转换、汇点、调度插件/扩展架构核心、插件、hooks、事件选择判据很清晰只要用户想看懂一个系统的结构且这个结构可以拆成节点 连接 分层三要素就适合 Code Map 模板。注意它与 Concept Map 模板的分工——后者concept-map.md面向学习与知识盲区标注画布上可拖拽、可画边Prompt 输出的是学习请求而 Code Map 面向架构事实 逐组件反馈画布是只读架构图、交互集中在点选评论Prompt 输出的是改造指令。二者一探索型一评审型不要混用。十一、工程约束来自 Playground 技能的通用规范无论采用哪个模板Playground 都有六条硬性要求SKILL.md 的 Core requirementsCode Map 实现必须逐条满足单 HTML 文件CSS 与 JS 全部内联零外部依赖——CDN 挂掉时 Playground 不能因此失效实时预览每次控件变更立即重渲染不设Apply按钮Prompt 输出自然语言而非值倾倒只提及非默认选项含足够的执行上下文实时更新复制按钮剪贴板复制并给出Copied!瞬时反馈合理的默认值与预设首屏即美观内置 3-5 个命名预设深色主题UI 用系统字体、代码/数值用等宽字体界面极简。此外SKILL.md 还总结了实现中最易踩的坑Code Map 场景下对应关系如下常见错误Code Map 中的具体表现Prompt 只是值倾倒输出把图层勾选状态、连接计数罗列一遍而非聚焦 [visible layers] 的架构反馈控件一次过多图层、连接类型、缩放全堆在左侧建议默认折叠高级选项预览不实时更新评论保存/删除后画布指示未同步刷新无默认值与预设首屏空白用户无从下手外部依赖图标、图例依赖 CDN 图标库Prompt 缺乏上下文评论不带文件路径回喂后 Claude 无法定位组件十二、从模板到交付完整工作流把以上内容串起来一个 Code Map Playground 的完整交付流程是识别需求用户请求可视化代码库架构架构图浏览器类工具时playground 技能加载 code-map.md 模板见 SKILL.md 的 How to use this skill。采集真实架构从代码库中梳理 15-25 个关键组件与 20-40 条真实调用/导入关系映射为nodes/connections数组。搭建三区布局左侧控件、右上 SVG 画布、底部 Prompt 输出套用第五节连接样式表与第九节图层色板。实现评论系统点选节点 → 弹窗评论 → 列表管理 → 视觉指示数据按第六节结构保存。实现 Prompt 生成按第七节规则合成绑定复制按钮。交付运行产出单文件 HTML 后用open filename.html在默认浏览器中打开该命令来自 SKILL.md 的 How to use this skill。最终交付物是一个双击即可打开的 HTML 文件开发者可以分层查看系统、过滤连接语义、点选组件写下反馈一键复制出带架构上下文的改造指令回喂给 Claude Code完成看图 → 提意见 → 生成指令 → 执行修改的闭环。参考资源均位于本仓库内模板原文code-map.md技能总纲核心要求、状态管理、Prompt 模式、常见错误SKILL.md插件说明与其余五套模板入口plugins/playground、templates/同族交互对照画布拖拽型 concept-map.md、逐行评论型 diff-review.md赞分享AI 插件开发工具插件系统【免费下载链接】claude-plugins-officialOfficial, Anthropic-managed directory of high quality Claude Code Plugins.项目地址https://gitcode.com/GitHub_Trending/cl/claude-plugins-official点击查看免费下载相关推荐Plannotator 工程架构与实践指南为 Claude Code 计划与代码 Diff 构建可视化注释评审Plannotator 工程架构与实践指南为 Claude Code 计划与代码 Diff 构建可视化注释评审 Plannotator 是一套面向编码 AgeHermes WebUI容器化部署指南三步快速上手AI助手平台Hermes WebUI容器化部署指南三步快速上手AI助手平台 想要在几分钟内搭建一个功能完整的AI助手平台吗Hermes WebUI通过Docker容器化人工智能AI 应用AI Agent交互助手MCP 服务前端Plannotator AI Code Review 实战指南用 Codex 与 Claude Code 在 Diff 视图中启动结构化代码审查Plannotator AI Code Review 实战指南用 Codex 与 Claude Code 在 Diff 视图中启动结构化代码审查 在 Plan创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
