What problem does it solve?
This Skill eliminates the repetitive work of manually creating UI assets that don't align with your project's design system, and removes the need to re-explain brand guidelines, style preferences, and past design decisions for every new asset generation request.
Core Features & Use Cases
- Design-Aware Asset Generation: Creates production-ready UI assets (hero images, OG social cards, thumbnails, icons, illustrations, banners) that automatically match your project's color palette, typography, and brand identity using extracted design tokens from Pencil designs, CSS, or Tailwind configs.
- Persistent Design Memory: Stores every generation's prompt, style, colors, and user feedback in a NotebookLM knowledge base, so you can reuse proven styles across projects, query past design decisions, and maintain brand consistency without repeating context.
- Pencil Design Integration: Automatically inserts generated assets directly into active .pen design files, positioning them correctly and matching the existing design system's style and dimensions.
- Built-in UI/UX Best Practices: Applies WCAG accessibility rules, composition guidelines (rule of thirds, safe margins), and industry-specific style recommendations to ensure all assets are production-ready and platform-appropriate.
- Use Case Example: A product designer building a fintech app can generate a set of onboarding illustrations that match their existing brand blue palette, insert them directly into their Pencil prototype, and reuse the same illustration style for all future client projects by querying their design memory.
Quick Start
Use the imagegen skill to generate a hero image for your wellness app that matches your existing brand colors and insert it directly into your open Pencil design file.
