用途
browsing-styles 用于浏览和预览图像生成可用的艺术风格。当用户提出“浏览艺术风格”“挑选风格”“选择风格”“列出可用风格”或“搜索风格”等需求时使用该技能。它提供 169 种艺术风格,每种风格包含提示词提示(prompt hints)和一张生成的瓷砖参考图。它还能帮助用户为项目选择风格,并生成风格的瓷砖参考图。
风格类别
风格按类别组织,包括:
- traditional(传统艺术风格):印象派、超现实主义、装饰艺术
- digital(数字与现代美学):赛博朋克、蒸汽波、像素艺术
- illustration(插画风格):动漫、漫画书、概念艺术
- photography(摄影与电影质感):电影感、黑色电影、柯达克罗姆
- design(设计与 UI 趋势):粗野主义、玻璃拟态、包豪斯
- retro(复古与怀旧):Y2K、Frutiger Aero、90 年代垃圾摇滚
- technique(具体艺术技法):水彩、木炭、油毡版画
- decorative(图案与装饰艺术):伊斯兰几何、曼陀罗、摩洛哥
- creative(创意与材料):沙制、水下、折纸
- cultural(流行文化与标志性风格):辛普森、Spawn、龙珠、星际牛仔
快速参考(热门风格)
| 缩写 | 名称 | 类别 |
|---|---|---|
| impr | Impressionism | traditional |
| surr | Surrealism | traditional |
| deco | Art Deco | traditional |
| cybr | Cyberpunk | digital |
| pixl | Pixel Art | digital |
| vapr | Vaporwave | digital |
| anim | Anime / Manga | illustration |
| ghbl | Studio Ghibli | illustration |
| brit | Romero Britto Pop | illustration |
| brut | Brutalism | design |
| nbrt | Neo-Brutalism | design |
| glas | Glassmorphism | design |
| riso | Risograph | design |
| y2k | Y2K | retro |
| frug | Frutiger Aero | retro |
| psyc | 70s Psychedelic | retro |
| wtrl | Watercolor Loose | technique |
| sumi | Ink Wash / Sumi-e | technique |
| sand | Made of Sand | creative |
| undr | Underwater | creative |
风格选择器(默认)
运行预览服务器会打开浏览器并显示完整的瓷砖网格。用户点击一个风格,在弹出的模态框中查看详情,点击“Select This Style”。脚本将所选风格以 JSON 打印到标准输出,然后自动退出。选择模式为默认模式。
STYLE_JSON=$(bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/preview_server.ts)
解析 STYLE_JSON 中的 id 字段,并将其作为 --style <id> 传递给 generate-image。
选项
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/preview_server.ts # Pick mode (default): opens browser, returns JSON, exits
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/preview_server.ts --port=4200 # Custom port
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/preview_server.ts --no-open # Don't auto-open browser
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/preview_server.ts --browse # Browse-only mode: long-running server, no selection returned
浏览模式
如需独立浏览而不返回选择结果,请传入 --browse:
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/preview_server.ts --browse
这会在 localhost:3456 上运行一个长期存活的服务器。使用 Ctrl+C 停止。
列出风格(CLI)
# List all styles
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/list_styles.ts
# Table format
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/list_styles.ts --table
# Filter by category
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/list_styles.ts --category design --table
# Search by name
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/list_styles.ts --search "watercolor"
# Show specific fields
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/list_styles.ts --fields id,shortName,name,category --table
生成瓷砖参考图
生成 1:1 的瓷砖图像,以视觉方式呈现每种风格:
# Generate all missing tiles
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/generate_tiles.ts --skip-existing
# Generate for a specific category
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/generate_tiles.ts --category creative --skip-existing
# Generate a single style tile
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/generate_tiles.ts --style cyberpunk
# Preview what would be generated
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/generate_tiles.ts --dry-run
# Higher concurrency (default: 2)
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/generate_tiles.ts --concurrency 4 --skip-existing
瓷砖保存到 assets/tiles/<style-id>.png(512x512 PNG)。
与 generate-image 集成
将风格与 generate-image 技能一起使用:
# Using style ID
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-image/scripts/generate.ts "mountain landscape" --style impressionism
# Using short name
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-image/scripts/generate.ts "portrait" --style brit
# Style with other options
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-image/scripts/generate.ts "city street" --style cybr --size 4K --aspect 16:9
当某风格存在瓷砖图像时,它会自动作为视觉参考与提示词提示一起发送。
风格注册表
风格定义在 assets/styles.json 中。每个风格包含:
{
"id": "cyberpunk",
"shortName": "cybr",
"name": "Cyberpunk",
"category": "digital",
"promptHints": "neon lights reflecting on rain-soaked streets...",
"tilePrompt": "A rain-soaked cyberpunk megacity alley..."
}
- promptHints:逗号分隔的描述符,前置到用户提示词中
- tilePrompt:用于生成该风格参考瓷砖图像的完整提示词
添加自定义风格
编辑 assets/styles.json:
- 选择一个唯一的 id(小写、连字符)
- 分配一个简短的 shortName(3-4 个字符)
- 编写描述性的 promptHints
- 编写用于生成瓷砖图像的 tilePrompt
- 运行 bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/generate_tiles.ts --style <id> 以生成瓷砖
适用场景
- 为图像生成项目挑选或浏览艺术风格
- 按名称或类别搜索特定风格
- 帮助用户为项目选择风格
- 为风格生成瓷砖参考图
限制
资料中未提供关于收费、价格、平台支持范围等额外信息。