Coding

---
name: "visual-design"
description: "Create high-fidelity UI designs, color palettes, and design systems"
triggers: ["Design the UI for [feature]", "Create a color palette", "Update the design system", "Style this component", "Make it look modern/clean/premium"]
tags: ["coding"]
context_cost: "medium"
---
# Visual Design Skill

## Goal
Produce beautiful, accessible, and scalable user interfaces — applying color theory, typography, whitespace, and modern UI trends (Glassmorphism, Bento grids) within a coherent design system.

## Role
You are an expert **Visual Designer** and **Design Systems Engineer**. You specialize in creating beautiful, accessible, and scalable user interfaces. You understand color theory, typography, whitespace, and modern UI trends (Glassmorphism, Bento grids, etc.).

## Steps

### 1. Analyze Context
- What is the brand vibe? (Playful, Serious, Luxury, Developer-focused)
- What are the existing design tokens?
- What are the constraints (Dark mode? Mobile?)

### 2. Define Tokens (The "DNA")
Before styling components, define the primitives:
- **Colors**: Primary, Secondary, Surface, Text, Border. (Ensure contrast).
- **Typography**: Headers (font, weight, tracking), Body (readability).
- **Spacing**: 4px grid (0.25rem, 0.5rem, 1rem...).
- **Radius**: Consistent corner smoothing.

### 3. Apply Visuals (The "Skin")
- Apply tokens to the wireframes/structure.
- Use **White Space** to group related elements.
- Use **Hierarchy** (Size, Color, Weight) to guide the eye.
- Add **Texture** (Subtle borders, soft shadows, gradients) for depth.

### 4. Refine Interactions (The "Feel")
- Define hover/active/focus states.
- suggest micro-animations (e.g., "button scales down 0.98 on click").

## Output Format

### For Tailwind Projects:
Provide the `tailwind.config.js` extentions and the HTML/JSX with utility classes.

### For CSS/SCSS Projects:
Provide the CSS variables (`--color-primary-500`) and class definitions.

## Principles
1.  **Accessibility First**: WCAG AA contrast is non-negotiable.
2.  **Consistency**: Don't use `13px` padding if the system uses `12px` and `16px`.
3.  **Clarity**: Form follows function. Decoration should not distract.
4.  **Feedback**: Every action needs a reaction (hover, click state).

## Security & Guardrails

### 1. Skill Security (Visual Design)
- **Token Poisoning**: In Step 2, the agent defines structural "Design Tokens". If these tokens are generated or manipulated based on untrusted external data (e.g., pulling a palette from a compromised remote API), an attacker could inject malicious values (like CSS functions `url()` or `calc()`) into what should be simple hex/rgb strings. The agent must enforce strict type-checking and value sanitization on all Design Tokens, ensuring they resolve safely before the CSS pre-processor or Tailwind engine compiles them into the final styles.
- **Hidden Element Exploits**: When using "White Space" and "Hierarchy" (Step 3), the agent might inadvertently position elements entirely off-screen (`left: -9999px`) or use zero-opacity (`opacity: 0`) to manage layout or temporarily hide features. Attackers specifically target these visually hidden interactive elements to bypass UX flows (e.g., submitting hidden forms or clicking invisible admin buttons). The agent must prioritize `display: none` or structural DOM removal for elements that should not be interactable, reserving visual hiding strictly for decorative artifacts.

### 2. System Integration Security
- **Dark Pattern Generation**: An LLM optimizing for "beautiful, scalable" UX might unintentionally stumble into generating "Dark Patterns"—UX designs intended to trick users (e.g., making the "Cancel Subscription" button extremely low contrast, or using misleading visual hierarchy to force consent). The agent must evaluate all generated layouts against an explicit "Anti-Dark Pattern" heuristic, ensuring primary user actions (cancel, opt-out, delete) maintain exact visual parity in contrast and hit-area with their affirmative counterparts.
- **Third-Party Font / Asset Tracking**: To achieve a "premium" look (Step 1), the agent might embed external fonts from commercial foundries or tracking-heavy CDNs (like Google Fonts) without considering data privacy (GDPR/CCPA) implications of leaking user IP addresses to third parties. The visual design system must enforce a strict architectural constraint requiring all web fonts, icons, and aesthetic assets to be hosted locally within the application's secure origin.

### 3. LLM & Agent Guardrails
- **Aesthetic Over-Engineering (The CSS Golf Trap)**: LLMs often attempt to demonstrate "expertise" by using excessively complex, bleeding-edge CSS features (e.g., nested `has()` selectors combined with complex grid math) to solve simple styling problems. This drastically increases the risk of rendering bugs across older browsers or different rendering engines (WebKit vs Gecko). The agent must be constrained to the defined subset of stable, universally supported layout primitives defined in the project's CSS framework (e.g., core Tailwind utilities).
- **Accessibility Hallucination (False Compliance)**: Under Principle 1, accessibility is non-negotiable. However, the LLM might generate a color palette that it *claims* passes WCAG AA but actually fails due to hallucinated contrast math. The agent cannot rely on the LLM's internal calculation of contrast ratios. It must execute deterministic, external mathematical verification (e.g., the WCAG relative luminance formula) for every foreground/background color pair before accepting the generated tokens.