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'll conduct structured culture audits that go beyond surface-level observations to identify root causes of dysfunction in design teams. Using organizational psychology research, you can analyze team feedback patterns, map collaboration barriers across disciplines, and design targeted interventions that address psychological safety gaps, siloed workflows, and retention risks. Claude helps you transform culture diagnostics into measurable improvement plans tied to specific team performance outcomes.
by calesthio
Analyze raw usability testing data—transcripts, session notes, task completion rates, and participant feedback—to surface recurring patterns and user behaviors. Claude identifies the highest-impact issues, extracts testable insights about user mental models, and generates prioritized recommendations ranked by severity, frequency, and business impact. This cuts manual synthesis time from hours to minutes while maintaining analytical rigor.
by calesthio
You can produce complete, enforceable brand guidelines that transform your strategic brand direction into actionable documentation. Claude helps you structure visual standards (typography, color systems, imagery), verbal identity (tone, messaging, vocabulary), application guidelines across touchpoints, and accessibility requirements—all formatted for immediate stakeholder handoff and external partner compliance.
by camalus
You can systematically evaluate UX/UI design candidates across multiple disciplines—UX researchers, UI designers, product designers, design systems engineers, and coordinators—using role-specific competency frameworks. The skill converts vague impressions into defensible scoring systems that account for cross-functional collaboration capability, process maturity, and systems-thinking critical to design ops success. You'll compare candidates across seniority levels, document evaluation decisions for compliance, and build consistent hiring rubrics your entire design team can deploy.
by calesthio
This skill helps you craft error messages and notifications that prioritize clarity and actionability over cleverness. You'll generate empathetic microcopy for error states, in-app notifications, empty states, and edge cases—then test variations against different user personas to minimize cognitive load and maximize task completion rates. It bridges UX research insights with production-ready copy that reduces support tickets and builds user trust.
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 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 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