init

.opencode/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.