anchi-toolkit 1.0.0

package/.cursor/skills/frontend-design/references/asset-generation.md

@@ -0,0 +1,337 @@
+# Asset Generation Workflow
+
+Complete workflow for generating design-aligned visual assets using `ai-multimodal` skill.
+
+## Generation Workflow
+
+### Step 1: Define Design Context
+
+Before generating, extract from the design brief:
+- **Aesthetic direction**: Minimalist? Maximalist? Brutalist? Organic?
+- **Color palette**: Primary colors, accent colors, mood
+- **Typography character**: Modern sans-serif? Elegant serif? Bold display?
+- **Visual tone**: Professional? Playful? Luxury? Raw?
+- **User context**: Who sees this? What problem does it solve?
+
+### Step 2: Craft Contextual Prompts
+
+Translate design thinking into generation prompts.
+
+**Generic (❌ Avoid)**:
+```
+"Modern website hero image"
+```
+
+**Design-Driven (✓ Use)**:
+```
+"Brutalist architectural photograph, stark concrete textures,
+dramatic shadows, high contrast black and white, raw unpolished
+surfaces, geometric shapes, monumental scale, inspired by
+1960s Bauhaus, 16:9 aspect ratio"
+```
+
+**Prompt Components**:
+1. **Style/Movement**: "Neo-brutalism", "Art Deco", "Organic modernism"
+2. **Visual Elements**: Textures, shapes, composition style
+3. **Color Direction**: "Muted earth tones", "Vibrant neon accents", "Monochromatic"
+4. **Mood/Atmosphere**: "Serene", "Energetic", "Mysterious"
+5. **Technical Specs**: Aspect ratio, composition focus
+6. **References**: "Inspired by [artist/movement]"
+
+### Step 3: Generate with Appropriate Model
+
+Use `ai-multimodal` skill's image generation capabilities:
+
+```bash
+# Standard quality (most cases)
+python scripts/gemini_batch_process.py \
+  --task generate \
+  --prompt "[your design-driven prompt]" \
+  --output docs/assets/hero-image \
+  --model imagen-4.0-generate-001 \
+  --aspect-ratio 16:9
+
+# Ultra quality (production hero images, marketing)
+python scripts/gemini_batch_process.py \
+  --task generate \
+  --prompt "[your design-driven prompt]" \
+  --output docs/assets/hero-ultra \
+  --model imagen-4.0-ultra-generate-001 \
+  --size 2K
+
+# Fast iteration (exploring concepts)
+python scripts/gemini_batch_process.py \
+  --task generate \
+  --prompt "[your design-driven prompt]" \
+  --output docs/assets/concept \
+  --model imagen-4.0-fast-generate-001
+```
+
+**Model Selection**:
+- **imagen-4.0-generate-001**: Default choice, balanced quality/speed
+- **imagen-4.0-ultra-generate-001**: Final production assets, marketing materials
+- **imagen-4.0-fast-generate-001**: Rapid prototyping, multiple variations
+
+**Aspect Ratios**:
+- **16:9**: Hero sections, wide banners
+- **9:16**: Mobile-first, vertical content
+- **1:1**: Square cards, social media
+- **4:3**: Classic layouts, presentations
+- **3:4**: Portrait orientations, mobile screens
+
+### Step 4: Evaluate Against Design Standards
+
+Use `ai-multimodal` to analyze the generated asset (see `visual-analysis.md` for complete workflow):
+
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/assets/hero-image.png \
+  --task analyze \
+  --prompt "Evaluate this image for:
+1. Visual coherence with [aesthetic direction]
+2. Color harmony and contrast
+3. Composition and balance
+4. Suitability for overlaying text
+5. Professional quality (rate 1-10)
+6. Specific weaknesses or improvements needed" \
+  --output docs/assets/hero-evaluation.md \
+  --model gemini-2.5-flash
+```
+
+### Step 5: Iterate or Integrate
+
+**If evaluation score < 7/10 or doesn't meet standards**:
+1. Identify specific issues (color, composition, mood, technical)
+2. Refine prompt with improvements
+3. Regenerate with adjusted parameters
+4. Consider using `media-processing` skill for post-generation adjustments
+
+**If meets standards**:
+1. Optimize for web (compress, format conversion)
+2. Create responsive variants if needed
+3. Document asset usage guidelines
+4. Integrate into frontend implementation
+
+## Design Pattern Examples
+
+### Pattern 1: Minimalist Background Texture
+
+**Design Context**: Clean, refined interface with generous white space
+
+**Prompt Strategy**:
+```
+"Subtle paper texture, off-white color (#F8F8F8), barely visible
+grain pattern, high-end stationery feel, minimal contrast,
+professional and clean, 1:1 aspect ratio for tiling"
+```
+
+**Use Case**: Background for minimalist product pages, portfolio sites
+
+### Pattern 2: Maximalist Hero Section
+
+**Design Context**: Bold, energetic landing page with vibrant colors
+
+**Prompt Strategy**:
+```
+"Explosive color gradients, neon pink to electric blue,
+holographic reflections, dynamic diagonal composition,
+retrofuturistic aesthetic, vaporwave influence, high energy,
+layered transparency effects, 16:9 cinematic"
+```
+
+**Use Case**: Hero section for creative agencies, entertainment platforms
+
+### Pattern 3: Brutalist Geometric Pattern
+
+**Design Context**: Raw, bold interface with strong typography
+
+**Prompt Strategy**:
+```
+"Monochromatic geometric pattern, overlapping rectangles,
+stark black and white, high contrast, Swiss design influence,
+grid-based composition, architectural precision, repeatable
+pattern for backgrounds"
+```
+
+**Use Case**: Background pattern for design studios, architecture firms
+
+### Pattern 4: Organic Natural Elements
+
+**Design Context**: Wellness brand, calming user experience
+
+**Prompt Strategy**:
+```
+"Soft botanical watercolor, sage green and cream tones,
+gentle leaf shadows, natural light quality, serene atmosphere,
+minimal detail for text overlay, 3:4 portrait orientation"
+```
+
+**Use Case**: Hero section for wellness brands, eco-friendly products
+
+### Pattern 5: Retro-Futuristic
+
+**Design Context**: Tech product with nostalgic twist
+
+**Prompt Strategy**:
+```
+"80s computer graphics aesthetic, wireframe grids, cyan and magenta
+gradients, digital sunrise, Tron-inspired, geometric precision,
+nostalgic future vision, 16:9 widescreen"
+```
+
+**Use Case**: SaaS landing pages, tech conferences, gaming platforms
+
+### Pattern 6: Editorial Magazine Style
+
+**Design Context**: Content-heavy site with strong visual hierarchy
+
+**Prompt Strategy**:
+```
+"High-contrast editorial photography, dramatic side lighting,
+stark shadows, black and white, fashion magazine quality,
+strong vertical composition, 3:4 portrait for text layout"
+```
+
+**Use Case**: Blog headers, news sites, content platforms
+
+## Prompt Engineering Best Practices
+
+### 1. Be Specific About Style
+❌ "Modern design"
+✓ "Bauhaus-inspired geometric abstraction with primary colors"
+
+### 2. Define Color Precisely
+❌ "Colorful"
+✓ "Vibrant sunset palette: coral (#FF6B6B), amber (#FFB84D), violet (#A66FF0)"
+
+### 3. Specify Composition
+❌ "Nice layout"
+✓ "Rule of thirds composition, subject left-aligned, negative space right for text overlay"
+
+### 4. Reference Movements/Artists
+❌ "Artistic"
+✓ "Inspired by Bauhaus geometric abstraction and Swiss International Style"
+
+### 5. Technical Requirements First
+Always include: aspect ratio, resolution needs, intended use case
+
+### 6. Iterate Strategically
+- First generation: Broad aesthetic exploration
+- Second generation: Refine color and composition
+- Third generation: Fine-tune details and mood
+
+## Common Pitfalls to Avoid
+
+### ❌ Generic Stock Photo Aesthetics
+Don't prompt: "Professional business team working together"
+Instead: Design-specific, contextual imagery that serves the interface
+
+### ❌ Overcomplex Generated Images
+Generated assets that compete with UI elements create visual chaos
+Keep backgrounds subtle enough for text/button overlay
+
+### ❌ Inconsistent Visual Language
+Each generated asset should feel part of the same design system
+Maintain color palette, visual style, mood consistency
+
+### ❌ Ignoring Integration Context
+Assets aren't standalone—consider how they work with:
+- Typography overlays
+- Interactive elements (buttons, forms)
+- Navigation and UI chrome
+- Responsive behavior across devices
+
+## Responsive Asset Strategy
+
+### Desktop-First Approach
+1. Generate primary asset at 16:9 (desktop hero)
+2. Generate mobile variant at 9:16 with same prompt
+3. Ensure focal point works in both orientations
+
+### Mobile-First Approach
+1. Generate primary asset at 9:16 (mobile hero)
+2. Generate desktop variant at 16:9 with same prompt
+3. Test that composition scales effectively
+
+### Variant Generation
+```bash
+# Desktop (16:9)
+python scripts/gemini_batch_process.py \
+  --task generate \
+  --prompt "[prompt]" \
+  --output docs/assets/hero-desktop \
+  --model imagen-4.0-generate-001 \
+  --aspect-ratio 16:9
+
+# Mobile (9:16)
+python scripts/gemini_batch_process.py \
+  --task generate \
+  --prompt "[same prompt]" \
+  --output docs/assets/hero-mobile \
+  --model imagen-4.0-generate-001 \
+  --aspect-ratio 9:16
+
+# Square (1:1)
+python scripts/gemini_batch_process.py \
+  --task generate \
+  --prompt "[same prompt]" \
+  --output docs/assets/hero-square \
+  --model imagen-4.0-generate-001 \
+  --aspect-ratio 1:1
+```
+
+## Model Cost Optimization
+
+**Imagen 4 Pricing** (as of 2024):
+- Standard: ~$0.04 per image
+- Ultra: ~$0.08 per image
+- Fast: ~$0.02 per image
+
+**Optimization Strategy**:
+1. Use Fast model for exploration (3-5 variations)
+2. Select best direction, generate with Standard model
+3. Use Ultra only for final production assets
+4. Batch generate variations in single session
+
+## Complete Example Workflow
+
+```bash
+# 1. Fast exploration (3 variations)
+python scripts/gemini_batch_process.py \
+  --task generate \
+  --prompt "Minimalist mountain landscape, muted blue-gray tones,
+  fog layers, serene morning atmosphere, clean for text overlay, 16:9" \
+  --output docs/assets/concept-1 \
+  --model imagen-4.0-fast-generate-001 \
+  --aspect-ratio 16:9
+
+# 2. Analyze best variation
+python scripts/gemini_batch_process.py \
+  --files docs/assets/concept-1.png \
+  --task analyze \
+  --prompt "Rate 1-10 for aesthetic quality, color harmony, text overlay suitability" \
+  --output docs/assets/analysis-1.md \
+  --model gemini-2.5-flash
+
+# 3. If score ≥ 7/10, generate production version
+python scripts/gemini_batch_process.py \
+  --task generate \
+  --prompt "[refined prompt based on analysis]" \
+  --output docs/assets/hero-final \
+  --model imagen-4.0-generate-001 \
+  --aspect-ratio 16:9
+
+# 4. Generate mobile variant
+python scripts/gemini_batch_process.py \
+  --task generate \
+  --prompt "[same refined prompt]" \
+  --output docs/assets/hero-mobile \
+  --model imagen-4.0-generate-001 \
+  --aspect-ratio 9:16
+```
+
+## Next Steps
+
+- **Verify quality**: See `visual-analysis.md` for comprehensive analysis workflow
+- **Optimize assets**: See `technical-guide.md` for file optimization and integration
+- **Extract inspiration**: See `design-extraction.md` to learn from existing designs

package/.cursor/skills/frontend-design/references/design-extraction-overview.md

@@ -0,0 +1,71 @@
+# Extract Design Guidelines from Existing Assets
+
+Reverse-engineer design principles from existing images or videos to establish design guidelines.
+
+## Purpose
+
+- Analyze competitor designs to understand their approach
+- Extract design systems from inspiration screenshots
+- Learn from high-quality design examples
+- Create documented guidelines based on visual analysis
+- Establish consistent aesthetic direction from references
+
+## Use Cases
+
+- Analyzing competitor websites or apps
+- Learning from inspiration galleries (Dribbble, Awwwards, Mobbin)
+- Extracting design systems from brand materials
+- Reverse-engineering successful interfaces
+- Creating design documentation from visual references
+
+## Quick Workflows
+
+### Single Image Analysis
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/inspiration/reference-design.png \
+  --task analyze \
+  --prompt "[see extraction-prompts.md for detailed prompt]" \
+  --output docs/design-guidelines/extracted-design-system.md \
+  --model gemini-2.5-flash
+```
+
+### Multi-Screen System Extraction
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/inspiration/home.png docs/inspiration/about.png \
+  --task analyze \
+  --prompt "[see extraction-prompts.md for multi-screen prompt]" \
+  --output docs/design-guidelines/complete-design-system.md \
+  --model gemini-2.5-flash
+```
+
+### Video Motion Analysis
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/inspiration/interaction-demo.mp4 \
+  --task analyze \
+  --prompt "[see extraction-prompts.md for motion prompt]" \
+  --output docs/design-guidelines/motion-system.md \
+  --model gemini-2.5-flash
+```
+
+### Competitive Analysis
+```bash
+python scripts/gemini_batch_process.py \
+  --files competitor-a.png competitor-b.png competitor-c.png \
+  --task analyze \
+  --prompt "[see extraction-prompts.md for competitive prompt]" \
+  --output docs/design-guidelines/competitive-analysis.md \
+  --model gemini-2.5-flash
+```
+
+## Detailed References
+
+- `extraction-prompts.md` - All extraction prompt templates
+- `extraction-best-practices.md` - Capture quality, analysis tips
+- `extraction-output-templates.md` - Documentation formats
+
+## Integration
+
+After extraction, use guidelines with `asset-generation.md` for generating design-aligned visual assets.

