npm - @w3kits-com/plugin-opendesign - Versions diffs - 0.1.8 → 0.1.9 - Mend

@w3kits-com/plugin-opendesign 0.1.8 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1706) hide show

package/dist/__w3kits/assets/design-templates/motion-frames/example.html ADDED Viewed

@@ -0,0 +1,221 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Reach every country — Charlotte &amp; Vine</title>
+  <style>
+    :root {
+      --paper: #f3eee5;
+      --ink: #1a1816;
+      --muted: #7a766c;
+      --accent: #c0563b;
+      --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
+      --mono: ui-monospace, 'JetBrains Mono', monospace;
+    }
+    * { box-sizing: border-box; }
+    html, body { margin: 0; height: 100%; }
+    body { background: var(--paper); color: var(--ink); font: 14px/1.5 -apple-system, system-ui, sans-serif; overflow: hidden; }
+    main {
+      position: relative;
+      width: 100vw;
+      height: 100vh;
+      background:
+        radial-gradient(circle at 50% 50%, rgba(26,24,22,0.04), transparent 70%),
+        radial-gradient(circle, rgba(26,24,22,0.10) 1px, transparent 1.4px) 0 0 / 28px 28px,
+        var(--paper);
+      overflow: hidden;
+    }
+    .chrome { position: absolute; left: 36px; right: 36px; font: 10px/1.4 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; }
+    .chrome.top { top: 28px; display: flex; justify-content: space-between; align-items: center; }
+    .chrome.top .right { display: flex; align-items: center; gap: 22px; }
+    .chrome.top .rule { width: 60px; height: 1px; background: var(--ink); opacity: 0.6; }
+    .chrome.bot { bottom: 28px; display: flex; justify-content: space-between; align-items: center; }
+    .stage {
+      position: absolute;
+      inset: 0;
+      display: grid;
+      place-items: center;
+    }
+    .composition {
+      position: relative;
+      width: min(78vh, 78vw);
+      aspect-ratio: 1 / 1;
+    }
+    .ring {
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      border: 1px solid rgba(26,24,22,0.45);
+      animation: spin 60s linear infinite;
+    }
+    .ring.r2 {
+      inset: 4%;
+      border-color: rgba(26,24,22,0.30);
+      animation-duration: 90s;
+      animation-direction: reverse;
+    }
+    .ring.r3 {
+      inset: 10%;
+      border-color: rgba(26,24,22,0.22);
+      border-style: dashed;
+      animation-duration: 180s;
+    }
+    .ring.r4 {
+      inset: 18%;
+      border-color: rgba(26,24,22,0.12);
+      animation-duration: 36s;
+    }
+    .ring-labels { position: absolute; inset: 0; animation: spin 60s linear infinite; }
+    .ring-labels span {
+      position: absolute;
+      left: 50%; top: 50%;
+      font: 12px/1 var(--serif);
+      font-style: italic;
+      color: var(--ink);
+      letter-spacing: 0.02em;
+      transform-origin: 0 0;
+      white-space: nowrap;
+    }
+    .ring-labels span.l1 { transform: rotate(-12deg) translate(0, -49vh); }
+    .ring-labels span.l2 { transform: rotate(34deg) translate(0, -49vh); }
+    .ring-labels span.l3 { transform: rotate(78deg) translate(0, -49vh); }
+    .ring-labels span.l4 { transform: rotate(132deg) translate(0, -49vh); }
+    .ring-labels span.l5 { transform: rotate(178deg) translate(0, -49vh); }
+    .ring-labels span.l6 { transform: rotate(224deg) translate(0, -49vh); }
+    .ring-labels span.l7 { transform: rotate(266deg) translate(0, -49vh); }
+    .ring-labels span.l8 { transform: rotate(312deg) translate(0, -49vh); }
+    .ring-labels span i { display: inline-block; transform: rotate(0deg); /* counter rotation handled inside */ }
+    .globe {
+      position: absolute;
+      inset: 22%;
+      border-radius: 50%;
+      animation: spin 38s linear infinite reverse;
+      transform-style: preserve-3d;
+    }
+    .globe svg { width: 100%; height: 100%; display: block; }
+    .focal-dot {
+      position: absolute;
+      left: 50%; top: 50%;
+      width: 7px; height: 7px;
+      background: var(--accent);
+      border-radius: 50%;
+      transform: translate(-50%,-50%);
+      animation: pulse 2.6s ease-in-out infinite;
+      box-shadow: 0 0 0 0 rgba(192,86,59,0.35);
+    }
+    .meta-tl { position: absolute; top: 96px; left: 56px; font: 10px/1.5 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; }
+    .meta-tl b { display: block; color: var(--ink); margin-bottom: 4px; letter-spacing: 0.12em; }
+    .issue { position: absolute; top: 96px; right: 56px; font: 9px/1.3 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-align: right; text-transform: uppercase; }
+    .issue .num { font: 18px/1 var(--serif); font-style: italic; color: var(--ink); display: block; letter-spacing: 0; margin-bottom: 4px; }
+    .headline {
+      position: absolute;
+      bottom: 80px;
+      left: 0; right: 0;
+      text-align: center;
+      font: 38px/1.1 var(--serif);
+      letter-spacing: -0.005em;
+      animation: type-in 1.4s cubic-bezier(.2,.7,.2,1) both;
+    }
+    .headline .em { font-style: italic; color: var(--ink); }
+    .headline .accent { font-style: italic; color: var(--accent); padding-left: 4px; padding-right: 4px; }
+    .baseline { position: absolute; bottom: 56px; left: 36px; right: 36px; height: 1px; background: rgba(26,24,22,0.25); }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    @keyframes pulse {
+      0%, 100% { box-shadow: 0 0 0 0 rgba(192,86,59,0.45); transform: translate(-50%,-50%) scale(1); }
+      50% { box-shadow: 0 0 0 18px rgba(192,86,59,0); transform: translate(-50%,-50%) scale(1.25); }
+    }
+    @keyframes type-in {
+      from { opacity: 0; letter-spacing: 0.06em; }
+      to { opacity: 1; letter-spacing: -0.005em; }
+    }
+    @media (max-width: 900px) {
+      .meta-tl { left: 20px; }
+      .issue { right: 20px; }
+      .headline { font-size: 28px; }
+    }
+  </style>
+</head>
+<body>
+  <main data-od-id="stage">
+    <div class="chrome top">
+      <div>ANTHROPIC LABS — APR 17 · 2026</div>
+      <div class="right"><div class="rule"></div><div>HOW IT WORKS</div></div>
+    </div>
+    <div class="meta-tl">
+      <b>27 · CHARLOTTE × VINE</b>
+      19 · 2026
+    </div>
+    <div class="issue">
+      <span class="num">175</span>
+      LANGUAGES HAPPENING
+    </div>
+    <div class="stage">
+      <div class="composition" data-od-id="composition">
+        <div class="ring r1"></div>
+        <div class="ring r2"></div>
+        <div class="ring r3"></div>
+        <div class="ring r4"></div>
+        <div class="globe" data-od-id="globe">
+          <svg viewBox="0 0 200 200" aria-hidden="true">
+            <defs>
+              <radialGradient id="globeShade" cx="35%" cy="32%" r="78%">
+                <stop offset="0%" stop-color="#fffaf0"/>
+                <stop offset="60%" stop-color="#ece6da"/>
+                <stop offset="100%" stop-color="#cfc8b9"/>
+              </radialGradient>
+            </defs>
+            <circle cx="100" cy="100" r="92" fill="url(#globeShade)" stroke="rgba(26,24,22,0.35)" stroke-width="0.7"/>
+            <g fill="none" stroke="rgba(26,24,22,0.40)" stroke-width="0.7">
+              <ellipse cx="100" cy="100" rx="92" ry="20"/>
+              <ellipse cx="100" cy="100" rx="92" ry="48"/>
+              <ellipse cx="100" cy="100" rx="92" ry="78"/>
+              <ellipse cx="100" cy="100" rx="20" ry="92"/>
+              <ellipse cx="100" cy="100" rx="48" ry="92"/>
+              <ellipse cx="100" cy="100" rx="78" ry="92"/>
+            </g>
+            <g fill="rgba(26,24,22,0.28)" stroke="rgba(26,24,22,0.55)" stroke-width="0.6">
+              <path d="M 64 70 Q 78 58 96 64 L 110 78 Q 102 92 88 96 L 70 92 Q 60 84 64 70 Z"/>
+              <path d="M 116 70 Q 138 64 156 80 Q 152 96 138 100 Q 124 96 116 86 Z"/>
+              <path d="M 54 110 Q 72 110 84 124 Q 80 142 64 150 Q 50 138 54 110 Z"/>
+              <path d="M 102 118 Q 124 112 146 126 Q 142 144 120 152 Q 102 144 102 118 Z"/>
+              <path d="M 84 36 Q 98 32 112 38 L 108 50 Q 96 56 84 50 Z"/>
+              <path d="M 80 158 Q 96 156 110 162 L 104 174 Q 90 174 80 168 Z"/>
+            </g>
+          </svg>
+        </div>
+        <div class="focal-dot"></div>
+      </div>
+    </div>
+    <div class="ring-labels" data-od-id="ring-labels" aria-hidden="true">
+      <!-- positioned around the outer ring; co-rotates with .ring -->
+    </div>
+    <div class="headline" data-od-id="headline">
+      <span class="em">Reach</span> every <span class="accent">country.</span>
+    </div>
+    <div class="baseline"></div>
+    <div class="chrome bot">
+      <div>SIGNAL · LIVE</div>
+      <div>BROADCASTING / 0001</div>
+    </div>
+  </main>
+</body>
+</html>

