SuperAPI AI 工具集

browsing-styles

设计与创作

查看项目

更新于 10-16 01:59

技能介绍

用途

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:

  1. 选择一个唯一的 id(小写、连字符)
  2. 分配一个简短的 shortName(3-4 个字符)
  3. 编写描述性的 promptHints
  4. 编写用于生成瓷砖图像的 tilePrompt
  5. 运行 bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/generate_tiles.ts --style <id> 以生成瓷砖

适用场景

  • 为图像生成项目挑选或浏览艺术风格
  • 按名称或类别搜索特定风格
  • 帮助用户为项目选择风格
  • 为风格生成瓷砖参考图

限制

资料中未提供关于收费、价格、平台支持范围等额外信息。