// Plan and generate visuals by preservation class: exact product, branded environment, or concept support. Uses strategy-driven shot selection and visual QA instead of generic vibe prompting.
Top-level operator skill for Landing Page Factory. Classifies requests, chooses stage order, enforces prerequisites and hard stops, manages variant pages, reruns changed stages, and handles page-package admin.
Build a deployable landing page from strategy, copy, visuals, and brand profile using category-aware routing, preservation hierarchy, and explicit QA. Single-file HTML output.
Final landing-page QA pass against strategy, proof provenance, mechanism clarity, trust preservation, accessibility, and anti-slop. Gates whether a page is shippable or draft-only.
Extract operator-grade source facts from a website or manual brief: claims, proof, CTAs, mechanism language, trust cues, visual patterns, and page structure with provenance. First stage of Page Factory.
Write mechanism-preserving, proof-disciplined landing page copy from strategy, brand profile, and extract language bank. Includes mandatory sharpness audit and claim control.
Build an evidence-backed brand profile from site extract and page strategy. Separates observed facts from synthesis so downstream skills preserve the brand instead of rewriting it.
| name | page-visuals |
| description | Plan and generate visuals by preservation class: exact product, branded environment, or concept support. Uses strategy-driven shot selection and visual QA instead of generic vibe prompting. |
| metadata | {"openclaw":{"emoji":"📸","user-invocable":true,"requires":{"env":[]}}} |
The job is not "make pretty images." The job is to support conversion without visually lying about the thing being sold.
If the product, packaging, UI, or materials need precision, route accordingly.
workspace/pages/[page-name]/strategy.jsonworkspace/brand/profile.mdworkspace/brand/palette.jsonworkspace/pages/[page-name]/copy.mdUse Page Factory brand artifacts as the source of truth.
workspace/brand/extract.md and workspace/brand/profile.md define the canonical brand understandingProvider selection is mandatory.
If Bloom is configured or expected for the run, you must check Bloom first. Do not silently substitute Cowork-native image generation, generic built-in image tools, or ad hoc image prompting when Bloom is the intended provider.
If Bloom is not configured, blocked, or cannot be reached:
If Nano Banana is the fallback path, confirm that the operator has provided the required adapter/command or API-backed workflow. Do not assume Nano Banana exists just because the name appears in docs.
When Bloom is available:
Fallback to Nano Banana when:
Before switching to Nano Banana, explicitly note why Bloom was not used:
Use the skill-local image provider entrypoint to run actual image generation with provider fallback:
bash skills/page-visuals/scripts/image-provider.sh \
--page-name [page-name] \
--shot-id [shot-id] \
--prompt "[prompt]" \
--preservation-class [exact_product|branded_environment|concept_support]
Use skills/page-visuals/scripts/ as the primary interface for Cowork or any runtime that only uploads the skill folder.
The repo-root /scripts copies are local development conveniences, not a packaging requirement.
Every planned visual must be classified before prompting.
Use when the product’s shape, materials, packaging, UI, or industrial design matter to trust or understanding.
Requirements:
Use when the product can sit in a brand-specific context but does not require perfect object fidelity.
Requirements:
Use when the image is explanatory, atmospheric, or background support rather than trust-critical product proof.
Requirements:
Generate in this order:
If time or budget is limited, drop 4 first.
Write workspace/pages/[page-name]/visuals/index.md with:
# Visual Plan: [page-name]
Generated:
| Shot | Section | Preservation class | Purpose | Required refs | Status |
|---|---|---|---|---|---|
| hero-1 | hero | exact product / branded environment / concept support | | | planned |
When visuals are actually generated, extend the plan with provider metadata where possible:
## Provider runs
| Shot | Provider | Brand context source | Source image IDs / refs | Result |
|---|---|---|---|---|
| hero-1 | bloom | repo profile + Bloom onboarding | bloom:img_123, local product ref | approved |
Also write workspace/pages/[page-name]/visuals/manifest.json with machine-readable fields for:
Always include:
Prompt must state:
Prompt must state:
Prompt must state:
If strategy marks screenshot handling as required:
Every generated image must be scored:
| Dimension | Score /10 | Pass threshold |
|---|---|---|
| section-fit | 8 | |
| palette fidelity | 8 | |
| silhouette / geometry fidelity | 8 when applicable | |
| material fidelity | 8 when applicable | |
| packaging / UI fidelity | 8 when applicable | |
| composition clarity | 8 | |
| artifact absence | 9 | |
| text artifact absence | 10 |
Reject and regenerate if any required dimension fails.
If exact product fidelity is failing repeatedly:
If Bloom is the first-pass provider and fails repeatedly:
Do not let Cowork quietly replace Bloom with its own default image behavior. If the runtime cannot access Bloom, pause and say so.
For scoring criteria and pass thresholds, see skills/page-qa/references/eval-rubric.md.
After visuals are approved, run page-build.