Claude How To【免费下载链接】claude-howtoA visual, example-driven guide to Claude Code — from basic concepts to advanced agents, with copy-paste templates that bring immediate value.项目地址: https://gitcode.com/GitHub_Trending/cl/claude-howto由于 SVG 是矢量格式在 Markdown 中既可原尺寸展示也可配合 HTML 标签按需缩放。对于需要自动适配明暗主题的读者[resources/README.md](https://link.gitcode.com/i/9bf36b5fe919bd07bdfdde055a8dce35) 头部给出的 picture 写法可以按系统配色自动切换 Light/Dark 两版 Logo html picture source media(prefers-color-scheme: dark) srcsetresources/logos/claude-howto-logo-dark.svg img altClaude How To srcresources/logos/claude-howto-logo.svg /picture推荐尺寸与按场景选文件原文档给出了一张按用途选择尺寸的速查表配合 resources/README.md 中的 DPI 说明可以更好地理解每个文件的定位用途尺寸文件网站页头520×120logos/claude-howto-logo.svg应用图标256×256icons/claude-howto-icon.svg浏览器标签页32×32favicons/favicon-32.svg移动端主屏128×128favicons/favicon-128.svg桌面应用256×256favicons/favicon-256.svg小尺寸头像64×64favicons/favicon-64.svg各 favicon 的 DPI 定位如下16px 为 1x旧浏览器标签页回退32px 为 1x标准 favicon64px 为 1x-2xHigh-DPI 显示128px 为 2xApple touch icon、书签256px 为 4x现代浏览器与 PWA 图标。在渲染细节上16px 版只保留「圆环 指针 尖括号」的最小几何32px 版开始加入主方位刻度64px 及以上才呈现完整次方位刻度从而保证小尺寸下依然清晰可辨。按平台使用位置网站页头用 Logologos/claude-howto-logo.svgFavicon 用 32pxfavicons/favicon-32.svg社交预览图用图标icons/claude-howto-icon.svg。GitHubREADME 徽章用图标64–128px仓库头像用图标icons/claude-howto-icon.svg。社交媒体头像用 256×256 图标Banner 用 520×120 Logo缩略图用 256×256 图标。文档章节标题用 Logo 或图标按需缩放导航图标用 32–64px favicon。颜色系统与 CSS 变量原文档提供了可直接复用的 CSS 自定义属性一套变量即可统一全站的品牌色/* Use these in your CSS */ --color-primary: #000000; --color-secondary: #6B7280; --color-accent: #22C55E; --color-bg-light: #FFFFFF; --color-bg-dark: #0A0A0A;颜色语义如下黑#000000主文本、描边、南向指针白#FFFFFF浅色背景灰#6B7280次要文本、小刻度线亮绿#22C55E北向指针、中心点、强调线——仅用于高亮永远不作为背景色或正文色近黑#0A0A0ADark mode 背景。如果项目使用 Tailwind CSSresources/README.md 还给出了品牌色配置示例colors: { brand: { primary: #000000, secondary: #6B7280, accent: #22C55E, } }从 SVG 源码可以验证这套配色确实落实到每个图形元素上以 logo-full.svg 为例外圈罗盘环使用#0000003px 描边主方位刻度分别使用#000000北与#6B7280其余方向次方位刻度使用 1.5px 灰色描边而 DESIGN-SYSTEM.md 指明北向指针与中心点使用#22C55E填充且始终为绿色。无障碍对比度WCAGresources/DESIGN-SYSTEM.md 记录了关键对比度指标黑/白 21:1AAA、灰/白 4.6:1AA、白/近黑 19.5:1AAA绿色在白色背景上为 3.2:1因此被明确定义为「仅装饰、不承载信息」且整套设计不依赖红绿颜色辨别保证色觉障碍用户同样可用。图标设计语义罗盘与代码括号当前品牌设计V3.0的核心符号是「带代码括号的罗盘」其构成元素的含义如下罗盘环 导航、结构化的学习路径绿色北向指针 方向、进度、指引黑色南向指针 根基、稳固的基础括号 终端提示符、代码、CLI 上下文刻度标记 精确性、结构化的步骤。整体传达「在代码中借助清晰指引找到路径」的含义与 claude-howto「面向 Claude Code 的可视化、示例驱动指南」的定位一致。resources/DESIGN-SYSTEM.md 给出了更细的几何规范外圈罗盘环 3px 描边北向刻度 2.5px其他主方位刻度 2px次方位刻度 1.5px北指针为绿色填充多边形南指针为黑/白dark mode填充多边形括号 3px 描边中心点始终为绿色填充圆。图标在 16→32→64→128→256px 的尺寸进度上逐级增加细节详见前文 favicon 优化说明保证任意尺寸下视觉一致。进阶SVG 优化与 PNG 转换压缩 SVG所有 SVG 均为扁平描边几何无内嵌位图resources/README.md 提供了基于 svgo 的压缩命令# 在保持质量的前提下压缩 SVG svgo --config{ js2svg: { indent: 2 }, plugins: [ convertStyleToAttrs, removeRasterImages ] } input.svg -o output.svg转换为 PNG如需兼容不支持 SVG favicon 的旧浏览器可转换为 PNG# 使用 ImageMagick convert -density 300 -background none favicon-256.svg favicon-256.png # 使用 Inkscape inkscape -D -z --filefavicon-256.svg --export-pngfavicon-256.png【免费下载链接】claude-howtoA visual, example-driven guide to Claude Code — from basic concepts to advanced agents, with copy-paste templates that bring immediate value.项目地址: https://gitcode.com/GitHub_Trending/cl/claude-howto创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考