图片趣味化

SKILL前端设计
前端设计 未标注权限 许可证不明确
安装这个技能

图片趣味化(Photo-to-Illustration)。将用户提供的照片转化为趣味插画(温馨手绘 / 日系淡雅 / Q版萌系卡通等),并输出为 Ardot 画布上的精致成品。This skill should be used when the user wants to turn a photo into a hand-drawn / cartoon / illustrated version, make a "趣味化" or "插画风" version of a picture, or restyle a selfie / family / pet / travel photo as warm cute artwork. Triggers include "把照片变成插画", "做成卡通", "更日系一点", "Q版", "手绘风格", "亲子插画", "图片趣味化".

一句话选型结论

按资料字段整理

图片趣味化是前端设计类的 Agent Skill,安装方式未标注,权限级别未标注,许可证不明确,有可直接复制的安装命令。技能本质是给模型读的说明书,效果取决于模型与客户端;装完先用一个小任务验证,再放进正式流程。

分类前端设计 安装方式未标注 权限级别未标注权限 许可证许可证不明确
累计安装 未标注 本周 未标注
GitHub 星标 未标注 仓库 未标注
下载量 未标注 技能市场下载数
权限级别 未标注权限 安装前请确认风险范围
许可证 许可证不明确 未说明

安装

未标注
在支持 Skills 的客户端里执行,装完问一句「你有哪些技能」验证
skillhub install user_8f929bd8/photo-to-illustration
  1. 1
    确认客户端支持

    确认你的客户端支持 Skills(Claude、Codex、Cursor 等),并升级到较新的版本。

  2. 2
    拿到技能文件

    执行上面的命令安装;也可以把仓库里的 SKILL.md 手动放进客户端的 skills 目录。

  3. 3
    刷新技能列表

    重新打开客户端,或刷新技能列表,让新放进来的技能被加载。

  4. 4
    验证是否生效

    问一句「你有哪些技能」,确认列表里出现它,再拿一个小任务试跑。

技能档案

前端设计
字段来自技能仓库与公开索引,中文说明由本站标注
作者 / 维护方user_8f929bd8仓库 未标注 · 版本 未标注
宿主客户端未标注技能可被这些客户端加载
安装方式未标注安装包 community
权限级别未标注权限安装前请确认风险范围
许可证未说明许可证不明确,商用前请自行确认条款
仓库可用性available技能仓库当前是否可访问
最近核验未标注上游最后核验时间 · 数据更新 1791737282
正文体量11.3 KBSKILL.md 原文大小,越大说明说明书写得越细

典型使用场景

3 类
按分类整理的常见用法,具体以 SKILL.md 为准
出页面与组件

按描述生成页面结构和组件草稿。

调整样式与布局

改间距、配色与响应式布局。

生成设计说明

把设计稿整理成开发能接的说明。

选择建议

装之前先看这几条
按条目字段给出的判断,不替你决定用不用

值得选的地方

  • 有可直接复制的安装命令,不用自己翻文档找入口。

先想清楚的地方

  • 没有标注权限级别,实际能做什么要装好后确认。
  • 许可证不明确,商用或二次分发前先到仓库确认条款。
  • 没有做站内核验,内容以作者仓库为准。
  • 技能只是说明书,实际效果取决于模型与客户端,装完先用小任务试一遍。

更适合

  • 需要在前端设计场景里给模型补一套做法的人。
  • 愿意先读一遍 SKILL.md、确认它会让模型做什么的人。

不太适合

  • 对许可证要求很严、必须明确可商用的人。
  • 只想装完就自动变强、不打算看说明书的人。

同类对比

6 个同类
同分类里挑最接近的几条,字段以各自详情页为准
技能权限级别安装方式累计安装宿主客户端安装命令
图片趣味化当前 未标注权限 未标注 未标注 未标注 有
前端设计 只读 GitHub 仓库 882.3 万 Codex、Claude、Cursor 有
Vercel 组合模式 联网访问 GitHub 仓库 385.9 万 Codex、Claude、Cursor 有
Vercel React native skills 前端 只读 GitHub 仓库 246.9 万 Codex、Claude、Cursor 有
adapt 搜索 浏览器控制 GitHub 仓库 202.7 万 Codex、Claude、Cursor 有
使用我的浏览器 浏览器控制 GitHub 仓库 184.8 万 Codex、Claude、Cursor 有

