Visual Style
Create, extract, and apply portable visual design systems
What You Can Do
You can create custom visual design systems from scratch by describing mood and references, extract design styles from existing websites or brand guides, and apply those styles consistently across multiple platforms and tools. This skill generates portable visual-style.md files that any AI tool can read and implement, eliminating the need to re-explain your design language for each new project.
Features
Example Output
Example 1: Creating a Visual Style
## Visual Style: Retro Gaming
- **Primary Colors**: #FF006E, #00D9FF
- **Typography**: Display: Arcade (bold), Body: Courier (regular)
- **Layout**: 8x8 grid, pixelated edges
- **Motion**: Snappy 200ms transitions, CRT flicker effect
Example 2: Extracted Style from Website
## Visual Style: Tech Startup Minimal
- **Primary**: #1E1E1E (dark), #00D4FF (accent)
- **Typography**: Display: Inter Bold 48px, Body: Inter Regular 16px
- **Layout**: 12-column grid, generous whitespace
- **Motion**: Smooth 400ms easing, fade-in on scroll
Example 3: Applied to HeyGen Video Generated video uses extracted style's color palette throughout slides, applies typography rules to text overlays, and implements motion timing for scene transitions.
What's Included
- visual-style.md SKILL.md instruction file:
- minimal.visual-style.md template (lightweight starter):
- full.visual-style.md template (comprehensive design system):
- Pre-built visual style gallery (Swiss, Saul Bass, Game Boy, and more):
- HTML swatch generator for color previewing:
Who It's For
- Brand strategists building reusable design systems for teams
- Video creators applying consistent visual branding across HeyGen videos
- UI/UX designers documenting and sharing design language
- Content creators establishing visual consistency across multiple platforms
- Product managers defining portable design specs for stakeholder alignment
Best For
- Extracting visual identity from competitor websites or brand guidelines
- Creating mood-driven design systems from reference images or vibes
- Applying consistent branding to multi-scene HeyGen videos
- Building design systems that work across Figma, HTML, and other tools
- Sharing portable style guides with distributed teams or AI tools
You might also like
You can diagnose why layouts break at specific breakpoints and receive precise CSS fixes to resolve them. The skill identifies root causes of overflow problems, flex/grid misalignment, and mobile usability failures, then provides responsive design patterns to prevent similar issues from recurring across your entire project.
by calesthio
You can systematically design reusable responsive grid systems, establish spacing scales and breakpoint strategies, and document component layout behaviors for seamless developer handoff. This skill generates technical layout specifications that reduce design-to-development friction and ensure accessibility compliance from the design phase, enabling teams to build consistent, scalable web interfaces across all devices.
by calesthio
You can generate professionally formatted SVG color palettes by providing a theme name, source URL, or specific hex codes. Claude researches color standards, extracts values from web sources, and organizes 4-7 swatches from dark to light with an anchor brand color at center. Each swatch includes click-to-copy hex codes and hover effects for easy reference.
by eryet
You can generate detailed interaction specifications for complex user flows and component behaviors that eliminate ambiguity in handoff. The skill produces structured documentation including state diagrams, transition tables, animation timing, keyboard navigation patterns, error handling workflows, and accessibility requirements—all formatted for both designers and developers to reference.
by calesthio
You can systematically evaluate your design system's health using structured frameworks that assess component consistency, design token usage, documentation completeness, and developer adoption. The skill generates prioritized gap analysis reports that quantify issues—like duplicate components, token sprawl, or implementation friction—and translates findings into executive-ready roadmaps with business cases for remediation. You'll move beyond subjective design assessments to data-backed improvement strategies.
by calesthio
You can generate customized interview frameworks that assess design ops candidates against specific competencies aligned with your team's maturity and challenges. The skill produces behavioral interview questions, technical scenario assessments, and scoring rubrics that help interview panels evaluate candidates objectively across process optimization, metrics thinking, tool knowledge, and organizational influence—moving beyond portfolio review to predict job-ready performance.
by calesthio
You can write clean, maintainable Tailwind CSS directly in React JSX using utility-first principles. This skill helps you compose responsive layouts, implement dark mode themes, extract reusable component patterns, convert existing CSS to Tailwind, and troubleshoot Tailwind configuration issues. It's optimized for dashboards, forms, cards, modals, and other typical application interfaces.
by calesthio
You can rapidly build responsive, production-ready UI designs using Tailwind's utility-first approach. Apply low-level utility classes directly to HTML elements to create custom designs without writing CSS, implement mobile-first responsive layouts, add dark mode and theme customization, and generate optimized CSS bundles through build-time processing that includes only the classes you actually use.
by calesthio