Watercolor Svg logo

Watercolor Svg

Community
ABYR1206
watercolor-svg

Use when the user wants a watercolor or painterly illustration — wet-on-wet washes, a hand-painted flower or botanical, generative/programmatic watercolor, paper-texture artwork, "水彩" — delivered as SVG or PNG, including matching a reference watercolor image, recoloring one into another palette, or producing variations.

Overview

PublisherABYR1206
Repositorywatercolor-svg
Skill namewatercolor-svg
Stars
3
Forks
1
Bundled files
6
LicenseMIT
Links
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 6 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by ABYR1206 on GitHub. Read the source before you install it.

Installation

Install the Watercolor Svg AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/ABYR1206/watercolor-svg/tree/main
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/ABYR1206/watercolor-svg.git \
  .claude/skills/watercolor-svg
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Watercolor Svg in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Watercolor Svg on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Watercolor Svg is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

Watercolor SVG

生成手绘水彩质感的矢量插画:纸纹、湿边、颗粒沉淀、断续干边、放射笔触。

核心原则

算法已经写好并验证过,不要重写。 scripts/watercolor.js 是经 6 轮目视迭代收敛的结果——每个 alpha、每个 rim 参数都调过。从零手写 SVG 水彩必然退化成"钢笔描边的色块"。你的工作是选型、调参、验收,不是重新发明。

工作流

bash
# 1. 看有什么
node scripts/watercolor.js --list

# 2. 出图(同 seed 永远同一张)
node scripts/watercolor.js --form hibiscus --palette indigo --seed 20863 --out flower.svg

# 3. 渲染成 PNG —— 必须看图,不看就等于没做
scripts/render.sh flower.svg flower.png 1200
#    没装 Chromium 内核浏览器时脚本会退出码 3 并说明;
#    此时直接在浏览器打开 .svg 目视检查,别跳过验收

# 4. 读 PNG,走验收清单。不合格→查对照表调参→回到 2

挑不定 seed 就一次出几个再选:--seeds 7,41,20863,4174 --out f.svg

验收清单(读 PNG 逐条核对,缺一条就要调)

#要看到不合格的样子
1边缘线断续、两端渐隐、深浅不一一圈均匀的"钢笔描边"
2花心深但有透明感,能看出结构一坨死黑墨团
3放射笔触止于瓣长 ~70%,外半瓣是干净洗染全长射满 → 像羽毛球/菊花
4纸色留白含蓄,只是笔触间的缝刺眼白条 → 车轮辐条
5至少两个可辨的色层(背瓣 vs 主瓣)通片一个色,平
6纸纹和颗粒沉淀肉眼可见光滑得像填充图形
7花占画面 60–75%,四周有留白撑满出血 / 缩成小点

症状 → 调什么

症状参数
花太大/太小--scale 0.85 / 1.1
位置偏--cx --cy(按 600 基准坐标)
整体太深/太脏该花型 ring 的 wash.alpha、center.alpha 降 20%
中心黑洞center.count↓ center.alpha↓,veinN↓
星芒太长太密veinLen:[0.25,0.5]、veinN:[4,6]
边缘像描边rim 数量↑而 rimAlpha↓(靠叠加不靠加深)
想要更"湿"wash.bleed↑、spread↑

花型/色板都在脚本顶部的 FORMS / PALETTES 里,直接改或用 --config x.json 覆盖。改法与全部参数含义见 references/tuning.md。

内置

花型 hibiscus(木槿,5 瓣 + 长蕊柱)· poppy(虞美人,4 褶皱大瓣)· peony(牡丹,三层密瓣)· cosmos(波斯菊,8 窄瓣)· magnolia(玉兰,9 长瓣)· abstract(自由色斑,作背景/封面)

色板 indigo(靛蓝)· rose(粉紫暖黄)· celadon(青瓷)· ink(水墨)· plum(梅紫)· amber(琥珀)

新色系不必新建色板——--config 里传 palette 对象即可,字段见 tuning.md。

常见错误

  • 不看图就交付:SVG 源码看不出画得好不好,滤镜和 multiply 只有渲染才生效。没有浏览器可截图时,也要把 SVG 打开来看。
  • 挑第一个 seed 就交:seed 之间差别很大,多出几个再选。
  • 给新色系挑太浅的颜色:全部走 multiply 叠加,呈现比色值淡得多,选中等明度。
  • 改 --size 后以为要重调几何:几何按 600 基准自动等比缩放,只改 --size 即可。
  • 标注字体:默认 Bradley Hand(macOS 自带),SVG 未转曲。换机器会回退;--font 可换,--no-anno 可去掉。

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Watercolor Svg AI skill do?

Use when the user wants a watercolor or painterly illustration — wet-on-wet washes, a hand-painted flower or botanical, generative/programmatic watercolor, paper-texture artwork, "水彩" — delivered as SVG or PNG, including matching a reference watercolor image, recoloring one into another palette, or producing variations.

Why use Watercolor Svg on TypingMind?

Because you install it once and use it with any model. Watercolor Svg is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Watercolor Svg in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/ABYR1206/watercolor-svg/tree/main. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Watercolor Svg?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Watercolor Svg?

As many as you like. As long as a model supports skills, you can use Watercolor Svg with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Watercolor Svg AI skill free?

Yes. It is published on GitHub by ABYR1206 under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