SKILL.md 全文

11.3 KB
模型实际读到的说明书原文,来自技能仓库

图片趣味化 (Photo → Fun Illustration)

把一张真实照片,变成有风格、有温度的插画,并落到 Ardot 画布上成为可直接预览/分享的成品。
核心两步:ImageGen 图生图生成插画 + Ardot 画布承载与装裱。

工作流概览

用户给图 → [默认] 先用 AskUserQuestion 列出可选风格:① Q版萌系 ② 丑萌涂鸦风 ③ 两个都要
→ 用户挑 → 只生成所选风格(选单风格只出一张;选"都要"才双出并排)
→ 用户挑定稿(若双出则回"左/右"或"①/②")
→ 选定后:[可选] create_design 建画布 → batch_edit 建圆角画框 → upload_images 填图
→ [可选] 加寄语卡片 → capture_screenshot 校验 → 交付

> 交互约定(用户 2026-07-25 12:38 更新):不再默认并行双出。收到图后先跳风格选项让用户选,再按选择生成——省算力、也不强迫用户每轮看两张。用户仍可在给图时直接说"只要Q版"/"丑萌"跳过选项;选"两个都要"时才双出。

Step 0:拿到照片 → 默认双风格并行输出

  • 照片来源:用户附件、剪贴板路径(/Users/khadgar/.workbuddy/clipboard-images/...)、或用户给出的本地绝对路径。
  • 默认行为(核心约定·2026-07-25 12:38 更新):用户只说"图片趣味化"或发图,不要直接生成,先用 AskUserQuestion 弹出风格选项让用户挑:① Q版萌系 / ② 丑萌涂鸦风(彩色涂鸦墙) / ③ 两个都要。等用户选了再生成对应风格:选单风格只出一张;选"两个都要"才并行双出并排对比。
  • ① Q版萌系:大头小身、大圆眼、红脸蛋、吉卜力/轻松熊萌感。input_fidelity: "medium"。
  • ② 丑萌涂鸦风(彩色涂鸦墙版):潦草蜡笔、透视失衡、五官夸张、上色出界、彩色火柴小人观众。input_fidelity: "low"。
  • ③ 两个都要:两版用相同 size(匹配原图比例),生成后 present_files 并排,让用户直接挑。
  • 用户可跳过选项:若用户给图时就明确说"只要 Q版"/"丑萌涂鸦风"/"温馨手绘"/"日系淡雅",则直接出那一版(不弹选项)。
  • 锁定策略:用户说"锁定这个效果"时,把当前满意风格记为该图的定稿(仅影响当次对话的后续复现,不改变全局默认双输出)。
  • 一句话提示用户:图生图会消耗额外算力积分(约 5–10 分/张,双输出即 ×2)。

Step 1:ImageGen 图生图(关键)

用 image-to-image 把照片变成插画,保留人物/主体辨识度:

参数 取值 说明
image 照片本地绝对路径 必须本地路径,不支持远程未授权图
prompt 见下方"风格提示词" 描述目标风格 + 保留关键特征(戴眼镜、波点裙、亲子同框等)
input_fidelity "medium" / "low" 双输出时两版不同:Q版萌系用 "medium"(保辨识度);丑萌涂鸦风用 "low"(给模型更大自由度去扭曲/潦草)。单风格时按该风格定。
size 匹配原图比例 竖图自拍 "1024x1536",横图 "1536x1024",方图 "1024x1024"。两版必须同 size 才能并排对比
quality "high"
output_dir 当前 workspace 绝对路径 便于回看

> 踩坑:日系/写实化容易让小孩"不可爱/失真"——直接要 Q版萌系(大头小身+大圆眼)最稳。风格冲突时优先保"可爱"。

