菜单
Full graphic design capability using code-based rendering — turns Claude Code's HTML/CSS/SVG skills into production graphic design output
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | Graphic Design Studio |
| description | Full graphic design capability using code-based rendering — turns Claude Code's HTML/CSS/SVG skills into production graphic design output |
| recall_keywords | ["graphic","logo","banner","social media graphic","design","poster","visual","brand asset","marketing visual","icon"] |
Full graphic design capability using code-based rendering. Turns Claude Code's HTML/CSS/SVG skills into production graphic design output.
Best for: Logos, banners, cards, social media graphics, UI mockups
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page(viewport={"width": 1200, "height": 630})
page.set_content(html_content)
page.screenshot(path="output.png", full_page=False)
browser.close()
Best for: Icons, logos, geometric patterns, scalable assets
import svgwrite
dwg = svgwrite.Drawing('output.svg', size=('400px', '400px'))
# Replace colors with your project's brand palette
dwg.add(dwg.circle(center=(200, 200), r=100, fill='<primary-color>'))
dwg.add(dwg.text('<INITIALS>', insert=(160, 215), fill='<accent-color>',
font_size='60px', font_family='Georgia'))
dwg.save()
Best for: Photo editing, compositing, batch processing, format conversion
from PIL import Image, ImageDraw, ImageFont, ImageFilter
# Replace colors with your project's brand palette
img = Image.new('RGBA', (1200, 630), '<primary-color>')
draw = ImageDraw.Draw(img)
draw.text((100, 100), "<Brand Name>", fill='<accent-color>')
img.save('output.png', optimize=True)
Best for: Photorealistic images, illustrations, creative concepts
@fal-generate, @fal-image-edit, @fal-upscale)@huggingface-skills plugin)stability-ai skillAuto-review planning pipeline - runs CEO then design then eng reviews sequentially with auto-decisions. CARL TRIGGERS: autoplan, run the planning pipeline, full plan review, auto plan, plan everything. SOURCE: garrytan/gstack/autoplan, integrated as gs-autoplan on 2026-05-29.
Performance regression detection - baseline page load, Core Web Vitals, resource sizes. CARL TRIGGERS: benchmark, performance check, page speed, core web vitals, perf baseline. SOURCE: garrytan/gstack/benchmark, integrated as gs-benchmark on 2026-05-29.
Post-deploy canary monitoring - watches console errors, perf regressions, page failures. CARL TRIGGERS: canary monitor, post-deploy watch, after deploy check, monitor production, watch the deploy. SOURCE: garrytan/gstack/canary, integrated as gs-canary on 2026-05-29.
Safety guardrails - warns before destructive commands (rm -rf, DROP TABLE, force-push). CARL TRIGGERS: be careful, careful mode, destructive command warning, safety warning. SOURCE: garrytan/gstack/careful, integrated as gs-careful on 2026-05-29.
Chief Security Officer security audit - OWASP Top 10 plus STRIDE threat modeling. CARL TRIGGERS: security audit, OWASP audit, STRIDE, vulnerability check, security review, threat model, pen test mindset. SOURCE: garrytan/gstack/cso, integrated as gs-cso on 2026-05-29.
Generate missing documentation from scratch using the Diataxis framework. CARL TRIGGERS: generate docs, create documentation, draft docs, diataxis, write missing docs. SOURCE: garrytan/gstack/document-generate, integrated as gs-doc-generate on 2026-05-29.