用 ray.so 生成精美代码片段图片并保存到本地

当用户想把代码做成好看的图片用于分享时，通过 ray.so 渲染并截图保存为本地 PNG。

适用场景

解决思路

1. 确认用户已提供代码片段（直接给出或指向文件/选区），否则先索取。
2. 检查 agent-browser 是否可用：运行 `which agent-browser`；若不在 PATH 中，告知用户此技能依赖 agent-browser 并停止。
3. 用 curl 从 ray.so 的 GitHub 仓库拉取当前可选主题与语言列表：`curl -s "https://raw.githubusercontent.com/raycast/ray-so/main/app/(navigation)/(code)/store/themes.ts" | grep -oE 'id:\s*"[^"]+"' | sed 's/id:\s*"//;s/"//' | sort -u` 以及 `curl -s "https://raw.githubusercontent.com/raycast/ray-so/main/app/(navigation)/(code)/util/languages.ts" | grep -oE '^[[:space:]]*"?[a-zA-Z0-9+#-]+"?\s*:\s*\{' | sed 's/[[:space:]]*"//g;s/".*//;s/:.*//' | sort -u`。
4. 用 AskUserQuestion 逐项询问所有样式参数，并列出全部可选项：主题（列出全部主题，给出 4 个热门快捷选项如 breeze/midnight/vercel/sunset，允许 Other 输入）、语言（能推断则跳过：用户已指定、文件扩展名明确如 .py/.js/.ts/.rs/.go、或语法特征明显如 def/import→python、func/package→go、fn/let mut→rust）、深色/浅色模式、是否显示渐变背景、内边距（16/32/64/128）、是否显示行号、是否添加标题（若选是则询问标题文本）。
5. 不要询问输出路径/文件名：默认保存到当前工作目录并使用合理文件名（如 rayso-snippet.png，或按标题命名如 fibonacci.png），仅当用户在原始请求中明确指定路径时才使用其他路径。
6. 构建 ray.so URL：所有参数必须放在 URL hash（# 之后）而非查询字符串中。先用 `CODE_BASE64=$(echo -n 'YOUR_CODE_HERE' | base64)` 对代码做 base64 编码，再用 `CODE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))")` 做 URL 编码，然后拼成 `https://ray.so/#theme=THEME&padding=PADDING&background=BACKGROUND&darkMode=DARKMODE&language=LANGUAGE&code=${CODE_ENCODED}`；如需行号在 &code= 前加 `&lineNumbers=true`，如需标题在 &code= 前加 `&title=URL_ENCODED_TITLE`。
7. 不要包含 width 参数，让 ray.so 自动按内容调整尺寸，避免多余空白；仅在需要固定宽度（如多张图尺寸一致）时才加 `&width=NUMBER`。
8. 用 agent-browser 截图：生成唯一会话名 `SESSION="rayso-$(date +%s)"`，依次执行 `agent-browser --session $SESSION set viewport 1400 900`、`agent-browser --session $SESSION open "$URL"`、`agent-browser --session $SESSION wait --load networkidle`、`agent-browser --session $SESSION wait 3000`。
9. 注入 html-to-image 库（ray.so 内部导出所用同一库）：`agent-browser --session $SESSION eval 'new Promise((r,e)=>{const s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/dist/html-to-image.js";s.onload=r;s.onerror=e;document.head.appendChild(s)})'`。
10. 以 4x 分辨率捕获：`agent-browser --session $SESSION eval 'htmlToImage.toPng(document.querySelector("#frame > div"),{pixelRatio:4,skipAutoScale:true})' > /tmp/rayso-dataurl-$SESSION.txt`，然后 `agent-browser --session $SESSION close`。
11. 将 data URL 转为 PNG 文件：`DATAURL=$(cat /tmp/rayso-dataurl-$SESSION.txt | tr -d '"' | tr -d '\n')`，再 `echo "$DATAURL" | sed 's/data:image\/png;base64,//' | base64 -d > /path/to/output.png`，最后 `rm /tmp/rayso-dataurl-$SESSION.txt`。
12. 向用户报告保存的文件位置，任务即完成，不要再做额外检查、探索或验证。
13. 调整分辨率：小文件可将 `pixelRatio:4` 改为 `pixelRatio:2`，最高质量可用 `pixelRatio:6`（等同 ray.so 的 6x 导出）。
14. 排错：若 curl 拉取失败，使用常见默认值（主题：breeze、midnight、candy、crimson、falcon、meadow、raindrop、sunset、vercel、supabase、tailwind；语言：auto、javascript、typescript、python、rust、go、java、ruby、swift、kotlin、css、html、json、yaml、bash）；若参数未生效，确认所有参数都在 # 之后；若标题不显示，确认 `#title=filename.py&code=...` 在 hash 中；若 html-to-image 加载失败，检查网络（库来自 jsdelivr CDN）；若捕获为空，`#frame > div` 选择器可能已变，需检查页面结构；超长代码可能被 ray.so 截断，考虑拆成多张图；页面加载异常时增加等待时间（如 4000ms 以上）；若得到空白页，用全新的唯一 session 名；若 data URL 格式错误，确保解码前去掉引号和换行。

适用边界 · 注意事项

• agent-browser 不可用时无法执行（此技能强依赖它）。
• 用户未提供任何代码片段时无法生成。
• 需要固定宽度以外的自动尺寸时不要加 width 参数（加了反而可能产生多余空白）。