package/dist/__w3kits/assets/design-templates/open-design-landing/README.md ADDED Viewed

@@ -0,0 +1,119 @@
+# open-design-landing
+Reusable skill that produces a world-class editorial landing page in
+the **Atelier Zero** design language — the warm-paper, italic-serif,
+collage-on-grid aesthetic shared by Monocle, Apartamento, and Études.
+The skill is parameterized: fill one typed `inputs.json`, run one
+script, get a self-contained HTML file. Optionally generate 16 surreal
+collage assets with `gpt-image-2`, or fall back to paper-textured SVG
+placeholders so the layout still feels intentional with zero image
+budget.
+> **Read first** — the agent contract, inputs schema, and self-check
+> live in [`SKILL.md`](./SKILL.md). This README is the human
+> quick-start.
+## 30-second tour
+```bash
+# 1. Paper-textured placeholders so the layout renders immediately.
+npx tsx scripts/placeholder.ts ./out/assets/
+# 2. Compose the standalone HTML from the worked example.
+npx tsx scripts/compose.ts inputs.example.json ./out/index.html
+# 3. Open it.
+open ./out/index.html
+```
+That's it. Three commands, full editorial landing page, no API keys.
+To brand it for yourself, copy `inputs.example.json` to `inputs.json`,
+edit the fields (the schema is self-documenting — see
+[`schema.ts`](./schema.ts)), and re-run step 2.
+## The three image strategies
+| Strategy        | Cost   | Latency | When                                      |
+| :-------------- | :----- | :------ | :---------------------------------------- |
+| `placeholder`   | $0     | <1s     | First pass, demo, internal review.        |
+| `generate`      | ~$0.40 | ~6 min  | Final delivery; original collage plates.  |
+| `bring-your-own`| $0     | 0s      | You have art direction PNGs ready to drop in. |
+Set `inputs.imagery.strategy` to one of the three.
+```bash
+# generate mode (requires FAL_KEY in env)
+FAL_KEY=fal-... npx tsx scripts/imagegen.ts inputs.json --out=./out/assets/
+```
+Without `FAL_KEY`, the imagegen script prints the prompts so you can
+route them through the `/gpt-image-fal` slash-command skill manually.
+## Layout at a glance
+8 numbered Roman-numeral sections, all responsive at 1280 / 1080 / 880 / 560:
+```
+I.   Hero          — display headline + 3 stat rings + 4-step index + collage plate
+II.  About         — manifesto + studio stamp + tilted side-note
+III. Capabilities  — 4 cards (skills / systems / adapters / BYOK) + ribbon
+IV.  Labs          — 5 portrait cards + filter pills + progress bar
+V.   Method        — 4 numbered steps with thumbnails on hairline timeline
+VI.  Selected work — dark slab, 2 tilted cards (one rotated -1.2°, one +2.4°)
+VII. Testimonial   — pull quote + 5 partner glyphs
+VIII. CTA          — closing pitch + ribbon + email pill
+     Footer       — 4 link columns + huge italic-serif kicker word
+```
+Every section has scroll-reveal motion (IntersectionObserver, respects
+`prefers-reduced-motion`).
+## Files
+```text
+skills/open-design-landing/
+├── SKILL.md                 # ← agent contract (read this first)
+├── README.md                # ← you are here
+├── schema.ts                # typed inputs (single source of truth)
+├── styles.css               # Atelier Zero stylesheet (single source of truth)
+├── inputs.example.json      # Open Design as the worked example
+├── example.html             # canonical rendering, regenerable from inputs.example.json
+├── scripts/
+│   ├── compose.ts           # inputs.json + styles.css → index.html
+│   ├── imagegen.ts          # gpt-image-2 wrapper (fal.ai backend)
+│   └── placeholder.ts       # SVG paper-textured frames
+└── assets/
+    ├── *.png                # 16 collage plates (Open Design instance)
+    ├── image-manifest.json  # slot → file / dimensions / prompt mapping
+    └── imagegen-prompts.md  # human-readable prompt pack
+```
+## Regenerate the canonical example
+After editing `styles.css`, `schema.ts`, or `inputs.example.json`:
+```bash
+npx tsx scripts/compose.ts inputs.example.json example.html
+```
+The `example.html` in this folder is the pre-rendered known-good demo —
+useful as a visual reference and for QA against the live composer
+output.
+## Migrating from `editorial-collage`
+This skill replaces the older `editorial-collage` folder:
+- **Path:** `skills/editorial-collage/` → `skills/open-design-landing/`.
+- **Shared assets:** downstream paths such as `../editorial-collage/assets/`
+  (for example from the slide-deck skill) should use
+  [`../open-design-landing/assets/`](./assets/) — see
+  [`open-design-landing-deck`](../open-design-landing-deck/README.md).
+## See also
+- [`design-systems/atelier-zero/DESIGN.md`](../../design-systems/atelier-zero/DESIGN.md) — colors, type, motion tokens.
+- [`apps/landing-page/`](../../apps/landing-page/) — Astro static site that mirrors this skill’s markup at deploy time.
+- [`skills/open-design-landing-deck/`](../open-design-landing-deck/) — sibling skill that produces a slide deck in the same visual language.

