代码美图生成与分享指南
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md 的指引,将规范名为 @kunlungrowth/code-image-carbon-guide 的代码美图生成与分享指南技能安装到当前 AI 助手中。
技能介绍
为什么要把代码做成图?
当你在推文里分享一段算法、在文档里配教程插图,或是在幻灯片中展示关键逻辑时,直接贴代码常遇到这些问题:整文件截图几十行挤在一起,读者根本不愿细看;浅色主题发到深色平台(比如夜间模式的 GitHub),文字和背景对比度不足,糊成一片;为了多塞几行把字号缩到 8px,反而彻底丢了可读性。代码美图生成与分享指南要解决的,就是这些「代码发出去不好读」的具体问题。
核心能力:基于 Carbon 的四步制作法
这个技能围绕 Carbon 的核心思想——把源码渲染成带主题、窗框和阴影的图片——给出可执行的操作路径:
- 选片段:只截取关键逻辑的几行,控制在一屏内。过长的代码会失去视觉焦点,不如拆分多次分享。
- 定主题:选择与平台协调的配色与字体。比如发技术推文用高对比度的
monokai深色主题,文档配图用柔和的solarized light浅色主题,保持品牌一致性。 - 加窗框与边距:添加 macOS 式的红黄绿窗控点,适当留白。这些细节能让图片从「截图」变成「设计品」,提升成品感。
- 导出与适配:按目标平台尺寸导出。社媒竖图适配手机竖屏阅读,文档横图适配 A4 页面的左右排版。
适用边界与常见陷阱
需要注意,这个技能是视觉呈现的建议指南,不替代 Carbon 官方工具的操作细节——具体参数(比如窗口圆角、阴影深度)以官方文档为准。分享时还要避开这些坑:
- 不要整文件截图:精简到核心逻辑才有意义,几十行的图没人看。
- 导出前预览对比度:浅色主题在深色平台上可能完全看不清,提前切换设备检查。
- 不要牺牲字体大小:如果字号必须小于 10px 才能放下内容,说明这段代码太长了,不如删减。
- 别忘署名:分享时带上原作者或来源,尊重代码的版权。
使用场景
- 技术博主发布算法解析推文,需要用代码图突出关键逻辑
- 教程作者为编程教程配图,希望代码卡片风格统一
- 开发者制作对外技术分享幻灯片,用代码图替代纯文本
- 文档撰写者嵌入示例代码,需要图片形式保持排版整洁
适合人员
- 技术博主:需要让读者快速理解复杂算法逻辑
- 教程作者:需要为编程教程生成风格统一的代码配图
- 开发者:需要将核心代码片段制作成可分享的视觉卡片
- 文档撰写者:需要在技术文档中插入易读的代码图片