Produces accessible color palettes and CSS design-token implementations for brands and websites. Use when the task asks for "color palette", "brand colors", "color scheme", "WCAG contrast", "dark mode colors", "design tokens", or "CSS custom properties for colors". Covers color theory, WCAG 2.2 contrast compliance, dark mode, AI palette extraction, and color psychology.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
설치 방법 보기설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Use this skill when designing or reviewing color palettes, implementing them in code, or ensuring accessibility compliance.
The plugin provides visual analysis tools usable across agent contexts:
| Color Task | Tool Name Pattern |
|---|---|
| Extract palettes from images | analyze_image — query for dominant colors |
| Generate palette swatches | nv_oos_*_agent_generate_gemini_image_validated or bare |
| Web search for color trends | nv_oos_*_agent_web_search_validated or bare |
| Cross-site color sync | remote_wp_connection — push brand colors to spoke sites |
Key mcp-ai WP-CLI commands for design workflows. Run via terminal:
| Command | Use for |
|---|---|
wp mcp-ai health | Verify tool and provider availability |
wp mcp-ai provider | Check configured AI providers |
Trigger when ANY of the following is true:
Primary → Main brand color (60% usage)
Secondary → Complementary accent (30% usage)
Accent → CTAs, highlights (10% usage)
Neutral → Text, backgrounds, borders
Semantic → Success (green), Error (red), Warning (amber), Info (blue)
| Type | Structure | Example |
|---|---|---|
| Monochromatic | One hue, varying saturation/lightness | Spotify green ecosystem |
| Analogous | 2-3 adjacent hues on color wheel | Calm, cohesive brands (wellness, nature) |
| Complementary | Opposite hues (blue + orange) | High contrast, energetic (sports, entertainment) |
| Triadic | 3 evenly spaced hues | Vibrant, balanced (education, family) |
| Neutral + Pop | Grays + one bold accent | Modern, sophisticated (tech, luxury) |
| Level | Normal Text | Large Text (18px+ bold or 24px+) | UI Components |
|---|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | 3:1 |
Test contrast: https://webaim.org/resources/contrastchecker/
❌ #CCCCCC text on #FFFFFF — 1.6:1 (fail AA)
✅ #767676 text on #FFFFFF — 4.5:1 (pass AA)
❌ #999999 text on #FFFFFF — 2.85:1 (fail AA large text threshold)
✅ #595959 text on #FFFFFF — 7:1 (pass AAA)
:root {
/* ── Brand palette ── */
--color-primary: #2563EB;
--color-primary-light: #3B82F6;
--color-primary-dark: #1D4ED8;
--color-secondary: #7C3AED;
--color-accent: #F59E0B;
/* ── Neutrals ── */
--color-neutral-50: #FAFAFA;
--color-neutral-100: #F5F5F5;
--color-neutral-200: #E5E5E5;
--color-neutral-300: #D4D4D4;
--color-neutral-400: #A3A3A3;
--color-neutral-500: #737373;
--color-neutral-600: #525252;
--color-neutral-700: #404040;
--color-neutral-800: #262626;
--color-neutral-900: #171717;
/* ── Semantic ── */
--color-success: #16A34A;
--color-warning: #D97706;
--color-error: #DC2626;
--color-info: #2563EB;
/* ── Applied tokens ── */
--color-text: var(--color-neutral-900);
--color-text-muted: var(--color-neutral-500);
--color-bg: #FFFFFF;
--color-bg-muted: var(--color-neutral-50);
--color-border: var(--color-neutral-200);
}
@media (prefers-color-scheme: dark) {
:root {
--color-text: var(--color-neutral-100);
--color-text-muted: var(--color-neutral-400);
--color-bg: var(--color-neutral-900);
--color-bg-muted: var(--color-neutral-800);
--color-border: var(--color-neutral-700);
}
}
/* Manual toggle */
[data-theme="dark"] {
--color-text: var(--color-neutral-100);
--color-bg: var(--color-neutral-900);
/* ... */
}
Use analyze_image (MCP) to identify dominant colors, color mood, and palette composition from any image:
analyze_image with prompt: "Extract the dominant color palette from this
image. List hex values for primary, secondary, accent, and neutral colors."
Use the Gemini image tool in your tool list (agent-prefixed or bare) to create color palette swatches and mood boards:
prompt: "A warm, earthy brand palette for an organic coffee company —
rich browns, cream, sage green accent, modern and minimal.
Display as organized color swatches with hex labels."
| Color | Associations | Best For |
|---|---|---|
| Blue | Trust, stability, professionalism | Finance, tech, healthcare |
| Green | Growth, nature, health | Wellness, environment, education |
| Red | Energy, urgency, passion | Food, entertainment, sales |
| Purple | Luxury, creativity, wisdom | Beauty, spirituality, premium |
| Orange | Friendly, confident, warm | E-commerce CTAs, youth brands |
| Yellow | Optimism, clarity, warmth | Children, creativity, warnings |
| Black | Sophistication, power, elegance | Luxury, fashion, tech |
| White | Clean, minimal, pure | Healthcare, minimalism, modern |
hsl(var(--hue), 80%, 50%) makes theming trivial.analyze_image (MCP) to pull color schemes from reference images./* WRONG — hardcoded colors everywhere */
.button { background: #2563EB; color: white; }
.card { border: 1px solid #E5E5E5; background: white; }
/* RIGHT — design tokens */
.button { background: var(--color-primary); color: var(--color-bg); }
.card { border: 1px solid var(--color-border); background: var(--color-bg); }
/* WRONG — low contrast muted text */
.caption { color: #CCCCCC; } /* 1.6:1 on white — fails AA */
/* RIGHT — accessible muted text */
.caption { color: var(--color-text-muted); } /* from token system */
design-brand-kit.design-typography.design-document-generation.design-image-generation.wp-plugin-architecture.design-social-content.design-brand-kit to define the full brand identity including colors.design-typography to pair fonts with the color palette.design-image-generation to create visuals using the brand palette — check your tool list for the Gemini image tool.wp-plugin-options-storage to store color tokens in WordPress settings.mcp-ai-wpoos-plugin for remote_wp_connection — push color palettes from Hub to spoke sites.아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Control a headless browser to navigate URLs, click elements, fill forms, extract content from JavaScript-rendered pages, take screenshots, and automate end-to-end web workflows.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Review code for quality, simplicity, and maintainability. Identifies unnecessary abstractions, duplicated logic, oversized functions, missing error handling, and naming issues — then fixes them automatically before presenting the result.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
WooCommerce store operations through NV oOS Pro — product research, catalog cross-referencing, inventory lookups, and Shopify or Flowhub comparisons where integrations are configured.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.