package/dist/__w3kits/assets/design-templates/open-design-landing/SKILL.md ADDED Viewed

@@ -0,0 +1,321 @@
+---
+name: open-design-landing
+description: >
+  Produce a world-class single-page editorial landing site in the
+  Atelier Zero visual language (Monocle / Apartamento / Études editorial
+  collage) — the same aesthetic Open Design uses for its own marketing
+  surface. The agent fills a typed `inputs.json` from a brand brief,
+  optionally generates 16 collage assets via gpt-image-2, then runs a
+  pure-function composer that emits a self-contained HTML file; a
+  separate path can mirror the Astro marketing site in `apps/landing-page/`.
+  Drop-in scroll-reveal motion and a
+  Headroom-style sticky nav are wired automatically.
+triggers:
+  - landing page
+  - 落地页
+  - editorial site
+  - magazine layout
+  - hero collage
+  - atelier zero
+  - open design landing
+od:
+  category: brand-page
+  surface: web
+  scenario: marketing
+  featured: 1
+  audience: founders, design studios, OSS maintainers
+  tone: editorial, restrained, premium
+  scale: viewport-anchored long-form single page
+  craft:
+    requires:
+      - pixel-discipline
+      - typographic-rhythm
+inputs:
+  - id: brand
+    label: Brand identity
+    description: Name, mark, tagline, location, languages, license, repo url.
+    schema_path: ./schema.ts#BrandBlock
+  - id: nav
+    label: Navigation links
+    description: Up to 5 nav entries, each with optional count badge.
+    schema_path: ./schema.ts#NavLink
+  - id: hero
+    label: Hero copy + 3 stat rings + 4-step index
+    schema_path: ./schema.ts#HeroBlock
+  - id: about
+    label: Manifesto / about block
+    schema_path: ./schema.ts#AboutBlock
+  - id: capabilities
+    label: 4 capability cards
+    schema_path: ./schema.ts#CapabilitiesBlock
+  - id: labs
+    label: 5 lab cards + filter pills
+    schema_path: ./schema.ts#LabsBlock
+  - id: method
+    label: 4 method steps with thumbnails
+    schema_path: ./schema.ts#MethodBlock
+  - id: work
+    label: 2 selected-work cards on dark slab
+    schema_path: ./schema.ts#WorkBlock
+  - id: testimonial
+    label: Pull quote + author + 5 partner glyphs
+    schema_path: ./schema.ts#TestimonialBlock
+  - id: cta
+    label: Closing CTA + ribbon
+    schema_path: ./schema.ts#CTABlock
+  - id: footer
+    label: Brand description + 4 link columns + mega kicker
+    schema_path: ./schema.ts#FooterBlock
+  - id: imagery
+    label: Image strategy (generate / placeholder / bring-your-own)
+    schema_path: ./schema.ts#ImageryConfig
+parameters:
+  output_format:
+    type: enum
+    values: [standalone-html, nextjs-app, both]
+    default: standalone-html
+    description: >
+      `standalone-html` writes one self-contained .html (CSS inlined,
+      scripts inline, images relative). `nextjs-app` is the historical
+      enum label for cloning the Astro-based `apps/landing-page/` tree and
+      wiring the same content. `both` writes both products into the output dir.
+  image_strategy:
+    type: enum
+    values: [generate, placeholder, bring-your-own]
+    default: placeholder
+    description: >
+      `generate` calls gpt-image-2 (fal.ai or Azure) for all 16 slots.
+      `placeholder` writes paper-textured SVG frames so the layout is
+      fully visible without an image budget. `bring-your-own` assumes
+      the user has dropped 16 PNGs at `imagery.assets_path` already.
+  image_provider:
+    type: enum
+    values: [fal, azure]
+    default: fal
+    description: "Provider for `image_strategy: generate`. fal.ai is faster."
+outputs:
+  - path: <out>/index.html
+    when: output_format in [standalone-html, both]
+    description: Self-contained HTML with Atelier Zero CSS inlined.
+  - path: <out>/assets/*.png (or *.svg)
+    description: 16 collage assets, generated or placeholder per strategy.
+  - path: <out>/nextjs/
+    when: output_format in [nextjs-app, both]
+    description: Astro static tree mirroring apps/landing-page (folder name is historical).
+capabilities_required:
+  - file-write
+  - http-fetch        # only when image_strategy=generate
+  - node-runtime      # tsx or compatible
+example_prompt: |
+  Build me an editorial landing page for "Lumen Field", an indie studio
+  shipping a soundscape app for focus. Coral accent, Berlin coordinates,
+  mention the iOS Beta TestFlight, three stats: 12 soundscapes / 4
+  presets / 1 daily ritual. Use the placeholder image strategy.
+---
+# open-design-landing
+Build a single-page editorial landing site (or a slide deck — see the
+sibling [`open-design-landing-deck`](../open-design-landing-deck/) skill)
+in the **Atelier Zero** design system: warm-paper background, Inter
+Tight + Playfair Display, italic serif emphasis spans, dotted hairline
+rules, coral terminating dots, scroll-reveal motion, and 16 surreal
+collage plates.
+This is the canonical Open Design marketing-page recipe — the example
+output is the very page you see at [open-design](https://github.com/nexu-io/open-design).
+The skill is fully **parameterized**. The agent fills one typed
+`inputs.json` from the user's brief; the composer turns that JSON +
+the canonical [`styles.css`](./styles.css) into a deployable artifact.
+```text
+inputs.json + styles.css                       16 image slots
+        │                                            │
+        └──────────► scripts/compose.ts ◄────────────┘
+                            │
+                            ▼
+              <out>/index.html  (self-contained)
+              <out>/assets/      (PNG or SVG)
+```
+---
+## What you get
+A single HTML file with **all** of:
+- Editorial topbar (volume / issue / language strip), Headroom-style
+  sticky nav with live GitHub star count.
+- 8 numbered Roman-numeral sections with paper-textured background:
+  hero (with 3 stat rings + 4-step index), about, capabilities (4 cards),
+  labs (5 cards + filter pills + progress bar), method (4 steps with
+  thumbnails), selected work (dark slab + 2 tilted cards), testimonial
+  (pull quote + 5 partner glyphs), CTA (ribbon + email pill).
+- Footer with 4 link columns + huge italic-serif kicker word.
+- Scroll-reveal motion on every section (IntersectionObserver, respects
+  `prefers-reduced-motion`).
+- Fully responsive at 1280 / 1080 / 880 / 560 breakpoints.
+---
+## Workflow contract
+Run these four steps in order. The agent should **complete** each step
+before moving on, and prefer asking the user a focused question over
+inventing copy.
+### 1. Gather brand inputs
+Use `AskQuestion` (or the equivalent in your UI) to collect the brand
+brief in chunks; do **not** dump the entire `schema.ts` on the user.
+Map their answers into `inputs.json` matching the typed shape.
+The eight question groups, in order:
+| Group | Schema fields                                           | Min answers | Notes                                    |
+| :---- | :------------------------------------------------------ | :---------- | :--------------------------------------- |
+| 1     | `brand.{name,mark,tagline,description,location}`        | 5           | Mark = single glyph (Ø, ▲, ★…)           |
+| 2     | `brand.{license,version,year,primary_url,contact_email}`| 4           | URL is required; license defaults Apache-2.0 |
+| 3     | `nav[]` (up to 5)                                       | 3           | Optional count badges                     |
+| 4     | `hero.{label,headline,lead,primary,secondary,stats}`    | All         | Headline as `MixedText` (sans+em+dot)     |
+| 5     | `about` + `capabilities.cards[4]`                       | All         | 4 cards × {num,tag,title,body}            |
+| 6     | `labs.cards[5]` + `method.steps[4]`                     | All         | Both grids fixed-arity                    |
+| 7     | `work.cards[2]` + `testimonial`                         | All         | 5 partner glyphs as inline SVG path data |
+| 8     | `cta` + `footer.{columns[4],mega}`                      | All         | Mega kicker is a `MixedText` like the headlines |
+Open [`inputs.example.json`](./inputs.example.json) for a complete
+worked example (Open Design itself).
+### 2. Decide the image strategy
+| Strategy          | When to choose                                          | Cost / latency        |
+| :---------------- | :------------------------------------------------------ | :-------------------- |
+| `placeholder`     | First pass. Demo. Slide internal. No image budget yet.  | $0, <1s               |
+| `generate`        | Final delivery. Brand wants original collages.          | ~$0.40, ~6 min        |
+| `bring-your-own`  | User has art direction PNGs. Drop them at `assets_path`.| $0, 0s                |
+Set `inputs.imagery.strategy` accordingly.
+#### `placeholder` — frame mode
+```bash
+npx tsx scripts/placeholder.ts <out>/assets/
+```
+Writes 16 `.svg` files (with `.png` aliases for compatibility) into
+`<out>/assets/`. Each placeholder shows the slot id, ratio, pixel
+dimensions, and the prompt hint from `image-manifest.json`. The
+composer's `<img src='./assets/hero.png'>` etc. just work.
+#### `generate` — gpt-image-2 mode
+```bash
+FAL_KEY=... npx tsx scripts/imagegen.ts <inputs.json> --out=<out>/assets/
+```
+Calls fal.ai's `openai/gpt-image-2` synchronous endpoint per slot.
+Composes prompts as: **style anchor** (paper-collage editorial system)
++ **brand variables** (name / nav / headline / italic emphasis pulled
+from `inputs.json`) + **per-slot composition** (e.g. cropped plaster
+head + tree growing through arch). Skips slots whose target file
+already exists; pass `--force` to re-render.
+Without `FAL_KEY`, the script prints the prompts so the operator can
+route them through the `/gpt-image-fal` slash-command skill manually.
+#### `bring-your-own`
+Drop 16 PNGs matching `assets/image-manifest.json` filenames at
+`inputs.imagery.assets_path`. Done.
+### 3. Compose the artifact
+```bash
+npx tsx scripts/compose.ts <inputs.json> <out>/index.html
+```
+The composer reads `inputs.json` and `../styles.css`, then writes one
+self-contained HTML file. The page includes:
+- The full Atelier Zero stylesheet, inlined.
+- All section markup with `data-reveal` attributes for staggered
+  scroll motion.
+- Inline IntersectionObserver script (mirrors
+  `apps/landing-page/app/_components/reveal-root.tsx`).
+- Inline Headroom nav script (mirrors `header.tsx`).
+- Inline GitHub star-count fetcher (auto-detects from `brand.primary_url`).
+### 4. (Optional) Mirror the deployable Astro site
+For deployable production output, **fork the `apps/landing-page/`**
+package: copy it into your workspace, align `app/page.tsx` with content
+from your `inputs.json`, and copy your `<out>/assets/*.png` into the
+paths expected by `app/image-assets.ts` / R2 URLs. Build with
+`pnpm --filter @open-design/landing-page build` for a static `out/`
+export ready for any CDN.
+> A future iteration may bundle a composer that emits the full
+> `apps/landing-page/` tree from `inputs.json` in one command. Until
+> then, fork-and-edit is the supported path.
+---
+## Self-check before delivering
+Before marking done, the agent **must** verify:
+- [ ] `<out>/index.html` opens in a browser without console errors.
+- [ ] All 16 image slots load (no 404s in DevTools network tab).
+- [ ] Headline italic emphasis spans render in Playfair (not sans).
+- [ ] Coral terminating dots appear at every `display` h1/h2 end.
+- [ ] Scroll from top to bottom; every section animates in once.
+- [ ] Resize to 880px and 560px; no horizontal scroll, no overlap.
+- [ ] `prefers-reduced-motion: reduce` (DevTools → Rendering) disables
+      transitions cleanly.
+- [ ] Lighthouse: contrast AA, font-display swap, no layout shift on the
+      hero (CLS < 0.05).
+---
+## Files in this skill
+```text
+skills/open-design-landing/
+├── SKILL.md                 # this contract
+├── README.md                # quick-start
+├── schema.ts                # typed inputs (single source of truth)
+├── styles.css               # Atelier Zero stylesheet (single source of truth)
+├── inputs.example.json      # Open Design as the worked example
+├── example.html             # canonical rendering (regenerated from inputs.example.json)
+├── scripts/
+│   ├── compose.ts           # inputs.json + styles.css → index.html
+│   ├── imagegen.ts          # gpt-image-2 wrapper (fal.ai)
+│   └── placeholder.ts       # SVG paper-textured frames
+└── assets/
+    ├── *.png                # 16 collage plates (Open Design instance)
+    ├── image-manifest.json  # slot → file/dimensions/prompt mapping
+    └── imagegen-prompts.md  # human-readable prompt pack
+```
+---
+## Boundaries
+- **Do not** invent new colors or typefaces. Tokens live in
+  `design-systems/atelier-zero/DESIGN.md`; extend the design system
+  before adding a new ramp here.
+- **Do not** drop `data-reveal` attributes from generated markup.
+  Without them the page goes static and feels dead.
+- **Do not** wrap the composed HTML in a framework that injects its
+  own stylesheet ordering — Atelier Zero relies on stylesheet-order
+  cascade for paper texture and z-index of side rails.
+- **Do not** add a separate stylesheet file for the Astro landing-page
+  fork; copy `styles.css` verbatim into `app/globals.css` so visual parity
+  stays one-to-one.
+## See also
+- [`design-systems/atelier-zero/DESIGN.md`](../../design-systems/atelier-zero/DESIGN.md) — token spec.
+- [`apps/landing-page/`](../../apps/landing-page/) — deployable Astro static counterpart.
+- [`skills/open-design-landing-deck/`](../open-design-landing-deck/) — sibling slides skill that reuses this design system.

package/dist/__w3kits/assets/design-templates/open-design-landing/assets/about.png ADDED Viewed

Binary file

package/dist/__w3kits/assets/design-templates/open-design-landing/assets/capabilities.png ADDED Viewed

Binary file

package/dist/__w3kits/assets/design-templates/open-design-landing/assets/cta.png ADDED Viewed

Binary file

package/dist/__w3kits/assets/design-templates/open-design-landing/assets/hero.png ADDED Viewed

Binary file