Claude Skills for a Designer
Color Expert — Color Science Agent Skill
Turns your coding agent into a color science expert with a curated knowledge base spanning color spaces, accessibility, palette generation, pigment mixing, and historical color theory.
Draw.io Diagram Skill
Have your AI assistant generate native .drawio diagram files, export them as editable PNG/SVG/PDF, or open them in the browser — no MCP setup required.
Video ShotCraft: Cinematic Product Video Skill
Turns Claude Code / Codex into a motion-design studio: 157 shot recipe cards, a Remotion template, and sound design that turn your product page into a cinematic promo.
Slides Grab HTML Skill
Generate semantic HTML slides in Claude Code / Codex with bespoke AI imagery, a design gate, and PDF/PPTX export.
TypeUI (Hermes Agent Design Skill)
Connects Hermes Agent to the TypeUI MCP server so generated and redesigned UIs inherit project design skills, brand kits, UI prompts, and layout variations instead of generic styling.
Diagram Design
Generate editorial-quality, self-contained HTML + SVG diagrams for Claude Code, Codex, and Pi — no shadows, no Mermaid slop.
SwiftUI Design Skill
Make SwiftUI interfaces look intentionally crafted, not AI-generated: six iron rules, design direction consulting, brand asset protocol, and a five-dimension review in one skill.
Codex Image Generation Skill (imagegen)
Generate or edit bitmap assets — photos, illustrations, textures, UI and product mockups — directly in Codex, with local transparent-background processing.
Codex Image Studio
Generate and edit production-ready raster assets for projects.
Guizang Web Deck Skill
Turn articles and ideas into browser-ready, single-file HTML presentations.
baoyu-design: Run Claude Design Locally as an Agent Skill
Package the design engine behind claude.ai/design into an Agent Skill, so Cursor, Claude Code, or any file-capable agent can produce polished, self-contained HTML mockups, prototypes, wireframes, and slide decks locally.
Slides Grab Image-Native Skill
In Claude Code or Codex, generate whole-slide raster images one page at a time against reference template pages, for maximum fidelity to corporate templates, brand layouts, and visual density.
Superdesign Design Skill
Gives coding agents real design judgment so the UI they ship looks considered, not AI-slop — producing shippable frontend, presentations, and graphics.
HTML Anything: Turn Anything Into a Page
Turns any file, folder, URL, or service export into a beautiful, interactive, shareable single-file HTML page instead of a long Markdown answer.
Hand-Drawn Diagrams Skill
Turn one natural-language prompt into hand-drawn Excalidraw architecture, workflow, and UX wireframe diagrams, with a hosted edit link, stroke-by-stroke animation, and PNG export.
Hatch Pet Animation Workshop
Turn character or brand cues into validated, packageable Codex animated pets.
Slides-Grab Card News Skill
Reuses the slides-grab workflow inside Claude Code / Codex to produce 720×720 square, Instagram-ready card news images.
Slides Grab Design Skill
Turn an approved slide outline into high-quality, iteratively editable HTML slides inside Claude Code or Codex, gated by an adversarial design review.
Figma Design System Rules Builder
Generates project-specific rules for consistent Figma-to-code implementation.
Guizang Social Cards
Turn articles, screenshots, and videos into rendered social-card packages and motion cards.
Image-to-Code Skill
Generate website design references first, analyze them deeply, then implement a faithful frontend.
Minimalist Editorial UI Skill
Premium, clean editorial-style interfaces for AI frontends: warm monochrome palette, typographic contrast, flat bento grids, no gradients or heavy shadows.