init

.opencode/skills/frontend-design/references/visual-analysis-overview.md

@@ -0,0 +1,95 @@
+# Visual Analysis Overview
+
+Use AI multimodal vision to analyze generated assets and verify design standards.
+
+## Purpose
+
+- Verify generated assets align with aesthetic direction
+- Ensure professional quality before integration
+- Identify specific improvements needed for iteration
+- Make objective design decisions based on analysis
+- Extract actionable data (hex codes, composition insights)
+
+## Quick Start
+
+### Comprehensive Analysis
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/assets/generated-hero.png \
+  --task analyze \
+  --prompt "[see analysis-prompts.md for detailed prompt]" \
+  --output docs/assets/analysis-report.md \
+  --model gemini-2.5-flash
+```
+
+### Compare Multiple Variations
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/assets/option-1.png docs/assets/option-2.png docs/assets/option-3.png \
+  --task analyze \
+  --prompt "[see analysis-prompts.md for comparison prompt]" \
+  --output docs/assets/comparison-analysis.md \
+  --model gemini-2.5-flash
+```
+
+### Extract Color Palette
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/assets/final-asset.png \
+  --task analyze \
+  --prompt "Extract 5-8 dominant colors with hex codes. Classify as primary/accent/neutral. Suggest CSS variable names." \
+  --output docs/assets/color-palette.md \
+  --model gemini-2.5-flash
+```
+
+## Decision Framework
+
+### Score ≥ 8/10: Proceed to Integration
+**Actions**:
+- Optimize for web delivery
+- Create responsive variants
+- Document implementation guidelines
+- Extract color palette for CSS variables
+
+### Score 6-7/10: Minor Refinements Needed
+**Actions**:
+- Use `ck:media-processing` skill for adjustments (brightness/contrast/saturation)
+- Consider selective regeneration of problem areas
+- May proceed with caution if time-constrained
+
+### Score < 6/10: Major Iteration Required
+**Actions**:
+- Analyze specific failure points from report
+- Refine generation prompt substantially
+- Regenerate with corrected parameters
+- Consider alternative aesthetic approach
+
+## Detailed References
+
+- `analysis-prompts.md` - All analysis prompt templates
+- `analysis-techniques.md` - Advanced analysis strategies
+- `analysis-best-practices.md` - Quality guidelines and pitfalls
+
+## Example Color Extraction Output
+
+```css
+/* Extracted Color Palette */
+:root {
+  /* Primary Colors */
+  --color-primary-600: #2C5F7D;  /* Dark teal - headers, CTAs */
+  --color-primary-400: #4A90B8;  /* Medium teal - links, accents */
+
+  /* Accent Colors */
+  --color-accent-500: #E8B44F;   /* Warm gold - highlights */
+
+  /* Neutral Colors */
+  --color-neutral-900: #1A1A1A;  /* Near black - body text */
+  --color-neutral-100: #F5F5F5;  /* Light gray - backgrounds */
+
+  /* Semantic Usage */
+  --color-text-primary: var(--color-neutral-900);
+  --color-text-on-primary: #FFFFFF;
+  --color-background: var(--color-neutral-100);
+  --color-cta: var(--color-primary-600);
+}
+```