Visual Designer
Visual Designer guides you through establishing design systems grounded in color theory, type scales, and spacing principles. It covers palette creation using the 60-30-10 rule, WCAG contrast requirements, font pairing strategies, and responsive layout techniques to ensure every visual decision serves your users.
Visual Designer helps you create cohesive color palettes with proper contrast and semantic meaning for consistent interfaces.
AI-generated summary based on this skill's SKILL.md
Install
daffy0208/ai-dev-standards/visual-designer · repository language: TypeScript
git clone https://github.com/daffy0208/ai-dev-standards
cp -r ai-dev-standards/skills/visual-designer ~/.claude/skills/visual-designernpx skillfed install daffy0208/ai-dev-standards/visual-designerFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create a color palette for my website?
Visual Designer helps you build cohesive palettes using the 60-30-10 rule: 60% dominant color, 30% secondary, 10% accent. Start by selecting a primary color aligned with your brand, then use color theory—complementary, analogous, or triadic schemes—to derive supporting colors. Ensure all combinations meet WCAG contrast requirements for accessibility. Visual Designer guides you through semantic meaning (e.g., red for alerts, green for success) so colors communicate intent consistently across your interface.
What are the best fonts for headings and body text?
Visual Designer covers font pairing rules that balance contrast with harmony. Pair a distinctive serif or sans-serif heading font with a highly legible body typeface—for example, a geometric sans-serif heading with a humanist sans-serif body. Use a modular type scale (commonly 1.25 ratio) to establish hierarchy: each heading level increases proportionally, creating visual rhythm. Visual Designer ensures your typography scale supports responsive design, scaling gracefully across mobile, tablet, and desktop breakpoints.
How does an 8pt grid system spacing design work?
Visual Designer teaches spacing systems built on an 8-point grid, where all spacing increments (8px, 16px, 24px, 32px, etc.) align to multiples of 8. This creates consistent rhythm and simplifies responsive scaling. Apply the grid to margins, padding, and gaps between components. Visual Designer shows how grid-based spacing ensures alignment, reduces decision fatigue, and makes layouts feel intentional. Pair your grid with breakpoint rules for tablets and phones to maintain alignment across all screen sizes.
What WCAG color contrast requirements must I follow?
Visual Designer emphasizes WCAG standards: aim for at least 4.5:1 contrast ratio for normal text and 3:1 for large text (18pt+) to meet AA compliance. AAA compliance requires 7:1 and 4.5:1 respectively. Visual Designer guides you through checking contrast using accessible color contrast checkers and designing dark mode strategies that maintain these ratios. Semantic color choices (alerts, success states) must also pass contrast tests to ensure users with color blindness or low vision can distinguish meaning.
How do I apply visual hierarchy and design principles?
Visual Designer teaches hierarchy through size, color, spacing, and weight. Make primary actions larger and bolder; secondary actions smaller and muted. Use whitespace (negative space) to group related elements and guide the eye. Apply shadow elevation levels to suggest depth—cards and modals rise above the baseline. Visual Designer covers button and card component styles that reinforce hierarchy, ensuring users intuitively understand what to interact with first. Consistent spacing and alignment strengthen the visual structure.
How do I design consistent interfaces across devices?
Visual Designer ensures consistency through a design system: establish your color palette, type scale, spacing grid, and component library once, then apply them uniformly. Define responsive breakpoints (mobile, tablet, desktop) and how components adapt—typography scales down, spacing compresses, layouts stack. Support dark mode by deriving a complementary palette that maintains contrast and semantic meaning. Visual Designer guides you through documenting these rules so your entire team builds interfaces that feel cohesive, whether users view them on phones, tablets, or desktops.
SKILL.md
rendered from the published skill — quoted content, verbatim
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:
```css / Primary (60%) - Backgrounds, large areas / --color-primary-50:
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 3 files
skills/visual-designer/README.md
skills/visual-designer/SKILL.md
skills/visual-designer/manifest.yaml