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
Decision gist · record as of 2025-12-25
Visual Designer helps you create cohesive color palettes with proper contrast and semantic meaning for consistent interfaces. 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.
Use it when
- Visual Designer covers font pairing rules that balance contrast with harmony.
- Visual Designer teaches spacing systems built on an 8-point grid, where all spacing increments (8px, 16px, 24px, 32px.
Verify before relying
Read SKILL.md below before installing (3 files). Open directory: indexed for reading, not audited.
Install
daffy0208/ai-dev-standards/visual-designer · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 3 files
skills/visual-designer/README.md
skills/visual-designer/SKILL.md
skills/visual-designer/manifest.yaml
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create a cohesive color palette with proper contrast and semantic meaning”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Paper Analyzer converts research papers into polished, long-form HTML articles through a structured six-round workflow. It integrates code repository discovery, mathematical formula rendering, and Mermaid diagrams while offering three distinct writing styles—storytelling, academic, and concise—each tailored to different audience needs and comprehension levels.
Frontend Design guides you through building distinctive, polished web interfaces that escape generic AI aesthetics. It combines design thinking—purpose, style direction, constraints, and differentiation—with practical guidance on typography, color, animation, layout, and visual details. Use it when building web components, pages, dashboards, or complete applications that demand both functional code and memorable design.
Learn to build websites that adapt seamlessly across devices using mobile-first principles, modern CSS techniques like flexbox and grid, and responsive image strategies. This skill covers breakpoint strategies, fluid layouts, media queries, and container-based design patterns to ensure consistent experiences from mobile to desktop.
UI Design System guides you through building production-ready design systems from the ground up. It covers the complete workflow: establishing primitive, semantic, and component token layers; architecting atomic to organism-level components; and implementing light/dark theming with responsive patterns. Built for Tailwind CSS v4 and CSS custom properties.
This skill extends core UX design principles into React-specific implementation, offering patterns for micro-interactions, loading states, optimistic UI, and keyboard navigation. It emphasizes accessibility through focus management, motion preferences, and semantic HTML, plus form handling with validation and error states.
Asset Manager streamlines design asset workflows through structured organization, automated file placement, and built-in optimization. It provides naming conventions for images, icons, and fonts alongside scripts for compressing assets and generating responsive variants across multiple formats.
More skills design-system-patterns (MIT) · Icon Design (unlicensed) · UX Designer (MIT) · Bencium Controlled Ux Designer (unlicensed) · Web Design (unlicensed) · Ui Design System (unlicensed)