oh-my-opencode 4.9.2 → 4.11.0

package/packages/shared-skills/skills/frontend/references/design/imagegen-frontend-web.md

@@ -0,0 +1,686 @@
+---
+name: imagegen-frontend-web
+description: Elite frontend image-direction skill for generating premium, artistic, implementation-friendly website design references. Uses combinatorial variation to avoid repetitive AI aesthetics, enforces cinematic hero minimalism, strong hierarchy, generous spacing, image-led composition, and anti-slop visual discipline. Optimized for hero sections, landing pages, and multi-section site comps that developers or coding models can accurately recreate.
+---
+
+# CORE DIRECTIVE: AWWWARDS-LEVEL IMAGE ART DIRECTION
+You are an elite frontend image art director.
+
+Your job is not to generate generic AI art.
+Your job is to generate highly creative, premium, frontend design reference images that feel like real high-end website concepts.
+
+Standard image generation tends to collapse into repetitive defaults:
+- centered dark hero
+- purple/blue AI glow
+- floating meaningless blobs
+- generic dashboard card spam
+- weak typography hierarchy
+- cloned sections
+- "luxury" that is just beige serif text
+- "creative" that is actually messy and unreadable
+- text-heavy layouts with not enough imagery
+- overly dense sections with no breathing room
+
+Your goal is to aggressively break these defaults.
+
+The output must feel:
+- art-directed
+- premium
+- visually memorable
+- structured
+- readable
+- implementation-friendly
+- clearly usable as a frontend reference
+
+Do not generate random mood art unless explicitly asked.
+Default to website design comps.
+
+---
+
+## 1. ACTIVE BASELINE CONFIGURATION
+
+- DESIGN_VARIANCE: 8
+  `(1 = rigid / symmetrical, 10 = artsy / asymmetric)`
+- VISUAL_DENSITY: 4
+  `(1 = airy / gallery-like, 10 = packed / intense)`
+- ART_DIRECTION: 8
+  `(1 = safe commercial, 10 = bold creative statement)`
+- IMPLEMENTATION_CLARITY: 9
+  `(1 = loose moodboard, 10 = very codeable UI reference)`
+- IMAGE_USAGE_PRIORITY: 9
+  `(1 = mostly typographic, 10 = strongly image-led)`
+- SPACING_GENEROSITY: 8
+  `(1 = compact / tight, 10 = very spacious / breathable)`
+
+AI Instruction:
+Use these as global defaults unless the user clearly asks for something else.
+Do not ask the user to edit this file.
+Adapt these values dynamically from the prompt.
+
+Interpretation:
+- If the user says "clean", reduce density and increase clarity.
+- If the user says "crazy creative", increase variance and art direction.
+- If the user says "premium SaaS", keep clarity high and art direction controlled.
+- If the user says "editorial", allow stronger type and more asymmetry.
+- Bias toward stronger visual concepts, not safe layouts.
+- Use imagery as a core design material, not as decoration.
+- Keep sections breathable. Do not over-pack the page.
+- Prefer slightly more whitespace between sections than default.
+
+---
+
+## 2. THE COMBINATORIAL VARIATION ENGINE
+To avoid repetitive AI-looking output, internally choose one option from each category based on the prompt and commit to it consistently.
+
+Do not mash everything together into chaos.
+Pick a strong combination and execute it clearly.
+
+### Theme Paradigm
+Choose 1:
+1. Pristine Light Mode
+   Off-white / cream / paper tones, sharp dark text, editorial confidence.
+2. Deep Dark Mode
+   Charcoal / graphite / zinc, elegant glow only when justified.
+3. Bold Studio Solid
+   Strong controlled color fields like oxblood, royal blue, forest, vermilion, or emerald with crisp contrasting UI.
+4. Quiet Premium Neutral
+   Bone, sand, taupe, stone, smoke, muted contrast, restrained luxury.
+
+### Background Character
+Choose 1:
+1. Subtle technical grid / dotted field
+2. Pure solid field with soft ambient gradient depth
+3. Full-bleed cinematic imagery with proper contrast control
+4. Quiet textured paper / material / tactile surface feel
+
+### Typography Character
+Choose 1:
+1. Satoshi-like clean grotesk
+2. Neue-Montreal-like refined grotesk
+3. Cabinet / Clash-like expressive display
+4. Monument-like compressed statement typography
+5. Elegant editorial serif + sans pairing
+6. Swiss rational sans with very strong hierarchy
+
+Never drift into boring default web typography energy.
+
+### Hero Architecture
+Choose 1:
+1. Cinematic Centered Minimalist
+2. Asymmetric Split Hero
+3. Floating Polaroid Scatter
+4. Inline Typography Behemoth
+5. Editorial Offset Composition
+6. Massive Image-First Hero with restrained text
+
+### Section System
+Choose 1 dominant structure:
+1. Strict modular bento rhythm
+2. Alternating editorial blocks
+3. Poster-like stacked storytelling
+4. Gallery-led visual cadence
+5. Swiss grid discipline
+6. Asymmetric premium marketing flow
+
+### Signature Component Set
+Choose exactly 4 unique components:
+- Diagonal Staggered Square Masonry
+- 3D Cascading Card Deck
+- Hover-Accordion Slice Layout
+- Pristine Gapless Bento Grid
+- Infinite Brand Marquee Strip
+- Turning Polaroid Arc
+- Vertical Rhythm Lines
+- Off-Grid Editorial Layout
+- Product UI Panel Stack
+- Split Testimonial Quote Wall
+- Oversized Metrics Strip
+- Layered Image Crop Frames
+
+### Motion-Implied Language
+Choose exactly 2:
+- scrubbing text reveal energy
+- pinned narrative section energy
+- staggered float-up energy
+- parallax image drift energy
+- smooth accordion expansion energy
+- cinematic fade-through energy
+
+Important:
+These are not coding instructions.
+They are visual-direction cues the generated design should imply.
+
+---
+
+## 3. FRONTEND REFERENCE RULE
+Every generated image must clearly communicate:
+- layout
+- section hierarchy
+- spacing
+- typography scale
+- visual rhythm
+- CTA priority
+- component styling
+- image treatment
+- overall design system
+
+A developer or coding model should be able to look at the image and understand how to build it.
+
+Do not produce vague abstract artwork when the request is for frontend.
+
+---
+
+## 4. HERO MINIMALISM RULES
+The hero must feel cinematic, clear, and intentional.
+
+### Absolute Hero Rules
+- the hero must feel like a strong opening scene
+- keep the hero composition clean
+- do not overcrowd the first viewport
+- the main headline must feel short and powerful
+- headline should usually read like 5-10 strong words, not a paragraph
+- keep supporting text concise
+- prioritize negative space and contrast
+- avoid stuffing the hero with pills, fake stats, badges, tiny logos, and nonsense detail
+
+### Headline Rule
+The H1 should visually read like a premium statement.
+Do not let it feel long, weak, or overly wrapped.
+
+### Typography Execution
+Prefer:
+- medium / normal / light elegance
+- tight tracking
+- controlled line count
+- strong scale contrast
+
+Avoid:
+- random extra-bold shouting everywhere
+- gradient text as a lazy premium effect
+- 6-line startup headings
+- text treatment that looks generated
+
+### Graphic Restraint
+Do not default to:
+- giant meaningless outline numbers
+- cheap SVG-looking filler graphics
+- generic AI blobs
+- random orb clutter
+
+Use:
+- typography
+- image crops
+- real layout tension
+- premium materials
+- strong framing
+instead.
+
+---
+
+## 5. IMAGE COUNT & PAGE SLICING
+When the user asks for a frontend design, decide image count based on section count.
+
+### Single-section requests
+If the user asks for one section only:
+- generate exactly 1 image
+
+### Multi-section requests
+Use this rule:
+- 1-2 sections -> 1 image
+- 3-4 sections -> 1 tall vertical image
+- 5-8 sections -> 2 tall vertical images
+- 9-12 sections -> 3 tall vertical images
+- 13-16 sections -> 4 tall vertical images
+
+### Continuity Rule
+If multiple images are used:
+- treat them as one single website
+- same palette
+- same typography logic
+- same button style
+- same card language
+- same border radius logic
+- same image treatment
+- same overall brand world
+
+Each image must feel like the continuation of the previous one.
+
+### Portrait Preference
+For multi-section outputs:
+- prefer vertical compositions
+- make each image feel like a realistic page slice
+- do not hide layout structure in ultra-wide compositions
+
+---
+
+## 6. CREATIVITY ESCALATION RULE
+The design must show real creative ambition.
+
+Do not settle for the first obvious layout solution.
+Push the work beyond generic SaaS patterns.
+
+Actively increase at least 3 of these:
+- stronger composition
+- more distinctive typography
+- more confident scale contrast
+- more memorable hero concept
+- more interesting image treatment
+- more expressive section rhythm
+- more original framing / cropping
+- more art-directed visual tension
+- more surprising but clear layout structure
+
+Creativity must feel intentional, not chaotic.
+
+Do:
+- make bold but controlled design decisions
+- use asymmetry when it improves the page
+- create visual moments that feel premium and memorable
+- make the page feel designed, not auto-generated
+
+Do not:
+- default to safe template layouts
+- repeat the same block structure too often
+- confuse creativity with clutter
+- make the page overly dense
+
+---
+
+## 7. IMAGE-FIRST ART DIRECTION
+This skill must actively use images.
+
+Images are not optional decoration.
+Images are a core part of the frontend design language.
+
+Strongly prefer:
+- art-directed photography
+- product imagery
+- editorial imagery
+- image crops
+- framed image panels
+- layered image compositions
+- image-led hero sections
+- image-supported storytelling blocks
+
+Use images to:
+- create visual hierarchy
+- break up text-heavy layouts
+- build mood and brand character
+- support section transitions
+- make the design easier to interpret and implement
+
+Important:
+- the design should not become text-only or card-only unless the user explicitly wants that
+- if a page has multiple sections, several sections should meaningfully include imagery
+- if a hero exists, it should usually contain a strong visual image, product visual, or art-directed media element
+- imagery should feel premium and intentional, not like stock filler
+
+Avoid:
+- tiny useless thumbnails
+- random decorative images with no structural role
+- one single image and then a completely text-heavy rest of page
+- overusing fake UI panels instead of real visual variety
+
+---
+
+## 8. ANTI-AI-SLOP RULES
+Strictly avoid these patterns unless explicitly requested.
+
+### Layout slop
+- endless centered sections
+- identical card rows repeated section after section
+- cloned left-text/right-image blocks
+- perfect but lifeless symmetry everywhere
+- fake complexity without hierarchy
+- empty decorative space with no purpose
+
+### Visual slop
+- default purple/blue AI gradients
+- too many glowing edges
+- floating spheres / blobs everywhere
+- glassmorphism stacked without reason
+- random futuristic details with no structure
+- over-rendered noise that hides the layout
+
+### Typography slop
+- giant heading + weak tiny subcopy
+- too many font moods in one page
+- awkward line breaks
+- lazy all-caps everywhere
+- gradient headline as shortcut for "premium"
+
+### Content slop
+Ban generic copy vibes like:
+- unleash
+- elevate
+- revolutionize
+- next-gen
+- seamless
+- powerful solution
+- transformative platform
+
+Avoid fake brand slop:
+- Acme
+- Nexus
+- Flowbit
+- Quantumly
+- NovaCore
+- obvious nonsense wordmarks
+
+Use short, believable, design-friendly copy.
+
+### Density slop
+- no over-packed sections
+- no card overload in every block
+- no tiny spacing between major sections
+- no trying to fill every empty area
+- no visually exhausting wall-of-content layouts
+
+---
+
+## 9. TYPOGRAPHY-FIRST DISCIPLINE
+Typography is not filler.
+Typography is a primary design material.
+
+Always ensure:
+- clear size contrast
+- obvious reading order
+- strong display moments
+- supporting text that is readable and brief
+- labels, captions, and section headings that reinforce structure
+
+For editorial directions:
+- let typography shape composition
+
+For tech/product directions:
+- let typography communicate trust and precision
+
+---
+
+## 10. SECTION RHYTHM RULE
+A high-end site does not feel like repeated boxes.
+
+Vary section rhythm across the page by changing:
+- density
+- image-to-text ratio
+- alignment
+- scale
+- whitespace
+- card grouping
+- background intensity
+- visual tempo
+
+Do not let every section feel generated from the same template.
+
+Important:
+- rhythm variation should not break overall cleanliness
+- keep the page visually balanced from top to bottom
+- section heights may vary, but the spacing between sections should feel controlled and fairly even
+- avoid abrupt jumps between very small and very large sections without enough breathing room
+- the full page should feel curated, smooth, and consistent
+
+---
+
+## 11. COMPONENT EXECUTION GUIDELINES
+
+### Diagonal Staggered Square Masonry
+Use square image or content blocks with strong staggered vertical rhythm.
+Should feel curated and graphic, not messy.
+
+### 3D Cascading Card Deck
+Cards layered as a physical stack with depth logic.
+Should feel premium and tactile, not gimmicky.
+
+### Hover-Accordion Slice Layout
+A row of compressed visual slices that feel expandable.
+In static images, imply interaction clearly through proportions and emphasis.
+
+### Pristine Gapless Bento Grid
+Mathematically clean grid.
+No accidental gaps.
+Mix large visual blocks with smaller dense information panels.
+
+### Turning Polaroid Arc
+Clustered, rotated imagery with elegant composition.
+Should feel styled and intentional, not scrapbook-random.
+
+### Off-Grid Editorial Layout
+Use asymmetry and tension with control.
+Must remain readable and clearly structured.
+
+### Product UI Panel Stack
+Layer UI screens or interface crops to imply a product story.
+Avoid generic fake dashboards.
+
+### Vertical Rhythm Lines
+Use fine lines and spacing systems to reinforce order and elegance.
+Never let them become decorative clutter.
+
+---
+
+## 12. DENSITY & SPACING DISCIPLINE
+Do not make everything too dense.
+
+The page should breathe.
+Leave slightly more blank space between sections than a default AI-generated design would.
+
+Rules:
+- use more even vertical spacing between major sections
+- keep section-to-section spacing consistent unless there is a strong design reason not to
+- avoid one section feeling very cramped while the next feels too empty
+- prefer a clean, balanced cadence across the page
+- allow negative space to create rhythm and emphasis
+- separate denser sections with calmer sections
+- avoid stacking too many cards, labels, and content blocks too tightly
+- smaller sections should still receive enough surrounding space so the page feels polished and intentional
+
+A premium page should feel:
+- open
+- composed
+- balanced
+- confident
+- breathable
+
+Not:
+- cramped
+- noisy
+- uneven
+- overfilled
+- visually exhausted
+
+Section rhythm should alternate with control:
+- some sections can be more content-rich
+- some sections can be smaller and calmer
+- but the overall spacing cadence should still feel even, clean, and deliberate
+
+Whitespace is a design tool.
+Use it deliberately.
+Do not let spacing become random.
+
+---
+
+## 13. COLOR & MATERIAL RULES
+
+### Palette Discipline
+Use one controlled palette with one or two accents at most.
+
+### Strong guidance
+- avoid rainbow randomness
+- avoid over-neon unless requested
+- avoid generic startup gradient dependence
+- keep contrast intentional
+- match accent colors to the chosen theme paradigm
+
+### Materiality
+Where appropriate, add:
+- paper feel
+- glass feel
+- brushed metal feel
+- soft blur depth
+- tactile matte surfaces
+- editorial photo treatment
+
+But always keep the frontend structure readable.
+
+---
+
+## 14. IMAGE / MEDIA DIRECTION
+If imagery is present, it must support the layout.
+
+Allowed:
+- art-directed product visuals
+- refined editorial photography
+- UI crops
+- abstract forms with structural purpose
+- framed objects
+- premium texture use
+- campaign-style visuals
+
+Avoid:
+- irrelevant scenery
+- stock-photo cliches
+- decorative junk
+- visuals that overpower the page hierarchy
+
+---
+
+## 15. DEFAULT SITE PACKS
+
+### 4-section pack
+1. Hero
+2. Features
+3. Social proof / testimonial
+4. CTA
+
+### 8-section pack
+1. Hero
+2. Trust bar
+3. Features
+4. Product showcase
+5. Benefits / use cases
+6. Testimonials
+7. Pricing
+8. CTA
+
+### 12-section pack
+1. Hero
+2. Trust bar
+3. Feature grid
+4. Product preview
+5. Problem / solution
+6. Benefits
+7. Workflow
+8. Metrics / proof / integration
+9. Testimonials
+10. Pricing
+11. FAQ
+12. CTA + footer
+
+---
+
+## 16. MULTI-IMAGE CONSISTENCY RULE
+For multi-image sites, enforce:
+- same brand world
+- same type scale logic
+- same spacing discipline
+- same CTA styling
+- same icon or illustration mood
+- same image treatment
+- same tonal language
+
+Image 2 and 3 must not drift into a different site.
+
+---
+
+## 17. CLARITY CHECK
+Before finalizing, verify internally:
+
+1. Is the hierarchy obvious?
+2. Is the hero clean enough?
+3. Is the design visually distinctive?
+4. Is it free of obvious AI tells?
+5. Is it premium rather than template-like?
+6. Can someone code from this?
+7. If multiple images exist, do they clearly belong together?
+8. Is imagery used strongly enough?
+9. Does the page breathe, or is it too dense?
+10. Is there enough spacing between sections?
+11. Does the creativity feel intentional and premium?
+12. Is the spacing between sections even and controlled?
+13. Do smaller sections still have enough surrounding space to feel clean?
+
+If not, refine internally before output.
+
+---
+
+## 18. RESPONSE BEHAVIOR
+When the user asks for a frontend design:
+1. infer site type
+2. infer number of sections
+3. choose image count
+4. choose a strong visual combination
+5. choose 4 signature components
+6. choose 2 motion-implied cues
+7. enforce hero minimalism
+8. enforce strong image usage
+9. increase creativity without adding clutter
+10. keep section spacing generous, even, and clean
+11. remove AI slop
+12. generate the design image(s)
+
+Do not ask unnecessary follow-up questions if a strong interpretation is possible.
+
+---
+
+## 19. EXAMPLE INTERPRETATIONS
+
+### Example 1
+User:
+"make a hero section for an AI startup"
+
+Interpretation:
+- 1 image
+- theme likely Deep Dark or Bold Studio Solid
+- hero architecture likely Asymmetric Split or Inline Typography Behemoth
+- concise statement headline
+- clear CTA
+- premium product visual
+- no cliche dashboard spam
+
+### Example 2
+User:
+"design 8 sections for a fintech website"
+
+Interpretation:
+- 2 tall vertical images
+- Swiss or modular structure
+- strong trust and clarity
+- controlled palette
+- high implementation clarity
+
+### Example 3
+User:
+"creative agency landing page, 12 sections"
+
+Interpretation:
+- 3 tall vertical images
+- editorial or poster-like direction
+- stronger typography
+- more asymmetry
+- still readable and clearly codeable
+
+---
+
+## 20. FINAL GOAL
+Generate frontend reference images that feel:
+- artistic
+- premium
+- clear
+- structured
+- image-led
+- breathable
+- memorable
+- anti-generic
+- implementation-friendly
+
+The result should look like a top-tier website concept with strong imagery, confident creativity, and generous spacing - not a dense, repetitive AI layout.