browsing-styles

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Browsing Styles

浏览风格

Browse and preview 169 artistic styles for image generation. Each style includes prompt hints and a generated tile reference image.

浏览并预览169种用于图像生成的艺术风格。每种风格都包含提示词参考和生成的风格预览缩略图。

When to Use

使用场景

Browsing available art styles for image generation
Searching for a specific style by name or category
Helping users choose a style for their project
Generating tile reference images for styles

浏览图像生成可用的艺术风格
按名称或类别搜索特定风格
帮助用户为其项目选择风格
生成风格的预览缩略图

Style Categories

风格类别

Category	Description	Examples
traditional	Classical art styles	Impressionism, Surrealism, Art Deco
digital	Digital & modern aesthetics	Cyberpunk, Vaporwave, Pixel Art
illustration	Illustration styles	Anime, Comic Book, Concept Art
photography	Photography & film looks	Cinematic, Film Noir, Kodachrome
design	Design & UI trends	Brutalism, Glassmorphism, Bauhaus
retro	Retro & nostalgia	Y2K, Frutiger Aero, 90s Grunge
technique	Specific art techniques	Watercolor, Charcoal, Linocut
decorative	Pattern & decorative arts	Islamic Geometric, Mandala, Moroccan
creative	Creative & material-based	Made of Sand, Underwater, Origami
cultural	Pop culture & iconic styles	Simpsons, Spawn, Dragon Ball, Cowboy Bebop

类别	描述	示例
traditional	经典艺术风格	印象派、超现实主义、装饰艺术
digital	数字与现代美学	赛博朋克、蒸汽波、像素艺术
illustration	插画风格	动漫、漫画、概念艺术
photography	摄影与胶片风格	电影质感、黑色电影、柯达chrome胶片
design	设计与UI潮流	粗野主义、玻璃拟态、包豪斯风格
retro	复古与怀旧风格	Y2K、Frutiger Aero、90年代垃圾摇滚风
technique	特定艺术技法	水彩、炭笔、麻胶版画
decorative	图案与装饰艺术	伊斯兰几何图案、曼陀罗、摩洛哥风格
creative	创意与材质风格	沙质质感、水下风格、折纸艺术
cultural	流行文化与标志性风格	辛普森一家、再生侠、龙珠、星际牛仔

Quick Reference (Popular Styles)

快速参考（热门风格）

Short	Name	Category
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

缩写	名称	类别
impr	印象派	traditional
surr	超现实主义	traditional
deco	装饰艺术	traditional
cybr	赛博朋克	digital
pixl	像素艺术	digital
vapr	蒸汽波	digital
anim	动漫/漫画	illustration
ghbl	吉卜力工作室	illustration
brit	Romero Britto波普艺术	illustration
brut	粗野主义	design
nbrt	新粗野主义	design
glas	玻璃拟态	design
riso	Risograph印刷	design
y2k	Y2K风格	retro
frug	Frutiger Aero	retro
psyc	70年代迷幻风格	retro
wtrl	写意水彩	technique
sumi	水墨画/墨绘	technique
sand	沙质质感	creative
undr	水下风格	creative

Style Picker (Default)

风格选择器（默认模式）

Running the preview server opens a browser with the full tile grid. The user clicks a style, views details in a modal, clicks "Select This Style". The script prints the selected style as JSON to stdout and exits automatically. Pick mode is the default.

bash

STYLE_JSON=$(bun run ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/preview_server.ts)

Parse

STYLE_JSON

for the

id

field and pass it as

--style <id>

to generate-image.

运行预览服务器会打开一个包含完整风格缩略图网格的浏览器。用户点击某一风格，在模态窗口中查看详情，点击“选择此风格”。脚本会将选中的风格以JSON格式输出到标准输出并自动退出。选择模式为默认模式。

bash

STYLE_JSON=$(bun run ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/preview_server.ts)

解析

STYLE_JSON

中的

id

字段，并将其作为

--style <id>

参数传递给generate-image。

Options

选项

bash

bun run scripts/preview_server.ts                          # Pick mode (default): opens browser, returns JSON, exits
bun run scripts/preview_server.ts --port=4200              # Custom port
bun run scripts/preview_server.ts --no-open                # Don't auto-open browser
bun run scripts/preview_server.ts --browse                 # Browse-only mode: long-running server, no selection returned

bash

