72 lines
2.2 KiB
Markdown
72 lines
2.2 KiB
Markdown
# 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.
|