Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add YousefNabil-SOC/claude-apex --skill graphic-design-studiogit clone --depth 1 https://github.com/YousefNabil-SOC/claude-apexWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/yousefnabil-soc/claude-apex/graphic-design-studio)<a href="https://agentmods.dev/skills/yousefnabil-soc/claude-apex/graphic-design-studio"><img src="https://agentmods.dev/badge/skills/yousefnabil-soc/claude-apex/graphic-design-studio/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/yousefnabil-soc/claude-apex/graphic-design-studio"><img src="https://agentmods.dev/badge/skills/yousefnabil-soc/claude-apex/graphic-design-studio.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00028 | $0.01227 |
| Opus 5.5 | $0.00011 | $0.00491 |
| Sonnet 5.5 | $0.00006 | $0.00245 |
| Haiku 4.5 | $0.00003 | $0.00123 |
Grade A, and why
Graphic Design Studio scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 116 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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.
When to Use
- User asks for logos, icons, graphics, banners, social media images
- User says "design", "graphic", "logo", "banner", "poster", "visual"
- User needs marketing visuals, brand assets, or presentation graphics
- User needs image editing, resizing, format conversion, optimization
Design Pipeline (4 methods — pick the best for the task)
Method 1: HTML/CSS → Playwright Screenshot (BEST FOR MOST TASKS)
Best for: Logos, banners, cards, social media graphics, UI mockups
- Create a self-contained HTML file with inline CSS
- Use modern CSS: gradients, shadows, blend modes, filters, animations (freeze frame)
- Set exact pixel dimensions via viewport meta + body sizing
- Use Google Fonts via CDN link for typography
- Render with Playwright: take screenshot at exact dimensions
- Post-process with Pillow if needed (crop, resize, optimize)
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()
Method 2: SVG Generation (BEST FOR VECTOR GRAPHICS)
Best for: Icons, logos, geometric patterns, scalable assets
- Use svgwrite Python library for programmatic SVG
- Or write SVG XML directly (more control)
- Export as .svg for vector use or convert to PNG via Playwright
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()
Method 3: Python Pillow (BEST FOR IMAGE PROCESSING)
Best for: Photo editing, compositing, batch processing, format conversion
- Open/create images with PIL.Image
- Draw shapes, text, gradients with ImageDraw
- Apply filters: blur, sharpen, contrast, color adjustment
- Composite multiple images together
- Export in any format: PNG, JPG, WebP, ICO
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 116 lines · 28 tokens per session scan A 148c4b2d4af0
Graphic Design Studio is a skill published in the GitHub repository YousefNabil-SOC/claude-apex (3 stars, last pushed 4mo ago), licensed MIT. It adds 28 tokens to every session and 1,227 once invoked, about $0.0001 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
brand-identity
Brand strategy and identity design for businesses and products. Use when creating brand guidelines, developing visual identity systems, or defining brand positioning.
graphic-design
Professional graphic design principles for digital and print media. Use when creating visual designs, choosing color palettes, typography, layouts, or providing design feedback.
generic-react-ux-designer
Professional UI/UX design expertise for React applications. Covers design thinking, user psychology (Hick's/Fitts's/Jakob's Law), visual hierarchy, interaction patterns, accessibility, performance-driven design, and design critique. Use when designing features, improving UX, solving user problems, or conducting design…
frontend-enhancer
Enhance the visual design of web apps: modern UI components, layout, responsive design, color palettes, animations. Use for styling and UI polish; pair with ui-research first for new design directions.
generic-design-system
Complete design system reference for any project - colors, typography, spacing, components, animations. Adapts to project theme and tech stack. Use when implementing UI, choosing colors, creating animations, or ensuring brand consistency. For new design systems, use ui-research skill first.
generic-react-design-system
Complete design system reference for React applications. Covers colors, typography, spacing, component patterns, glassmorphism effects, GPU-accelerated animations, and WCAG AA accessibility. Use when implementing UI, choosing colors, applying spacing, creating components, or ensuring brand consistency.