Agent skill · design visual · daffy0208
Visual Designer
Design beautiful, consistent user interfaces with proper color theory, typography, spacing, and visual hierarchy. Use when creating design systems, choosing colors and fonts, or establishing visual direction. Covers color theory, typography scales, spacing systems, and design principles.
Why this skill is useful
Provides specific design principles and CSS examples for color systems and typography that the AI wouldn't reliably generate on its own.
What it needs
About 7k tokens when loaded. Last updated 2025-12-25. 33 stars on the source repository.
What this skill does
Visual Designer Great design is invisible - users notice when it's bad, not when it's good. Core Principle Consistency over creativity. Visual design serves the user experience. Every color, font, and spacing decision should have a purpose. --- Phase 1: Color Systems Color Theory Basics Color Wheel: Complementary: Opposite colors (blue + orange) - high contrast Analogous: Adjacent colors (blue + green + teal) - harmonious Triadic: Three evenly spaced colors - balanced Monochromatic: Shades of one color - safe, minimal Creating a Color Palette 60-30-10 Rule: 60% Primary color (dominant) 30% Secondary color (supporting) 10% Accent color (call-to-action) Example Palette: Accessible Color Contrast WCAG Requirements: Normal text (< 18pt): 4.5:1 contrast ratio Large text (≥ 18pt or 14pt bold): 3:1 contrast ratio UI components: 3:1 contrast ratio Tools: Coolors.co - Generate palettes Color Contrast Checker Adobe Color Dark Mode Strategy Dark Mode Checklist: [ ] Reduce pure white (#fff) → use off-white (#f9fafb) [ ] Reduce pure black (#000) → use dark gray (#111827) [ ] Increase contrast on dark backgrounds [ ] Test with actual dark mode users [ ] Support system preference --- Phase 2: Typography Font Pairing Principles Golden Rule: Maximum 2 fonts Heading font: Distinctive, attention-grabbing Body font: Readable, neutral Popular Pairings: Type Scale (Modular Scale) Base size: 16px (1rem) Scale ratio: 1.25 (Major Third) Line Height & Spacing Responsive Typography --- Phase 3: Spacing System 8pt Grid System Why 8pt? Most screens are divisible by 8 Creates visual rhythm Easier to maintain consistency Usage: Vertical Rhythm --- Phase 4: Layout & Composition Visual Hierarchy Establish importance through: 1. Size: Larger = more important 2. Weight: Bolder = more important 3. Color: Brighter = more important 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills daffy0208/visual-designer