fix(design-templates): emit landing placeholders as .svg without png alias

[YOMXXX]

Fixes #5903

Why

The "Open Design Landing" skill's placeholder strategy materialized every
slot asset as assets/<id>.png whose bytes were actually SVG XML — the old
"png alias for compatibility" behavior. Browsers sniff .png by extension and
refuse the SVG payload, so every placeholder image rendered broken in the
generated artifact (exactly the broken-artifact screenshot in #5903).

I hit this while exercising the placeholder strategy end-to-end; the render
looked broken even though every expected filename existed.

What users will see

Generating a landing page with the placeholder image strategy now produces
working frames. The 16 placeholder slots are written as assets/<id>.svg and
the composed HTML references them as .svg; for the generate /
bring-your-own strategies the HTML still references .png (real PNG
bytes). Placeholder and real imagery never share an extension, so a browser
can no longer be asked to parse SVG bytes as PNG.

Surface area

• UI
• Keyboard shortcut
• CLI / env var
• API / contract
• Extension point — behavior + docs change under design-templates/open-design-landing/
• i18n keys
• New top-level dependency
• Default behavior change
• None

Screenshots

Not applicable — no web UI surface changed. The change is visible in
generated artifacts produced by the skill.

Bug fix verification

• Test path that reproduces the bug: design-templates/open-design-landing has
  no test harness (no package.json / tests/ in the skill directory), so a red
  spec wasn't cheap to write.
• Verification performed instead:
  1. file-style check on the buggy behavior: placeholder output written under
     a .png filename contained <?xml ...?><svg bytes.
  2. Ran scripts/placeholder.ts into a temp dir — writes 16 .svg files, no
     .png aliases.
  3. Ran scripts/compose.ts twice (inputs with strategy: placeholder and
     strategy: bring-your-own) into temp HTML outputs; grepped <img src>
     tags: placeholder emits all 16 .svg, bring-your-own emits all 16 .png.
  4. tsc --noEmit on both scripts passes.

Validation

• npx tsc --noEmit --strict ... scripts/compose.ts scripts/placeholder.ts — clean
• Behavioral check above (placeholder → .svg, bring-your-own → .png) — pass

[lefarcen]

Thanks @YOMXXX — splitting placeholder outputs to real .svg files while keeping generated or user-supplied imagery on .png is the right shape for this bug. I’m routing this through the normal review and validation flow now.

[lefarcen]

🧪 This PR has changes that need a manual QA pass before merge — please hold off self-merging for now; we'll loop QA in once it's merge-ready.

[lefarcen]

Heads-up: PR #5936 is also open against this area. Both PRs touch design-templates/open-design-landing/SKILL.md, design-templates/open-design-landing/scripts/compose.ts, and design-templates/open-design-landing/scripts/placeholder.ts, and both are addressing the placeholder .png/SVG mismatch from #5903. Sharing this so you can compare approaches and avoid duplicate effort while maintainers decide what lands.

[PerishCode]

@YOMXXX This cleanly fixes the placeholder rendering failure by emitting SVG assets under truthful .svg filenames and making the composer select extensions from the imagery strategy while preserving PNG references for generated and bring-your-own assets. I verified all changed ranges and ran the generator/composer end to end: all 16 placeholder references resolve to emitted SVGs, no PNG aliases remain, and both real-image strategies still render 16 PNG references. Nice focused fix and clear documentation—thank you for tracking the browser-facing failure through both sides of the template workflow.

_{🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.}

[lefarcen]

Hey @YOMXXX, PerishCode's review on this head is clean. The remaining step before merge is manual QA on the generated landing output, so I've requested @ivy-ting for that validation pass.

[YOMXXX]

Closing this PR — #5936 by @vinkiYu (opened two weeks earlier) already fixes the same issue #5903 with broader coverage: it updates both the Landing and Landing Deck composers, adds the strategy-aware extension switch, and ships a red/green e2e suite (e2e/tests/open-design-landing-assets.test.ts). Both PRs touch the same files (compose.ts, placeholder.ts, SKILL.md), so keeping only one avoids duplicate work and merge conflicts. #5936 should carry the #5903 fix.

[YOMXXX]

Duplicate of #5936; closing in favor of the earlier, more complete fix.