bun run scripts/preview_server.ts                          # 选择模式（默认）：打开浏览器，返回JSON，自动退出
bun run scripts/preview_server.ts --port=4200              # 自定义端口
bun run scripts/preview_server.ts --no-open                # 不自动打开浏览器
bun run scripts/preview_server.ts --browse                 # 仅浏览模式：长期运行服务器，不返回选择结果

Browse Mode

浏览模式

For standalone browsing without returning a selection, pass

--browse

bash

bun run ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/preview_server.ts --browse

This runs a long-lived server at

localhost:3456

. Use Ctrl+C to stop.

若要仅进行独立浏览而不返回选择结果，传递

--browse

参数：

bash

bun run ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/preview_server.ts --browse

这会在

localhost:3456

启动一个长期运行的服务器，使用Ctrl+C停止。

List Styles (CLI)

列出风格（CLI）

bash

undefined

bash

undefined

List all styles

列出所有风格

bun run ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/list_styles.ts

Table format

表格格式

bun run ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/list_styles.ts --table

Filter by category

按类别过滤

bun run ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/list_styles.ts --category design --table

Search by name

按名称搜索

bun run ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/list_styles.ts --search "watercolor"

Show specific fields

显示指定字段

bun run ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/list_styles.ts --fields id,shortName,name,category --table

undefined

bun run ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/list_styles.ts --fields id,shortName,name,category --table

undefined

Generate Tile Reference Images

生成风格预览缩略图

Generate 1:1 tile images that visually represent each style:

bash

undefined

生成1:1比例的缩略图，直观展示每种风格：

bash

undefined

Generate all missing tiles

生成所有缺失的缩略图

bun run ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/generate_tiles.ts --skip-existing

Generate for a specific category

为特定类别生成

bun run ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/generate_tiles.ts --category creative --skip-existing

Generate a single style tile

为单个风格生成缩略图

bun run ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/generate_tiles.ts --style cyberpunk

Preview what would be generated

预览将生成的内容

bun run ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/generate_tiles.ts --dry-run

Higher concurrency (default: 2)

更高并发量（默认：2）

bun run ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/generate_tiles.ts --concurrency 4 --skip-existing


Tiles are saved to `assets/tiles/<style-id>.png` (512x512 PNG).

bun run ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/generate_tiles.ts --concurrency 4 --skip-existing


缩略图将保存至`assets/tiles/<style-id>.png`（512x512 PNG格式）。

Integration with generate-image

与generate-image集成

Use styles with the generate-image skill:

bash

undefined

将风格与generate-image Skill配合使用：

bash

undefined

Using style ID

使用风格ID

bun run ${CLAUDE_PLUGIN_ROOT}/skills/generate-image/scripts/generate.ts "mountain landscape" --style impressionism

Using short name

使用缩写名称

bun run ${CLAUDE_PLUGIN_ROOT}/skills/generate-image/scripts/generate.ts "portrait" --style brit

Style with other options

结合其他选项使用风格

bun run ${CLAUDE_PLUGIN_ROOT}/skills/generate-image/scripts/generate.ts "city street" --style cybr --size 4K --aspect 16:9


When a tile image exists for the style, it is automatically sent as a visual reference alongside the prompt hints.

bun run ${CLAUDE_PLUGIN_ROOT}/skills/generate-image/scripts/generate.ts "city street" --style cybr --size 4K --aspect 16:9


当某风格存在缩略图时，它会与提示词参考一起自动作为视觉参考发送。

Style Registry

风格注册表

Styles are defined in

assets/styles.json

. Each style includes:

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: Comma-separated descriptors prepended to user prompts
tilePrompt: Full prompt used to generate the style's reference tile image

风格定义在

assets/styles.json

中。每种风格包含：

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：用于生成风格预览缩略图的完整提示词

Adding Custom Styles

添加自定义风格

Edit

assets/styles.json

Choose a unique
```
id
```
(lowercase, hyphens)
Assign a short
```
shortName
```
(3-4 chars)
Write descriptive
```
promptHints
```
Write a
```
tilePrompt
```
for generating the tile image

Run

bun run scripts/generate_tiles.ts --style <id>

to generate the tile

编辑

assets/styles.json

：

选择唯一的
```
id
```
（小写，连字符分隔）
指定一个简短的
```
shortName
```
（3-4个字符）
编写描述性的
```
promptHints
```
编写用于生成缩略图的
```
tilePrompt
```

运行

bun run scripts/generate_tiles.ts --style <id>

生成缩略图