@feimacode/open-design-agent-kit 0.1.4

package/README.md

@@ -0,0 +1,44 @@
+# @feimacode/open-design-agent-kit
+
+`npx @feimacode/open-design-agent-kit init` sets up [OpenDesign](https://github.com/nexu-io/open-design)'s Claude Code and/or Codex integration directly in your own project — no plugin marketplace add, no manual copying. Modeled on `openspec init`'s own pattern.
+
+## Quick start
+
+```bash
+npx @feimacode/open-design-agent-kit init
+```
+
+Prompts you to pick Claude Code, Codex, or both (both are pre-selected). For scripted/CI use, skip the prompt:
+
+```bash
+npx @feimacode/open-design-agent-kit init --tools all
+# or a specific subset:
+npx @feimacode/open-design-agent-kit init --tools claude
+npx @feimacode/open-design-agent-kit init --tools codex
+```
+
+`init [path]` defaults to the current directory; pass a path to target a different project.
+
+## What it writes
+
+**Claude Code** (`--tools claude`):
+- `.claude/skills/open-design/SKILL.md` — the overview skill (auto-triggers on design requests), plus one explicit-only skill per curated entry (`.claude/skills/<id>/SKILL.md`), same generated content as the [Claude Code plugin](https://github.com/feimacode/open-design-agent-kit#claude-code).
+- `.mcp.json` — merges an `open-design` entry into `mcpServers`. Any other servers you already have configured are preserved; the file is created fresh if it doesn't exist yet.
+
+**Codex** (`--tools codex`):
+- `.agents/skills/open-design/` and one skill per curated entry (with a sibling `agents/openai.yaml` marking it explicit-only) — Codex's own skill-discovery convention.
+- `.codex/config.toml` — created fresh with the `open-design` MCP server registration **only if the file doesn't already exist**. If it does, nothing is touched — the exact snippet to add by hand is printed instead, since no TOML library round-trips an existing file's comments/formatting losslessly.
+
+Both hosts end up pointed at [`@feimacode/open-design-agent-kit-mcp`](https://www.npmjs.com/package/@feimacode/open-design-agent-kit-mcp) via `npx`, the same server the VS Code extension and Claude Code plugin use.
+
+## Safe to re-run
+
+Generated skill files are always fully refreshed — no stale entries left behind from a previous run. A skill directory *you* created by hand under the same location is never touched or deleted; only directories this tool generated itself get replaced. `.mcp.json` only ever has its own `open-design` entry updated; an existing `.codex/config.toml` is never rewritten at all.
+
+## More
+
+Full project layout and the other ways to use OpenDesign (VS Code extension, the Claude Code plugin marketplace, the standalone MCP server) live in the [main repo](https://github.com/feimacode/open-design-agent-kit).
+
+## License
+
+MIT — see [LICENSE](https://github.com/feimacode/open-design-agent-kit/blob/main/LICENSE). Skill/design-system/example content is vendored from [open-design](https://github.com/nexu-io/open-design), licensed Apache-2.0.

package/assets/claude-skills/article-magazine/SKILL.md

@@ -0,0 +1,13 @@
+---
+description: Magazine Article (OpenDesign) — use only when the user explicitly runs this skill
+disable-model-invocation: true
+argument-hint: a brief describing what to build (optional — defaults to a starting example)
+---
+
+<!-- generated:curated-entry -->
+
+Use the OpenDesign skill `od:prototype:article-magazine` (Magazine Article).
+
+Brief: "$ARGUMENTS", or if empty: "Use the Magazine Article template to turn my content into a Huashu / huashu-md-html-inspired long-form HTML essay. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:article-magazine" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/claude-skills/card-xiaohongshu/SKILL.md

@@ -0,0 +1,13 @@
+---
+description: Xiaohongshu Card (OpenDesign) — use only when the user explicitly runs this skill
+disable-model-invocation: true
+argument-hint: a brief describing what to build (optional — defaults to a starting example)
+---
+
+<!-- generated:curated-entry -->
+
+Use the OpenDesign skill `od:prototype:card-xiaohongshu` (Xiaohongshu Card).
+
+Brief: "$ARGUMENTS", or if empty: "Use the Xiaohongshu Card template to turn my content into a Xiaohongshu-style swipeable knowledge-card carousel. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:card-xiaohongshu" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/claude-skills/data-report/SKILL.md

@@ -0,0 +1,13 @@
+---
+description: Data Visualization Report (OpenDesign) — use only when the user explicitly runs this skill
+disable-model-invocation: true
+argument-hint: a brief describing what to build (optional — defaults to a starting example)
+---
+
+<!-- generated:curated-entry -->
+
+Use the OpenDesign skill `od:prototype:data-report` (Data Visualization Report).
+
+Brief: "$ARGUMENTS", or if empty: "Use the Data Visualization Report template to turn my CSV, Excel, or JSON data into a polished visual report page. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:data-report" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/claude-skills/deck-guizang-editorial/SKILL.md

@@ -0,0 +1,13 @@
+---
+description: Guizang Editorial E-Ink Deck (OpenDesign) — use only when the user explicitly runs this skill
+disable-model-invocation: true
+argument-hint: a brief describing what to build (optional — defaults to a starting example)
+---
+
+<!-- generated:curated-entry -->
+
+Use the OpenDesign skill `od:deck:deck-guizang-editorial` (Guizang Editorial E-Ink Deck).
+
+Brief: "$ARGUMENTS", or if empty: "Use the Guizang Editorial E-Ink Deck template to turn my content into an editorial magazine x e-ink horizontal deck with 10 layouts and 5 palettes. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:deck:deck-guizang-editorial" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/claude-skills/deck-open-slide-canvas/SKILL.md

@@ -0,0 +1,13 @@
+---
+description: Open-Slide 1920 Canvas Deck (OpenDesign) — use only when the user explicitly runs this skill
+disable-model-invocation: true
+argument-hint: a brief describing what to build (optional — defaults to a starting example)
+---
+
+<!-- generated:curated-entry -->
+
+Use the OpenDesign skill `od:deck:deck-open-slide-canvas` (Open-Slide 1920 Canvas Deck).
+
+Brief: "$ARGUMENTS", or if empty: "Use the Open-Slide 1920 Canvas Deck template to turn my content into a locked 1920x1080 free-composition deck with React component-level layout. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:deck:deck-open-slide-canvas" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/claude-skills/deck-swiss-international/SKILL.md

@@ -0,0 +1,13 @@
+---
+description: Swiss International Deck (OpenDesign) — use only when the user explicitly runs this skill
+disable-model-invocation: true
+argument-hint: a brief describing what to build (optional — defaults to a starting example)
+---
+
+<!-- generated:curated-entry -->
+
+Use the OpenDesign skill `od:deck:deck-swiss-international` (Swiss International Deck).
+
+Brief: "$ARGUMENTS", or if empty: "Use the Swiss International Deck template to turn my content into a 16-column-grid deck with one saturated accent and 22 locked layouts. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:deck:deck-swiss-international" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/claude-skills/doc-kami-parchment/SKILL.md

@@ -0,0 +1,13 @@
+---
+description: Kami Parchment Document (OpenDesign) — use only when the user explicitly runs this skill
+disable-model-invocation: true
+argument-hint: a brief describing what to build (optional — defaults to a starting example)
+---
+
+<!-- generated:curated-entry -->
+
+Use the OpenDesign skill `od:prototype:doc-kami-parchment` (Kami Parchment Document).
+
+Brief: "$ARGUMENTS", or if empty: "Use the Kami Parchment Document template to turn my content into a warm parchment document with monochrome ink-blue accents, one serif family, and editorial-grade typography. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:doc-kami-parchment" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/claude-skills/frame-data-chart-nyt/SKILL.md

@@ -0,0 +1,13 @@
+---
+description: NYT-Style Data Chart Frame (OpenDesign) — use only when the user explicitly runs this skill
+disable-model-invocation: true
+argument-hint: a brief describing what to build (optional — defaults to a starting example)
+---
+
+<!-- generated:curated-entry -->
+
+Use the OpenDesign skill `od:video:frame-data-chart-nyt` (NYT-Style Data Chart Frame).
+
+Brief: "$ARGUMENTS", or if empty: "Use the NYT-Style Data Chart Frame template to turn my content into a frame with NYT-newsroom typography, staggered reveal animation, and editorial-grade charts. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-data-chart-nyt" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/claude-skills/frame-flowchart-sticky/SKILL.md

@@ -0,0 +1,13 @@
+---
+description: Sticky Flowchart Frame (OpenDesign) — use only when the user explicitly runs this skill
+disable-model-invocation: true
+argument-hint: a brief describing what to build (optional — defaults to a starting example)
+---
+
+<!-- generated:curated-entry -->
+
+Use the OpenDesign skill `od:video:frame-flowchart-sticky` (Sticky Flowchart Frame).
+
+Brief: "$ARGUMENTS", or if empty: "Use the Sticky Flowchart Frame template to turn my content into a whiteboard-brainstorm frame with SVG curve connectors, sticky-note nodes, and cursor interaction. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-flowchart-sticky" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/claude-skills/frame-glitch-title/SKILL.md

@@ -0,0 +1,13 @@
+---
+description: Glitch Title Frame (OpenDesign) — use only when the user explicitly runs this skill
+disable-model-invocation: true
+argument-hint: a brief describing what to build (optional — defaults to a starting example)
+---
+
+<!-- generated:curated-entry -->
+
+Use the OpenDesign skill `od:video:frame-glitch-title` (Glitch Title Frame).
+
+Brief: "$ARGUMENTS", or if empty: "Use the Glitch Title Frame template to turn my content into a digital-glitch, chromatic-offset, data-corruption title frame for a video transition or cyberpunk hero. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-glitch-title" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/claude-skills/frame-light-leak-cinema/SKILL.md

@@ -0,0 +1,13 @@
+---
+description: Light-Leak Cinematic Frame (OpenDesign) — use only when the user explicitly runs this skill
+disable-model-invocation: true
+argument-hint: a brief describing what to build (optional — defaults to a starting example)
+---
+
+<!-- generated:curated-entry -->
+
+Use the OpenDesign skill `od:video:frame-light-leak-cinema` (Light-Leak Cinematic Frame).
+
+Brief: "$ARGUMENTS", or if empty: "Use the Light-Leak Cinematic Frame template to turn my content into a cinematic opening or chapter card with film light leaks, grain, letterbox framing, and large serif type. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-light-leak-cinema" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/claude-skills/frame-liquid-bg-hero/SKILL.md

@@ -0,0 +1,13 @@
+---
+description: Liquid Background Hero (OpenDesign) — use only when the user explicitly runs this skill
+disable-model-invocation: true
+argument-hint: a brief describing what to build (optional — defaults to a starting example)
+---
+
+<!-- generated:curated-entry -->
+
+Use the OpenDesign skill `od:video:frame-liquid-bg-hero` (Liquid Background Hero).
+
+Brief: "$ARGUMENTS", or if empty: "Use the Liquid Background Hero template to turn my content into a WebGL-style fluid displacement background with a quote overlay for a video intro, landing hero, or poster. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-liquid-bg-hero" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/claude-skills/frame-logo-outro/SKILL.md

@@ -0,0 +1,13 @@
+---
+description: Logo Outro Frame (OpenDesign) — use only when the user explicitly runs this skill
+disable-model-invocation: true
+argument-hint: a brief describing what to build (optional — defaults to a starting example)
+---
+
+<!-- generated:curated-entry -->
+
+Use the OpenDesign skill `od:video:frame-logo-outro` (Logo Outro Frame).
+
+Brief: "$ARGUMENTS", or if empty: "Use the Logo Outro Frame template to turn my content into a video outro or brand closing frame with segmented logo assembly, glow bloom, and tagline reveal. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-logo-outro" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/claude-skills/frame-macos-notification/SKILL.md

@@ -0,0 +1,13 @@
+---
+description: macOS Notification Banner (OpenDesign) — use only when the user explicitly runs this skill
+disable-model-invocation: true
+argument-hint: a brief describing what to build (optional — defaults to a starting example)
+---
+
+<!-- generated:curated-entry -->
+
+Use the OpenDesign skill `od:video:frame-macos-notification` (macOS Notification Banner).
+
+Brief: "$ARGUMENTS", or if empty: "Use the macOS Notification Banner template to turn my content into a realistic macOS notification banner for a video overlay or product teaser. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-macos-notification" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/claude-skills/guizang-ppt/SKILL.md

@@ -0,0 +1,13 @@
+---
+description: Write a Brand-to-Revenue Story like a Growth Strategy Lead (OpenDesign) — use only when the user explicitly runs this skill
+disable-model-invocation: true
+argument-hint: a brief describing what to build (optional — defaults to a starting example)
+---
+
+<!-- generated:curated-entry -->
+
+Use the OpenDesign skill `od:deck:guizang-ppt` (Write a Brand-to-Revenue Story like a Growth Strategy Lead).
+
+Brief: "$ARGUMENTS", or if empty: "Create \"Write a Brand-to-Revenue Story like a Growth Strategy Lead\" as a Marketing and GTM deck in the Guizang Ppt visual system. Scene: annual-marketing-plan. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce a commercial-grade slide plan, written slides, visual direction, speaker-ready structure, and critic pass against this rubric: can the plan connect creative choices to measurable growth."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:deck:guizang-ppt" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/claude-skills/mockup-device-3d/SKILL.md

@@ -0,0 +1,13 @@
+---
+description: Device 3D Showcase (OpenDesign) — use only when the user explicitly runs this skill
+disable-model-invocation: true
+argument-hint: a brief describing what to build (optional — defaults to a starting example)
+---
+
+<!-- generated:curated-entry -->
+
+Use the OpenDesign skill `od:prototype:mockup-device-3d` (Device 3D Showcase).
+
+Brief: "$ARGUMENTS", or if empty: "Use the Device 3D Showcase template to turn my content into a static iPhone and MacBook 3D-style showcase with real HTML embedded on the screens. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:mockup-device-3d" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/claude-skills/open-design/SKILL.md

@@ -0,0 +1,29 @@
+---
+name: open-design
+description: Generate design artifacts (landing pages, decks, prototypes, dashboards, components) using OpenDesign's bundled design skills and design systems. Use whenever the user asks to design, build, mock up, or generate something visual — a landing page, pitch deck, dashboard, prototype, or marketing page — even if they don't say "OpenDesign" explicitly.
+---
+
+OpenDesign is a bundled catalog of design skills and design templates (reusable task recipes and rendering styles — both usable interchangeably as a `skillId`) plus design systems (brand-inspired visual token sets), exposed through the `open-design` MCP server's tools.
+
+Every skill/template id is namespaced as `od:<mode>:<name>` (e.g. `od:deck:guizang-ppt`), where `mode` is one of: `prototype`, `deck`, `design-system`, `image`, `video`, `template`, `utility`, `audio`. Always pass the full namespaced id as `skillId`. Note: mode `design-system` means "a skill that helps author a design-system deliverable" — it has nothing to do with `designSystemId`, which selects from the separate library of ~150 prebuilt brand design systems (see step 2).
+
+A small, curated subset of skills/templates also has its own explicit `/open-design:<id>` skill — if the user's request closely matches one of those, prefer invoking it directly; it pins the exact skillId and often a ready-made example brief, removing any guesswork. Otherwise, follow the flow below yourself.
+
+All OpenDesign content (skill/template text, design system tokens, example briefs) is delivered to you as plain text through the MCP tool calls below — never as a file path. You never need to, and should not, browse or search for OpenDesign's own files anywhere on disk; `list_open_design_skills` and `prepare_open_design_brief` already return everything you need as plain text.
+
+Follow this flow:
+
+1. Call `list_open_design_skills` (optionally with a `query` and/or an exact `mode`) to find a skill or design template that matches what the user wants. Pick the best match by name/description/triggers, and prefer a result's `examplePrompt` (adapted to the user's specifics) over inventing your own brief when one is present and closely fits.
+2. There is an **active design system**, persisted per project (a local `.open-design/config.json` file). If the user mentions a brand, company, industry, or visual style that differs from what's active, call `list_open_design_design_systems` (optionally with a `query` and/or an exact `category` — call with no arguments first to see categories, and check each result's `active` flag) to find the right one, and pass its id explicitly to `prepare_open_design_brief` — doing so also makes it the new active one going forward, so you don't need to re-specify it on later requests in this project. If the user hasn't mentioned any direction, just omit `designSystemId` from `prepare_open_design_brief` and it will silently use whatever is currently active (or none). Only call `set_active_design_system` directly when the user wants to pin a look before generating anything ("let's use the Starbucks look from now on").
+3. Call `prepare_open_design_brief` with the chosen `skillId`, optional `designSystemId` (per step 2), and the user's `brief` (their request, in their own words). This returns `instructions` to follow, a `suggestedEntryPath`, and the `designSystemId`/`designSystemName` actually used (whether explicit or defaulted from active) — mention which one it was if it wasn't obvious from the conversation. It does NOT write any files.
+4. Follow the returned `instructions` and author the artifact's entry file (plus any supporting files) yourself, using your own file-editing tools. Do not look for a separate tool to write the design content.
+5. Call `register_open_design_artifact` with the entry path, a `kind`, a `title`, and any `supportingFiles`, so the artifact is recognized and gets its manifest sidecar written.
+6. Optionally call `get_open_design_artifact` to confirm what was written before telling the user it's done.
+
+Generated artifacts land under the project's OpenDesign output directory (default `.open-design/`) so they stay visible and trackable in version control like any other project file. This host has no live preview editor — after registering an artifact, just tell the user where it was written; there is nothing further to open automatically.
+
+If the user wants to start from or riff on an existing example rather than build something new, prefer `remix_open_design_example` (skillId must have a non-empty `exampleArtifactPath`) over `prepare_open_design_brief` — it copies a working starting artifact into the project and tells you to modify it rather than regenerate from scratch. See [references/remixable-examples.md](references/remixable-examples.md) for the full list of what's available to remix, grouped by mode — check it before calling `list_open_design_skills` with `remixableOnly: true` if a quick skim already answers the question.
+
+If the user wants a brand/style that isn't one of the ~150 bundled design systems ("use our own brand colors", "match our website", "set up a custom design system for..."), call `create_open_design_design_system` with a `name`, a `brief` describing the brand, and an optional `sourceUrl` if they gave you a website to match. It returns `instructions` for writing a new `DESIGN.md` yourself (same file shape as every bundled design system) plus, when a `sourceUrl` was given, a best-effort extracted starting palette/font list to incorporate — treat that as a rough starting point, not ground truth. It does NOT write any files. After writing the file, call `set_active_design_system` with the returned `id` — there's no separate "register" step for design systems; a written `DESIGN.md` is immediately selectable, the same way generated artifacts are immediately visible once written.
+
+Once the user is happy with a generated or refined artifact and wants it turned into real, working code in this app ("turn this into a real component", "add this to the app", "wire this into my codebase"), call `port_open_design_artifact_to_app` with the artifact's `entryPath`. It returns `instructions` for reproducing the artifact's design as idiomatic code in this project's actual application — read the returned instructions carefully: they'll tell you to find and follow a real existing component in this codebase as your pattern reference (its styling approach, conventions, file organization) rather than copying the artifact's HTML/CSS verbatim, and to leave routing/navigation wiring as a separate step for the user. It does NOT write any files itself.