renolation/english
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
efd7fac42f05e1743664531c132fb04d048f435a
english/.opencode/skills/frontend-design/references/technical-overview.md
renolation 10d660cbcb init
2026-04-12 01:06:31 +07:00

2.4 KiB
Raw Blame History

Technical Guide Overview

Technical considerations and best practices for AI multimodal integration in frontend design.

Quick Reference

File Optimization

python scripts/media_optimizer.py \
  --input docs/assets/hero-image.png \
  --output docs/assets/hero-optimized.webp \
  --quality 85

Format Selection

  • WebP: Best for web, 25-35% smaller than PNG, wide browser support
  • AVIF: Cutting edge, 50% smaller than WebP, limited support
  • PNG: Lossless, large file size, use for transparency
  • JPEG: Lossy, smaller than PNG, photos without transparency

Responsive Variants

# Desktop hero (16:9)
--aspect-ratio 16:9

# Mobile hero (9:16 or 3:4)
--aspect-ratio 9:16

# Square cards (1:1)
--aspect-ratio 1:1

Detailed References

  • technical-accessibility.md - WCAG compliance, contrast checks, alt text
  • technical-workflows.md - Complete pipeline examples
  • technical-best-practices.md - Checklists, quality gates
  • technical-optimization.md - Cost strategies, model selection

Quick Commands

# Generate (standard quality)
python scripts/gemini_batch_process.py --task generate \
  --prompt "[design-driven prompt]" \
  --output docs/assets/[name] \
  --model imagen-4.0-generate-001 \
  --aspect-ratio 16:9

# Analyze
python scripts/gemini_batch_process.py --files docs/assets/[image].png \
  --task analyze \
  --prompt "[evaluation criteria]" \
  --output docs/assets/analysis.md \
  --model gemini-2.5-flash

# Optimize
python scripts/media_optimizer.py \
  --input docs/assets/[image].png \
  --output docs/assets/[image].webp \
  --quality 85

# Extract colors
python scripts/gemini_batch_process.py --files docs/assets/[image].png \
  --task analyze \
  --prompt "Extract 5-8 dominant colors with hex codes. Classify as primary/accent/neutral." \
  --output docs/assets/color-palette.md \
  --model gemini-2.5-flash

Responsive Image Strategies

Art Direction (different crops):

<picture>
  <source media="(min-width: 768px)" srcset="hero-desktop.webp">
  <source media="(max-width: 767px)" srcset="hero-mobile.webp">
  <img src="hero-desktop.jpg" alt="Hero image">
</picture>

Resolution Switching (same crop, different sizes):

<img
  srcset="hero-400w.webp 400w, hero-800w.webp 800w, hero-1200w.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="hero-800w.jpg"
  alt="Hero image"
/>