init
This commit is contained in:
@@ -0,0 +1,165 @@
|
||||
# AI Multimodal Integration for Frontend Design
|
||||
|
||||
Entry point for using the `ck:ai-multimodal` skill to generate and analyze visual assets that align with frontend design thinking and aesthetic guidelines.
|
||||
|
||||
## When to Use
|
||||
|
||||
Use `ck:ai-multimodal` in frontend design when you need to:
|
||||
|
||||
**Asset Generation**:
|
||||
- Generate hero images, background assets, decorative elements
|
||||
- Create placeholder images with specific aesthetic qualities
|
||||
- Produce marketing visuals that match UI design language
|
||||
- Generate icon sets, illustrations, or graphic elements
|
||||
- Create texture overlays, gradient meshes, or background patterns
|
||||
- Prototype visual concepts before implementing in code
|
||||
|
||||
**Visual Analysis**:
|
||||
- Analyze generated assets to verify they meet design standards
|
||||
- Compare multiple variations objectively with ratings
|
||||
- Extract exact color palettes with hex codes for implementation
|
||||
- Test assets with UI overlays for readability and contrast
|
||||
|
||||
**Design Extraction**:
|
||||
- Extract design guidelines from existing images or videos
|
||||
- Analyze competitor designs to understand their approach
|
||||
- Reverse-engineer design systems from inspiration screenshots
|
||||
- Create documented guidelines based on visual analysis
|
||||
- Establish consistent aesthetic direction from references
|
||||
|
||||
## Core Principles
|
||||
|
||||
### 1. Design-Driven Generation
|
||||
**NEVER** generate generic AI imagery. Every asset must align with:
|
||||
- The chosen aesthetic direction (brutalism, maximalism, retro-futurism, etc.)
|
||||
- Typography system and visual hierarchy
|
||||
- Color palette and theme consistency
|
||||
- Overall design story and purpose
|
||||
|
||||
### 2. Contextual Asset Creation
|
||||
Assets aren't standalone—they're part of a cohesive interface. Consider:
|
||||
- **Purpose**: Hero image vs. background texture vs. decorative element
|
||||
- **Integration**: How it interacts with overlaid text, buttons, forms
|
||||
- **Technical constraints**: File size, aspect ratio, responsive behavior
|
||||
- **Accessibility**: Color contrast, text readability, decorative vs. informative
|
||||
|
||||
### 3. Analysis is Mandatory
|
||||
Never integrate assets without comprehensive analysis:
|
||||
- Score quality objectively (1-10 scale, minimum 7/10)
|
||||
- Extract specific values: hex codes, not "blue"; px sizes, not "large"
|
||||
- Compare multiple variations before deciding
|
||||
- Test with UI overlays, not in isolation
|
||||
|
||||
### 4. Learn from Excellence
|
||||
Extract design systems systematically from high-quality references:
|
||||
- Analyze 3-5 screens to identify patterns
|
||||
- Document actionably with CSS variables and exact values
|
||||
- Validate predictions (fonts, colors) manually
|
||||
- Adapt principles contextually, don't copy blindly
|
||||
|
||||
## Workflow Quick Reference
|
||||
|
||||
### For Asset Generation
|
||||
**See**: `asset-generation.md`
|
||||
|
||||
1. Define design context (aesthetic, colors, typography, tone)
|
||||
2. Craft design-driven prompts (not generic)
|
||||
3. Generate with appropriate Imagen 4 model
|
||||
4. Analyze and verify quality (score ≥ 7/10)
|
||||
5. Iterate or integrate based on results
|
||||
|
||||
**Models**: imagen-4.0-generate-001 (standard), imagen-4.0-ultra-generate-001 (production), imagen-4.0-fast-generate-001 (iteration)
|
||||
|
||||
### For Visual Analysis
|
||||
**See**: `visual-analysis.md`
|
||||
|
||||
1. Define evaluation criteria (context-specific)
|
||||
2. Run comprehensive analysis with structured prompts
|
||||
3. Compare multiple variations objectively
|
||||
4. Extract color palettes with hex codes
|
||||
5. Test integration with UI elements
|
||||
|
||||
**Model**: gemini-2.5-flash (vision understanding)
|
||||
|
||||
### For Design Extraction
|
||||
**See**: `design-extraction.md`
|
||||
|
||||
1. Capture high-quality reference screenshots
|
||||
2. Extract comprehensive design elements systematically
|
||||
3. Analyze multiple screens for consistent patterns
|
||||
4. Extract motion guidelines from videos (if applicable)
|
||||
5. Document actionably with CSS-ready specifications
|
||||
|
||||
**Model**: gemini-2.5-flash (vision understanding)
|
||||
|
||||
## Integration with Other Skills
|
||||
|
||||
### With `aesthetic` Skill
|
||||
Use `aesthetic` for overall design system guidance and quality evaluation framework. Then use `ck:frontend-design` with `ck:ai-multimodal` for asset generation and analysis that follows those guidelines.
|
||||
|
||||
### With `ck:chrome-devtools` Skill
|
||||
Use `ck:chrome-devtools` to capture full-screen screenshots from inspiration websites for design extraction. Capture at actual viewport size, not full-page scrolls.
|
||||
|
||||
### With `ui-styling` Skill
|
||||
Generate and analyze assets first, then implement using shadcn/ui + Tailwind with colors/styles that complement the generated imagery.
|
||||
|
||||
### With `web-frameworks` Skill
|
||||
Optimize generated assets for Next.js App Router: image optimization, responsive images, lazy loading.
|
||||
|
||||
### With `ck:media-processing` Skill
|
||||
Post-process generated assets: resize, compress, add filters, create compositions using FFmpeg/ImageMagick.
|
||||
|
||||
## Navigation
|
||||
|
||||
**Detailed Workflows**:
|
||||
- `asset-generation.md` - Complete generation workflow with prompt strategies
|
||||
- `visual-analysis.md` - Analysis and verification workflow
|
||||
- `design-extraction.md` - Extract guidelines from existing designs
|
||||
|
||||
**Additional Resources**:
|
||||
- `technical-guide.md` - File optimization, examples, checklists, common pitfalls
|
||||
- `animejs.md` - Animation implementation for frontend
|
||||
|
||||
## Quick Commands
|
||||
|
||||
**Generate asset**:
|
||||
```bash
|
||||
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 asset**:
|
||||
```bash
|
||||
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
|
||||
```
|
||||
|
||||
**Extract design guidelines**:
|
||||
```bash
|
||||
python scripts/gemini_batch_process.py \
|
||||
--files docs/inspiration/[reference].png \
|
||||
--task analyze \
|
||||
--prompt "[extraction criteria from design-extraction.md]" \
|
||||
--output docs/design-guidelines/extracted.md \
|
||||
--model gemini-2.5-flash
|
||||
```
|
||||
|
||||
## Remember
|
||||
|
||||
1. **Design First, Generate Second**: Start with design thinking, not generation capabilities
|
||||
2. **Context is King**: Every asset serves the interface, not itself
|
||||
3. **Iterate Ruthlessly**: First generation is rarely final—evaluate and refine
|
||||
4. **Analysis is Mandatory**: Never integrate without comprehensive verification (≥7/10)
|
||||
5. **Demand Specifics**: Hex codes not "blue", px not "large", ms not "fast"
|
||||
6. **Learn from Excellence**: Extract design systems from high-quality references systematically
|
||||
7. **Adapt, Don't Copy**: Understand principles, apply contextually to your unique design
|
||||
|
||||
Generate assets that elevate frontend design, maintain aesthetic consistency, and serve user experience—never generic, always contextual.
|
||||
@@ -0,0 +1,80 @@
|
||||
# Analysis Best Practices
|
||||
|
||||
Quality guidelines and common pitfalls.
|
||||
|
||||
## Analysis Best Practices
|
||||
|
||||
### 1. Be Specific
|
||||
❌ Generic: "Is this image good?"
|
||||
✓ Specific: "Does this align with brutalist aesthetic? Rate text overlay suitability."
|
||||
|
||||
### 2. Use Structured Prompts
|
||||
Format analysis requests with numbered criteria for actionable feedback:
|
||||
```
|
||||
1. [Criterion A]
|
||||
2. [Criterion B]
|
||||
3. [Criterion C]
|
||||
Overall Rating: X/10
|
||||
```
|
||||
|
||||
### 3. Request Hex Codes
|
||||
❌ Accept: "The image uses blue tones"
|
||||
✓ Demand: "Extract hex codes: #1E40AF, #3B82F6, #60A5FA"
|
||||
|
||||
### 4. Compare Variations
|
||||
Never settle for the first generation without comparison:
|
||||
- Generate 3+ variations
|
||||
- Analyze comparatively
|
||||
- Select objectively based on scores
|
||||
|
||||
### 5. Test Integration Context
|
||||
Analyze assets *with* UI elements overlaid, not in isolation:
|
||||
- Mock up text overlays
|
||||
- Test with actual buttons and CTAs
|
||||
- Evaluate in responsive contexts
|
||||
|
||||
### 6. Document Decisions
|
||||
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
|
||||
```
|
||||
|
||||
## Common Analysis Pitfalls
|
||||
|
||||
### ❌ Vague Feedback
|
||||
Analysis returns: "Colors are nice"
|
||||
**Fix**: Request specific hex codes and harmony evaluation
|
||||
|
||||
### ❌ No Numeric Rating
|
||||
Analysis returns: "Pretty good quality"
|
||||
**Fix**: Always request 1-10 rating with justification
|
||||
|
||||
### ❌ Missing Context
|
||||
Analyzing asset without specifying intended use
|
||||
**Fix**: Include context in prompt (hero section, background, marketing, etc.)
|
||||
|
||||
### ❌ Single Analysis Point
|
||||
Only checking aesthetic, ignoring technical or integration concerns
|
||||
**Fix**: Use comprehensive evaluation template covering all dimensions
|
||||
|
||||
## Evaluation Criteria
|
||||
|
||||
### Core Evaluation Points
|
||||
- Visual coherence with chosen aesthetic direction
|
||||
- Color harmony and palette consistency
|
||||
- Composition balance and focal points
|
||||
- Typography compatibility (if text overlay needed)
|
||||
- Professional quality rating (1-10 scale)
|
||||
- Technical suitability (aspect ratio, resolution, file characteristics)
|
||||
|
||||
### Context-Specific Points
|
||||
- **For hero sections**: Suitability for text overlay, visual hierarchy support
|
||||
- **For backgrounds**: Subtlety, pattern repetition quality, texture detail
|
||||
- **For marketing**: Brand alignment, emotional impact, attention-grabbing power
|
||||
- **For decorative elements**: Integration potential, visual weight, uniqueness
|
||||
141
.opencode/skills/frontend-design/references/analysis-prompts.md
Normal file
141
.opencode/skills/frontend-design/references/analysis-prompts.md
Normal file
@@ -0,0 +1,141 @@
|
||||
# Analysis Prompt Templates
|
||||
|
||||
Complete prompt templates for visual analysis and verification.
|
||||
|
||||
## Comprehensive Analysis Prompt
|
||||
|
||||
```
|
||||
Analyze this design asset comprehensively:
|
||||
|
||||
## Design Alignment
|
||||
- Aesthetic Direction: [e.g., brutalist/minimalist/maximalist]
|
||||
- Expected Style: [describe target aesthetic]
|
||||
- Color Palette Target: [list expected colors]
|
||||
|
||||
## Evaluation Criteria
|
||||
1. Visual Coherence: Does it match the intended aesthetic direction?
|
||||
2. Color Analysis: List dominant colors (hex codes). Evaluate harmony and mood.
|
||||
3. Composition: Analyze balance, focal points, negative space, visual flow.
|
||||
4. Typography Compatibility: Rate suitability for overlaying text (consider contrast, busy areas).
|
||||
5. Professional Quality: Rate 1-10 with justification.
|
||||
6. Technical Assessment: Resolution quality, compression artifacts, aspect ratio correctness.
|
||||
|
||||
## Specific Feedback
|
||||
- What works well?
|
||||
- What specific elements need improvement?
|
||||
- What would elevate this to 9/10 quality?
|
||||
|
||||
## Overall Rating: X/10
|
||||
Provide final score with clear reasoning.
|
||||
```
|
||||
|
||||
## Comparison Analysis Prompt
|
||||
|
||||
```
|
||||
Compare these 3 design variations:
|
||||
|
||||
For each image, evaluate:
|
||||
1. Aesthetic alignment with [design direction]
|
||||
2. Color effectiveness
|
||||
3. Composition strength
|
||||
4. Text overlay suitability
|
||||
5. Professional quality rating (1-10)
|
||||
|
||||
Then provide:
|
||||
- Ranking: Best to worst with justification
|
||||
- Recommendation: Which to use and why
|
||||
- Hybrid suggestion: Best elements from each to combine
|
||||
```
|
||||
|
||||
## Color Extraction Prompt
|
||||
|
||||
```
|
||||
Extract the complete color palette from this image:
|
||||
|
||||
1. Identify 5-8 dominant colors with hex codes
|
||||
2. Classify each: primary, accent, neutral, or background
|
||||
3. Suggest CSS variable names (e.g., --color-primary-500)
|
||||
4. Evaluate color accessibility (WCAG contrast ratios)
|
||||
5. Recommend which colors work for text, backgrounds, accents
|
||||
|
||||
Provide as structured data for easy CSS implementation.
|
||||
```
|
||||
|
||||
## Integration Testing Prompt
|
||||
|
||||
```
|
||||
Analyze this design asset with UI elements overlaid:
|
||||
|
||||
1. Text Readability: Can all text be read clearly?
|
||||
2. Contrast Issues: Identify any WCAG violations
|
||||
3. Visual Hierarchy: Do buttons and CTAs stand out?
|
||||
4. Spacing Problems: Any crowding or poor breathing room?
|
||||
5. Responsive Concerns: Will this work on mobile at 9:16?
|
||||
|
||||
Provide specific recommendations for adjustments.
|
||||
```
|
||||
|
||||
## A/B Testing 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.
|
||||
```
|
||||
|
||||
## Quick Quality Check Template
|
||||
|
||||
```
|
||||
Rate this asset 1-10 for:
|
||||
1. Aesthetic quality
|
||||
2. Color harmony
|
||||
3. Composition balance
|
||||
4. Professional polish
|
||||
|
||||
Overall: X/10. Brief justification.
|
||||
```
|
||||
|
||||
## Comprehensive Evaluation Template
|
||||
|
||||
```
|
||||
Comprehensive design asset evaluation:
|
||||
|
||||
## Aesthetic Alignment
|
||||
- Target style: [describe]
|
||||
- Actual style: [analyze]
|
||||
- Match quality: [1-10]
|
||||
|
||||
## Technical Quality
|
||||
- Resolution: [assess]
|
||||
- Compression: [check artifacts]
|
||||
- Aspect ratio: [verify]
|
||||
|
||||
## Color Analysis
|
||||
- Dominant colors: [list hex codes]
|
||||
- Harmony: [evaluate]
|
||||
- Mood: [describe]
|
||||
|
||||
## Composition
|
||||
- Balance: [analyze]
|
||||
- Focal points: [identify]
|
||||
- Negative space: [evaluate]
|
||||
|
||||
## Integration Readiness
|
||||
- Text overlay: [rate 1-10]
|
||||
- UI compatibility: [assess]
|
||||
- Responsive suitability: [evaluate]
|
||||
|
||||
Overall Score: X/10
|
||||
Key Strengths: [list]
|
||||
Improvements Needed: [list]
|
||||
```
|
||||
@@ -0,0 +1,118 @@
|
||||
# Advanced Analysis Techniques
|
||||
|
||||
Advanced strategies for visual analysis and testing.
|
||||
|
||||
## Batch Analysis for Rapid Iteration
|
||||
|
||||
Analyze multiple generations simultaneously:
|
||||
|
||||
```bash
|
||||
# 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
|
||||
|
||||
```bash
|
||||
# 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:
|
||||
|
||||
```bash
|
||||
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:
|
||||
```bash
|
||||
# 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
|
||||
```
|
||||
396
.opencode/skills/frontend-design/references/animejs.md
Normal file
396
.opencode/skills/frontend-design/references/animejs.md
Normal file
@@ -0,0 +1,396 @@
|
||||
# Anime.js v4 Reference Guide for AI Assistants
|
||||
|
||||
## 🚨 CRITICAL: ALWAYS USE ANIME.JS V4 SYNTAX 🚨
|
||||
|
||||
**This project uses Anime.js v4.x.x - DO NOT use v3 syntax under any circumstances**
|
||||
|
||||
**If you're about to write `import anime from 'animejs'` - STOP!**
|
||||
**That's v3. This project uses v4. Use the correct import below.**
|
||||
|
||||
## 🚀 Quick Start - Essential Setup
|
||||
|
||||
### 1. Correct v4 Import (REQUIRED)
|
||||
```javascript
|
||||
// ✅ CORRECT v4 imports
|
||||
import { animate, createTimeline, stagger, utils, svg, eases, engine } from 'animejs';
|
||||
|
||||
// ❌ WRONG v3 import - NEVER USE THIS
|
||||
// import anime from 'animejs';
|
||||
```
|
||||
|
||||
### 2. Configure Time Units to Seconds (SET ONCE IN APP ENTRY POINT)
|
||||
```javascript
|
||||
// ⚠️ IMPORTANT: Set this ONLY ONCE in your app's main entry point
|
||||
// For React: App.js/App.tsx or index.js/index.tsx
|
||||
// For Vue: main.js/main.ts
|
||||
// For vanilla JS: The main script file that loads first
|
||||
|
||||
import { engine } from 'animejs';
|
||||
|
||||
// Set ONLY in the app's entry point, NOT in components
|
||||
engine.timeUnit = 's';
|
||||
|
||||
// Now ALL durations use seconds everywhere: 1 = 1 second, 0.5 = 500ms
|
||||
// DO NOT set this in individual components - it's a global setting!
|
||||
```
|
||||
|
||||
### 3. Single-Line Format for Simple Animations (REQUIRED)
|
||||
```javascript
|
||||
// ✅ GOOD - Clean, readable, one line for simple tweens
|
||||
animate('.element', { x: 250, duration: 1, ease: 'outQuad' });
|
||||
|
||||
// ❌ BAD - Unnecessary multi-line for simple tweens
|
||||
animate('.element', {
|
||||
x: 250,
|
||||
duration: 1,
|
||||
ease: 'outQuad'
|
||||
});
|
||||
```
|
||||
|
||||
## ✅ Quick Validation Checklist
|
||||
|
||||
Before generating anime.js code, verify:
|
||||
- [ ] Using `import { animate, ... } from 'animejs'` NOT `import anime`
|
||||
- [ ] Set `engine.timeUnit = 's'` ONLY ONCE in app entry point (NOT in components)
|
||||
- [ ] Using seconds for all durations (1 = 1 second)
|
||||
- [ ] Simple animations on ONE LINE
|
||||
- [ ] Using `animate()` NOT `anime()`
|
||||
- [ ] Using `createTimeline()` NOT `anime.timeline()`
|
||||
- [ ] Using `ease:` NOT `easing:`
|
||||
- [ ] Using `to:` for values, NOT `value:`
|
||||
- [ ] Using `on` prefix for callbacks (onUpdate, onComplete)
|
||||
- [ ] Using `loop` and `alternate` NOT `direction`
|
||||
- [ ] Using correct v4 stagger syntax with `stagger()`
|
||||
- [ ] Using shorthand properties (x, y, z) when possible
|
||||
|
||||
## 🎯 Core API - Most Common Patterns
|
||||
|
||||
### Basic Animation (single line for simple tweens)
|
||||
```javascript
|
||||
// Simple tween - ALWAYS one line
|
||||
animate('.element', { x: 250, rotate: 180, duration: 0.8, ease: 'inOutQuad' });
|
||||
|
||||
// Fade in - one line
|
||||
animate('.element', { opacity: [0, 1], y: [20, 0], duration: 0.6, ease: 'outQuad' });
|
||||
|
||||
// Scale bounce - one line
|
||||
animate('.element', { scale: [0, 1], duration: 0.8, ease: 'outElastic(1, 0.5)' });
|
||||
|
||||
// Infinite loop - one line
|
||||
animate('.element', { rotate: 360, duration: 2, loop: true, ease: 'linear' });
|
||||
```
|
||||
|
||||
### Timeline Creation
|
||||
```javascript
|
||||
const tl = createTimeline({ defaults: { duration: 1, ease: 'outQuad' } });
|
||||
|
||||
tl.add('.element1', { x: 250 })
|
||||
.add('.element2', { y: 100 }, '+=0.2') // 0.2s after previous
|
||||
.add('.element3', { rotate: 180 }, '<'); // at start of previous
|
||||
```
|
||||
|
||||
### Stagger Animations (single line)
|
||||
```javascript
|
||||
animate('.elements', { x: 250, delay: stagger(0.1) }); // 0.1s between each
|
||||
animate('.elements', { x: 250, delay: stagger(0.1, { from: 'center' }) });
|
||||
```
|
||||
|
||||
## ❌ Common AI Mistakes to Avoid
|
||||
|
||||
### MISTAKE #1: Using v3 Import Pattern
|
||||
```javascript
|
||||
// ❌ WRONG - This is v3
|
||||
import anime from 'animejs';
|
||||
anime({ targets: '.element', translateX: 250 });
|
||||
|
||||
// ✅ CORRECT - Always use v4
|
||||
import { animate } from 'animejs';
|
||||
animate('.element', { x: 250 });
|
||||
```
|
||||
|
||||
### MISTAKE #2: Using 'targets' Property
|
||||
```javascript
|
||||
// ❌ WRONG - 'targets' is v3
|
||||
animate({ targets: '.element', translateX: 250 });
|
||||
|
||||
// ✅ CORRECT - First parameter is the target
|
||||
animate('.element', { x: 250 });
|
||||
```
|
||||
|
||||
### MISTAKE #3: Using 'easing' Instead of 'ease'
|
||||
```javascript
|
||||
// ❌ WRONG
|
||||
animate('.element', { x: 250, easing: 'easeInOutQuad' });
|
||||
|
||||
// ✅ CORRECT
|
||||
animate('.element', { x: 250, ease: 'inOutQuad' });
|
||||
```
|
||||
|
||||
### MISTAKE #4: Using 'value' for Animation Values
|
||||
```javascript
|
||||
// ❌ WRONG - 'value' is v3
|
||||
animate('.element', { x: { value: 250 } });
|
||||
|
||||
// ✅ CORRECT - Use 'to' for values
|
||||
animate('.element', { x: { to: 250 } });
|
||||
```
|
||||
|
||||
### MISTAKE #5: Wrong Timeline Syntax
|
||||
```javascript
|
||||
// ❌ WRONG - anime.timeline() is v3
|
||||
const tl = anime.timeline();
|
||||
|
||||
// ✅ CORRECT - Use createTimeline
|
||||
import { createTimeline } from 'animejs';
|
||||
const tl = createTimeline();
|
||||
```
|
||||
|
||||
## 📋 Property Syntax Reference (v3 → v4)
|
||||
|
||||
### Animation Values
|
||||
```javascript
|
||||
// ✅ v4: Use 'to' for target values
|
||||
{ opacity: { to: 0.5 } }
|
||||
{ x: { to: [0, 100] } }
|
||||
|
||||
// ❌ v3: DON'T use 'value'
|
||||
// { opacity: { value: 0.5 } }
|
||||
```
|
||||
|
||||
### Easing Functions
|
||||
```javascript
|
||||
// ✅ v4: Use 'ease' (no 'ease' prefix)
|
||||
{ ease: 'inOutQuad' }
|
||||
{ ease: 'outElastic(1, 0.5)' }
|
||||
{ ease: 'cubicBezier(0.4, 0, 0.2, 1)' }
|
||||
|
||||
// ❌ v3: DON'T use 'easing' or 'ease' prefix
|
||||
// { easing: 'easeInOutQuad' }
|
||||
```
|
||||
|
||||
### Direction & Looping
|
||||
```javascript
|
||||
// ✅ v4
|
||||
{
|
||||
loop: true, // infinite loop
|
||||
loop: 3, // loop 3 times
|
||||
alternate: true, // alternate direction
|
||||
reversed: true // play in reverse
|
||||
}
|
||||
|
||||
// ❌ v3: DON'T use 'direction'
|
||||
// { direction: 'alternate' }
|
||||
```
|
||||
|
||||
### Transform Properties (Shorthand Preferred)
|
||||
```javascript
|
||||
// ✅ Both syntaxes work in v4:
|
||||
animate('.element', { x: 100, y: 50, z: 25 }); // shorthand (preferred)
|
||||
animate('.element', { translateX: 100, translateY: 50, translateZ: 25 }); // explicit
|
||||
```
|
||||
|
||||
### Callbacks (ALL prefixed with 'on')
|
||||
```javascript
|
||||
// ✅ v4: Simple callback - keep on one line
|
||||
animate('.element', { x: 250, duration: 1, onComplete: () => console.log('Done!') });
|
||||
|
||||
// ✅ v4: Multiple callbacks - use multi-line
|
||||
animate('.element', {
|
||||
x: 250,
|
||||
duration: 1,
|
||||
onBegin: (anim) => console.log('Started'),
|
||||
onUpdate: (anim) => console.log('Progress:', anim.progress),
|
||||
onComplete: (anim) => console.log('Finished')
|
||||
});
|
||||
|
||||
// ❌ v3: DON'T use unprefixed callbacks
|
||||
// { update: () => {}, complete: () => {} }
|
||||
```
|
||||
|
||||
## 📝 Code Formatting Guidelines
|
||||
|
||||
### ALWAYS Use Single-Line Format for Simple Animations
|
||||
**This is mandatory for readability** - Use for animations with ≤4 properties:
|
||||
```javascript
|
||||
// ✅ GOOD - Clean, readable, one line
|
||||
animate('.element', { x: 250, duration: 1, ease: 'outQuad' });
|
||||
animate('.box', { opacity: 0.5, scale: 0.8, duration: 0.3 });
|
||||
|
||||
// ❌ BAD - Unnecessary multi-line for simple tweens
|
||||
animate('.element', {
|
||||
x: 250,
|
||||
duration: 1,
|
||||
ease: 'outQuad'
|
||||
});
|
||||
```
|
||||
|
||||
### Multi-Line Format (Only for Complex Animations)
|
||||
Use for animations with >4 properties or callbacks:
|
||||
```javascript
|
||||
// Complex animation with callbacks - multi-line is appropriate
|
||||
animate('.element', {
|
||||
x: { to: [0, 100, 50], duration: 2 },
|
||||
y: { to: [0, -50, 0], duration: 2 },
|
||||
scale: [0, 1.2, 1],
|
||||
ease: 'outElastic(1, 0.5)',
|
||||
onComplete: () => console.log('Done!')
|
||||
});
|
||||
```
|
||||
|
||||
## 🎨 Common Animation Patterns
|
||||
|
||||
### Hover Animation (single line per animation)
|
||||
```javascript
|
||||
element.addEventListener('mouseenter', () => animate(element, { scale: 1.1, duration: 0.3, ease: 'outQuad' }));
|
||||
element.addEventListener('mouseleave', () => animate(element, { scale: 1, duration: 0.3, ease: 'outQuad' }));
|
||||
```
|
||||
|
||||
### Sequential Timeline
|
||||
```javascript
|
||||
const tl = createTimeline({ defaults: { duration: 0.5 } });
|
||||
tl.add('.step1', { x: 100 })
|
||||
.add('.step2', { y: 100 })
|
||||
.add('.step3', { scale: 2 });
|
||||
```
|
||||
|
||||
### Scroll-triggered Animation
|
||||
```javascript
|
||||
import { createScrollObserver } from 'animejs';
|
||||
|
||||
createScrollObserver({
|
||||
target: '.scroll-element',
|
||||
root: document.querySelector('.scroll-container'),
|
||||
play: () => animate('.element', { x: 250, duration: 1 }),
|
||||
visibility: 0.5
|
||||
});
|
||||
```
|
||||
|
||||
## 🔧 Advanced Features
|
||||
|
||||
### SVG Animations
|
||||
```javascript
|
||||
import { animate, svg } from 'animejs';
|
||||
|
||||
// Morph path (single line)
|
||||
animate('#path1', { d: svg.morphTo('#path2'), duration: 1 });
|
||||
|
||||
// Draw SVG line
|
||||
const drawable = svg.createDrawable('.svg-path');
|
||||
animate(drawable, { draw: '0% 100%', duration: 2 });
|
||||
|
||||
// Motion path (single line for simple usage)
|
||||
const motionPath = svg.createMotionPath('#motion-path');
|
||||
animate('.element', { x: motionPath.translateX, y: motionPath.translateY, rotate: motionPath.rotate });
|
||||
```
|
||||
|
||||
### Utility Functions
|
||||
```javascript
|
||||
import { utils } from 'animejs';
|
||||
|
||||
// DOM selection
|
||||
const elements = utils.$('.elements');
|
||||
|
||||
// Get current value
|
||||
const currentX = utils.get('.element', 'translateX');
|
||||
|
||||
// Set values immediately
|
||||
utils.set('.element', { x: 100, opacity: 0.5 });
|
||||
|
||||
// Remove animations
|
||||
utils.remove('.element');
|
||||
|
||||
// Math utilities
|
||||
utils.random(0, 100);
|
||||
utils.shuffle([1, 2, 3, 4]);
|
||||
utils.lerp(0, 100, 0.5); // 50
|
||||
utils.clamp(150, 0, 100); // 100
|
||||
```
|
||||
|
||||
### TypeScript Support
|
||||
```typescript
|
||||
import { animate, createTimeline, JSAnimation, Timeline, AnimationParams, TimelineParams } from 'animejs';
|
||||
|
||||
// Single line for simple animations
|
||||
const animation: JSAnimation = animate('.element', { x: 250, duration: 1 } as AnimationParams);
|
||||
|
||||
const timeline: Timeline = createTimeline({ defaults: { duration: 0.8 } } as TimelineParams);
|
||||
```
|
||||
|
||||
## ⚡ Performance Tips
|
||||
|
||||
1. **Use transforms over position properties**
|
||||
```javascript
|
||||
// ✅ Good - uses transform
|
||||
animate('.element', { x: 100 });
|
||||
|
||||
// ❌ Avoid - triggers layout
|
||||
animate('.element', { left: 100 });
|
||||
```
|
||||
|
||||
2. **Batch animations in timelines**
|
||||
```javascript
|
||||
// ✅ Good - single timeline
|
||||
const tl = createTimeline();
|
||||
elements.forEach(el => tl.add(el, { x: 100 }));
|
||||
|
||||
// ❌ Avoid - multiple animations
|
||||
elements.forEach(el => animate(el, { x: 100 }));
|
||||
```
|
||||
|
||||
3. **Use will-change CSS property for complex animations**
|
||||
```css
|
||||
.animated-element {
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
```
|
||||
|
||||
## 🚫 How to Identify V3 Code (DON'T USE)
|
||||
|
||||
If you see ANY of these patterns, it's v3 and MUST be updated:
|
||||
|
||||
```javascript
|
||||
// All of these are V3 - NEVER USE:
|
||||
anime({ ... })
|
||||
anime.timeline()
|
||||
anime.stagger()
|
||||
anime.random()
|
||||
anime.remove()
|
||||
anime.get()
|
||||
anime.set()
|
||||
anime.running
|
||||
{ targets: '...' }
|
||||
{ easing: '...' }
|
||||
{ value: ... }
|
||||
{ direction: 'alternate' }
|
||||
```
|
||||
|
||||
## 💡 AI Code Generation Rules
|
||||
|
||||
When asked to create animations with anime.js:
|
||||
|
||||
1. **ONLY** set `engine.timeUnit = 's'` ONCE in the app's main entry point (App.js, main.js, index.js) - NEVER in components
|
||||
2. **ALWAYS** use seconds for all durations (1 = 1 second)
|
||||
3. **ALWAYS** format simple animations on ONE LINE
|
||||
4. **ALWAYS** start with v4 imports
|
||||
5. **NEVER** use `anime()` function
|
||||
6. **ALWAYS** use `animate()` for animations
|
||||
7. **NEVER** include `targets` property
|
||||
8. **ALWAYS** use `ease` not `easing`
|
||||
9. **NEVER** use `value`, use `to` instead
|
||||
10. **ALWAYS** prefix callbacks with `on`
|
||||
11. **NEVER** use `direction`, use `alternate` and `reversed`
|
||||
12. **ALWAYS** use `createTimeline()` for timelines
|
||||
13. **PREFER** shorthand (`x`) over explicit (`translateX`)
|
||||
14. **FORMAT** short animations on single line (≤4 properties)
|
||||
15. **NEVER** generate v3 syntax under any circumstances
|
||||
|
||||
## NPM Installation
|
||||
```bash
|
||||
npm install animejs
|
||||
```
|
||||
|
||||
## Version Check
|
||||
```javascript
|
||||
// Current version: 4.x.x
|
||||
// If you see any code using anime({ targets: ... }), it's v3 and needs updating!
|
||||
```
|
||||
103
.opencode/skills/frontend-design/references/anti-slop-rules.md
Normal file
103
.opencode/skills/frontend-design/references/anti-slop-rules.md
Normal file
@@ -0,0 +1,103 @@
|
||||
# Anti-Slop Rules: Avoiding AI Design Fingerprints
|
||||
|
||||
These are patterns LLMs gravitate toward by default. Treat them as "overused AI defaults" — not absolute bans. Context matters. A SaaS dashboard and a personal blog have different rules.
|
||||
|
||||
## Typography
|
||||
|
||||
**Strongly prefer alternatives to:**
|
||||
- `Inter` — ubiquitous to the point of being invisible. Prefer `Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi`, `Plus Jakarta Sans`
|
||||
- `Roboto` / `Arial` / `Open Sans` — browser defaults with no character
|
||||
- `Space Grotesk` — overused in "tech startup" contexts
|
||||
|
||||
**Alternatives:** Variable fonts, display serifs (editorial), tight grotesks (minimal SaaS), humanist sans (consumer apps)
|
||||
|
||||
**Avoid:**
|
||||
- Serif fonts on dashboards/data UIs — reserve for creative/editorial work
|
||||
- Only Regular (400) + Bold (700) — use 500/600 for subtler hierarchy
|
||||
- Orphaned words — use `text-wrap: balance` or `text-wrap: pretty`
|
||||
- All-caps subheaders everywhere — try lowercase italic, sentence case, small-caps
|
||||
|
||||
## Color
|
||||
|
||||
**Strongly prefer alternatives to:**
|
||||
- AI purple/blue gradient aesthetic — the single most common LLM design fingerprint
|
||||
- Pure `#000000` — use off-black: `#0a0a0a`, `#111`, Zinc-950, or tinted dark
|
||||
- Oversaturated accents (saturation > 80%) — desaturate to blend elegantly
|
||||
- Gradient text on large headers — use sparingly, never on body copy
|
||||
|
||||
**Principles:**
|
||||
- Max 1 accent color per project. Remove the rest.
|
||||
- Stick to one gray family — never mix warm and cool grays
|
||||
- Tint shadows to match background hue (dark navy shadow on navy bg), not pure black
|
||||
- Flat design with zero texture feels sterile — add subtle noise/grain
|
||||
|
||||
## Layout
|
||||
|
||||
**Strongly prefer alternatives to:**
|
||||
- 3-column equal card layouts as feature rows — the most generic AI layout. Use 2-col zig-zag, asymmetric grid, horizontal scroll, or masonry
|
||||
- Centered hero with centered H1 at high variance — try split-screen, left-aligned, or asymmetric whitespace
|
||||
- `h-screen` for full-height sections — always use `min-h-[100dvh]` (iOS Safari viewport bug)
|
||||
- Complex flexbox `calc()` math for grids — use CSS Grid instead
|
||||
|
||||
**Avoid:**
|
||||
- Everything centered and symmetrical — break with offset margins or mixed aspect ratios
|
||||
- Equal card heights forced by flexbox — allow variable heights or use masonry
|
||||
- Uniform border-radius everywhere — vary: tighter on inner elements, softer on containers
|
||||
- Missing max-width — always constrain to ~1200-1440px with auto margins
|
||||
|
||||
## Content (The "Jane Doe" Effect)
|
||||
|
||||
**Avoid:**
|
||||
- Generic names: "John Doe", "Jane Smith", "Sarah Chan" — use realistic, diverse names
|
||||
- Round fake numbers: `99.99%`, `50%`, `$100.00` — use organic data: `47.2%`, `$99.00`
|
||||
- Startup slop names: "Acme", "Nexus", "SmartFlow" — invent contextual brand names
|
||||
- AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve", "Tapestry" — write plain, specific language
|
||||
- Lorem Ipsum — write real draft copy, even if rough
|
||||
- Exclamation marks in success messages — be confident, not loud
|
||||
- "Oops!" error messages — be direct: "Connection failed. Try again."
|
||||
- Title Case On Every Single Header — use sentence case
|
||||
|
||||
## Visual Effects
|
||||
|
||||
**Strongly prefer alternatives to:**
|
||||
- Neon/outer glows (`box-shadow` glows) — use inner borders or subtle tinted shadows instead
|
||||
- Custom mouse cursors — outdated, hurt performance and accessibility
|
||||
- Standard `ease-in-out` / `linear` transitions — use spring physics or custom cubic-beziers
|
||||
|
||||
**Allowed with care:**
|
||||
- Gradient text — sparingly on accent elements, never on body or large headers
|
||||
- Glassmorphism — only when it goes beyond `backdrop-blur` (add inner border + refraction shadow)
|
||||
|
||||
## Components
|
||||
|
||||
**Strongly prefer alternatives to:**
|
||||
- Unstyled/default shadcn components — always customize radii, colors, and shadows
|
||||
- Generic card (border + shadow + white bg) at high visual density — use spacing/dividers instead
|
||||
- Standard Lucide/Feather icons as the only icon set — try Phosphor, Heroicons, or custom SVG for differentiation
|
||||
- Rocketship for "Launch", shield for "Security" — avoid cliché icon metaphors
|
||||
- 3-card carousel testimonials with dots — masonry wall, embedded posts, or single rotating quote
|
||||
- Pill-shaped "New"/"Beta" badges everywhere — try square badges or plain text labels
|
||||
- Avatar circles exclusively — try squircles or rounded squares
|
||||
|
||||
## External Resources
|
||||
|
||||
**Avoid:**
|
||||
- Unsplash direct links — use `https://picsum.photos/seed/{name}/800/600` or SVG UI Avatars
|
||||
- Same avatar image for multiple users — use unique assets
|
||||
- Stock "diverse team" photos — use real photos, candid shots, or consistent illustration style
|
||||
|
||||
## AI Tells: Quick Self-Check
|
||||
|
||||
Before shipping, scan for these instant giveaways:
|
||||
- [ ] Inter font anywhere in the project?
|
||||
- [ ] Purple or blue gradient as the main aesthetic?
|
||||
- [ ] Three equal-width cards in a row?
|
||||
- [ ] Centered hero text over a dark gradient image?
|
||||
- [ ] "John Doe" or "Acme Corp" in any content?
|
||||
- [ ] Round placeholder numbers (50%, $100)?
|
||||
- [ ] "Elevate your workflow" or similar AI copy?
|
||||
- [ ] Pure `#000000` as background?
|
||||
- [ ] Generic spinner (no skeleton loader)?
|
||||
- [ ] No hover/active states on buttons?
|
||||
|
||||
If any box is checked, the design reads as AI-generated. Address before delivery.
|
||||
337
.opencode/skills/frontend-design/references/asset-generation.md
Normal file
337
.opencode/skills/frontend-design/references/asset-generation.md
Normal file
@@ -0,0 +1,337 @@
|
||||
# Asset Generation Workflow
|
||||
|
||||
Complete workflow for generating design-aligned visual assets using `ck:ai-multimodal` skill.
|
||||
|
||||
## Generation Workflow
|
||||
|
||||
### Step 1: Define Design Context
|
||||
|
||||
Before generating, extract from the design brief:
|
||||
- **Aesthetic direction**: Minimalist? Maximalist? Brutalist? Organic?
|
||||
- **Color palette**: Primary colors, accent colors, mood
|
||||
- **Typography character**: Modern sans-serif? Elegant serif? Bold display?
|
||||
- **Visual tone**: Professional? Playful? Luxury? Raw?
|
||||
- **User context**: Who sees this? What problem does it solve?
|
||||
|
||||
### Step 2: Craft Contextual Prompts
|
||||
|
||||
Translate design thinking into generation prompts.
|
||||
|
||||
**Generic (❌ Avoid)**:
|
||||
```
|
||||
"Modern website hero image"
|
||||
```
|
||||
|
||||
**Design-Driven (✓ Use)**:
|
||||
```
|
||||
"Brutalist architectural photograph, stark concrete textures,
|
||||
dramatic shadows, high contrast black and white, raw unpolished
|
||||
surfaces, geometric shapes, monumental scale, inspired by
|
||||
1960s Bauhaus, 16:9 aspect ratio"
|
||||
```
|
||||
|
||||
**Prompt Components**:
|
||||
1. **Style/Movement**: "Neo-brutalism", "Art Deco", "Organic modernism"
|
||||
2. **Visual Elements**: Textures, shapes, composition style
|
||||
3. **Color Direction**: "Muted earth tones", "Vibrant neon accents", "Monochromatic"
|
||||
4. **Mood/Atmosphere**: "Serene", "Energetic", "Mysterious"
|
||||
5. **Technical Specs**: Aspect ratio, composition focus
|
||||
6. **References**: "Inspired by [artist/movement]"
|
||||
|
||||
### Step 3: Generate with Appropriate Model
|
||||
|
||||
Use `ck:ai-multimodal` skill's image generation capabilities:
|
||||
|
||||
```bash
|
||||
# Standard quality (most cases)
|
||||
python scripts/gemini_batch_process.py \
|
||||
--task generate \
|
||||
--prompt "[your design-driven prompt]" \
|
||||
--output docs/assets/hero-image \
|
||||
--model imagen-4.0-generate-001 \
|
||||
--aspect-ratio 16:9
|
||||
|
||||
# Ultra quality (production hero images, marketing)
|
||||
python scripts/gemini_batch_process.py \
|
||||
--task generate \
|
||||
--prompt "[your design-driven prompt]" \
|
||||
--output docs/assets/hero-ultra \
|
||||
--model imagen-4.0-ultra-generate-001 \
|
||||
--size 2K
|
||||
|
||||
# Fast iteration (exploring concepts)
|
||||
python scripts/gemini_batch_process.py \
|
||||
--task generate \
|
||||
--prompt "[your design-driven prompt]" \
|
||||
--output docs/assets/concept \
|
||||
--model imagen-4.0-fast-generate-001
|
||||
```
|
||||
|
||||
**Model Selection**:
|
||||
- **imagen-4.0-generate-001**: Default choice, balanced quality/speed
|
||||
- **imagen-4.0-ultra-generate-001**: Final production assets, marketing materials
|
||||
- **imagen-4.0-fast-generate-001**: Rapid prototyping, multiple variations
|
||||
|
||||
**Aspect Ratios**:
|
||||
- **16:9**: Hero sections, wide banners
|
||||
- **9:16**: Mobile-first, vertical content
|
||||
- **1:1**: Square cards, social media
|
||||
- **4:3**: Classic layouts, presentations
|
||||
- **3:4**: Portrait orientations, mobile screens
|
||||
|
||||
### Step 4: Evaluate Against Design Standards
|
||||
|
||||
Use `ck:ai-multimodal` to analyze the generated asset (see `visual-analysis.md` for complete workflow):
|
||||
|
||||
```bash
|
||||
python scripts/gemini_batch_process.py \
|
||||
--files docs/assets/hero-image.png \
|
||||
--task analyze \
|
||||
--prompt "Evaluate this image for:
|
||||
1. Visual coherence with [aesthetic direction]
|
||||
2. Color harmony and contrast
|
||||
3. Composition and balance
|
||||
4. Suitability for overlaying text
|
||||
5. Professional quality (rate 1-10)
|
||||
6. Specific weaknesses or improvements needed" \
|
||||
--output docs/assets/hero-evaluation.md \
|
||||
--model gemini-2.5-flash
|
||||
```
|
||||
|
||||
### Step 5: Iterate or Integrate
|
||||
|
||||
**If evaluation score < 7/10 or doesn't meet standards**:
|
||||
1. Identify specific issues (color, composition, mood, technical)
|
||||
2. Refine prompt with improvements
|
||||
3. Regenerate with adjusted parameters
|
||||
4. Consider using `ck:media-processing` skill for post-generation adjustments
|
||||
|
||||
**If meets standards**:
|
||||
1. Optimize for web (compress, format conversion)
|
||||
2. Create responsive variants if needed
|
||||
3. Document asset usage guidelines
|
||||
4. Integrate into frontend implementation
|
||||
|
||||
## Design Pattern Examples
|
||||
|
||||
### Pattern 1: Minimalist Background Texture
|
||||
|
||||
**Design Context**: Clean, refined interface with generous white space
|
||||
|
||||
**Prompt Strategy**:
|
||||
```
|
||||
"Subtle paper texture, off-white color (#F8F8F8), barely visible
|
||||
grain pattern, high-end stationery feel, minimal contrast,
|
||||
professional and clean, 1:1 aspect ratio for tiling"
|
||||
```
|
||||
|
||||
**Use Case**: Background for minimalist product pages, portfolio sites
|
||||
|
||||
### Pattern 2: Maximalist Hero Section
|
||||
|
||||
**Design Context**: Bold, energetic landing page with vibrant colors
|
||||
|
||||
**Prompt Strategy**:
|
||||
```
|
||||
"Explosive color gradients, neon pink to electric blue,
|
||||
holographic reflections, dynamic diagonal composition,
|
||||
retrofuturistic aesthetic, vaporwave influence, high energy,
|
||||
layered transparency effects, 16:9 cinematic"
|
||||
```
|
||||
|
||||
**Use Case**: Hero section for creative agencies, entertainment platforms
|
||||
|
||||
### Pattern 3: Brutalist Geometric Pattern
|
||||
|
||||
**Design Context**: Raw, bold interface with strong typography
|
||||
|
||||
**Prompt Strategy**:
|
||||
```
|
||||
"Monochromatic geometric pattern, overlapping rectangles,
|
||||
stark black and white, high contrast, Swiss design influence,
|
||||
grid-based composition, architectural precision, repeatable
|
||||
pattern for backgrounds"
|
||||
```
|
||||
|
||||
**Use Case**: Background pattern for design studios, architecture firms
|
||||
|
||||
### Pattern 4: Organic Natural Elements
|
||||
|
||||
**Design Context**: Wellness brand, calming user experience
|
||||
|
||||
**Prompt Strategy**:
|
||||
```
|
||||
"Soft botanical watercolor, sage green and cream tones,
|
||||
gentle leaf shadows, natural light quality, serene atmosphere,
|
||||
minimal detail for text overlay, 3:4 portrait orientation"
|
||||
```
|
||||
|
||||
**Use Case**: Hero section for wellness brands, eco-friendly products
|
||||
|
||||
### Pattern 5: Retro-Futuristic
|
||||
|
||||
**Design Context**: Tech product with nostalgic twist
|
||||
|
||||
**Prompt Strategy**:
|
||||
```
|
||||
"80s computer graphics aesthetic, wireframe grids, cyan and magenta
|
||||
gradients, digital sunrise, Tron-inspired, geometric precision,
|
||||
nostalgic future vision, 16:9 widescreen"
|
||||
```
|
||||
|
||||
**Use Case**: SaaS landing pages, tech conferences, gaming platforms
|
||||
|
||||
### Pattern 6: Editorial Magazine Style
|
||||
|
||||
**Design Context**: Content-heavy site with strong visual hierarchy
|
||||
|
||||
**Prompt Strategy**:
|
||||
```
|
||||
"High-contrast editorial photography, dramatic side lighting,
|
||||
stark shadows, black and white, fashion magazine quality,
|
||||
strong vertical composition, 3:4 portrait for text layout"
|
||||
```
|
||||
|
||||
**Use Case**: Blog headers, news sites, content platforms
|
||||
|
||||
## Prompt Engineering Best Practices
|
||||
|
||||
### 1. Be Specific About Style
|
||||
❌ "Modern design"
|
||||
✓ "Bauhaus-inspired geometric abstraction with primary colors"
|
||||
|
||||
### 2. Define Color Precisely
|
||||
❌ "Colorful"
|
||||
✓ "Vibrant sunset palette: coral (#FF6B6B), amber (#FFB84D), violet (#A66FF0)"
|
||||
|
||||
### 3. Specify Composition
|
||||
❌ "Nice layout"
|
||||
✓ "Rule of thirds composition, subject left-aligned, negative space right for text overlay"
|
||||
|
||||
### 4. Reference Movements/Artists
|
||||
❌ "Artistic"
|
||||
✓ "Inspired by Bauhaus geometric abstraction and Swiss International Style"
|
||||
|
||||
### 5. Technical Requirements First
|
||||
Always include: aspect ratio, resolution needs, intended use case
|
||||
|
||||
### 6. Iterate Strategically
|
||||
- First generation: Broad aesthetic exploration
|
||||
- Second generation: Refine color and composition
|
||||
- Third generation: Fine-tune details and mood
|
||||
|
||||
## Common Pitfalls to Avoid
|
||||
|
||||
### ❌ Generic Stock Photo Aesthetics
|
||||
Don't prompt: "Professional business team working together"
|
||||
Instead: Design-specific, contextual imagery that serves the interface
|
||||
|
||||
### ❌ Overcomplex Generated Images
|
||||
Generated assets that compete with UI elements create visual chaos
|
||||
Keep backgrounds subtle enough for text/button overlay
|
||||
|
||||
### ❌ Inconsistent Visual Language
|
||||
Each generated asset should feel part of the same design system
|
||||
Maintain color palette, visual style, mood consistency
|
||||
|
||||
### ❌ Ignoring Integration Context
|
||||
Assets aren't standalone—consider how they work with:
|
||||
- Typography overlays
|
||||
- Interactive elements (buttons, forms)
|
||||
- Navigation and UI chrome
|
||||
- Responsive behavior across devices
|
||||
|
||||
## Responsive Asset Strategy
|
||||
|
||||
### Desktop-First Approach
|
||||
1. Generate primary asset at 16:9 (desktop hero)
|
||||
2. Generate mobile variant at 9:16 with same prompt
|
||||
3. Ensure focal point works in both orientations
|
||||
|
||||
### Mobile-First Approach
|
||||
1. Generate primary asset at 9:16 (mobile hero)
|
||||
2. Generate desktop variant at 16:9 with same prompt
|
||||
3. Test that composition scales effectively
|
||||
|
||||
### Variant Generation
|
||||
```bash
|
||||
# Desktop (16:9)
|
||||
python scripts/gemini_batch_process.py \
|
||||
--task generate \
|
||||
--prompt "[prompt]" \
|
||||
--output docs/assets/hero-desktop \
|
||||
--model imagen-4.0-generate-001 \
|
||||
--aspect-ratio 16:9
|
||||
|
||||
# Mobile (9:16)
|
||||
python scripts/gemini_batch_process.py \
|
||||
--task generate \
|
||||
--prompt "[same prompt]" \
|
||||
--output docs/assets/hero-mobile \
|
||||
--model imagen-4.0-generate-001 \
|
||||
--aspect-ratio 9:16
|
||||
|
||||
# Square (1:1)
|
||||
python scripts/gemini_batch_process.py \
|
||||
--task generate \
|
||||
--prompt "[same prompt]" \
|
||||
--output docs/assets/hero-square \
|
||||
--model imagen-4.0-generate-001 \
|
||||
--aspect-ratio 1:1
|
||||
```
|
||||
|
||||
## Model Cost Optimization
|
||||
|
||||
**Imagen 4 Pricing** (as of 2024):
|
||||
- Standard: ~$0.04 per image
|
||||
- Ultra: ~$0.08 per image
|
||||
- Fast: ~$0.02 per image
|
||||
|
||||
**Optimization Strategy**:
|
||||
1. Use Fast model for exploration (3-5 variations)
|
||||
2. Select best direction, generate with Standard model
|
||||
3. Use Ultra only for final production assets
|
||||
4. Batch generate variations in single session
|
||||
|
||||
## Complete Example Workflow
|
||||
|
||||
```bash
|
||||
# 1. Fast exploration (3 variations)
|
||||
python scripts/gemini_batch_process.py \
|
||||
--task generate \
|
||||
--prompt "Minimalist mountain landscape, muted blue-gray tones,
|
||||
fog layers, serene morning atmosphere, clean for text overlay, 16:9" \
|
||||
--output docs/assets/concept-1 \
|
||||
--model imagen-4.0-fast-generate-001 \
|
||||
--aspect-ratio 16:9
|
||||
|
||||
# 2. Analyze best variation
|
||||
python scripts/gemini_batch_process.py \
|
||||
--files docs/assets/concept-1.png \
|
||||
--task analyze \
|
||||
--prompt "Rate 1-10 for aesthetic quality, color harmony, text overlay suitability" \
|
||||
--output docs/assets/analysis-1.md \
|
||||
--model gemini-2.5-flash
|
||||
|
||||
# 3. If score ≥ 7/10, generate production version
|
||||
python scripts/gemini_batch_process.py \
|
||||
--task generate \
|
||||
--prompt "[refined prompt based on analysis]" \
|
||||
--output docs/assets/hero-final \
|
||||
--model imagen-4.0-generate-001 \
|
||||
--aspect-ratio 16:9
|
||||
|
||||
# 4. Generate mobile variant
|
||||
python scripts/gemini_batch_process.py \
|
||||
--task generate \
|
||||
--prompt "[same refined prompt]" \
|
||||
--output docs/assets/hero-mobile \
|
||||
--model imagen-4.0-generate-001 \
|
||||
--aspect-ratio 9:16
|
||||
```
|
||||
|
||||
## Next Steps
|
||||
|
||||
- **Verify quality**: See `visual-analysis.md` for comprehensive analysis workflow
|
||||
- **Optimize assets**: See `technical-guide.md` for file optimization and integration
|
||||
- **Extract inspiration**: See `design-extraction.md` to learn from existing designs
|
||||
@@ -0,0 +1,142 @@
|
||||
# Bento 2.0 Motion Engine
|
||||
|
||||
Architecture for modern SaaS dashboards and feature sections. Goes beyond static cards — enforces a "Vercel-core meets Dribbble-clean" aesthetic with perpetual physics.
|
||||
|
||||
Use when generating: SaaS dashboards, feature showcase grids, marketing bento sections, product landing pages with interactive demos.
|
||||
|
||||
---
|
||||
|
||||
## Core Design Philosophy
|
||||
|
||||
**Aesthetic:** High-end, minimal, functional. Every card feels alive.
|
||||
|
||||
**Palette:**
|
||||
- Background: `#f9fafb` (light) or `#050505` (dark)
|
||||
- Cards: pure white `#ffffff` (light) / vantablack with `bg-white/5` (dark)
|
||||
- Card borders: `border border-slate-200/50` (light) / `border border-white/10` (dark)
|
||||
|
||||
**Surfaces:**
|
||||
- All major containers use `rounded-[2.5rem]`
|
||||
- Diffusion shadow: `shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)]` — depth without clutter
|
||||
- Card titles and descriptions sit **outside and below** the card (gallery-style presentation)
|
||||
- Card interior: generous `p-8` or `p-10` padding
|
||||
|
||||
**Typography:**
|
||||
- Font stack: `Geist`, `Satoshi`, or `Cabinet Grotesk` only
|
||||
- Header tracking: `tracking-tight`
|
||||
- Never Inter in a Bento context
|
||||
|
||||
**Double-Bezel structure for premium cards:**
|
||||
- Outer shell: `bg-black/5 ring-1 ring-black/5 p-1.5 rounded-[2rem]`
|
||||
- Inner core: own background + `shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]` + `rounded-[calc(2rem-0.375rem)]`
|
||||
|
||||
---
|
||||
|
||||
## Animation Engine Specs
|
||||
|
||||
All cards MUST contain **Perpetual Micro-Interactions**. The dashboard must always feel alive.
|
||||
|
||||
**Spring Physics (no linear easing):**
|
||||
```js
|
||||
// Use for all interactive elements
|
||||
{ type: "spring", stiffness: 100, damping: 20 }
|
||||
```
|
||||
|
||||
**Layout Transitions:**
|
||||
- Use Framer Motion `layout` and `layoutId` props for smooth reordering, resizing, and shared element transitions
|
||||
|
||||
**Infinite Loops:**
|
||||
- Every card has an active state that loops infinitely: Pulse, Typewriter, Float, or Carousel
|
||||
|
||||
**Performance isolation (critical):**
|
||||
- Every perpetual animation MUST be wrapped in `React.memo`
|
||||
- Extract each animated card as its own isolated leaf `'use client'` component
|
||||
- Never trigger re-renders in the parent layout
|
||||
|
||||
**AnimatePresence:**
|
||||
- Wrap all dynamic lists — enables proper enter/exit animations
|
||||
|
||||
---
|
||||
|
||||
## Grid Structure
|
||||
|
||||
Typical layout: Row 1 = 3 columns | Row 2 = 2 columns (70/30 split)
|
||||
|
||||
```jsx
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Row 1: 3 equal cards */}
|
||||
<IntelligentListCard />
|
||||
<CommandInputCard />
|
||||
<LiveStatusCard />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-[70%_30%] gap-6 mt-6">
|
||||
{/* Row 2: wide data stream + contextual UI */}
|
||||
<WideDataStreamCard />
|
||||
<ContextualUICard />
|
||||
</div>
|
||||
```
|
||||
|
||||
Mobile: all cards collapse to `grid-cols-1` with `gap-6`. No horizontal overflow.
|
||||
|
||||
---
|
||||
|
||||
## The 5 Card Archetypes
|
||||
|
||||
### 1. Intelligent List
|
||||
A vertical stack of items with an infinite auto-sorting loop.
|
||||
|
||||
- Items swap positions using `layoutId` — simulates AI prioritizing tasks in real-time
|
||||
- Smooth position swaps on a ~3s interval
|
||||
- Spring-based position transitions for a weighted, physical feel
|
||||
- Use case: task lists, priority queues, leaderboards
|
||||
|
||||
### 2. Command Input
|
||||
A search/AI bar with a multi-step Typewriter Effect.
|
||||
|
||||
- Cycles through 3-5 complex prompts
|
||||
- Blinking cursor between prompts
|
||||
- "Processing" state: shimmering loading gradient on the input
|
||||
- On "completion": brief checkmark animation before next cycle
|
||||
- Use case: AI search demos, command palette teasers
|
||||
|
||||
### 3. Live Status
|
||||
A scheduling or status interface with breathing indicators.
|
||||
|
||||
- Status dots with infinite `scale` pulse animation (`1.0 → 1.2 → 1.0`, 2s loop)
|
||||
- Pop-up notification badge with overshoot spring: appears, stays 3s, vanishes
|
||||
- Badge entrance: `scale: [0, 1.2, 1]` with overshoot spring physics
|
||||
- Use case: scheduling UIs, monitoring dashboards, live feed indicators
|
||||
|
||||
### 4. Wide Data Stream
|
||||
A horizontal infinite carousel of data cards or metrics.
|
||||
|
||||
- Seamless loop using `x: ["0%", "-50%"]` with duplicate items for continuity
|
||||
- Speed feels effortless — not urgent, not slow (~20-30s per full cycle)
|
||||
- Cards show metrics, user avatars, status chips, mini sparklines
|
||||
- Use case: social proof logos, metric streams, activity feeds
|
||||
|
||||
### 5. Contextual UI (Focus Mode)
|
||||
A document or content view that highlights and reveals tools.
|
||||
|
||||
- Staggered text block highlight animation (sequential word/line highlights, 300ms stagger)
|
||||
- After highlight completes: float-in of a floating action toolbar
|
||||
- Toolbar entrance: `y: [20, 0]` + `opacity: [0, 1]` with spring, staggered micro-icons
|
||||
- Toolbar holds 3-5 action icons with individual hover states
|
||||
- Use case: editor demos, AI annotation tools, document review flows
|
||||
|
||||
---
|
||||
|
||||
## Pre-Flight Checklist
|
||||
|
||||
Before shipping a Bento section:
|
||||
|
||||
- [ ] Global state used only to avoid deep prop-drilling, not arbitrarily
|
||||
- [ ] Mobile layout collapses to single column with `w-full px-4`
|
||||
- [ ] Full-height sections use `min-h-[100dvh]` not `h-screen`
|
||||
- [ ] All `useEffect` animations have cleanup functions
|
||||
- [ ] Empty, loading, and error states provided for each card
|
||||
- [ ] Generic card borders replaced with spacing/dividers where appropriate
|
||||
- [ ] Every perpetual animation isolated in its own memoized Client Component
|
||||
- [ ] No `window.addEventListener('scroll')` — use `whileInView` or `IntersectionObserver`
|
||||
- [ ] No arbitrary z-index values
|
||||
- [ ] `backdrop-blur` only on fixed/sticky elements, never scrolling cards
|
||||
@@ -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.
|
||||
@@ -0,0 +1,141 @@
|
||||
# Extraction Best Practices
|
||||
|
||||
Guidelines for capturing and analyzing design references effectively.
|
||||
|
||||
## Capture Quality Guidelines
|
||||
|
||||
### Screenshot Requirements
|
||||
- High-resolution (minimum 1920px wide for desktop)
|
||||
- Accurate color reproduction (disable browser extensions that alter colors)
|
||||
- Actual viewport size, not full-page scrolls
|
||||
- Device-specific resolutions (desktop 1920x1080, mobile 390x844)
|
||||
- Multiple states: default, hover, active, responsive breakpoints
|
||||
|
||||
### Multiple Examples
|
||||
- Analyze 3-5 screens minimum for pattern recognition
|
||||
- Include different page types (home, product, about, contact)
|
||||
- Single screenshots miss patterns
|
||||
- Capture from same site to identify consistency
|
||||
|
||||
## Analysis Best Practices
|
||||
|
||||
### 1. Demand Specifics
|
||||
❌ Accept: "Uses blue and gray colors"
|
||||
✓ Demand: "Primary: #1E40AF, Secondary: #6B7280, Accent: #F59E0B"
|
||||
|
||||
❌ Accept: "Modern sans-serif font"
|
||||
✓ Demand: "Inter, weight 600, 48px for h1, tracking -0.02em"
|
||||
|
||||
### 2. Document Rationale
|
||||
Understand *why* design decisions work, not just *what* they are:
|
||||
- Why does this color palette create trust?
|
||||
- Why does this spacing scale improve readability?
|
||||
- Why does this typography hierarchy guide user attention?
|
||||
|
||||
### 3. Create Actionable Guidelines
|
||||
Output should be directly implementable in code:
|
||||
|
||||
```css
|
||||
/* Immediately usable CSS from extraction */
|
||||
:root {
|
||||
--font-display: 'Bebas Neue', sans-serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
|
||||
--color-primary-600: #1E40AF;
|
||||
--color-accent-500: #F59E0B;
|
||||
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 16px;
|
||||
--spacing-lg: 24px;
|
||||
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
||||
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
```
|
||||
|
||||
### 4. Cross-Reference
|
||||
- Validate font predictions against Google Fonts library
|
||||
- Use font identification tools (WhatFont, Font Ninja) for accuracy
|
||||
- Manually verify extracted colors with eyedropper tools
|
||||
|
||||
### 5. Iterate Analysis
|
||||
First pass may miss subtleties:
|
||||
- Run initial comprehensive analysis
|
||||
- Review output, identify gaps
|
||||
- Run focused follow-up queries for specific elements
|
||||
|
||||
## Advanced Techniques
|
||||
|
||||
### Design System Mining
|
||||
Extract complete design system from single brand (10+ screens):
|
||||
|
||||
```bash
|
||||
python scripts/gemini_batch_process.py \
|
||||
--files docs/inspiration/brand/*.png \
|
||||
--task analyze \
|
||||
--prompt "Extract complete, production-ready design system:
|
||||
- All color tokens (20+ colors)
|
||||
- All typography specs (sizes, weights, line-heights)
|
||||
- All spacing tokens
|
||||
- All component variants
|
||||
- All animation timings
|
||||
Output as CSS variables ready for implementation." \
|
||||
--output docs/design-guidelines/brand-design-system.md \
|
||||
--model gemini-2.5-flash
|
||||
```
|
||||
|
||||
### Trend Analysis
|
||||
Analyze multiple top designs to identify current trends:
|
||||
|
||||
```bash
|
||||
python scripts/gemini_batch_process.py \
|
||||
--files docs/inspiration/awwwards-*.png \
|
||||
--task analyze \
|
||||
--prompt "Trend analysis across 10 award-winning designs:
|
||||
1. Dominant aesthetic movements
|
||||
2. Common color strategies
|
||||
3. Typography trends
|
||||
4. Layout innovations
|
||||
5. Animation patterns
|
||||
Identify what's trending in 2024 web design." \
|
||||
--output docs/design-guidelines/trend-analysis.md \
|
||||
--model gemini-2.5-flash
|
||||
```
|
||||
|
||||
### Historical Evolution
|
||||
Track design evolution of single brand over time:
|
||||
|
||||
```bash
|
||||
python scripts/gemini_batch_process.py \
|
||||
--files docs/inspiration/brand-2020.png docs/inspiration/brand-2024.png \
|
||||
--task analyze \
|
||||
--prompt "Compare 2020 vs 2024 design evolution:
|
||||
1. What changed and why
|
||||
2. What remained consistent (brand identity)
|
||||
3. How trends influenced changes
|
||||
4. Lessons for our design evolution" \
|
||||
--output docs/design-guidelines/evolution-analysis.md \
|
||||
--model gemini-2.5-flash
|
||||
```
|
||||
|
||||
## Common Pitfalls
|
||||
|
||||
### ❌ Surface-Level Analysis
|
||||
"Uses blue colors and sans-serif fonts"
|
||||
**Fix**: Demand specifics—hex codes, font names, size values
|
||||
|
||||
### ❌ Missing Context
|
||||
Extracting design without understanding target audience or purpose
|
||||
**Fix**: Research brand context before analysis
|
||||
|
||||
### ❌ Blind Copying
|
||||
Extracting and applying design 1:1 to your project
|
||||
**Fix**: Extract principles, adapt to your unique context
|
||||
|
||||
### ❌ Single Source
|
||||
Learning from one example only
|
||||
**Fix**: Analyze 3-5 examples to identify patterns vs. anomalies
|
||||
@@ -0,0 +1,162 @@
|
||||
# Extraction Output Templates
|
||||
|
||||
Documentation format templates for extracted design guidelines.
|
||||
|
||||
## Template 1: Complete Design System
|
||||
|
||||
```markdown
|
||||
# [Project/Competitor] Design System
|
||||
|
||||
## Aesthetic Direction
|
||||
- **Style**: Neo-brutalism with organic elements
|
||||
- **Mood**: Bold, confident, approachable
|
||||
- **Differentiation**: High contrast typography with soft color accents
|
||||
|
||||
## Typography
|
||||
### Display Font
|
||||
- Family: Archivo Black (Google Fonts)
|
||||
- Sizes: h1: 72px, h2: 48px, h3: 36px
|
||||
- Weights: 400 (regular)
|
||||
- Line Height: 1.1
|
||||
- Letter Spacing: -0.02em
|
||||
|
||||
### Body Font
|
||||
- Family: Inter (Google Fonts)
|
||||
- Sizes: body: 16px, small: 14px
|
||||
- Weights: 400, 500, 600
|
||||
- Line Height: 1.6
|
||||
- Letter Spacing: 0
|
||||
|
||||
## Color Palette
|
||||
\```css
|
||||
:root {
|
||||
/* Primary Colors */
|
||||
--color-primary-900: #0A1628;
|
||||
--color-primary-600: #1E40AF;
|
||||
--color-primary-400: #60A5FA;
|
||||
|
||||
/* Accent Colors */
|
||||
--color-accent-500: #F59E0B;
|
||||
--color-accent-300: #FCD34D;
|
||||
|
||||
/* Neutral Colors */
|
||||
--color-neutral-900: #111827;
|
||||
--color-neutral-700: #374151;
|
||||
--color-neutral-500: #6B7280;
|
||||
--color-neutral-300: #D1D5DB;
|
||||
--color-neutral-100: #F3F4F6;
|
||||
|
||||
/* Background */
|
||||
--color-bg-primary: #FFFFFF;
|
||||
--color-bg-secondary: #F9FAFB;
|
||||
}
|
||||
\```
|
||||
|
||||
## Spacing System
|
||||
- Base: 4px
|
||||
- Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96px
|
||||
- Usage: Consistent 8px rhythm for most components
|
||||
|
||||
## Component Specifications
|
||||
|
||||
### Button (Primary)
|
||||
\```css
|
||||
.button-primary {
|
||||
background: var(--color-primary-600);
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: background 200ms ease-out;
|
||||
}
|
||||
.button-primary:hover {
|
||||
background: var(--color-primary-900);
|
||||
}
|
||||
\```
|
||||
|
||||
### Card
|
||||
\```css
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
|
||||
transition: box-shadow 200ms ease-out;
|
||||
}
|
||||
.card:hover {
|
||||
box-shadow: 0 10px 15px rgba(0,0,0,0.1);
|
||||
}
|
||||
\```
|
||||
|
||||
## Motion Guidelines
|
||||
- Transition timing: 200ms for micro-interactions, 400ms for page transitions
|
||||
- Easing: ease-out for entrances, ease-in for exits
|
||||
- Stagger delay: 50ms between sequential elements
|
||||
```
|
||||
|
||||
## Template 2: Competitive Analysis
|
||||
|
||||
```markdown
|
||||
# Competitive Design Analysis
|
||||
|
||||
## Competitors Analyzed
|
||||
1. Competitor A - [URL]
|
||||
2. Competitor B - [URL]
|
||||
3. Competitor C - [URL]
|
||||
|
||||
## Comparative Summary
|
||||
|
||||
| Aspect | Competitor A | Competitor B | Competitor C |
|
||||
|--------|--------------|--------------|--------------|
|
||||
| Aesthetic | Minimalist | Maximalist | Editorial |
|
||||
| Primary Color | #1E40AF | #7C3AED | #DC2626 |
|
||||
| Typography | Inter | Poppins | Playfair Display |
|
||||
| Layout | Grid-based | Asymmetric | Magazine |
|
||||
|
||||
## Common Patterns (Industry Standard)
|
||||
- All use sans-serif for body text
|
||||
- All prioritize mobile-first responsive design
|
||||
- All use card-based layouts for content
|
||||
- All feature hero sections with large imagery
|
||||
|
||||
## Differentiation Opportunities
|
||||
1. **Color Strategy**: Competitors use saturated colors; opportunity for muted, sophisticated palette
|
||||
2. **Typography**: No one uses display serifs; opportunity for elegant, high-end feel
|
||||
3. **Layout**: All symmetric; opportunity for asymmetric, dynamic composition
|
||||
|
||||
## Recommendations
|
||||
Based on analysis, recommend:
|
||||
- Aesthetic: Refined minimalism with editorial typography
|
||||
- Color: Muted earth tones with one bold accent
|
||||
- Layout: Asymmetric grid with generous white space
|
||||
- Differentiation: Unexpected typography hierarchy, subtle animations
|
||||
```
|
||||
|
||||
## Integration Workflow
|
||||
|
||||
### After Extraction
|
||||
|
||||
1. **Review & Validate**
|
||||
- Manually verify color codes with eyedropper tool
|
||||
- Cross-reference font predictions against Google Fonts
|
||||
- Check spacing values against browser dev tools
|
||||
|
||||
2. **Adapt & Customize**
|
||||
- Don't copy—adapt principles to your unique context
|
||||
- Maintain underlying logic, change expression
|
||||
- Example: Extract "generous white space" principle, apply with your colors
|
||||
|
||||
3. **Document Decisions**
|
||||
- Save extracted guidelines in project `docs/design-guidelines/`
|
||||
- Create design system spec from extraction
|
||||
- Reference when generating new assets
|
||||
|
||||
4. **Reference in Implementation**
|
||||
- Use extracted tokens when generating new assets with `asset-generation.md`
|
||||
- Apply extracted principles when analyzing your own designs with `visual-analysis.md`
|
||||
- Maintain consistency between inspiration and implementation
|
||||
|
||||
5. **Iterate & Refine**
|
||||
- Update guidelines as design evolves
|
||||
- Extract from multiple sources, synthesize learnings
|
||||
- Create your own unique voice from combined insights
|
||||
@@ -0,0 +1,127 @@
|
||||
# Extraction Prompt Templates
|
||||
|
||||
Complete prompt templates for design guideline extraction.
|
||||
|
||||
## Comprehensive Design Analysis Prompt
|
||||
|
||||
```
|
||||
Extract comprehensive design guidelines from this interface:
|
||||
|
||||
## Aesthetic Identification
|
||||
- Design Style: Identify the aesthetic movement (minimalism, brutalism, maximalism, glassmorphism, neo-brutalism, organic, luxury, editorial, etc.)
|
||||
- Overall Mood: Professional, playful, serious, energetic, calm, bold, refined
|
||||
- Differentiation Factor: What makes this design memorable and distinctive?
|
||||
|
||||
## Typography System
|
||||
- Display Font: Predict font family (favor Google Fonts: Playfair Display, Bebas Neue, DM Serif, Archivo Black, etc.). Provide 2-3 alternatives if uncertain.
|
||||
- Body Font: Identify or suggest similar alternatives
|
||||
- Font Sizes: Estimate in px for h1, h2, h3, body, small text
|
||||
- Font Weights: Used weights (300, 400, 500, 600, 700)
|
||||
- Line Heights: Estimate leading ratios
|
||||
- Letter Spacing: Tight, normal, or wide tracking
|
||||
|
||||
## Color System (CRITICAL)
|
||||
- Extract 8-12 distinct colors with accurate hex codes
|
||||
- Classify: Primary (1-2), Secondary (1-2), Accent (2-3), Neutral/Gray (3-5), Background (1-2)
|
||||
- Note color relationships and usage patterns
|
||||
- Identify gradients (provide start/end hex codes and direction)
|
||||
|
||||
## Spatial Composition
|
||||
- Layout Type: Grid-based, asymmetric, centered, multi-column, magazine-style
|
||||
- Grid System: Estimate column count and gutter widths
|
||||
- Spacing Scale: Identify spacing rhythm (4px, 8px, 16px, 24px, etc.)
|
||||
- White Space Strategy: Generous, tight, varied
|
||||
- Section Hierarchy: How content is organized and prioritized
|
||||
|
||||
## Visual Elements
|
||||
- Border Styles: Radius values (sharp, subtle rounded, fully rounded)
|
||||
- Shadows: Box-shadow characteristics (elevation, spread, blur)
|
||||
- Backgrounds: Solid, gradients, patterns, textures, images
|
||||
- Effects: Blur, overlays, transparency, grain, noise
|
||||
- Decorative Elements: Lines, shapes, illustrations, icons
|
||||
|
||||
## Component Patterns
|
||||
- Button Styles: Shape, size, states, hover effects
|
||||
- Card Design: Borders, shadows, padding, content structure
|
||||
- Navigation: Style, position, behavior
|
||||
- Forms: Input styles, validation, spacing
|
||||
- Interactive Elements: Hover states, transitions
|
||||
|
||||
## Motion & Animation (if video)
|
||||
- Transition Timing: Fast (100-200ms), medium (200-400ms), slow (400-600ms+)
|
||||
- Easing Functions: Linear, ease-out, ease-in, cubic-bezier specifics
|
||||
- Animation Types: Fade, slide, scale, rotate, stagger
|
||||
- Scroll Interactions: Parallax, reveal-on-scroll, sticky elements
|
||||
|
||||
## Accessibility Considerations
|
||||
- Color Contrast: Evaluate text/background combinations
|
||||
- Font Sizes: Minimum sizes used
|
||||
- Interactive Targets: Button/link sizes
|
||||
- Visual Hierarchy: Clear content prioritization
|
||||
|
||||
## Design Highlights
|
||||
- Top 3 standout design decisions
|
||||
- What makes this design effective
|
||||
- Potential improvements or considerations
|
||||
|
||||
Output as structured markdown for easy reference.
|
||||
```
|
||||
|
||||
## Multi-Screen System Extraction Prompt
|
||||
|
||||
```
|
||||
Analyze these multiple screens to extract the consistent design system:
|
||||
|
||||
For each screen:
|
||||
1. Identify consistent design tokens (colors, typography, spacing)
|
||||
2. Note variations and their rationale
|
||||
3. Extract reusable component patterns
|
||||
|
||||
Then synthesize:
|
||||
- Core design system: Consistent colors, fonts, spacing scales
|
||||
- Component library: Buttons, cards, navigation, forms
|
||||
- Layout patterns: Grid systems, responsive behavior
|
||||
- Visual language: Shared aesthetic principles
|
||||
- Design tokens: Create CSS variable recommendations
|
||||
|
||||
Provide as a unified design system specification.
|
||||
```
|
||||
|
||||
## Motion Design Extraction Prompt
|
||||
|
||||
```
|
||||
Analyze this video to extract motion design guidelines:
|
||||
|
||||
1. Transition Timing: Measure duration of key animations (in ms)
|
||||
2. Easing Curves: Describe acceleration/deceleration (ease-in, ease-out, spring)
|
||||
3. Animation Types: List all animation styles used
|
||||
4. Micro-interactions: Button hovers, form focus states, feedback
|
||||
5. Page Transitions: How screens change
|
||||
6. Scroll Interactions: Parallax, sticky headers, reveal animations
|
||||
7. Loading States: Skeleton screens, spinners, progressive reveals
|
||||
8. Stagger Effects: Sequential animation delays and patterns
|
||||
|
||||
Provide implementable specifications with timing values.
|
||||
```
|
||||
|
||||
## Competitive Analysis Prompt
|
||||
|
||||
```
|
||||
Comparative design analysis of 3 competitors:
|
||||
|
||||
For each competitor:
|
||||
1. Design style and aesthetic approach
|
||||
2. Color strategy and brand perception
|
||||
3. Typography choices and hierarchy
|
||||
4. Layout and information architecture
|
||||
5. Unique design elements
|
||||
6. Strengths and weaknesses
|
||||
|
||||
Synthesis:
|
||||
- Common industry patterns (what everyone does)
|
||||
- Differentiation opportunities (gaps to exploit)
|
||||
- Best practices observed (proven approaches)
|
||||
- Design recommendations (how to stand out)
|
||||
|
||||
Provide strategic design direction based on analysis.
|
||||
```
|
||||
@@ -0,0 +1,129 @@
|
||||
# Magic UI - Component Library Reference
|
||||
|
||||
> Beautifully designed landing page components built with React & Tailwind CSS. 80+ components.
|
||||
> Docs: https://magicui.design | Repo: https://github.com/magicuidesign/magicui
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npx magicui-cli add <component-name>
|
||||
```
|
||||
|
||||
## Component Categories
|
||||
|
||||
### Text Effects
|
||||
| Component | Description | Docs |
|
||||
|-----------|-------------|------|
|
||||
| Animated Gradient Text | Gradient transitions for text | [docs](https://magicui.design/docs/components/animated-gradient-text) |
|
||||
| Animated Shiny Text | Light glare shimmer on text | [docs](https://magicui.design/docs/components/animated-shiny-text) |
|
||||
| Aurora Text | Aurora borealis text effect | [docs](https://magicui.design/docs/components/aurora-text) |
|
||||
| Comic Text | Comic-style text animation | [docs](https://magicui.design/docs/components/comic-text) |
|
||||
| Hyper Text | Scramble-then-reveal animation | [docs](https://magicui.design/docs/components/hyper-text) |
|
||||
| Line Shadow Text | Moving line shadow on text | [docs](https://magicui.design/docs/components/line-shadow-text) |
|
||||
| Morphing Text | Dynamic text morphing | [docs](https://magicui.design/docs/components/morphing-text) |
|
||||
| Sparkles Text | Continuous sparkle animation | [docs](https://magicui.design/docs/components/sparkles-text) |
|
||||
| Spinning Text | Circular motion text | [docs](https://magicui.design/docs/components/spinning-text) |
|
||||
| Text Animate | Multiple text animation types | [docs](https://magicui.design/docs/components/text-animate) |
|
||||
| Text Reveal | Fade-in on scroll | [docs](https://magicui.design/docs/components/text-reveal) |
|
||||
| Typing Animation | Typewriter effect | [docs](https://magicui.design/docs/components/typing-animation) |
|
||||
| Video Text | Video background in text | [docs](https://magicui.design/docs/components/video-text) |
|
||||
| Word Rotate | Vertical word rotation | [docs](https://magicui.design/docs/components/word-rotate) |
|
||||
| Highlighter | Marker-stroke highlight | [docs](https://magicui.design/docs/components/highlighter) |
|
||||
|
||||
### Buttons
|
||||
| Component | Description | Docs |
|
||||
|-----------|-------------|------|
|
||||
| Shimmer Button | Light travels along perimeter | [docs](https://magicui.design/docs/components/shimmer-button) |
|
||||
| Shiny Button | Dynamic shiny effect | [docs](https://magicui.design/docs/components/shiny-button) |
|
||||
| Pulsating Button | Attention-capturing pulse | [docs](https://magicui.design/docs/components/pulsating-button) |
|
||||
| Rainbow Button | Rainbow color animation | [docs](https://magicui.design/docs/components/rainbow-button) |
|
||||
| Ripple Button | Click ripple effect | [docs](https://magicui.design/docs/components/ripple-button) |
|
||||
| Interactive Hover Button | Hover interaction | [docs](https://magicui.design/docs/components/interactive-hover-button) |
|
||||
|
||||
### Backgrounds & Patterns
|
||||
| Component | Description | Docs |
|
||||
|-----------|-------------|------|
|
||||
| Grid Pattern | SVG grid, customizable | [docs](https://magicui.design/docs/components/grid-pattern) |
|
||||
| Animated Grid Pattern | Animated SVG grid | [docs](https://magicui.design/docs/components/animated-grid-pattern) |
|
||||
| Interactive Grid Pattern | Mouse-interactive grid | [docs](https://magicui.design/docs/components/interactive-grid-pattern) |
|
||||
| Dot Pattern | SVG dots background | [docs](https://magicui.design/docs/components/dot-pattern) |
|
||||
| Striped Pattern | SVG stripes background | [docs](https://magicui.design/docs/components/striped-pattern) |
|
||||
| Flickering Grid | Flickering cells grid | [docs](https://magicui.design/docs/components/flickering-grid) |
|
||||
| Retro Grid | Animated scrolling retro grid | [docs](https://magicui.design/docs/components/retro-grid) |
|
||||
| Warp Background | Time-warping effect | [docs](https://magicui.design/docs/components/warp-background) |
|
||||
| Particles | Interactive particle system | [docs](https://magicui.design/docs/components/particles) |
|
||||
| Light Rays | Animated light rays from above | [docs](https://magicui.design/docs/components/light-rays) |
|
||||
|
||||
### Cards & Borders
|
||||
| Component | Description | Docs |
|
||||
|-----------|-------------|------|
|
||||
| Magic Card | Spotlight follows cursor | [docs](https://magicui.design/docs/components/magic-card) |
|
||||
| Neon Gradient Card | Neon glow effect | [docs](https://magicui.design/docs/components/neon-gradient-card) |
|
||||
| Border Beam | Animated light along border | [docs](https://magicui.design/docs/components/border-beam) |
|
||||
| Shine Border | Animated shine border | [docs](https://magicui.design/docs/components/shine-border) |
|
||||
|
||||
### Layout & Navigation
|
||||
| Component | Description | Docs |
|
||||
|-----------|-------------|------|
|
||||
| Bento Grid | Feature showcase grid | [docs](https://magicui.design/docs/components/bento-grid) |
|
||||
| Dock | macOS-style dock | [docs](https://magicui.design/docs/components/dock) |
|
||||
| Marquee | Infinite scroll (text/images) | [docs](https://magicui.design/docs/components/marquee) |
|
||||
| File Tree | Directory structure display | [docs](https://magicui.design/docs/components/file-tree) |
|
||||
| Terminal | Terminal mockup | [docs](https://magicui.design/docs/components/terminal) |
|
||||
|
||||
### Animated Effects
|
||||
| Component | Description | Docs |
|
||||
|-----------|-------------|------|
|
||||
| Animated Beam | Light beam along path | [docs](https://magicui.design/docs/components/animated-beam) |
|
||||
| Animated List | Sequential item animation | [docs](https://magicui.design/docs/components/animated-list) |
|
||||
| Blur Fade | Smooth blur fade-in/out | [docs](https://magicui.design/docs/components/blur-fade) |
|
||||
| Confetti | Celebration animations | [docs](https://magicui.design/docs/components/confetti) |
|
||||
| Cool Mode | Fun click particle effect | [docs](https://magicui.design/docs/components/cool-mode) |
|
||||
| Meteors | Meteor shower effect | [docs](https://magicui.design/docs/components/meteors) |
|
||||
| Number Ticker | Count up/down animation | [docs](https://magicui.design/docs/components/number-ticker) |
|
||||
| Orbiting Circles | Orbital motion circles | [docs](https://magicui.design/docs/components/orbiting-circles) |
|
||||
| Ripple | Background ripple emphasis | [docs](https://magicui.design/docs/components/ripple) |
|
||||
| Scroll Based Velocity | Speed-reactive scroll text | [docs](https://magicui.design/docs/components/scroll-based-velocity) |
|
||||
| Scroll Progress | Page scroll indicator | [docs](https://magicui.design/docs/components/scroll-progress) |
|
||||
| Progressive Blur | Blur gradient for scroll | [docs](https://magicui.design/docs/components/progressive-blur) |
|
||||
| Smooth Cursor | Physics-based cursor | [docs](https://magicui.design/docs/components/smooth-cursor) |
|
||||
| Pointer | Hover pointer indicator | [docs](https://magicui.design/docs/components/pointer) |
|
||||
|
||||
### Device Mockups
|
||||
| Component | Description | Docs |
|
||||
|-----------|-------------|------|
|
||||
| Android | Android device mockup | [docs](https://magicui.design/docs/components/android) |
|
||||
| iPhone | iPhone mockup | [docs](https://magicui.design/docs/components/iphone) |
|
||||
| Safari | Safari browser mockup | [docs](https://magicui.design/docs/components/safari) |
|
||||
|
||||
### Data Display
|
||||
| Component | Description | Docs |
|
||||
|-----------|-------------|------|
|
||||
| Globe | WebGL interactive globe | [docs](https://magicui.design/docs/components/globe) |
|
||||
| Icon Cloud | 3D interactive tag cloud | [docs](https://magicui.design/docs/components/icon-cloud) |
|
||||
| Animated Circular Progress | Circular gauge | [docs](https://magicui.design/docs/components/animated-circular-progress-bar) |
|
||||
| Dotted Map | Map with dot markers | [docs](https://magicui.design/docs/components/dotted-map) |
|
||||
| Pixel Image | Pixelated image effect | [docs](https://magicui.design/docs/components/pixel-image) |
|
||||
| Lens | Zoom into images/videos | [docs](https://magicui.design/docs/components/lens) |
|
||||
|
||||
### Social & Media
|
||||
| Component | Description | Docs |
|
||||
|-----------|-------------|------|
|
||||
| Tweet Card | Display tweet embed | [docs](https://magicui.design/docs/components/tweet-card) |
|
||||
| Client Tweet Card | Client-side tweet card | [docs](https://magicui.design/docs/components/client-tweet-card) |
|
||||
| Avatar Circles | Overlapping avatar stack | [docs](https://magicui.design/docs/components/avatar-circles) |
|
||||
| Hero Video Dialog | Video dialog for hero | [docs](https://magicui.design/docs/components/hero-video-dialog) |
|
||||
| Code Comparison | Side-by-side code diff | [docs](https://magicui.design/docs/components/code-comparison) |
|
||||
| Theme Toggler | Animated theme switch | [docs](https://magicui.design/docs/components/animated-theme-toggler) |
|
||||
|
||||
## Usage Pattern
|
||||
|
||||
For docs lookup, use `docs-seeker` skill with Context7:
|
||||
```
|
||||
context7 query: "magicui <component-name> usage example"
|
||||
```
|
||||
|
||||
For source code examples, fetch from GitHub:
|
||||
```
|
||||
https://github.com/magicuidesign/magicui/blob/main/example/<component>-demo.tsx
|
||||
```
|
||||
@@ -0,0 +1,169 @@
|
||||
# Performance Guardrails
|
||||
|
||||
Rules for maintaining smooth animation and rendering performance. These prevent the most common causes of mobile frame drops and layout thrashing.
|
||||
|
||||
---
|
||||
|
||||
## GPU-Safe Animations
|
||||
|
||||
**Only animate these properties:**
|
||||
- `transform` (translate, scale, rotate)
|
||||
- `opacity`
|
||||
|
||||
**Never animate:**
|
||||
- `top`, `left`, `right`, `bottom` — triggers layout reflow
|
||||
- `width`, `height` — triggers layout + paint
|
||||
- `margin`, `padding` — triggers layout
|
||||
- `background-color` — triggers paint (acceptable for color transitions, but avoid on frequently animating elements)
|
||||
|
||||
**Why:** CSS `transform` and `opacity` are composited on the GPU and don't trigger layout or paint. All other properties cause the browser to recalculate layout on every frame — catastrophic on mobile.
|
||||
|
||||
```css
|
||||
/* Good */
|
||||
.card { transform: translateY(0); transition: transform 300ms; }
|
||||
.card:hover { transform: translateY(-4px); }
|
||||
|
||||
/* Bad */
|
||||
.card { top: 0; transition: top 300ms; }
|
||||
.card:hover { top: -4px; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Blur Constraints
|
||||
|
||||
**Apply `backdrop-blur` only to:**
|
||||
- Fixed-position elements (sticky navbars, overlays)
|
||||
- Modals and dialogs
|
||||
- Elements that don't scroll with content
|
||||
|
||||
**Never apply blur to:**
|
||||
- Scrolling containers
|
||||
- Large content areas
|
||||
- Elements inside `overflow: auto/scroll` parents
|
||||
|
||||
**Why:** `backdrop-blur` triggers continuous GPU compositing on every scroll frame. On a scrolling container with 20+ cards, this causes severe frame drops on mid-range and low-end mobile.
|
||||
|
||||
```css
|
||||
/* Good — fixed nav */
|
||||
.navbar { position: fixed; backdrop-filter: blur(12px); }
|
||||
|
||||
/* Bad — scrolling card list */
|
||||
.card-list .card { backdrop-filter: blur(8px); } /* kills mobile perf */
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Grain and Noise Overlays
|
||||
|
||||
**Correct implementation:**
|
||||
```css
|
||||
/* Fixed, pointer-events-none pseudo-element only */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 50;
|
||||
pointer-events: none;
|
||||
background-image: url("data:image/svg+xml,..."); /* or CSS noise */
|
||||
opacity: 0.03;
|
||||
}
|
||||
```
|
||||
|
||||
**Never attach grain/noise to:**
|
||||
- Scrolling containers
|
||||
- Individual cards or sections
|
||||
- Any element with `position: relative` inside a scroll context
|
||||
|
||||
---
|
||||
|
||||
## Z-Index Discipline
|
||||
|
||||
**Use systemic layers only. Establish a scale in your theme/variables:**
|
||||
|
||||
```css
|
||||
:root {
|
||||
--z-base: 0;
|
||||
--z-card: 10;
|
||||
--z-sticky: 100;
|
||||
--z-overlay: 200;
|
||||
--z-modal: 300;
|
||||
--z-tooltip: 400;
|
||||
--z-notification: 500;
|
||||
}
|
||||
```
|
||||
|
||||
**Never:**
|
||||
- Use arbitrary values like `z-[9999]` or `z-50` unprompted
|
||||
- Stack z-indexes without a documented reason
|
||||
- Use z-index to fix stacking without understanding the stacking context
|
||||
|
||||
---
|
||||
|
||||
## Framer Motion Performance
|
||||
|
||||
**Use `useMotionValue` + `useTransform` for continuous animations:**
|
||||
```jsx
|
||||
// Good — runs outside React render cycle
|
||||
const mouseX = useMotionValue(0);
|
||||
const rotateY = useTransform(mouseX, [-300, 300], [-15, 15]);
|
||||
|
||||
// Bad — triggers re-render on every mouse move
|
||||
const [rotation, setRotation] = useState(0);
|
||||
```
|
||||
|
||||
**For perpetual/infinite animations:**
|
||||
- Wrap in `React.memo` to prevent parent re-renders
|
||||
- Extract as isolated leaf client components
|
||||
- Use `<AnimatePresence>` for enter/exit — don't conditionally render without it
|
||||
|
||||
**For scroll-driven reveals:**
|
||||
- Use `whileInView` or `IntersectionObserver`
|
||||
- Never use `window.addEventListener('scroll')` — causes continuous reflows
|
||||
|
||||
**For staggered children:**
|
||||
- Parent `variants` and children MUST be in the same Client Component tree
|
||||
- If data is async, pass it as props into a centralized parent motion wrapper
|
||||
|
||||
---
|
||||
|
||||
## RSC Safety (Next.js)
|
||||
|
||||
- Global state (Context, providers) works **only** in Client Components
|
||||
- Wrap providers in a `"use client"` component
|
||||
- If a section uses Framer Motion or any interactive hook, extract it as an isolated leaf component with `'use client'` at the top
|
||||
- Server Components render static layout only
|
||||
|
||||
---
|
||||
|
||||
## Mobile Override Rules
|
||||
|
||||
For any asymmetric or complex layout, apply aggressive mobile fallback below 768px:
|
||||
|
||||
```jsx
|
||||
// All asymmetric layouts collapse to single column
|
||||
<div className="grid grid-cols-1 md:grid-cols-[2fr_1fr_1fr] gap-6">
|
||||
```
|
||||
|
||||
- Remove all rotations, negative margins, and overlaps below `md:`
|
||||
- Replace `h-screen` with `min-h-[100dvh]` — prevents iOS Safari viewport jumping
|
||||
- Never use `overflow: hidden` on `html`/`body` without testing on actual mobile
|
||||
- Test horizontal scroll — asymmetric layouts often cause unintentional x-overflow on small screens
|
||||
|
||||
---
|
||||
|
||||
## `will-change` Guidance
|
||||
|
||||
Use sparingly. `will-change: transform` tells the browser to promote the element to its own GPU layer:
|
||||
|
||||
- Apply only to elements that are **actively animating**
|
||||
- Remove after animation completes (or use `:hover` scoping)
|
||||
- Never apply globally — creates excessive GPU memory pressure
|
||||
|
||||
```css
|
||||
/* Good — scoped to hover state */
|
||||
.card:hover { will-change: transform; }
|
||||
|
||||
/* Bad — always promoted */
|
||||
.card { will-change: transform; }
|
||||
```
|
||||
@@ -0,0 +1,93 @@
|
||||
# Premium Design Patterns: Creative Arsenal
|
||||
|
||||
Pull from this library to avoid defaulting to generic UI. These patterns make interfaces visually striking and memorable.
|
||||
|
||||
> Framework note: Examples mention Framer Motion as an option for JS-driven patterns. GSAP/ThreeJS are alternatives for scroll storytelling. Never mix both in the same component tree.
|
||||
|
||||
---
|
||||
|
||||
## Vibe Archetypes (Pick One Before Designing)
|
||||
|
||||
Before writing code, commit to a vibe:
|
||||
|
||||
1. **Ethereal Glass** (SaaS / AI / Tech) — Deep OLED black `#050505`, radial mesh gradient orbs in background, vantablack cards with heavy `backdrop-blur-2xl`, wide geometric Grotesk typography
|
||||
2. **Editorial Luxury** (Lifestyle / Real Estate / Agency) — Warm creams `#FDFBF7`, muted sage, or deep espresso. Variable serif for massive headings, subtle CSS noise/film-grain overlay for a physical paper feel
|
||||
3. **Soft Structuralism** (Consumer / Health / Portfolio) — Silver-grey or pure white background, massive bold Grotesk, airy floating components with highly diffused ambient shadows
|
||||
|
||||
---
|
||||
|
||||
## Navigation
|
||||
|
||||
- **Mac Dock Magnification** — Nav icons scale fluidly on hover with spring physics
|
||||
- **Magnetic Button** — Buttons physically pull toward the cursor using `useMotionValue` + `useTransform`
|
||||
- **Gooey Menu** — Sub-items detach from main button like viscous liquid
|
||||
- **Dynamic Island** — Pill-shaped component that morphs to show status/alerts
|
||||
- **Fluid Island Nav** — Floating glass pill detached from top (`mt-6`, `mx-auto`, `rounded-full`). On mobile: hamburger lines fluidly rotate to form an X
|
||||
- **Contextual Radial Menu** — Circular menu expanding at click coordinates
|
||||
- **Mega Menu Reveal** — Full-screen dropdowns that stagger-fade complex content
|
||||
- **Floating Speed Dial** — FAB that springs into a curved line of secondary actions
|
||||
|
||||
## Layout and Grids
|
||||
|
||||
- **Asymmetrical Bento** — Masonry-like CSS Grid with varying card sizes (`col-span-8 row-span-2` next to stacked `col-span-4` cards). Falls back to `grid-cols-1` on mobile
|
||||
- **Z-Axis Cascade** — Elements stacked like physical cards with slight overlap and varying depths. Remove rotations below 768px
|
||||
- **Editorial Split** — Massive typography on left half, scrollable image pills or staggered cards on right
|
||||
- **Split Screen Scroll** — Two halves of the screen sliding in opposite directions on scroll
|
||||
- **Curtain Reveal** — Hero section parting in the middle like a curtain on scroll
|
||||
- **Masonry Layout** — Staggered grid without fixed row heights (Pinterest-style)
|
||||
- **Chroma Grid** — Grid borders or tiles with subtle, continuously animating color gradients
|
||||
|
||||
## Cards and Containers
|
||||
|
||||
- **Double-Bezel (Doppelrand)** — Cards that look like machined hardware: outer shell (`bg-black/5`, `ring-1 ring-black/5`, `p-1.5`, `rounded-[2rem]`) wrapping an inner core with its own highlight and concentric radius (`rounded-[calc(2rem-0.375rem)]`)
|
||||
- **Parallax Tilt Card** — 3D-tilting card tracking mouse coordinates
|
||||
- **Spotlight Border Card** — Card borders that illuminate dynamically under the cursor
|
||||
- **Glassmorphism Panel** — True frosted glass: `backdrop-blur` + 1px inner border (`border-white/10`) + inner shadow (`shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]`) to simulate edge refraction
|
||||
- **Holographic Foil Card** — Iridescent rainbow reflections shifting on hover
|
||||
- **Tinder Swipe Stack** — Physical stack of cards the user can swipe away
|
||||
- **Morphing Modal** — Button that seamlessly expands into a full-screen dialog
|
||||
|
||||
## Scroll Animations
|
||||
|
||||
- **Sticky Scroll Stack** — Cards that stick to top and physically stack over each other during scroll
|
||||
- **Horizontal Scroll Hijack** — Vertical scroll translates into smooth horizontal gallery pan
|
||||
- **Zoom Parallax** — Central background image zooming in/out seamlessly as you scroll
|
||||
- **Scroll Progress Path** — SVG lines that draw themselves as user scrolls
|
||||
- **Staggered Entry** — Elements cascade in with slight delays, Y-translation + opacity fade. Use `staggerChildren` in Framer Motion or CSS `animation-delay: calc(var(--index) * 100ms)`. Never mount everything at once
|
||||
|
||||
## Galleries and Media
|
||||
|
||||
- **Coverflow Carousel** — 3D carousel with center focused, edges angled back
|
||||
- **Drag-to-Pan Grid** — Boundless grid freely draggable in any direction
|
||||
- **Accordion Image Slider** — Narrow strips that expand fully on hover
|
||||
- **Hover Image Trail** — Mouse leaves a trail of popping/fading images
|
||||
- **Glitch Effect Image** — Brief RGB-channel shift digital distortion on hover
|
||||
- **Dome Gallery** — 3D gallery with panoramic dome feel
|
||||
|
||||
## Typography and Text
|
||||
|
||||
- **Kinetic Marquee** — Endless text bands that reverse direction or speed up on scroll
|
||||
- **Text Mask Reveal** — Massive typography as a transparent window to video background
|
||||
- **Text Scramble Effect** — Matrix-style character decoding on load or hover
|
||||
- **Variable Font Animation** — Interpolate weight/width on scroll or hover for text that feels alive
|
||||
- **Outlined-to-Fill Transition** — Text starts as stroke outline, fills with color on scroll entry
|
||||
- **Circular Text Path** — Text curved along a spinning circular path
|
||||
- **Kinetic Typography Grid** — Grid of letters that dodge or rotate away from cursor
|
||||
|
||||
## Micro-Interactions
|
||||
|
||||
- **Button-in-Button Trailing Icon** — Arrow icon nested inside its own circular wrapper (`w-8 h-8 rounded-full bg-black/5`) flush with button's inner right padding. Never a naked icon next to text
|
||||
- **Particle Explosion Button** — CTAs shatter into particles on success
|
||||
- **Directional Hover-Aware Button** — Hover fill enters from the exact side the mouse came from
|
||||
- **Ripple Click Effect** — Visual waves rippling precisely from click coordinates
|
||||
- **Skeleton Shimmer** — Shifting light reflections across placeholder boxes. Match layout shape exactly
|
||||
- **Tactile Press Feedback** — On `:active`, use `scale(0.98)` or `translateY(1px)` to simulate physical push
|
||||
- **Eyebrow Tags** — Microscopic pill badge before major headings (`rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.2em]`)
|
||||
|
||||
## Surfaces and Effects
|
||||
|
||||
- **Grain/Noise Overlay** — Fixed `pointer-events-none` pseudo-element at `z-50`. Never on scrolling containers
|
||||
- **Colored Tinted Shadows** — Shadows carry background hue instead of generic black
|
||||
- **Mesh Gradient Background** — Organic, lava-lamp-like animated color blobs
|
||||
- **Lens Blur Depth** — Dynamic focus blurring background layers to highlight foreground action
|
||||
- **Animated SVG Line Drawing** — Vectors draw their own contours in real-time
|
||||
@@ -0,0 +1,114 @@
|
||||
# Redesign Audit Checklist
|
||||
|
||||
Use when upgrading an existing project. Follow Scan → Diagnose → Fix in order.
|
||||
|
||||
## Workflow
|
||||
|
||||
1. **Scan** — Read the codebase. Identify framework, styling method (Tailwind, vanilla CSS, styled-components), and current design patterns.
|
||||
2. **Diagnose** — Run through each category below. List every generic pattern, weak point, and missing state.
|
||||
3. **Fix** — Apply targeted upgrades working with the existing stack. Do not rewrite from scratch.
|
||||
|
||||
**Rules:**
|
||||
- Work with the existing tech stack. Do not migrate frameworks.
|
||||
- Do not break existing functionality. Test after every change.
|
||||
- Check `package.json` before adding any new dependency.
|
||||
- Keep changes focused and reviewable — small targeted improvements over big rewrites.
|
||||
|
||||
---
|
||||
|
||||
## Audit Categories
|
||||
|
||||
### 1. Typography
|
||||
- [ ] Browser default fonts or Inter everywhere → replace with `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`
|
||||
- [ ] Headlines lack presence → tighten tracking, reduce line-height, increase display size
|
||||
- [ ] Body text too wide → limit to ~65ch, increase line-height
|
||||
- [ ] Only 400 + 700 weights → introduce 500/600 for subtler hierarchy
|
||||
- [ ] Numbers in proportional font → use monospace or `font-variant-numeric: tabular-nums`
|
||||
- [ ] All-caps subheaders everywhere → try lowercase italic or sentence case
|
||||
- [ ] Orphaned last words → fix with `text-wrap: balance` or `text-wrap: pretty`
|
||||
- [ ] Serif fonts on dashboard UI → use high-end sans-serif pairs only
|
||||
|
||||
### 2. Color and Surfaces
|
||||
- [ ] Pure `#000000` → replace with off-black or tinted dark
|
||||
- [ ] Oversaturated accents → desaturate below 80%
|
||||
- [ ] More than one accent color → reduce to one
|
||||
- [ ] Mixing warm and cool grays → pick one family, stay consistent
|
||||
- [ ] Purple/blue AI gradient aesthetic → replace with neutral base + singular accent
|
||||
- [ ] Generic `box-shadow` → tint shadows to background hue
|
||||
- [ ] Flat surfaces with zero texture → add subtle noise/grain overlay
|
||||
- [ ] Perfectly even linear gradients → use radial, mesh, or noise-overlaid gradients
|
||||
- [ ] Random dark section in light-mode page (or vice versa) → commit to consistent tone or use slightly darker shade of same palette
|
||||
|
||||
### 3. Layout
|
||||
- [ ] Everything centered and symmetrical → break with offset margins, mixed aspect ratios
|
||||
- [ ] Three equal card columns as feature row → use 2-col zig-zag, asymmetric grid, or horizontal scroll
|
||||
- [ ] `h-screen` / `height: 100vh` → replace with `min-height: 100dvh`
|
||||
- [ ] Complex flexbox `calc()` math → replace with CSS Grid
|
||||
- [ ] No max-width container → add 1200-1440px constraint with auto margins
|
||||
- [ ] Uniform border-radius everywhere → vary inner/outer elements
|
||||
- [ ] No overlap or depth → use negative margins for layering
|
||||
- [ ] Dashboard always has left sidebar → consider top nav, command menu, or collapsible panel
|
||||
- [ ] Buttons not bottom-aligned in card groups → pin CTAs to card bottom
|
||||
- [ ] Missing whitespace on marketing pages → double spacing, let design breathe
|
||||
|
||||
### 4. Interactivity and States
|
||||
- [ ] No hover states on buttons → add background shift, scale, or translate
|
||||
- [ ] No active/pressed feedback → add `scale(0.98)` or `translateY(1px)` on press
|
||||
- [ ] Instant transitions → add 200-300ms smooth transitions
|
||||
- [ ] Missing focus ring → visible focus indicator (accessibility requirement)
|
||||
- [ ] Generic circular spinner → replace with skeleton loader matching layout shape
|
||||
- [ ] No empty state → design a composed "getting started" view
|
||||
- [ ] No error state → inline error messages on forms (no `window.alert()`)
|
||||
- [ ] Dead links (`href="#"`) → link real destinations or visually disable
|
||||
- [ ] No current-page indicator in nav → style active link distinctly
|
||||
- [ ] Scroll jumping on anchor links → add `scroll-behavior: smooth`
|
||||
- [ ] Animations using `top`/`left`/`width`/`height` → switch to `transform` + `opacity`
|
||||
|
||||
### 5. Content
|
||||
- [ ] Generic placeholder names → use diverse, realistic names
|
||||
- [ ] Round fake numbers → use organic messy data
|
||||
- [ ] AI copywriting clichés → plain, specific language
|
||||
- [ ] Lorem Ipsum → real draft copy
|
||||
- [ ] Exclamation marks in success states → remove
|
||||
- [ ] Title Case On Every Header → use sentence case
|
||||
- [ ] Same avatar for multiple users → unique assets per person
|
||||
- [ ] Blog post dates all identical → randomize
|
||||
|
||||
### 6. Components and Code
|
||||
- [ ] Generic card (border + shadow + white bg) at high density → use spacing/dividers
|
||||
- [ ] Always one filled + one ghost button → add text links, reduce visual noise
|
||||
- [ ] Lucide/Feather icons only → try Phosphor or Heroicons for differentiation
|
||||
- [ ] Cliché icon metaphors (rocketship, shield) → less obvious alternatives
|
||||
- [ ] Div soup → use semantic HTML: `nav`, `main`, `article`, `aside`, `section`
|
||||
- [ ] Inline styles mixed with CSS classes → move all styling to the project's system
|
||||
- [ ] Arbitrary z-index values (`z-[9999]`) → establish a clean z-index scale
|
||||
- [ ] Missing alt text on meaningful images → describe content for screen readers
|
||||
- [ ] Missing meta tags → add `title`, `description`, `og:image`
|
||||
|
||||
---
|
||||
|
||||
## Fix Priority Order
|
||||
|
||||
Apply in this order for maximum impact with minimum risk:
|
||||
|
||||
1. **Font swap** — biggest instant improvement, lowest risk
|
||||
2. **Color cleanup** — remove clashing or oversaturated colors
|
||||
3. **Hover and active states** — makes interface feel alive
|
||||
4. **Layout and spacing** — proper grid, max-width, consistent padding
|
||||
5. **Replace generic components** — swap cliché patterns for modern alternatives
|
||||
6. **Add loading, empty, error states** — makes it feel finished
|
||||
7. **Polish typography scale** — the premium final touch
|
||||
|
||||
---
|
||||
|
||||
## Strategic Omissions (What AI Typically Forgets)
|
||||
|
||||
These are rarely in AI-generated output. Check explicitly:
|
||||
|
||||
- **No legal links** → add privacy policy + terms in footer
|
||||
- **No "back" navigation** → every page needs a way back
|
||||
- **No custom 404 page** → design a helpful branded "not found" experience
|
||||
- **No form validation** → client-side validation for emails, required fields, formats
|
||||
- **No "skip to content" link** → essential for keyboard users
|
||||
- **No favicon** → always include a branded favicon
|
||||
- **No social sharing meta** → `og:image`, `og:title`, `twitter:card`
|
||||
@@ -0,0 +1,119 @@
|
||||
# Accessibility Checks
|
||||
|
||||
WCAG compliance and accessibility guidelines for generated assets.
|
||||
|
||||
## Text Overlay Readability
|
||||
|
||||
### Color Contrast Ratios
|
||||
- **WCAG AA**: 4.5:1 for normal text, 3:1 for large text
|
||||
- **WCAG AAA**: 7:1 for normal text, 4.5:1 for large text
|
||||
|
||||
### Testing Requirements
|
||||
- Test across image variations
|
||||
- Consider adding gradient overlays in code
|
||||
- Add text shadows for increased legibility
|
||||
|
||||
### Alt Text Guidelines
|
||||
- Describe the asset's purpose and mood
|
||||
- Don't repeat visible text
|
||||
- Keep concise (150 characters max)
|
||||
|
||||
## CSS Techniques for Accessibility
|
||||
|
||||
### Gradient Overlay for Text Readability
|
||||
```css
|
||||
.hero {
|
||||
position: relative;
|
||||
background-image: url('hero.webp');
|
||||
}
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0,0,0,0.3) 0%,
|
||||
rgba(0,0,0,0.6) 100%
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Text Shadow for Contrast
|
||||
```css
|
||||
.hero-text {
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
```
|
||||
|
||||
### Ensure Minimum Contrast
|
||||
```css
|
||||
.hero-cta {
|
||||
background: var(--color-primary-600);
|
||||
color: white; /* Ensure 4.5:1 contrast */
|
||||
}
|
||||
```
|
||||
|
||||
## Integration Testing Analysis
|
||||
|
||||
Analyze how asset works with UI elements:
|
||||
|
||||
```bash
|
||||
python scripts/gemini_batch_process.py \
|
||||
--files docs/assets/hero-with-text-overlay.png \
|
||||
--task analyze \
|
||||
--prompt "Analyze this design asset with UI elements overlaid:
|
||||
|
||||
1. Text Readability: Can all text be read clearly?
|
||||
2. Contrast Issues: Identify any WCAG violations
|
||||
3. Visual Hierarchy: Do buttons and CTAs stand out?
|
||||
4. Spacing Problems: Any crowding or poor breathing room?
|
||||
5. Responsive Concerns: Will this work on mobile at 9:16?
|
||||
|
||||
Provide specific recommendations for adjustments." \
|
||||
--output docs/assets/integration-analysis.md \
|
||||
--model gemini-2.5-flash
|
||||
```
|
||||
|
||||
## Next.js Integration Example
|
||||
|
||||
```tsx
|
||||
// app/components/Hero.tsx
|
||||
import Image from 'next/image'
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<section className="relative h-screen">
|
||||
{/* Background image with optimization */}
|
||||
<Image
|
||||
src="/assets/hero-desktop.webp"
|
||||
alt="Minimalist desert landscape"
|
||||
fill
|
||||
priority
|
||||
quality={85}
|
||||
className="object-cover"
|
||||
sizes="100vw"
|
||||
/>
|
||||
|
||||
{/* Gradient overlay for text readability */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black/30 to-black/60" />
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 flex h-full items-center justify-center">
|
||||
<h1 className="text-6xl font-bold text-white drop-shadow-lg">
|
||||
Your Headline
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Common Issues
|
||||
|
||||
### Issue: Poor Text Overlay Readability
|
||||
**Symptoms**: Text hard to read over generated background
|
||||
**Solutions**:
|
||||
- Add CSS gradient overlay (see above)
|
||||
- Regenerate with "clean composition for text overlay" in prompt
|
||||
- Use darker/lighter areas strategically
|
||||
- Add text shadows or backdrop-blur
|
||||
@@ -0,0 +1,97 @@
|
||||
# Best Practices Checklists
|
||||
|
||||
Quality gates and checklists for asset generation workflows.
|
||||
|
||||
## Asset Generation Workflow
|
||||
|
||||
### Before Generating Assets
|
||||
- [ ] Defined clear aesthetic direction from design brief
|
||||
- [ ] Extracted color palette and typography character
|
||||
- [ ] Identified asset purpose and integration context
|
||||
- [ ] Considered accessibility and text overlay needs
|
||||
|
||||
### During Generation
|
||||
- [ ] Crafted design-driven, contextual prompt
|
||||
- [ ] Selected appropriate model and quality level
|
||||
- [ ] Specified correct aspect ratio for use case
|
||||
- [ ] Generated multiple variations if exploring
|
||||
|
||||
### After Generation
|
||||
- [ ] Ran comprehensive visual analysis (score ≥ 7/10)
|
||||
- [ ] Extracted exact color palette with hex codes
|
||||
- [ ] Compared multiple variations and selected best
|
||||
- [ ] Tested with overlaid text/UI elements
|
||||
- [ ] Optimized file size for web performance
|
||||
- [ ] Created responsive variants if needed
|
||||
- [ ] Documented asset usage and guidelines
|
||||
|
||||
## Design Guideline Extraction Workflow
|
||||
|
||||
### When Analyzing Existing Designs
|
||||
- [ ] Captured high-quality reference screenshots
|
||||
- [ ] Ran comprehensive design analysis with structured prompts
|
||||
- [ ] Extracted specific values (hex codes, px sizes, ms timings)
|
||||
- [ ] Analyzed multiple screens for pattern consistency
|
||||
- [ ] Validated font predictions against Google Fonts
|
||||
- [ ] Documented findings in actionable format
|
||||
- [ ] Created CSS variable specifications
|
||||
- [ ] Saved extracted guidelines in project docs/
|
||||
|
||||
## Quality Gates
|
||||
|
||||
### Never Proceed to Integration Without
|
||||
- [ ] Visual analysis score ≥ 7/10
|
||||
- [ ] Extracted color palette documented
|
||||
- [ ] Accessibility contrast checks passed
|
||||
- [ ] Responsive variants generated
|
||||
- [ ] File optimization completed
|
||||
- [ ] Asset usage guidelines documented
|
||||
|
||||
## Final Checklist
|
||||
|
||||
Before considering any asset "done":
|
||||
- [ ] Generated with design-driven prompt (not generic)
|
||||
- [ ] Analyzed and scored ≥ 7/10
|
||||
- [ ] Extracted color palette for CSS implementation
|
||||
- [ ] Tested with UI overlays for readability
|
||||
- [ ] Optimized for web (WebP/JPEG)
|
||||
- [ ] Created responsive variants
|
||||
- [ ] Documented usage guidelines
|
||||
- [ ] Accessibility checks passed (contrast, alt text)
|
||||
- [ ] Integrated into frontend with proper optimization
|
||||
|
||||
## Common Issues & Solutions
|
||||
|
||||
### Issue 1: Generated Asset Too Generic
|
||||
**Symptoms**: Asset looks like stock photography, lacks design character
|
||||
**Solution**:
|
||||
- Refine prompt with specific aesthetic movements
|
||||
- Reference artists/designers/styles explicitly
|
||||
- Use more distinctive color directions
|
||||
- Add contextual details that make it unique
|
||||
|
||||
### Issue 2: Inconsistent Design Language
|
||||
**Symptoms**: Each generated asset feels unrelated
|
||||
**Solution**:
|
||||
- Extract and document design system from first successful generation
|
||||
- Reuse color palette keywords in all subsequent prompts
|
||||
- Maintain consistent aesthetic direction across generations
|
||||
- Reference previous successful assets in new prompts
|
||||
|
||||
### Issue 3: Low Analysis Scores
|
||||
**Symptoms**: Consistently getting scores < 7/10
|
||||
**Solutions**:
|
||||
- Review evaluation criteria—are they realistic?
|
||||
- Study high-scoring designs for patterns
|
||||
- Use design extraction on inspiration to learn what works
|
||||
- Iterate prompt with specific improvements from analysis
|
||||
|
||||
### Issue 4: Slow Generation Times
|
||||
**Symptoms**: Waiting too long for results
|
||||
**Solutions**:
|
||||
- Use fast model for exploration phase
|
||||
- Generate in batches rather than sequentially
|
||||
- Reserve ultra model only for final production assets
|
||||
- Run analysis while next generation processes
|
||||
|
||||
**Remember**: Design first, generate second. Context is king. Iterate ruthlessly. Analysis is mandatory. Demand specifics, not generalities.
|
||||
@@ -0,0 +1,44 @@
|
||||
# Cost & Performance Optimization
|
||||
|
||||
Model selection strategies and budget guidelines.
|
||||
|
||||
## Model Selection Strategy
|
||||
|
||||
### 1. Exploration Phase
|
||||
Use fast model (3-5 variations):
|
||||
- **Cost**: ~$0.02 per image
|
||||
- **Speed**: ~5-10 seconds per generation
|
||||
- **Use for**: Rapid iteration, aesthetic exploration
|
||||
|
||||
### 2. Refinement Phase
|
||||
Use standard model (1-2 variations):
|
||||
- **Cost**: ~$0.04 per image
|
||||
- **Speed**: ~10-20 seconds per generation
|
||||
- **Use for**: Production-ready assets
|
||||
|
||||
### 3. Final Polish
|
||||
Use ultra model (1 generation):
|
||||
- **Cost**: ~$0.08 per image
|
||||
- **Speed**: ~20-30 seconds per generation
|
||||
- **Use for**: Hero images, marketing materials, critical assets
|
||||
|
||||
## Analysis Model Strategy
|
||||
|
||||
- Use gemini-2.5-flash for all analysis (vision understanding)
|
||||
- **Cost**: ~$0.001 per analysis
|
||||
- **Speed**: ~2-5 seconds per analysis
|
||||
- **Token-efficient**: Images count as ~258-1548 tokens
|
||||
|
||||
## Budget Guidelines
|
||||
|
||||
- **Small project**: 10-20 images, ~$2-5 total
|
||||
- **Medium project**: 50-100 images, ~$10-20 total
|
||||
- **Large project**: 200+ images, ~$50+ total
|
||||
|
||||
## Optimization Tips
|
||||
|
||||
1. **Use fast model first**: Explore variations cheaply before committing to production quality
|
||||
2. **Batch analyze**: Analyze multiple variations simultaneously to save time
|
||||
3. **Reuse successful prompts**: Once you find a working prompt, reuse it with variations
|
||||
4. **Generate responsive variants separately**: Only create mobile versions for assets that need them
|
||||
5. **Skip ultra model unless critical**: Standard quality often sufficient for most assets
|
||||
@@ -0,0 +1,90 @@
|
||||
# Technical Guide Overview
|
||||
|
||||
Technical considerations and best practices for AI multimodal integration in frontend design.
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### File Optimization
|
||||
```bash
|
||||
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
|
||||
```bash
|
||||
# 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
|
||||
|
||||
```bash
|
||||
# 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)**:
|
||||
```html
|
||||
<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)**:
|
||||
```html
|
||||
<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"
|
||||
/>
|
||||
```
|
||||
@@ -0,0 +1,150 @@
|
||||
# Complete Workflow Examples
|
||||
|
||||
End-to-end pipeline examples for asset generation and analysis.
|
||||
|
||||
## Example 1: Hero Section (Complete Pipeline)
|
||||
|
||||
```bash
|
||||
# 1. Generate hero image with design context
|
||||
python scripts/gemini_batch_process.py \
|
||||
--task generate \
|
||||
--prompt "Minimalist desert landscape, warm beige sand dunes,
|
||||
soft morning light, serene and spacious, muted earth tones
|
||||
(tan, cream, soft ochre), clean composition for text overlay,
|
||||
sophisticated travel aesthetic, 16:9 cinematic" \
|
||||
--output docs/assets/hero-desert \
|
||||
--model imagen-4.0-generate-001 \
|
||||
--aspect-ratio 16:9
|
||||
|
||||
# 2. Evaluate aesthetic quality
|
||||
python scripts/gemini_batch_process.py \
|
||||
--files docs/assets/hero-desert.png \
|
||||
--task analyze \
|
||||
--prompt "Rate this image 1-10 for: visual appeal, color harmony,
|
||||
suitability for overlaying white text, professional quality.
|
||||
List any improvements needed." \
|
||||
--output docs/assets/hero-evaluation.md \
|
||||
--model gemini-2.5-flash
|
||||
|
||||
# 3. If score ≥ 7/10, optimize for web
|
||||
python scripts/media_optimizer.py \
|
||||
--input docs/assets/hero-desert.png \
|
||||
--output docs/assets/hero-desktop.webp \
|
||||
--quality 85
|
||||
|
||||
# 4. Generate mobile variant (9:16)
|
||||
python scripts/gemini_batch_process.py \
|
||||
--task generate \
|
||||
--prompt "Minimalist desert landscape, warm beige sand dunes,
|
||||
soft morning light, serene and spacious, muted earth tones
|
||||
(tan, cream, soft ochre), clean composition for text overlay,
|
||||
sophisticated travel aesthetic, 9:16 portrait" \
|
||||
--output docs/assets/hero-mobile \
|
||||
--model imagen-4.0-generate-001 \
|
||||
--aspect-ratio 9:16
|
||||
|
||||
# 5. Optimize mobile variant
|
||||
python scripts/media_optimizer.py \
|
||||
--input docs/assets/hero-mobile.png \
|
||||
--output docs/assets/hero-mobile.webp \
|
||||
--quality 85
|
||||
```
|
||||
|
||||
## Example 2: Extract, Generate, Analyze Loop
|
||||
|
||||
```bash
|
||||
# 1. Extract design guidelines from inspiration
|
||||
python scripts/gemini_batch_process.py \
|
||||
--files docs/inspiration/competitor-hero.png \
|
||||
--task analyze \
|
||||
--prompt "[use extraction prompt from extraction-prompts.md]" \
|
||||
--output docs/design-guidelines/competitor-analysis.md \
|
||||
--model gemini-2.5-flash
|
||||
|
||||
# 2. Generate asset based on extracted guidelines
|
||||
# (Review competitor-analysis.md for color palette, aesthetic)
|
||||
python scripts/gemini_batch_process.py \
|
||||
--task generate \
|
||||
--prompt "[craft prompt using extracted aesthetic and colors]" \
|
||||
--output docs/assets/our-hero \
|
||||
--model imagen-4.0-generate-001 \
|
||||
--aspect-ratio 16:9
|
||||
|
||||
# 3. Analyze our generated asset
|
||||
python scripts/gemini_batch_process.py \
|
||||
--files docs/assets/our-hero.png \
|
||||
--task analyze \
|
||||
--prompt "Compare to competitor design. Rate differentiation (1-10).
|
||||
Are we too similar or successfully distinct?" \
|
||||
--output docs/assets/differentiation-analysis.md \
|
||||
--model gemini-2.5-flash
|
||||
|
||||
# 4. Extract colors from our final asset for CSS
|
||||
python scripts/gemini_batch_process.py \
|
||||
--files docs/assets/our-hero.png \
|
||||
--task analyze \
|
||||
--prompt "[use color extraction prompt from visual-analysis-overview.md]" \
|
||||
--output docs/assets/color-palette.md \
|
||||
--model gemini-2.5-flash
|
||||
```
|
||||
|
||||
## Example 3: A/B Test Assets
|
||||
|
||||
```bash
|
||||
# Generate 2 design directions
|
||||
python scripts/gemini_batch_process.py \
|
||||
--task generate \
|
||||
--prompt "Minimalist approach: [prompt]" \
|
||||
--output docs/assets/variant-a \
|
||||
--model imagen-4.0-fast-generate-001 \
|
||||
--aspect-ratio 16:9
|
||||
|
||||
python scripts/gemini_batch_process.py \
|
||||
--task generate \
|
||||
--prompt "Bold approach: [prompt]" \
|
||||
--output docs/assets/variant-b \
|
||||
--model imagen-4.0-fast-generate-001 \
|
||||
--aspect-ratio 16:9
|
||||
|
||||
# Compare variants
|
||||
python scripts/gemini_batch_process.py \
|
||||
--files docs/assets/variant-a.png docs/assets/variant-b.png \
|
||||
--task analyze \
|
||||
--prompt "A/B comparison for [target audience]:
|
||||
1. Attention capture
|
||||
2. Brand alignment
|
||||
3. Conversion potential
|
||||
Recommend which to test." \
|
||||
--output docs/assets/ab-comparison.md \
|
||||
--model gemini-2.5-flash
|
||||
|
||||
# Generate production version of winner
|
||||
python scripts/gemini_batch_process.py \
|
||||
--task generate \
|
||||
--prompt "[winning approach prompt]" \
|
||||
--output docs/assets/final-hero \
|
||||
--model imagen-4.0-generate-001 \
|
||||
--aspect-ratio 16:9
|
||||
```
|
||||
|
||||
## Batch Analysis for Rapid Iteration
|
||||
|
||||
```bash
|
||||
# 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
|
||||
```
|
||||
@@ -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);
|
||||
}
|
||||
```
|
||||
102
.opencode/skills/frontend-design/references/workflow-3d.md
Normal file
102
.opencode/skills/frontend-design/references/workflow-3d.md
Normal file
@@ -0,0 +1,102 @@
|
||||
# 3D Design Workflow
|
||||
|
||||
Create immersive interactive 3D designs with Three.js.
|
||||
|
||||
## Prerequisites
|
||||
- Activate `ck:ui-ux-pro-max` skill first
|
||||
- Activate `ck:threejs` skill for 3D and WebGL expertise
|
||||
- Have `ck:ai-multimodal` skill ready for asset generation
|
||||
|
||||
## Initial Research
|
||||
Run `ck:ui-ux-pro-max` searches:
|
||||
```bash
|
||||
python3 .opencode/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
|
||||
python3 .opencode/skills/ui-ux-pro-max/scripts/search.py "immersive 3d" --domain style
|
||||
python3 .opencode/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux
|
||||
```
|
||||
|
||||
## Workflow Steps
|
||||
|
||||
### 1. Create Implementation Plan
|
||||
Use `ui-ux-designer` + `researcher` subagents:
|
||||
- Create plan directory (use `## Naming` pattern)
|
||||
- Write `plan.md` (<80 lines overview)
|
||||
- Add `phase-XX-name.md` files
|
||||
- Keep research reports under 150 lines
|
||||
|
||||
### 2. Implement with Three.js
|
||||
Use `ui-ux-designer` subagent to build:
|
||||
- Three.js scene setup
|
||||
- Custom GLSL shaders
|
||||
- GPU particle systems
|
||||
- Cinematic camera controls
|
||||
- Post-processing effects
|
||||
- Interactive elements
|
||||
|
||||
### 3. Generate 3D Assets
|
||||
Use `ck:ai-multimodal` skill for:
|
||||
- Textures and materials
|
||||
- Skyboxes and environment maps
|
||||
- Particle sprites
|
||||
- Video backgrounds
|
||||
|
||||
Use `ck:media-processing` skill for:
|
||||
- Texture optimization for WebGL
|
||||
- Normal/height map generation
|
||||
- Sprite sheet creation
|
||||
- Background removal
|
||||
- Asset optimization
|
||||
|
||||
### 4. Verify & Report
|
||||
- Test across devices
|
||||
- Optimize for 60fps
|
||||
- Report to user
|
||||
- Request approval
|
||||
|
||||
### 5. Document
|
||||
Update `./docs/design-guidelines.md` with:
|
||||
- 3D design patterns
|
||||
- Shader libraries
|
||||
- Reusable components
|
||||
|
||||
## Technical Requirements
|
||||
|
||||
### Three.js Implementation
|
||||
- Proper scene optimization
|
||||
- Efficient draw calls
|
||||
- LOD (Level of Detail) where needed
|
||||
- Responsive canvas behavior
|
||||
- Memory management
|
||||
|
||||
### Shader Development
|
||||
- Custom vertex shaders
|
||||
- Custom fragment shaders
|
||||
- Uniform management
|
||||
- Performance optimization
|
||||
|
||||
### Particle Systems
|
||||
- GPU-accelerated rendering
|
||||
- Efficient buffer geometry
|
||||
- Point sprite optimization
|
||||
|
||||
### Post-Processing
|
||||
- Render pipeline setup
|
||||
- Effect composition
|
||||
- Performance budgeting
|
||||
|
||||
## Implementation Stack
|
||||
- Three.js - 3D rendering
|
||||
- GLSL - Custom shaders
|
||||
- HTML/CSS/JS - UI integration
|
||||
- WebGL - GPU graphics
|
||||
|
||||
## Performance Targets
|
||||
- 60fps minimum
|
||||
- < 100ms initial load
|
||||
- Responsive to viewport
|
||||
- Mobile-friendly fallbacks
|
||||
|
||||
## Related
|
||||
- `animejs.md` - UI animation patterns
|
||||
- `technical-optimization.md` - Performance tips
|
||||
- `asset-generation.md` - Asset creation
|
||||
@@ -0,0 +1,87 @@
|
||||
# Design Description Workflow
|
||||
|
||||
Create detailed design documentation from screenshot/video for developer implementation.
|
||||
|
||||
## Prerequisites
|
||||
- Activate `ck:ui-ux-pro-max` skill first
|
||||
- Have `ck:ai-multimodal` skill ready
|
||||
|
||||
## Workflow Steps
|
||||
|
||||
### 1. Comprehensive Visual Analysis
|
||||
Use `ck:ai-multimodal` skill to describe exhaustively:
|
||||
|
||||
**Layout & Structure**
|
||||
- Element positions (absolute coords or relative)
|
||||
- Container hierarchy
|
||||
- Grid/flexbox patterns
|
||||
- Responsive breakpoints visible
|
||||
|
||||
**Visual Properties**
|
||||
- Design style and aesthetic trend
|
||||
- Every color with hex codes
|
||||
- Every border (width, style, radius)
|
||||
- Every icon (describe or identify)
|
||||
- Font names (predict Google Fonts), sizes, weights
|
||||
- Line heights, letter spacing
|
||||
|
||||
**Spacing System**
|
||||
- Padding values
|
||||
- Margin values
|
||||
- Gap between elements
|
||||
- Section spacing
|
||||
|
||||
**Visual Effects**
|
||||
- Shapes and geometry
|
||||
- Textures and materials
|
||||
- Lighting direction
|
||||
- Shadows (offset, blur, spread, color)
|
||||
- Reflections and refractions
|
||||
- Blur effects (backdrop, gaussian)
|
||||
- Glow effects
|
||||
- Background transparency
|
||||
- Image treatments
|
||||
|
||||
**Interactions (if video)**
|
||||
- Animation sequences
|
||||
- Transition types and timing
|
||||
- Hover/focus states
|
||||
- Scroll behaviors
|
||||
|
||||
**Font Prediction**: Match actual fonts, avoid Inter/Poppins defaults.
|
||||
|
||||
### 2. Create Implementation Plan
|
||||
Use `ui-ux-designer` subagent:
|
||||
- Create plan directory (use `## Naming` pattern)
|
||||
- Write `plan.md` overview (<80 lines)
|
||||
- Add detailed `phase-XX-name.md` files
|
||||
|
||||
### 3. Report to User
|
||||
Provide implementation-ready documentation:
|
||||
- Summary of design system
|
||||
- Component breakdown
|
||||
- Technical specifications
|
||||
- Suggested implementation approach
|
||||
|
||||
## Output Format
|
||||
|
||||
```markdown
|
||||
# Design Analysis: [Name]
|
||||
|
||||
## Design System
|
||||
- **Style**: [aesthetic direction]
|
||||
- **Colors**: [palette with hex]
|
||||
- **Typography**: [fonts, sizes, weights]
|
||||
- **Spacing Scale**: [values]
|
||||
|
||||
## Component Breakdown
|
||||
1. [Component] - [specs]
|
||||
2. [Component] - [specs]
|
||||
|
||||
## Implementation Notes
|
||||
- [Technical considerations]
|
||||
```
|
||||
|
||||
## Related
|
||||
- `extraction-prompts.md` - Detailed prompts
|
||||
- `extraction-output-templates.md` - Output formats
|
||||
@@ -0,0 +1,87 @@
|
||||
# Immersive Design Workflow
|
||||
|
||||
Create award-quality designs with storytelling, 3D experiences, and micro-interactions.
|
||||
|
||||
## Prerequisites
|
||||
- Activate `ck:ui-ux-pro-max` skill first
|
||||
|
||||
## Initial Research
|
||||
Run `ck:ui-ux-pro-max` searches:
|
||||
```bash
|
||||
python3 .opencode/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
|
||||
python3 .opencode/skills/ui-ux-pro-max/scripts/search.py "<style-keywords>" --domain style
|
||||
python3 .opencode/skills/ui-ux-pro-max/scripts/search.py "<mood>" --domain typography
|
||||
python3 .opencode/skills/ui-ux-pro-max/scripts/search.py "<industry>" --domain color
|
||||
```
|
||||
|
||||
## Workflow Steps
|
||||
|
||||
### 1. Research Phase
|
||||
Use `researcher` subagent to investigate:
|
||||
- Design style and current trends
|
||||
- Font combinations and typography
|
||||
- Color theory for the context
|
||||
- Border and spacing patterns
|
||||
- Element positioning principles
|
||||
- Animation and interaction patterns
|
||||
|
||||
### 2. Design Implementation
|
||||
Use `ui-ux-designer` subagent:
|
||||
- Build step by step from research
|
||||
- Create plan with `## Naming` pattern
|
||||
- Default to HTML/CSS/JS if unspecified
|
||||
|
||||
### 3. Storytelling Elements
|
||||
Incorporate:
|
||||
- Narrative flow through scroll
|
||||
- Emotional pacing
|
||||
- Visual hierarchy for story beats
|
||||
- Progressive disclosure of content
|
||||
|
||||
### 4. 3D Experiences
|
||||
If applicable, integrate:
|
||||
- Three.js scenes
|
||||
- Interactive 3D elements
|
||||
- Parallax depth effects
|
||||
- WebGL enhancements
|
||||
|
||||
### 5. Micro-interactions
|
||||
Add polish:
|
||||
- Button feedback
|
||||
- Form interactions
|
||||
- Loading states
|
||||
- Hover effects
|
||||
- Scroll responses
|
||||
|
||||
### 6. Asset Generation
|
||||
Use `ck:ai-multimodal` skill:
|
||||
- Generate high-quality visuals
|
||||
- Create unique imagery
|
||||
- Verify asset quality
|
||||
- Remove backgrounds as needed
|
||||
|
||||
### 7. Verify & Report
|
||||
- Review against inspiration
|
||||
- Report to user
|
||||
- Request approval
|
||||
- Update `./docs/design-guidelines.md`
|
||||
|
||||
## Quality Standards
|
||||
Match award-winning sites:
|
||||
- Dribbble top shots
|
||||
- Behance featured
|
||||
- Awwwards winners
|
||||
- Mobbin patterns
|
||||
- TheFWA selections
|
||||
|
||||
## Design Principles
|
||||
- **Bold aesthetic choices**: Commit fully to direction
|
||||
- **Attention to detail**: Every pixel matters
|
||||
- **Cohesive experience**: All elements work together
|
||||
- **Memorable moments**: Create surprise and delight
|
||||
- **Technical excellence**: Performance + polish
|
||||
|
||||
## Related
|
||||
- `workflow-3d.md` - 3D implementation details
|
||||
- `animejs.md` - Animation patterns
|
||||
- `technical-best-practices.md` - Quality guidelines
|
||||
@@ -0,0 +1,57 @@
|
||||
# Quick Design Workflow
|
||||
|
||||
Rapid design creation with minimal planning overhead.
|
||||
|
||||
## Prerequisites
|
||||
- Activate `ck:ui-ux-pro-max` skill first
|
||||
|
||||
## Initial Research
|
||||
Run `ck:ui-ux-pro-max` searches:
|
||||
```bash
|
||||
python3 .opencode/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
|
||||
python3 .opencode/skills/ui-ux-pro-max/scripts/search.py "<style-keywords>" --domain style
|
||||
python3 .opencode/skills/ui-ux-pro-max/scripts/search.py "<mood>" --domain typography
|
||||
python3 .opencode/skills/ui-ux-pro-max/scripts/search.py "<industry>" --domain color
|
||||
```
|
||||
|
||||
## Workflow Steps
|
||||
|
||||
### 1. Start Design Process
|
||||
Use `ui-ux-designer` subagent directly:
|
||||
- Skip extensive planning
|
||||
- Move to implementation quickly
|
||||
- Make design decisions on-the-fly
|
||||
|
||||
### 2. Implement
|
||||
- Default to HTML/CSS/JS if unspecified
|
||||
- Focus on core functionality
|
||||
- Maintain quality despite speed
|
||||
|
||||
### 3. Generate Assets
|
||||
Use `ck:ai-multimodal` skill:
|
||||
- Generate required visuals
|
||||
- Verify quality quickly
|
||||
- Use `ck:media-processing` for adjustments
|
||||
|
||||
### 4. Report & Approve
|
||||
- Summarize changes briefly
|
||||
- Request user approval
|
||||
- Update `./docs/design-guidelines.md` if approved
|
||||
|
||||
## When to Use
|
||||
- Simple components
|
||||
- Prototypes and MVPs
|
||||
- Time-constrained projects
|
||||
- Iterative exploration
|
||||
- Single-page designs
|
||||
|
||||
## Quality Shortcuts
|
||||
While moving fast, maintain:
|
||||
- Semantic HTML
|
||||
- CSS variables for consistency
|
||||
- Basic accessibility
|
||||
- Clean code structure
|
||||
|
||||
## Related
|
||||
- `workflow-immersive.md` - For comprehensive designs
|
||||
- `technical-overview.md` - Quick reference
|
||||
@@ -0,0 +1,63 @@
|
||||
# Screenshot Replication Workflow
|
||||
|
||||
Replicate a design exactly from a provided screenshot.
|
||||
|
||||
## Prerequisites
|
||||
- Activate `ck:ui-ux-pro-max` skill first for design intelligence
|
||||
- Have `ck:ai-multimodal` skill ready for visual analysis
|
||||
|
||||
## Workflow Steps
|
||||
|
||||
### 1. Analyze Screenshot Details
|
||||
Use `ck:ai-multimodal` skill to extract:
|
||||
- Design style and visual trends
|
||||
- Font names (predict Google Fonts), sizes, weights
|
||||
- Color palette with exact hex codes
|
||||
- Border radius, spacing patterns
|
||||
- Element positions, sizes, shapes
|
||||
- Textures, materials, lighting
|
||||
- Shadows, reflections, blur, glow effects
|
||||
- Background transparency, transitions
|
||||
- Image treatments and effects
|
||||
|
||||
**Font Prediction**: Avoid defaulting to Inter/Poppins. Match actual fonts visible.
|
||||
|
||||
### 2. Create Implementation Plan
|
||||
Use `ui-ux-designer` subagent:
|
||||
- Create plan directory (use `## Naming` pattern from hooks)
|
||||
- Write `plan.md` (<80 lines, generic overview)
|
||||
- Add `phase-XX-name.md` files with:
|
||||
- Context links, Overview, Key Insights
|
||||
- Requirements, Architecture, Related files
|
||||
- Implementation Steps, Todo list
|
||||
- Success Criteria, Risk Assessment
|
||||
|
||||
### 3. Implement
|
||||
- Follow plan step by step
|
||||
- Default to HTML/CSS/JS if no framework specified
|
||||
- Match screenshot precisely
|
||||
|
||||
### 4. Generate Assets
|
||||
Use `ck:ai-multimodal` skill:
|
||||
- Generate images, icons, backgrounds
|
||||
- Verify generated assets match design
|
||||
- Remove backgrounds if needed with `ck:media-processing`
|
||||
|
||||
### 5. Verify & Report
|
||||
- Compare implementation to screenshot
|
||||
- Report changes summary to user
|
||||
- Request approval
|
||||
|
||||
### 6. Document
|
||||
If approved, update `./docs/design-guidelines.md`
|
||||
|
||||
## Quality Standards
|
||||
- Match screenshot at pixel level where possible
|
||||
- Preserve all visual hierarchy
|
||||
- Maintain exact spacing and proportions
|
||||
- Replicate animations if visible in source
|
||||
|
||||
## Related
|
||||
- `design-extraction-overview.md` - Extract design guidelines
|
||||
- `extraction-prompts.md` - Detailed analysis prompts
|
||||
- `visual-analysis-overview.md` - Verify quality
|
||||
@@ -0,0 +1,74 @@
|
||||
# Video Replication Workflow
|
||||
|
||||
Replicate a design including animations/interactions from a provided video.
|
||||
|
||||
## Prerequisites
|
||||
- Activate `ck:ui-ux-pro-max` skill first
|
||||
- Have `ck:ai-multimodal` skill ready for video analysis
|
||||
|
||||
## Workflow Steps
|
||||
|
||||
### 1. Analyze Video Details
|
||||
Use `ck:ai-multimodal` skill to describe:
|
||||
- Every visible element and its properties
|
||||
- All interactions and user flows
|
||||
- Animation timing, easing, duration
|
||||
- Transitions between states/pages
|
||||
- Color palette with hex codes
|
||||
- Typography (predict Google Fonts)
|
||||
- Borders, spacing, sizing
|
||||
- Textures, materials, lighting
|
||||
- Shadows, reflections, blur, glow
|
||||
- Background effects
|
||||
|
||||
**Font Prediction**: Avoid defaulting to Inter/Poppins.
|
||||
|
||||
### 2. Create Implementation Plan
|
||||
Use `ui-ux-designer` subagent:
|
||||
- Create plan directory (use `## Naming` pattern)
|
||||
- Write `plan.md` (<80 lines overview)
|
||||
- Add `phase-XX-name.md` files with full sections
|
||||
- Keep research reports under 150 lines
|
||||
|
||||
### 3. Implement
|
||||
- Follow plan step by step
|
||||
- Default to HTML/CSS/JS if unspecified
|
||||
- Prioritize animation accuracy
|
||||
|
||||
### 4. Animation Implementation
|
||||
Focus on:
|
||||
- Timing functions matching video
|
||||
- State transitions
|
||||
- Micro-interactions
|
||||
- Scroll-triggered effects
|
||||
- Hover/focus states
|
||||
- Loading animations
|
||||
|
||||
Use `animejs.md` reference for animation patterns.
|
||||
|
||||
### 5. Generate Assets
|
||||
Use `ck:ai-multimodal` skill:
|
||||
- Generate static assets
|
||||
- Create animated sprites if needed
|
||||
- Verify quality matches video
|
||||
- Use `ck:media-processing` for processing
|
||||
|
||||
### 6. Verify & Report
|
||||
- Compare implementation to video
|
||||
- Test all interactions
|
||||
- Report summary to user
|
||||
- Request approval
|
||||
|
||||
### 7. Document
|
||||
If approved, update `./docs/design-guidelines.md`
|
||||
|
||||
## Quality Standards
|
||||
- Frame-accurate animation timing
|
||||
- Smooth 60fps performance
|
||||
- Responsive behavior preserved
|
||||
- All interactions functional
|
||||
|
||||
## Related
|
||||
- `animejs.md` - Animation library reference
|
||||
- `design-extraction-overview.md` - Guidelines extraction
|
||||
- `technical-optimization.md` - Performance tips
|
||||
Reference in New Issue
Block a user