What it does
Design System Assets is a Claude Code skill that generates visual assets (hero images, icons, illustrations, OG cards) that match your project’s design system instead of looking like generic AI output. It reads your design system first, routes each asset type to the appropriate generator, injects brand directives into every prompt, and reviews output against your brand before placing it.
How it works
The skill extracts brand tokens from your design system (DESIGN.md, Tailwind config, or CSS variables), then intelligently routes asset requests: icons go to Lucide SVG libraries with brand-color theming, photos flow through OpenAI or Gemini with brand-aware prompts, and all raster output gets vision-model review against your brand guidelines. You bring your own API keys—no hosted service, no rate limits.
Use cases
- Multi-page sites where all hero images need visual consistency
- Design system documentation requiring on-brand illustration sets
- Quick prototypes where placeholder assets undermine credibility
- Social sharing with OG cards that reflect brand colors and tone
- Icon systems that stay crisp at any size
Who benefits
Product designers building sites or apps want polished assets without manual design work. Design system maintainers need visual assets that actually follow the system. Developers deploying projects appreciate SVG icons that theme automatically and photos that don’t clash with the brand.