KevinZai Design Context
Captures and persists the design state so every other Mega-Design skill produces consistent output. Run this once per project, refresh when brand evolves.
Context Capture Checklist
When invoked, gather these dimensions. Ask for what's missing, infer what you can from existing code.
1. Brand Identity
brand:
name: "" # Company/project name
tagline: "" # One-line value prop
personality: [] # e.g., [professional, playful, minimal]
industry: "" # Helps calibrate visual tone
competitors: [] # Visual positioning context
2. Color System
colors:
primary: "" # Main brand color (hex)
secondary: "" # Supporting color
accent: "" # Call-to-action / highlight
neutral:
50: "" # Lightest
100: ""
200: ""
300: ""
400: ""
500: "" # Mid
600: ""
700: ""
800: ""
900: "" # Darkest
950: ""
semantic:
success: ""
warning: ""
error: ""
info: ""
dark_mode: true/false # Does the brand support dark mode?
dark_mode_strategy: "" # "invert", "shift-hue", "separate-palette"
3. Typography
typography:
heading_font: "" # e.g., "Inter", "Cal Sans"
body_font: "" # e.g., "Inter", "system-ui"
mono_font: "" # e.g., "JetBrains Mono", "Fira Code"
base_size: "16px" # Root font size
scale_ratio: 1.25 # Type scale (1.125 minor second, 1.25 major third, 1.333 perfect fourth)
line_height: 1.5 # Body text line height
heading_weight: 700 # Default heading weight
font_source: "" # "google-fonts", "local", "fontsource", "adobe"
4. Spacing & Layout
layout:
max_width: "1280px" # Content max-width
grid: "12-column" # Grid system
spacing_unit: "4px" # Base spacing unit (multiplied: 4, 8, 12, 16, 24, 32, 48, 64)
border_radius: "8px" # Default border radius
container_padding: "24px" # Horizontal page padding
section_gap: "96px" # Vertical space between page sections
5. Animation Preferences
animation:
philosophy: "" # "minimal", "moderate", "expressive"
default_duration: "300ms" # Standard transition duration
default_easing: "" # "ease-out", "cubic-bezier(0.16, 1, 0.3, 1)"
entrance_style: "" # "fade-up", "fade-in", "slide-in", "scale-in"
hover_style: "" # "lift", "glow", "scale", "color-shift"
scroll_animations: true # Enable scroll-triggered animations
reduce_motion: true # Respect prefers-reduced-motion
library: "" # "framer-motion", "gsap", "css-only", "anime.js"
page_transitions: true # Animate between page navigations
6. Performance Budget
performance:
target_lcp: "2.5s" # Largest Contentful Paint target
target_fid: "100ms" # First Input Delay target
target_cls: "0.1" # Cumulative Layout Shift target
js_budget: "200KB" # Max JavaScript bundle for animations
animation_fps: 60 # Target framerate
webgl_allowed: true # Can we use WebGL/3D?
particle_limit: 500 # Max concurrent particles
intersection_observer: true # Use IO for lazy animation triggers
7. Design Inspiration
inspiration:
reference_sites: [] # URLs of sites with desired aesthetic
mood: [] # e.g., ["clean", "futuristic", "warm"]
avoid: [] # e.g., ["corporate", "clipart", "stock-photo"]
frameworks: [] # e.g., ["shadcn/ui", "radix", "tailwind"]
icon_set: "" # "lucide", "heroicons", "phosphor"
Auto-Detection
When a codebase exists, scan for context automatically:
- tailwind.config — extract colors, fonts, spacing, border-radius
- CSS variables — parse
--color-*,--font-*,--radius-* - package.json — detect framer-motion, gsap, three.js, anime.js
- globals.css — font imports, base styles
- next.config / vite.config — framework and build constraints
- existing components — infer design patterns from Button, Card, etc.
Output Format
After capture, produce a design-context.yaml summary and keep it available for all subsequent Mega-Design skill invocations. Reference it as the source of truth for:
- Color choices in
colorize - Font selections in
typeset - Animation durations in
animate,motion-design,framer-motion-patterns - Performance constraints in
optimize,particle-systems,webgl-shader - Layout values in
arrange,landing-page-builder
When to Re-Capture
- Brand refresh or rebrand
- New project with different visual identity
- Switching animation libraries
- Major performance budget change
- Adding dark mode support