npx skills add https://github.com/b-open-io/gemskills --skill 'Style Creator'通过精心设计的提示词、参考图块和注册条目,向 gemskills 风格库添加新的艺术风格。
所有文件编辑和命令操作都相对于 ${CLAUDE_PLUGIN_ROOT}(插件根目录)进行。
Sharp 可能在插件缓存中失败。 如果 bun run optimize 失败,图块生成脚本会自动优化。如果两者都失败,请使用 sips 作为备用方案:
sips -s format png -s formatOptions best <tile-path> --out <tile-path>
按顺序遵循以下步骤。不要跳过任何步骤。
从用户处收集:
miami-aesthetic)广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
miam)traditional、digital、illustration、photography、design、retro、technique、decorative、creative、cultural如果用户只提供名称或概念,则自动推导 ID 和简称。选择最合适的类别。
promptHints 字段是一个逗号分隔的描述符字符串,在使用该风格时会添加到用户提示词前。重点关注:
保持 8-12 个描述符。这些用于在生成用户图像时指导模型,而不是用于图块本身。
应用以下原则 — 不要读取外部参考文件,规则就在这里:
核心原则:纹理 vs 对象。 图块必须传递材质/媒介/技术,而不是一个场景。显示"赛博朋克城市"的图块会将城市元素渗透到每个用户提示词中。显示"铬金属上的霓虹折射与胶片颗粒"的图块只传递视觉物理特性。
6 部分提示词结构:
Full-bleed [style] filling the entire canvasextreme close-up macro texture、seamless pattern、abstract compositioncracked canvas、halftone dots、VHS static、watercolor bleedchiaroscuro、pastel gradients、neon rim light、sepia tonesEdge to edge, no frame, no border, no [style-specific items]类别提示:
dense montage 或 extreme macro of brushwork根据风格添加的反容器项目:
no canvas, no easel, no gallery, no museum, no wallno hoop, no frame, no desk, no tableno letterbox, no black bars, no monitor, no screenno cloth edge, no fabric edge, no bed, no furniture将新的风格条目添加到以下路径的 styles 数组中:
${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/assets/styles.json
条目格式:
{
"id": "style-id",
"shortName": "shrt",
"name": "Style Name",
"category": "category",
"promptHints": "descriptor1, descriptor2, descriptor3",
"tilePrompt": "Full-bleed ... Edge to edge, no frame, no border."
}
在添加之前,请验证 ID 和简称在所有现有风格中是唯一的。
使用图块生成脚本生成参考图块:
bun run ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/generate_tiles.ts --style <style-id>
这将在 assets/tiles/<style-id>.png 生成一个 512x512 的 PNG 图块并自动优化它。
如果自动优化失败,请尝试从插件根目录手动执行:
bun run ${CLAUDE_PLUGIN_ROOT}/optimize -- --file=skills/browsing-styles/assets/tiles/<style-id>.png
如果 sharp 不可用,请使用 sips:
sips -s format png -s formatOptions best ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/assets/tiles/<style-id>.png --out ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/assets/tiles/<style-id>.png
如果风格受益于参考图像(例如区域美学),请使用带有 --input 的 generate-image 脚本:
bun run ${CLAUDE_PLUGIN_ROOT}/skills/generate-image/scripts/generate.ts \
"<tilePrompt text>" \
--input /path/to/reference.jpg \
--aspect 1:1 --size 1K \
--output ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/assets/tiles/<style-id>.png
不要将生成的图块读回上下文。 请用户进行视觉检查。常见问题:
如果失败,请更新 tilePrompt 并重新生成。
添加风格后,更新以下文件中的风格计数:
${CLAUDE_PLUGIN_ROOT}/README.md(风格计数提及)${CLAUDE_PLUGIN_ROOT}/.claude-plugin/plugin.json(描述文本和版本号提升)${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/SKILL.md(计数)${CLAUDE_PLUGIN_ROOT}/skills/team-group-photo/SKILL.md(计数)从插件根目录重新生成 STYLES.md:
bun -e "
const root = process.env.CLAUDE_PLUGIN_ROOT;
const data = JSON.parse(require('fs').readFileSync(root + '/skills/browsing-styles/assets/styles.json', 'utf8'));
const styles = data.styles;
const cats = data.categories;
const grouped = {};
for (const s of styles) { if (!grouped[s.category]) grouped[s.category] = []; grouped[s.category].push(s); }
let md = '# Art Styles Reference\n\n' + styles.length + ' styles across ' + Object.keys(grouped).length + ' categories. Use \\\`--style <id>\\\` or \\\`--style <short>\\\` with any image generation skill.\n\n## Categories\n\n| Category | Count | Description |\n|----------|-------|-------------|\n';
for (const [cat, desc] of Object.entries(cats)) { md += '| ' + cat + ' | ' + (grouped[cat]?.length || 0) + ' | ' + desc + ' |\n'; }
md += '\n';
for (const [cat, desc] of Object.entries(cats)) { const items = grouped[cat] || []; if (!items.length) continue; md += '## ' + cat.charAt(0).toUpperCase() + cat.slice(1) + '\n\n| Tile | ID | Short | Name |\n|------|-----|-------|------|\n'; for (const s of items) { md += '| <img src=\"skills/browsing-styles/assets/tiles/' + s.id + '.png\" width=\"80\" /> | ' + s.id + ' | ' + s.shortName + ' | ' + s.name + ' |\n'; } md += '\n'; }
require('fs').writeFileSync(root + '/STYLES.md', md);
console.log('STYLES.md written with ' + styles.length + ' styles');
"
提升 ${CLAUDE_PLUGIN_ROOT}/.claude-plugin/plugin.json 中的补丁版本号,并提交所有更改。
不要将生成的图块图像读回上下文。 脚本只输出文件路径。请用户视觉检查图块并提供反馈以进行迭代。
每周安装量
0
仓库
GitHub 星标数
2
首次出现
1970年1月1日
安全审计
Add new art styles to the gemskills style library with properly crafted prompts, reference tiles, and registry entries.
All file edits and commands operate relative to ${CLAUDE_PLUGIN_ROOT} (the plugin root).
Sharp may fail in the plugin cache. If bun run optimize fails, the tile generation script auto-optimizes. If both fail, use sips as a fallback:
sips -s format png -s formatOptions best <tile-path> --out <tile-path>
Follow these steps in order. Do not skip steps.
Gather from the user:
miami-aesthetic)miam)traditional, digital, illustration, photography, design, retro, technique, decorative, creative, culturalIf the user provides only a name or concept, derive the ID and short name automatically. Choose the category that best fits.
The promptHints field is a comma-separated string of descriptors prepended to user prompts when the style is used. Focus on:
Keep to 8-12 descriptors. These guide the model when generating user images, not the tile itself.
Apply these principles — do NOT read external reference files, the rules are right here:
Core principle: Texture vs Object. The tile must transfer materiality/medium/technique, NOT a scene. A tile showing "a cyberpunk city" will bleed city elements into every user prompt. A tile showing "neon refractions on chrome with film grain" transfers only the visual physics.
6-part prompt structure:
Full-bleed [style] filling the entire canvasextreme close-up macro texture, seamless pattern, abstract compositioncracked canvas, halftone dots, VHS static, watercolor bleedchiaroscuro, , , Category tips:
dense montage or extreme macro of brushworkAnti-container items to add based on style:
no canvas, no easel, no gallery, no museum, no wallno hoop, no frame, no desk, no tableno letterbox, no black bars, no monitor, no screenno cloth edge, no fabric edge, no bed, no furnitureAdd the new style entry to the styles array in:
${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/assets/styles.json
Entry format:
{
"id": "style-id",
"shortName": "shrt",
"name": "Style Name",
"category": "category",
"promptHints": "descriptor1, descriptor2, descriptor3",
"tilePrompt": "Full-bleed ... Edge to edge, no frame, no border."
}
Verify the ID and short name are unique across all existing styles before adding.
Generate the reference tile using the tile generation script:
bun run ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/scripts/generate_tiles.ts --style <style-id>
This generates a 512x512 PNG tile at assets/tiles/<style-id>.png and auto-optimizes it.
If auto-optimization fails, try manually from the plugin root:
bun run ${CLAUDE_PLUGIN_ROOT}/optimize -- --file=skills/browsing-styles/assets/tiles/<style-id>.png
If sharp is unavailable, use sips:
sips -s format png -s formatOptions best ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/assets/tiles/<style-id>.png --out ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/assets/tiles/<style-id>.png
If the style benefits from a reference image (e.g. a regional aesthetic), use the generate-image script with --input:
bun run ${CLAUDE_PLUGIN_ROOT}/skills/generate-image/scripts/generate.ts \
"<tilePrompt text>" \
--input /path/to/reference.jpg \
--aspect 1:1 --size 1K \
--output ${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/assets/tiles/<style-id>.png
Do not read the generated tile back into context. Ask the user to visually inspect it. Common issues:
If it fails, update the tilePrompt and regenerate.
After adding styles, update the style count in these files:
${CLAUDE_PLUGIN_ROOT}/README.md (style count mentions)${CLAUDE_PLUGIN_ROOT}/.claude-plugin/plugin.json (description text and version bump)${CLAUDE_PLUGIN_ROOT}/skills/browsing-styles/SKILL.md (count)${CLAUDE_PLUGIN_ROOT}/skills/team-group-photo/SKILL.md (count)Regenerate STYLES.md from the plugin root:
bun -e "
const root = process.env.CLAUDE_PLUGIN_ROOT;
const data = JSON.parse(require('fs').readFileSync(root + '/skills/browsing-styles/assets/styles.json', 'utf8'));
const styles = data.styles;
const cats = data.categories;
const grouped = {};
for (const s of styles) { if (!grouped[s.category]) grouped[s.category] = []; grouped[s.category].push(s); }
let md = '# Art Styles Reference\n\n' + styles.length + ' styles across ' + Object.keys(grouped).length + ' categories. Use \\\`--style <id>\\\` or \\\`--style <short>\\\` with any image generation skill.\n\n## Categories\n\n| Category | Count | Description |\n|----------|-------|-------------|\n';
for (const [cat, desc] of Object.entries(cats)) { md += '| ' + cat + ' | ' + (grouped[cat]?.length || 0) + ' | ' + desc + ' |\n'; }
md += '\n';
for (const [cat, desc] of Object.entries(cats)) { const items = grouped[cat] || []; if (!items.length) continue; md += '## ' + cat.charAt(0).toUpperCase() + cat.slice(1) + '\n\n| Tile | ID | Short | Name |\n|------|-----|-------|------|\n'; for (const s of items) { md += '| <img src=\"skills/browsing-styles/assets/tiles/' + s.id + '.png\" width=\"80\" /> | ' + s.id + ' | ' + s.shortName + ' | ' + s.name + ' |\n'; } md += '\n'; }
require('fs').writeFileSync(root + '/STYLES.md', md);
console.log('STYLES.md written with ' + styles.length + ' styles');
"
Bump the patch version in ${CLAUDE_PLUGIN_ROOT}/.claude-plugin/plugin.json and commit all changes.
Do not read generated tile images back into context. The scripts output file paths only. Ask the user to visually inspect tiles and provide feedback for iteration.
Weekly Installs
0
Repository
GitHub Stars
2
First Seen
Jan 1, 1970
Security Audits
AI Elements:基于shadcn/ui的AI原生应用组件库,快速构建对话界面
53,500 周安装
Three.js交互开发指南:Raycaster光线投射与鼠标点击检测实现3D交互
1,900 周安装
RivetKit React客户端:快速连接Rivet Actors的React应用开发工具
2,100 周安装
CRCHCN 代币技能 - 在 mbc-20 协议上操作 CRCHCN 代币的 Node.js 工具
RivetKit JavaScript客户端:快速构建连接Rivet Actors的浏览器与Node.js应用
2,100 周安装
高端实用极简主义UI架构师 | 文档风格网页设计 | 前端工程指令
3,000 周安装
SQL Pro 高级查询与性能优化指南 - CTE、窗口函数、执行计划分析
2,100 周安装
pastel gradientsneon rim lightsepia tonesEdge to edge, no frame, no border, no [style-specific items]