open-design/skills/editorial-collage/assets/imagegen-prompts.md
Tom Huang 6c2a8ba09f
feat(editorial-collage): introduce Atelier Zero style landing page as… (#366)
* feat(editorial-collage): introduce Atelier Zero style landing page assets and documentation

- Added new design system for Atelier Zero, including a detailed `DESIGN.md` file.
- Created an `editorial-collage` skill with associated assets for a magazine-grade landing page.
- Included example HTML and image assets for various sections (hero, about, capabilities, etc.).
- Updated README files to guide usage and customization of the new skill and design system.
- Introduced a new image generation prompt pack for consistent visual style across the landing page.

* fix(i18n): cover atelier-zero design system and editorial-collage skill in German content

Generated-By: looper 0.4.0 (runner=fixer, agent=claude-code)

* fix(editorial-collage): align manifest with shipped assets and address PR review

- Update image-manifest.json widths/heights/ratios to match the actual PNGs
  on disk: hero/about/cap/testimonial/cta = 1024x1024 (1:1), method-1..4 =
  816x816 (1:1), lab-1..5 and work-1..2 = 768x1024 (3:4). Mirror the new
  dimensions in imagegen-prompts.md headings and in README.md.
- Mark testimonial.png as rekey_on_brand_change so the manifest agrees
  with SKILL.md's "regenerate at minimum testimonial.png" guidance, and
  add work-1/work-2 to the rekey list in SKILL.md and README.md.
- Add a Hero (I.) sec-rule and renumber every following section II..VIII
  in example.html so the eight sections walk sequentially I -> VIII and
  the page-of-008 counter starts at 001.
- Delete editorial-artifact-system/ (16 duplicate PNGs + index.html +
  skills.md draft) — the canonical version is skills/editorial-collage/
  and the duplicate had no consumer references.
- DESIGN.md: spell out which dimensions of each magazine reference
  (Monocle/Apartamento/IDEA), document the rationale for single-accent
  vs multi-accent, and extend the anti-pattern list with AI-image-gen
  artifacts the system explicitly rejects.
- SKILL.md: add italic_words validation guidance (trim, cap at 4,
  verb->noun rewrite, punctuation strip) and replace the broken-image
  fallback with an inline SVG placeholder sized to the slot's
  manifest aspect ratio.

Generated-By: looper 0.4.0 (runner=fixer, agent=claude-code)

* fix(daemon): serve skill example assets via stable API route

Skill example HTML such as `skills/editorial-collage/example.html`
references shipped images via `./assets/*.png`. The web app loads the
example into a sandboxed iframe via `srcdoc`, where relative URLs
resolve against `about:srcdoc` and the PNGs render as broken images in
the Examples preview.

Add a `GET /api/skills/:id/assets/*` route that serves files under the
skill's `assets/` directory with path-traversal guards, and rewrite
`src='./assets/<file>'` / `href='./assets/<file>'` in the example
response to point at that route. The disk preview keeps working
because the on-disk files are unchanged.

Generated-By: looper 0.4.0 (runner=fixer, agent=claude-code)

* feat(landing-page): add new static Next.js 16 site for Open Design marketing

- Introduced a new landing page application using Next.js 16, featuring a static export setup.
- Added essential files including `package.json`, `next.config.ts`, and TypeScript configuration.
- Implemented global styles in `globals.css` to match the Atelier Zero design system.
- Created a detailed `AGENTS.md` for module-level boundaries and purpose.
- Included various image assets for the landing page, ensuring a visually cohesive experience.
- Established a root layout and main page structure to support the marketing content.

* style(landing-page): enhance topbar layout and improve responsiveness

- Added nowrap styling to topbar elements to prevent text overflow.
- Introduced media query to hide mid text in the topbar for screen widths between 1200px and 1280px.
- Updated layout.tsx to suppress hydration warnings for better rendering consistency.
- Removed redundant "Compiled by Open Design" text from the page component.

* feat(landing-page): implement scroll-reveal animations for enhanced user experience

- Added a new `RevealRoot` component to manage scroll-triggered reveal animations.
- Updated `globals.css` with styles for elements using the `data-reveal` attribute, including opacity, translation, and scaling effects.
- Modified `layout.tsx` to include the `RevealRoot` component for managing animations.
- Enhanced `page.tsx` by adding `data-reveal` attributes to various elements for staggered reveal effects.
- Implemented reduced motion support to ensure accessibility for users with motion sensitivity.

* fix(landing-page): update import paths and enhance link styles

- Changed the import path in `next-env.d.ts` to reference the correct routes type definition.
- Enhanced `globals.css` with new styles for topbar links, work cards, and partner elements, improving hover effects and transitions.
- Updated `page.tsx` to include canonical project URLs and made various links point to these URLs for better navigation and accessibility.

* feat(landing-page): implement headroom-style sticky header with live GitHub star count

- Introduced a new `Header` component to manage sticky navigation behavior on scroll, enhancing user experience.
- Updated `globals.css` to style the sticky header, including transitions and visibility toggling based on scroll direction.
- Modified `page.tsx` to replace the static header with the new `Header` component, which fetches and displays the live GitHub star count.
- Ensured accessibility by providing a fallback for users who prefer reduced motion.

* feat(landing-page): enhance editorial landing page with global ticker and new styles

- Updated `next-env.d.ts` to reference the correct routes type definition for development.
- Enhanced `globals.css` with new styles for the global ticker, including responsive design and improved overflow handling.
- Introduced a new `WIRE_CITIES` and `WIRE_CONTRIBS` data structure in `page.tsx` to display a counter-scrolling marquee of cities and contributors.
- Added a ghost button style for the navigation call-to-action in the header.
- Updated various sections in `page.tsx` to integrate the new ticker and improve overall layout and accessibility.

* refactor(landing-page): update paper texture overlay and remove multica-ai link

- Enhanced comments in `globals.css` to clarify the purpose and behavior of the paper texture overlay.
- Adjusted z-index of the overlay to ensure proper layering with other elements.
- Removed the `multica-ai` partner link from `page.tsx` to streamline the partner section.

* feat(landing-page): implement dynamic contributor marquee with GitHub integration

- Added a new `Wire` component to display a counter-scrolling marquee of cities and contributors.
- The contributor list is fetched live from the GitHub API, ensuring up-to-date information.
- Updated `page.tsx` to integrate the `Wire` component, replacing the static contributor list with dynamic content.
- Enhanced comments for clarity regarding the functionality and purpose of the global wire.

* fix(i18n): add German display copy for editorial-collage-deck skill

The Validate workspace test asserts that GERMAN_CONTENT_IDS.skills covers
every curated skill on disk; the new editorial-collage-deck skill was
missing from DE_SKILL_COPY, causing src/i18n/content.test.ts to fail.

Generated-By: looper 0.4.0 (runner=fixer, agent=claude-code)

* feat(landing-page): migrate marketing site to Astro

* perf(landing-page): remove React client runtime

* perf(landing-page): serve images from Cloudflare resizing

* fix(pr): address landing page review feedback

---------

Co-authored-by: mrcfps <mrc@powerformer.com>
2026-05-04 13:39:58 +08:00

9.7 KiB
Raw Blame History

Atelier Zero — Image Generation Prompt Pack

This pack is consumed by the editorial-collage skill. Every page-level image is rendered with gpt-image-fal (preferred) or gpt-image-azure.

The pack has three layers:

  1. Style anchor — the long block that tells the model what universe we are in. Always prepend to every prompt.
  2. Variable slots — the per-render content (subject, motifs, accent, page type).
  3. Per-slot variants — explicit composition templates for hero, about, capabilities, method tiles, lab cards, work cards, testimonial, and CTA.

Render at 1024×1024 minimum for square slots (hero / about / capabilities / testimonial / cta), 816×816 for the four method tiles, and 768×1024 for portrait slots (lab cards, featured work). Authoritative per-slot dimensions and aspect ratios live in image-manifest.json — treat that file as the source of truth. Save as PNG to assets/<slot>.png.


1. Style anchor (always prepend)

Use case: ads-marketing

Asset type: editorial website hero / creative studio landing page visual

Primary request: Generate a refined editorial web page composition in the
same visual language as a high-end creative AI research studio.

Style/medium: sophisticated digital collage, modern Swiss editorial layout,
Bauhaus geometric composition, classical plaster sculpture fragments,
brutalist/minimal architecture, art-direction website mockup, premium
agency aesthetic.

Scene/backdrop: warm off-white handmade paper background with subtle
grain, faint vertical folds, scanned paper fibers, lightly aged print
texture, thin drafting lines and registration marks.

Subject: a surreal collage combining a cropped classical plaster head or
face fragment, abstract architectural blocks, archways or stairs, sky
cutouts, one small human figure, a delicate tree or botanical element,
and geometric color planes.

Composition/framing: wide 16:9 web page layout, strong asymmetrical
grid, generous negative space, large typography area on the left or
top-left, collage focal object on the right or center-right, precise
alignment, thin divider lines, small UI navigation details.

Lighting/mood: soft diffused daylight, museum-like calm, intelligent,
restrained, tactile, poetic, premium, research-driven.

Color palette: warm ivory, stone beige, soft concrete gray, deep black
text, muted charcoal, washed coral-red accent, occasional mustard-yellow
accent, pale sky blue only inside small sky/image cutouts.

Materials/textures: matte plaster, limestone, travertine, concrete, rough
torn paper edges, halftone print grain, translucent vellum-like overlays,
fine grid paper, dotted matrix patterns.

Typography: large clean grotesk sans-serif for main headline, elegant
high-contrast italic serif for emphasized words, tiny uppercase coral
labels, compact UI microcopy. Text must be crisp, readable, and spelled
exactly as provided.

Graphic details: thin hairline circles, partial arcs, crosshair marks,
small black dots, dotted grids, fine coordinate lines, numbered
annotations, small arrow buttons, simple pill buttons, minimal logo mark.

Constraints: preserve a high-end editorial web design feel; keep spacing
elegant and uncluttered; no cartoon style; no neon colors; no glossy 3D;
no busy gradients; no generic stock-photo look.

Avoid: distorted typography, misspelled text, extra random words, heavy
shadows, childish illustration, cyberpunk, saturated purple/blue palette,
plastic materials, overly decorative UI cards, cluttered composition,
low-resolution textures, watermarks.

2. Variable slots (substitute per render)

Brand/logo text:        "<BRAND_NAME>"
Navigation text:        "<NAV_1>", "<NAV_2>", "<NAV_3>", "<NAV_4>", "<NAV_5>"
Eyebrow label:          "<EYEBROW>"
Main headline:          "<MAIN_HEADLINE>"
Italic emphasis words:  "<ITALIC_WORDS>"
Body copy:              "<BODY_COPY>"
Primary button:         "<PRIMARY_CTA>"
Secondary button:       "<SECONDARY_CTA>"
Footer/micro labels:    "<FOOTER_LABELS>"
Main collage subject:   <plaster head | eye | hand | arch | stair | tree | landscape | object>
Inserted texture motifs:<sky, mountain, ocean, eye close-up, dancer, stone, fabric, map, grid, handwritten note>
Accent color:           <washed coral red | mustard yellow | pale blue | muted sage>
Page type:              <hero | about | capabilities | method tile | lab card | work card | testimonial | cta>

3. Per-slot composition templates

hero.png — 1:1 (1024×1024)

Composition/framing: left half is intentionally empty/quiet to allow real
HTML headline overlay; right half holds a tall surreal collage of a
cropped classical plaster head with the top sliced open, sky/architecture
cutouts visible inside the head, a delicate young tree growing through
the composition, a coral sun disk behind, a mustard accent ring at the
base, hairline coordinate marks and dotted matrices around it, a small
human figure standing for scale in the lower-left of the image. Page
type: hero landing.

about.png — 1:1 (1024×1024)

Composition: a surreal museum-vitrine arrangement of a partial plaster
profile head facing right, with an open archway carved through the
torso, sky cutout inside the arch, a tree seedling growing out of the
shoulder, and a coral half-circle behind the head. Tiny dotted hairlines
trace contours. Strong negative space top-left for a side-note overlay.
Page type: about / manifesto plate.

capabilities.png — 1:1 (1024×1024)

Composition: a Bauhaus-grid stack of architectural fragments — a coral
arch on the left, a beige concrete column center, a mustard small disc
upper-right, a delicate tree mid-frame, a small classical hand fragment
holding a pencil bottom-center. Crosshair and circular hairlines
overlay. Page type: capabilities matrix.

method-1.pngmethod-4.png — 1:1 (816×816)

Composition: a single visual metaphor per step.
  method-1 — a magnifying glass over a small architectural map (Detect)
  method-2 — a clipboard with a tiny questionnaire and a coral pen (Discover)
  method-3 — a compass + ruler + color swatch fan (Direct)
  method-4 — a printer's tray with stacked paper sheets exiting (Deliver)
Each on the warm paper ground with hairline grid, a single coral or
mustard accent piece, and one numbered annotation tag. Page type:
method tile.

lab-1.pnglab-5.png — 3:4 (768×1024)

Composition: portrait-oriented experiment cards. Each is a square-ish
plaster-and-architecture vignette, vertical, with a single dominant
subject:
  lab-1 — a stack of folded magazine spreads
  lab-2 — a film strip + a synthetic eye + a soundwave hairline
  lab-3 — a typewriter with prompt cards in the carriage
  lab-4 — five small dotted gauges arranged in a circle (5-dim critique)
  lab-5 — a glass dome / cloche over a tiny sandbox cityscape (Sandbox)
Use the same paper ground; allow soft drop shadow but stay restrained.
Page type: lab card.

work-1.png & work-2.png — 3:4 (768×1024)

Composition: featured work plates.
  work-1 — guizang-ppt: an oversized open magazine spread on a desk,
           coral spine, mustard tab. Slight perspective.
  work-2 — dating-web: a concrete dashboard slab, a coral graph bar
           rising, a small classical bust beside it for scale.
Both on the warm paper ground with crop marks.
Page type: work card.

testimonial.png — 1:1 (1024×1024)

Composition: a classical plaster bust facing 3/4 left, slightly cropped,
with a small sky cutout where the eye would be, a thin coral arc around
the back of the head, mustard dot at the chin. Quiet background, lots of
negative space upper right. Page type: testimonial portrait.

cta.png — 1:1 (1024×1024)

Composition: a closing-plate collage — a mustard sun behind a single
coral arch on the right, a delicate tree growing through the arch, a
small human figure in the lower-left foreground reading a folded
broadsheet, hairline coordinate ladder up the left edge, and a small
"FIN." dotted seal in the upper-right. Page type: closing CTA plate.

4. Chinese project input template

Use only when the model copy must be Chinese; otherwise prefer English for legibility. Keep verbatim text short.

请生成一张 16:9 横版网页视觉稿,风格为高级创意 AI 工作室官网:现代瑞士编辑排版、
包豪斯几何、古典石膏雕塑拼贴、极简建筑、手工纸张肌理、细线工程制图标记。

品牌文字:"<品牌名>"
导航:"<导航1>", "<导航2>", "<导航3>", "<导航4>"
小标签:"<小标签>"
主标题必须逐字渲染:"<主标题>"
强调词(斜体衬线):"<强调词>"
正文必须逐字渲染:"<正文>"
按钮文字:"<按钮1>", "<按钮2>"

画面主体:<主体描述>
贴图与元素:<天空 / 石材 / 植物 / 人物 / 眼睛 / 山脉 / 水面 / UI 截图等>
构图:<左文右图 / 右文左图 / 顶部大标题下方横向卡片 / 中央拼贴 / 时间线分栏>
色彩:暖象牙白纸张、黑色文字、石灰/混凝土灰、炭黑、低饱和珊瑚红点缀、
     少量芥末黄或浅天蓝。

限制:文字清晰可读、不添加多余文字、不要水印、不要卡通、不要霓虹、
     不要厚重阴影、不要俗套科技蓝紫渐变。

5. Calling convention

Pseudocode for an agent driver:

for (const slot of imageManifest.slots) {
  const prompt = [
    STYLE_ANCHOR,
    fillVars(VARIABLE_SLOTS, brand),
    PER_SLOT[slot.id],
  ].join('\n\n');

  await gptImageFal({
    prompt,
    width:  slot.width,
    height: slot.height,
    quality: 'high',
    output: `assets/${slot.id}.png`,
  });
}

If gpt-image-fal is unavailable, the same prompts work with gpt-image-azure — but mask-based inpainting is azure-only.