风格提示词模板(直接改主体描述即可)

  • 温馨手绘:温馨的手绘风格插画,<主体动作>,柔和的暖色调(米色、淡橙色、浅粉色),水彩质感,线条柔和流畅,背景简化为柔和暖色渐变。整体像精美绘本插图,治愈系,温馨可爱。
  • 日系淡雅:日系插画风格,<主体动作>,低饱和度、淡雅柔和的色调,以米白、浅粉、淡蓝灰为主,干净简洁的线条,大量留白,治愈系手账插画质感,背景极简。
  • Q版萌系(舒服头身比版):可爱卡通插画风格,Q版萌系画风,二头身至二点五头身的可爱 chibi 比例(头部约占全身高度的 1/2 到 2/5,不要过头成蘑菇头)。<主体动作>。脖颈自然衔接,头身过渡圆润协调,身体不要过度压缩成一团。大大的圆眼睛、圆润红润的脸蛋、小巧可爱的小手小脚。日系治愈基调但更卡通可爱,柔和明亮的色调(奶油白、淡粉、浅黄、薄荷绿),线条圆润干净,像吉卜力或轻松熊那种温暖治愈又萌的画风。背景简洁干净留白。
  • ⚠️ 头身比坑(用户 2026-07-25 反馈):原模板写"大头小身体"太笼统,模型易走向极端 1:1 头身比 → 人物像蘑菇头插小身子、无脖子、怪异不舒服。必须显式约束头身比(2~2.5 头身最安全),并加"脖颈自然衔接、身体不过度压缩"兜底。
  • 丑萌涂鸦风(锁定标准·彩色涂鸦墙版):丑萌涂鸦插画风格,友善搞笑沙雕但不恶意丑化。<主体动作>。画风像小孩用彩色蜡笔和马克笔在纸上随手乱涂的儿童涂鸦墙,intentionally amateurish,like a child's drawing,messy crayon scribble。线条极度潦草歪扭、断断续续、完全不平滑,充满孩子气涂鸦感。透视明显扭曲失衡,比例夸张失调,人物头大身小歪七扭八、四肢随手几笔。脸部五官夸张处理成滑稽喜感(圆圆大眼大嘴、开心傻笑),绝无 caricature 恶意丑化。背景极其繁忙、像一面涂鸦墙:满屏彩色乱涂线条、小星星、圆圈、闪电、小人和几何乱线,看台观众画成简单彩色火柴人/圆圈小人,颜色大胆斑斓(红、黄、蓝、绿、粉)。上色严重出界、斑驳不均、蜡笔涂出边界、能看到明显粗陋笔触痕迹,整体透着敷衍潦草又温馨欢乐的随性感。欢乐表情包趣味画风。不要画得写实,不要刻画细腻,不要专业规整,但保持善意和可爱。friendly ugly-cute doodle, good-natured silly humor, playful and lighthearted, not mean-spirited, childlike scribble, deliberately crude, colorful scribble wall.

Step 2:建 Ardot 画布

  1. create_design({ fileName: "xxx插画" }) —— 整轮只调一次,随后等待 ready(轮询 fetch_file_info 直到成功)。
  2. fetch_file_info 拿到 fileId,后续 MCP 调用都带它。
  3. 装裱用画框靠 batch_edit 建立(见下),图作为 fill 填进 frame,Ardot 没有独立 image 节点。

Step 3:batch_edit 建画框(属性格式易错,照抄)

frame=I(document, {type:"frame", name:"插画画框", x:200, y:100, width:800, height:1200,
  cornerRadius:24,
  fills:[{type:"SOLID", color:{r:0.98,g:0.97,b:0.94}, opacity:1, visible:true, blendMode:"NORMAL"}],
  strokes:[{type:"SOLID", color:{r:0.96,g:0.90,b:0.83}, opacity:1, visible:true, blendMode:"NORMAL"}],
  strokeWeight:4,
  effects:[{type:"DROP_SHADOW", color:{r:0.71,g:0.55,b:0.39,a:0.15}, offset:{x:0,y:8}, radius:24, visible:true, blendMode:"NORMAL", showShadowBehindNode:false, boundVariables:{}}]
})

必记的格式坑(Ardot schema 反直觉处):
- 颜色对象 只有 {r,g,b},不要带 a 字段;透明度写在 fill/stroke 顶层的 opacity。
- effects 的 type 用全大写下划线:DROP_SHADOW / INNER_SHADOW / BACKGROUND_BLUR。
- 阴影颜色 color 才带 a(alpha 0–1)。
- 文本字号 地板 28px(海报规范),标题/寄语勿低于此;最多 2 种字体。

Step 4:upload_images 把插画填进画框

upload_images({ fileId, items:[{ nodeId:"<frame的id,如 2:1>", filePath:"<Step1 生成的 png 绝对路径>" }] })

> 重新生成新风格插画后,直接再次 upload_images 同一 nodeId 即可替换旧图,无需重建画框。

Step 5:[可选] 加寄语卡片(嵌进画面,而非框外)

