Design & Frontend Claude Skills
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.
Auteur
Directs Claude Code to build a website the way a film director makes a film: art direction locked before code, generated assets, and an executable anti-slop linter gating every ship.
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.
Banana Claude — Gemini Image Creative Director
Plan, generate, edit, compare, and review Google Gemini images from Claude Code, with a disclosed plan and your explicit approval before every paid call.
AnyDesign
Turns screenshots, websites, and Figma files into structured, executable design specs that any AI or designer can rebuild from.
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.
Narrator AI Skill
Let your AI agent produce movie/short-drama narration videos from a single sentence: search footage, pick templates, BGM and voices, generate scripts, and compose the final video.
Web Asset Generator
Generate favicons, PWA app icons, and social sharing images from logos, text, or emojis — with matching HTML meta tags delivered automatically.
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.
Web Clone Methodology
A real-source-first website cloning methodology with executable recon scripts — stop copying AI-hallucinated code.
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.
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.
Nano Banana Pro Prompts Recommender
Tell your AI assistant what image you need and get the top 3 matches from 10,000+ curated Nano Banana Pro prompts — with sample images, usable with any text-to-image model.
Guizang Social Cards
Turn articles, screenshots, and videos into rendered social-card packages and motion cards.
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.