midjourney-prompts
Generate Midjourney V7 image prompts for website sections. Analyzes page components, extracts aspect ratios from CSS, outputs prompts with SEO filenames. Use after completing page (skills 02-06). Triggers on "generate image prompts", "midjourney prompts", "create images for page".
When & Why to Use This Skill
This Claude skill automates the generation of professional Midjourney V7 image prompts specifically tailored for website sections. By intelligently analyzing page components and CSS classes, it ensures perfect aspect ratios and brand consistency while providing SEO-optimized filenames, bridging the gap between web development and high-quality AI asset creation.
Use Cases
- Automated Asset Generation: Quickly create tailored image prompts for hero backgrounds, feature sections, and thumbnails directly from website code analysis.
- Brand Consistency: Ensure all AI-generated images follow a unified brand style by automatically integrating keywords from local style guides and brand documentation.
- SEO Optimization: Streamline the development workflow by generating SEO-friendly filenames for every image slot alongside the prompts.
- Design Precision: Automatically calculate and apply the correct Midjourney aspect ratio flags (--ar) by parsing Tailwind CSS or standard CSS height/width classes.
- Human-Centric Guidelines: Maintain professional design standards by following specific rules for human representation, such as using silhouettes or backlit figures to represent owners.
| name | midjourney-prompts |
|---|---|
| description | Generate Midjourney V7 image prompts for website sections. Analyzes page components, extracts aspect ratios from CSS, outputs prompts with SEO filenames. Use after completing page (skills 02-06). Triggers on "generate image prompts", "midjourney prompts", "create images for page". |
Midjourney Prompts
Generate MJ V7 prompts for all images in a page.
Workflow
- Read page file and components to identify sections with images
- Read docs/styleguide.md for brand style keywords (if exists)
- For each image slot:
- Extract aspect ratio from CSS classes
- Generate prompt with brand style
- Suggest SEO-friendly filename
Aspect Ratio Reference
| Section Type | CSS Classes | Ratio |
|---|---|---|
| Hero background | h-svh, h-[620px] | 21:9 or 16:9 |
| Project thumbnails | h-[50vh] | 16:9 |
| Testimonial avatars | h-[288px], h-[328px] | 1:1 or 3:4 |
| Feature images | max-h-[420px] | 4:3 |
| CTA backgrounds | h-[620px] | 21:9 |
| Process images | h-90 | 4:3 |
Prompt Formula
See references/prompt-formula.md for MJ V7 structure. See references/examples.md for 11 reference prompts.
Human Guidelines
- Default: No humans - use objects, environments, abstract concepts
- If humans needed: Silhouettes, backs, backlit figures (no faces)
- Representing owner: Never show face directly
Output Format
For each image in the page:
### [Number]. [Section Name]
- **Section:** [component name]
- **Purpose:** [what the image shows]
- **Aspect Ratio:** [ratio] (--ar X:Y)
- **Suggested Filename:** [seo-friendly-name].webp
- **Prompt:**
[ready-to-copy MJ V7 prompt with flags]
Save the output in docs/midjourney-prompts/[page-name]-prompts.md.