删掉"框外独立文本",改为在画框内加一枚圆角小卡,让文字成为画面一部分:

D("<旧文本节点id>")                      // 先删框外那行
card=I("2:1", {type:"frame", name:"寄语底卡", x:150, y:1020, width:500, height:120, cornerRadius:60,
  fills:[{type:"SOLID", color:{r:1,g:0.98,b:0.94}, opacity:0.92, visible:true, blendMode:"NORMAL"}],
  strokes:[{type:"SOLID", color:{r:0.90,g:0.83,b:0.75}, opacity:0.7, visible:true, blendMode:"NORMAL"}],
  strokeWeight:2,
  effects:[{type:"DROP_SHADOW", color:{r:0.6,g:0.5,b:0.4,a:0.2}, offset:{x:0,y:4}, radius:12, visible:true, blendMode:"NORMAL", showShadowBehindNode:false, boundVariables:{}}]})
ded=I("2:1", {type:"text", name:"寄语", x:150, y:1020, width:500, height:120, textAlign:"CENTER",
  content:"陪你慢慢长大,是我最温柔的时光", fontSize:30, fontWeight:500, fontFamily:"Noto Serif SC",
  fills:[{type:"SOLID", color:{r:0.45,g:0.38,b:0.32}, opacity:1, visible:true, blendMode:"NORMAL"}]})

> 子节点坐标相对画框左上角(0,0)。卡片放底部(y≈1020/1200)避免遮脸。要去掉寄语就 D 掉卡片与文本两个节点。

Step 6:capture_screenshot 校验

capture_screenshot({ fileId, nodeIds:["2:1"], screenShotDir:".workbuddy/screenshots" })

逐张看截图,确认:插画可爱度达标、文字清晰不压主体、画框/卡片无错位。不满意就回 Step 1 换风格重生成,或 Step 3–5 微调装裱。

工程踩坑速查(2026-07-25 固化)

  • 大图预处理(必做):相机原片常 6000×4000+/10MB+,直接传 ImageGen 会报 Request body larger than maxBodyLength limit。先用 sips --resampleWidth 1600 &lt;in&gt; --out &lt;out&gt; 缩到宽 ≤1600(约 <1MB)再生成。
  • 中文名文件坑:zip 内中文名(如 _DSC0274_副本.JPG)解压后,shell 的 file/sips 报 "No such file"——用 glob 找到真实路径后 cp &lt;中文名&gt; ascii.jpg 复制成 ASCII 名再操作。
  • 赛事/国家队照过审:足球/国家队球衣等可能触发 ImageGen 审核 &quot;Polity&quot; 涉政。prompt 把主体写成"卡通XX角色"并加"卡通化、儿童涂鸦",弱化真实赛事/队徽属性即可通过。
  • 表情温馨优先:用户明确撤回"保留原表情"设想——两条风格都保持笑脸/温馨感,比客观保留原表情更重要("完全失去温馨感"是负反馈)。
  • 双出防超时:选"两个都要"时并行生成易超时/失败,改为先后串行(先 Q版 medium,再丑萌 low)稳定出齐。

资源

  • references/style_prompts.md —— 三种风格的完整提示词与调参记录(迭代用)。
  • references/ardot_gotchas.md —— Ardot 属性格式坑位速查。

任何不需要的示例目录可删除。 本 skill 无需 scripts/ 与 assets/。

常见问题

5 问
答案由本站依据条目字段整理
图片趣味化怎么安装?

在支持 Skills 的客户端里执行:skillhub install user_8f929bd8/photo-to-illustration。安装方式为未标注。装完刷新技能列表或重开客户端。

图片趣味化支持哪些客户端?

资料没有标注宿主客户端,但只要客户端支持 Skills(Claude、Codex、Cursor 等),一般都能加载。

图片趣味化权限高吗,安全吗?

权限级别为未标注权限。安装前先看它会读取或写入哪些内容。

图片趣味化收费吗?

本站不代收费用,也没有标注具体价格。是否收费取决于技能本身和所用的模型或客户端,正式使用前按作者说明确认。

图片趣味化用什么许可证?

许可证标注为 未说明(许可证不明确)。商用或二次分发前请到仓库确认条款原文。

热门专题

按场景挑技能
全部专题 →

技能内容以作者仓库为准;分类、权限级别与许可证状态的中文说明为中文整理,最近核验 未标注。