编码与开发

Ray截图

通过ray.tinte.dev API生成代码截图。当用户要求代码截图、代码图片、代码片段图片或说"ray"时使用。调用POST https://ray.tinte.dev/api/v1/screenshot并保存PNG结果。

查看 GitHub 仓库 ↗ ⭐ 611 Stars

📌 Skill基础信息

名称:ray

简称:ray

来源:社区第三方(Railly/tinte)

运行宿主:只能在与技能框架兼容的Agent工具中运行(需支持 skills install 命令)

核心定位:通过调用 ray.tinte.dev API 快速生成高质量代码截图,适用于技术文档制作、代码分享和演示场景。

🧩 内部核心组成

本Skill主要基于API调用实现功能,包含以下核心组件:

API端点

  • 请求地址:POST https://ray.tinte.dev/api/v1/screenshot
  • 内容类型:application/json

主要参数配置

参数类型默认值说明
codestring必填代码内容(1-10,000字符)
languagestringtypescript支持15种编程语言
themestringone-hunter代码高亮主题
modestringdark深色/浅色模式
paddingnumber32内边距设置
fontSizenumber14字体大小
lineNumbersbooleantrue是否显示行号
titlestring""窗口标题

语言自动检测:根据文件扩展名自动识别编程语言类型

主题系统:支持多种预设主题和自定义色彩配置

🛠 安装与启用方式

安装命令

skills install --user Railly/tinte

前置要求

  • 支持技能框架的Agent环境
  • 网络连接(用于API调用)
  • 图片查看工具(用于打开生成的PNG文件)

无额外依赖:无需安装本地渲染引擎或复杂依赖包

📋 标准工作流

  1. 触发识别:当用户请求"代码截图"、"代码图片"或提及"ray"时触发
  2. 代码获取:从文件、剪贴板或用户输入中提取代码内容
  3. 语言检测:根据文件扩展名或内容自动识别编程语言
  4. API调用:向 ray.tinte.dev 发送POST请求生成截图
  5. 结果处理:接收PNG格式截图并保存到本地
  6. 结果展示:自动打开生成的截图文件

典型调用流程约需30-60秒(取决于代码长度和网络状况)

⚠️ 关键限制与注意事项

性能限制

  • 长代码片段渲染可能需要30-60+秒
  • 建议在脚本或Agent中设置请求超时

技术限制

  • 仅支持PNG输出格式
  • 代码长度限制:1-10,000字符
  • 背景仅支持预设选项,不支持HEX颜色值

使用注意事项

  • 生成的PNG包含透明边距(用于阴影效果)
  • 如需合成到自定义背景,需要先修剪透明边缘
  • API服务稳定性依赖第三方平台

生产环境适用性:适合个人和小团队使用,大规模生产环境需考虑API稳定性

✅ 适用场景 & ❌ 不适合场景

✅ 适用场景

  • 技术文档和教程制作
  • 代码分享和演示材料准备
  • 社交媒体代码内容发布
  • 个人学习笔记整理

❌ 不适合场景

  • 需要实时渲染的超大代码库
  • 对输出格式有特殊要求(非PNG)
  • 需要完全离线使用的环境
  • 企业级高并发生产需求

目标用户:开发者、技术写作者、教育工作者、内容创作者

如何安装

skills install --user Railly/tinte

通用安装教程:在哪里输入上面的命令

上面的命令本质是在「终端 / 命令行」中调用技能管理器,把该 Skill 下载并注册到你的 AI 工具。各主流工具打开终端的位置不同,按下面操作即可:

  1. 打开工具自带的终端面板,或系统终端(macOS「终端」、Windows「PowerShell」、Linux「Terminal」)。
  2. 把上面的安装命令复制进去,回车运行,等待下载与注册完成。
  3. 重启或重新加载 AI 工具,让新安装的 Skill 被识别。
  4. 新建对话并触发:直接描述用途,或通过该工具的技能 / 斜杠菜单选中此 Skill。
Claude 桌面版(macOS / Windows)

桌面版没有内置命令行,Skill 需通过 Claude Code CLI 安装。打开系统终端,先执行 npm install -g @anthropic-ai/claude-code,再运行上面的安装命令;完成后完全退出并重新打开 Claude。

Claude Code(终端 CLI)

直接在项目目录的终端里运行上面的命令即可。也可先输入 claude 启动交互界面,再在对话中引用该 Skill(/ 斜杠菜单或直接描述用途)。

VS Code(含 GitHub Copilot)

打开终端面板:菜单「终端 → 新建终端」,或快捷键 Ctrl+`(macOS 为 ⌃+`)。在终端里运行上面的命令;装完后执行「重新加载窗口」(Ctrl+Shift+P → Reload Window),让 Copilot 等扩展识别新技能。

Cursor

底部「终端」面板(Ctrl+`)即是内置终端。粘贴运行上面的命令,完成后在命令面板执行「Reload Window」刷新,再开始对话。

Windsurf

底部「终端」面板运行命令;也可直接使用其内置 Agent 终端,在对话侧执行安装。

其他工具(ChatGPT、本地脚本等)

不支持本地终端的产品,可先在本机终端完成安装,再在对话中描述该 Skill 的能力让其调用;不同工具的命令格式请以其官方文档为准。

风险提示

✅ 低风险

自动扫描未发现高危命令、隐私抓取或数据外传行为。仍建议安装前快速浏览仓库代码。

相似 Skill 推荐

ECC 智能体系统
affaan-m/ECC
低风险

这是一个智能体性能优化系统,为Claude Code、Codex、Opencode、Cursor等提供技能、直觉、记忆、安全性和以研究为先的开发能力。

cc-switch 全能助手
farion1231/cc-switch
低风险

一款跨平台的桌面全能助手,适用于 Claude Code、Codex、OpenCode、OpenClaw、Grok Build 和 Hermes Agent。唯一官方网站:ccswitch.io

Ruflo
ruvnet/ruflo
低风险

Ruflo是一个多智能体编排平台,专为AI编码代理(如Claude Code、Cursor、Codex、Copilot、Gemini、Amp等12个以上)设计。当用户需要以下操作时使用此技能:(1)在项目中安装/初始化R

营销技能
coreyhaines31/marketingskills
低风险

为Claude Code和AI代理提供的营销技能,涵盖转化率优化(CRO)、文案撰写、搜索引擎优化(SEO)、数据分析和增长工程。