Files
english/.opencode/skills/frontend-design/references/analysis-techniques.md
2026-04-12 01:06:31 +07:00

3.1 KiB

Advanced Analysis Techniques

Advanced strategies for visual analysis and testing.

Batch Analysis for Rapid Iteration

Analyze multiple generations simultaneously:

# Generate 3 variations with fast model
for i in {1..3}; do
  python scripts/gemini_batch_process.py \
    --task generate \
    --prompt "[prompt with variation-$i twist]" \
    --output docs/assets/var-$i \
    --model imagen-4.0-fast-generate-001 \
    --aspect-ratio 16:9
done

# Batch analyze all variations
python scripts/gemini_batch_process.py \
  --files docs/assets/var-*.png \
  --task analyze \
  --prompt "Rank these variations 1-3 with scores. Identify winner." \
  --output docs/assets/batch-analysis.md \
  --model gemini-2.5-flash

Contextual Testing

Test assets in actual UI context:

  1. Mock up UI overlay (use design tool or code)
  2. Capture screenshot of asset with real UI elements
  3. Analyze integrated version for readability, hierarchy, contrast
# After creating mockup with UI overlay
python scripts/gemini_batch_process.py \
  --files docs/assets/hero-mockup-with-ui.png \
  --task analyze \
  --prompt "Evaluate this hero section with actual UI:
1. Headline readability over image
2. CTA button visibility and contrast
3. Navigation bar integration
4. Overall visual hierarchy effectiveness
Provide WCAG contrast ratio estimates." \
  --output docs/assets/ui-integration-test.md \
  --model gemini-2.5-flash

A/B Testing Analysis

Compare design directions objectively:

python scripts/gemini_batch_process.py \
  --files docs/assets/design-a.png docs/assets/design-b.png \
  --task analyze \
  --prompt "A/B test analysis:

Design A: [minimalist approach]
Design B: [maximalist approach]

Compare for:
1. User attention capture (first 3 seconds)
2. Information hierarchy clarity
3. Emotional impact and brand perception
4. Conversion optimization potential
5. Target audience alignment ([describe audience])

Recommend which to A/B test in production and why." \
  --output docs/assets/ab-test-analysis.md \
  --model gemini-2.5-flash

Iteration Strategy

When score < 6/10:

  1. Identify top 3 weaknesses from analysis
  2. Address each in refined prompt
  3. Regenerate with fast model first
  4. Re-analyze before committing to standard model
  5. Iterate until score ≥ 7/10

Example:

# First attempt scores 5/10 - "colors too muted, composition unbalanced"

# Refine prompt addressing specific issues
python scripts/gemini_batch_process.py \
  --task generate \
  --prompt "[original prompt] + vibrant saturated colors, dynamic diagonal composition" \
  --output docs/assets/hero-v2 \
  --model imagen-4.0-fast-generate-001

# Re-analyze
python scripts/gemini_batch_process.py \
  --files docs/assets/hero-v2.png \
  --task analyze \
  --prompt "[same evaluation criteria]" \
  --output docs/assets/analysis-v2.md

Documentation Strategy

Save analysis reports for design system documentation:

docs/
  assets/
    hero-image.png
    hero-analysis.md       # Analysis report
    hero-color-palette.md  # Extracted colors
  design-guidelines/
    asset-usage.md         # Guidelines derived from analysis