package/.cursor/skills/frontend-design/references/extraction-best-practices.md

@@ -0,0 +1,141 @@
+# Extraction Best Practices
+
+Guidelines for capturing and analyzing design references effectively.
+
+## Capture Quality Guidelines
+
+### Screenshot Requirements
+- High-resolution (minimum 1920px wide for desktop)
+- Accurate color reproduction (disable browser extensions that alter colors)
+- Actual viewport size, not full-page scrolls
+- Device-specific resolutions (desktop 1920x1080, mobile 390x844)
+- Multiple states: default, hover, active, responsive breakpoints
+
+### Multiple Examples
+- Analyze 3-5 screens minimum for pattern recognition
+- Include different page types (home, product, about, contact)
+- Single screenshots miss patterns
+- Capture from same site to identify consistency
+
+## Analysis Best Practices
+
+### 1. Demand Specifics
+❌ Accept: "Uses blue and gray colors"
+✓ Demand: "Primary: #1E40AF, Secondary: #6B7280, Accent: #F59E0B"
+
+❌ Accept: "Modern sans-serif font"
+✓ Demand: "Inter, weight 600, 48px for h1, tracking -0.02em"
+
+### 2. Document Rationale
+Understand *why* design decisions work, not just *what* they are:
+- Why does this color palette create trust?
+- Why does this spacing scale improve readability?
+- Why does this typography hierarchy guide user attention?
+
+### 3. Create Actionable Guidelines
+Output should be directly implementable in code:
+
+```css
+/* Immediately usable CSS from extraction */
+:root {
+  --font-display: 'Bebas Neue', sans-serif;
+  --font-body: 'Inter', sans-serif;
+
+  --color-primary-600: #1E40AF;
+  --color-accent-500: #F59E0B;
+
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+
+  --radius-sm: 4px;
+  --radius-md: 8px;
+
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
+}
+```
+
+### 4. Cross-Reference
+- Validate font predictions against Google Fonts library
+- Use font identification tools (WhatFont, Font Ninja) for accuracy
+- Manually verify extracted colors with eyedropper tools
+
+### 5. Iterate Analysis
+First pass may miss subtleties:
+- Run initial comprehensive analysis
+- Review output, identify gaps
+- Run focused follow-up queries for specific elements
+
+## Advanced Techniques
+
+### Design System Mining
+Extract complete design system from single brand (10+ screens):
+
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/inspiration/brand/*.png \
+  --task analyze \
+  --prompt "Extract complete, production-ready design system:
+- All color tokens (20+ colors)
+- All typography specs (sizes, weights, line-heights)
+- All spacing tokens
+- All component variants
+- All animation timings
+Output as CSS variables ready for implementation." \
+  --output docs/design-guidelines/brand-design-system.md \
+  --model gemini-2.5-flash
+```
+
+### Trend Analysis
+Analyze multiple top designs to identify current trends:
+
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/inspiration/awwwards-*.png \
+  --task analyze \
+  --prompt "Trend analysis across 10 award-winning designs:
+1. Dominant aesthetic movements
+2. Common color strategies
+3. Typography trends
+4. Layout innovations
+5. Animation patterns
+Identify what's trending in 2024 web design." \
+  --output docs/design-guidelines/trend-analysis.md \
+  --model gemini-2.5-flash
+```
+
+### Historical Evolution
+Track design evolution of single brand over time:
+
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/inspiration/brand-2020.png docs/inspiration/brand-2024.png \
+  --task analyze \
+  --prompt "Compare 2020 vs 2024 design evolution:
+1. What changed and why
+2. What remained consistent (brand identity)
+3. How trends influenced changes
+4. Lessons for our design evolution" \
+  --output docs/design-guidelines/evolution-analysis.md \
+  --model gemini-2.5-flash
+```
+
+## Common Pitfalls
+
+### ❌ Surface-Level Analysis
+"Uses blue colors and sans-serif fonts"
+**Fix**: Demand specifics—hex codes, font names, size values
+
+### ❌ Missing Context
+Extracting design without understanding target audience or purpose
+**Fix**: Research brand context before analysis
+
+### ❌ Blind Copying
+Extracting and applying design 1:1 to your project
+**Fix**: Extract principles, adapt to your unique context
+
+### ❌ Single Source
+Learning from one example only
+**Fix**: Analyze 3-5 examples to identify patterns vs. anomalies

package/.cursor/skills/frontend-design/references/extraction-output-templates.md

@@ -0,0 +1,162 @@
+# Extraction Output Templates
+
+Documentation format templates for extracted design guidelines.
+
+## Template 1: Complete Design System
+
+```markdown
+# [Project/Competitor] Design System
+
+## Aesthetic Direction
+- **Style**: Neo-brutalism with organic elements
+- **Mood**: Bold, confident, approachable
+- **Differentiation**: High contrast typography with soft color accents
+
+## Typography
+### Display Font
+- Family: Archivo Black (Google Fonts)
+- Sizes: h1: 72px, h2: 48px, h3: 36px
+- Weights: 400 (regular)
+- Line Height: 1.1
+- Letter Spacing: -0.02em
+
+### Body Font
+- Family: Inter (Google Fonts)
+- Sizes: body: 16px, small: 14px
+- Weights: 400, 500, 600
+- Line Height: 1.6
+- Letter Spacing: 0
+
+## Color Palette
+\```css
+:root {
+  /* Primary Colors */
+  --color-primary-900: #0A1628;
+  --color-primary-600: #1E40AF;
+  --color-primary-400: #60A5FA;
+
+  /* Accent Colors */
+  --color-accent-500: #F59E0B;
+  --color-accent-300: #FCD34D;
+
+  /* Neutral Colors */
+  --color-neutral-900: #111827;
+  --color-neutral-700: #374151;
+  --color-neutral-500: #6B7280;
+  --color-neutral-300: #D1D5DB;
+  --color-neutral-100: #F3F4F6;
+
+  /* Background */
+  --color-bg-primary: #FFFFFF;
+  --color-bg-secondary: #F9FAFB;
+}
+\```
+
+## Spacing System
+- Base: 4px
+- Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96px
+- Usage: Consistent 8px rhythm for most components
+
+## Component Specifications
+
+### Button (Primary)
+\```css
+.button-primary {
+  background: var(--color-primary-600);
+  color: white;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 600;
+  transition: background 200ms ease-out;
+}
+.button-primary:hover {
+  background: var(--color-primary-900);
+}
+\```
+
+### Card
+\```css
+.card {
+  background: white;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+  transition: box-shadow 200ms ease-out;
+}
+.card:hover {
+  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
+}
+\```
+
+## Motion Guidelines
+- Transition timing: 200ms for micro-interactions, 400ms for page transitions
+- Easing: ease-out for entrances, ease-in for exits
+- Stagger delay: 50ms between sequential elements
+```
+
+## Template 2: Competitive Analysis
+
+```markdown
+# Competitive Design Analysis
+
+## Competitors Analyzed
+1. Competitor A - [URL]
+2. Competitor B - [URL]
+3. Competitor C - [URL]
+
+## Comparative Summary
+
+| Aspect | Competitor A | Competitor B | Competitor C |
+|--------|--------------|--------------|--------------|
+| Aesthetic | Minimalist | Maximalist | Editorial |
+| Primary Color | #1E40AF | #7C3AED | #DC2626 |
+| Typography | Inter | Poppins | Playfair Display |
+| Layout | Grid-based | Asymmetric | Magazine |
+
+## Common Patterns (Industry Standard)
+- All use sans-serif for body text
+- All prioritize mobile-first responsive design
+- All use card-based layouts for content
+- All feature hero sections with large imagery
+
+## Differentiation Opportunities
+1. **Color Strategy**: Competitors use saturated colors; opportunity for muted, sophisticated palette
+2. **Typography**: No one uses display serifs; opportunity for elegant, high-end feel
+3. **Layout**: All symmetric; opportunity for asymmetric, dynamic composition
+
+## Recommendations
+Based on analysis, recommend:
+- Aesthetic: Refined minimalism with editorial typography
+- Color: Muted earth tones with one bold accent
+- Layout: Asymmetric grid with generous white space
+- Differentiation: Unexpected typography hierarchy, subtle animations
+```
+
+## Integration Workflow
+
+### After Extraction
+
+1. **Review & Validate**
+   - Manually verify color codes with eyedropper tool
+   - Cross-reference font predictions against Google Fonts
+   - Check spacing values against browser dev tools
+
+2. **Adapt & Customize**
+   - Don't copy—adapt principles to your unique context
+   - Maintain underlying logic, change expression
+   - Example: Extract "generous white space" principle, apply with your colors
+
+3. **Document Decisions**
+   - Save extracted guidelines in project `docs/design-guidelines/`
+   - Create design system spec from extraction
+   - Reference when generating new assets
+
+4. **Reference in Implementation**
+   - Use extracted tokens when generating new assets with `asset-generation.md`
+   - Apply extracted principles when analyzing your own designs with `visual-analysis.md`
+   - Maintain consistency between inspiration and implementation
+
+5. **Iterate & Refine**
+   - Update guidelines as design evolves
+   - Extract from multiple sources, synthesize learnings
+   - Create your own unique voice from combined insights