minimal-agent 0.8.2 → 0.10.0

package/skills/ui-design/scripts/scaffold_ui_artifact.py

@@ -0,0 +1,377 @@
+#!/usr/bin/env python3
+"""为 ui-design 技能生成 HTML 起始模板。"""
+
+from __future__ import annotations
+
+import argparse
+import html
+from pathlib import Path
+
+
+MODES = ("webpage", "app-ui", "deck", "deck-browser", "deck-pptx", "canvas", "animation")
+
+
+def normalize_mode(mode: str, pptx_export: bool) -> tuple[str, bool]:
+    """把显式 deck 变体收敛到内部模式，保留旧参数兼容。"""
+    if mode == "deck-browser":
+        return "deck", False
+    if mode == "deck-pptx":
+        return "deck", True
+    return mode, pptx_export
+
+
+def css_for_mode(mode: str, pptx_export: bool = False) -> str:
+    fixed = ""
+    if mode in {"deck", "animation"}:
+        stage_shell = (
+            "min-height: 1080px;\n      display: block;\n      background: var(--surface);"
+            if pptx_export and mode == "deck"
+            else "min-height: 100vh;\n      display: grid;\n      place-items: center;\n      background: #111;"
+        )
+        transform_origin = "transform-origin: top left;" if pptx_export and mode == "deck" else "transform-origin: center;"
+        fixed = """
+    .stage-shell {
+      STAGE_SHELL
+      overflow: hidden;
+    }
+
+    .scaled-stage {
+      width: 1920px;
+      height: 1080px;
+      TRANSFORM_ORIGIN
+      background: var(--surface);
+      color: var(--ink);
+      position: relative;
+      overflow: hidden;
+    }
+
+    .stage-controls {
+      position: fixed;
+      left: 24px;
+      bottom: 24px;
+      z-index: 30;
+      display: flex;
+      gap: 8px;
+    }
+
+    [hidden] {
+      display: none !important;
+    }
+
+    html[data-export-mode="background"] [data-pptx-layer="foreground"],
+    html[data-export-mode="background"] [data-pptx-export="ignore"],
+    html[data-export-mode="full"] [data-pptx-export="ignore"] {
+      visibility: hidden !important;
+    }
+""".replace("STAGE_SHELL", stage_shell).replace("TRANSFORM_ORIGIN", transform_origin)
+
+    return f"""
+    :root {{
+      --ink: #111827;
+      --muted: #5f6b7a;
+      --paper: #f7fbff;
+      --surface: #ffffff;
+      --accent: #2f80ed;
+      --line: rgba(21, 21, 21, 0.16);
+      --radius: 8px;
+      --space: 24px;
+      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Aptos", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    }}
+
+    * {{
+      box-sizing: border-box;
+    }}
+
+    body {{
+      margin: 0;
+      min-height: 100vh;
+      background: var(--paper);
+      color: var(--ink);
+    }}
+
+    button,
+    input,
+    textarea,
+    select {{
+      font: inherit;
+    }}
+
+    button {{
+      min-height: 44px;
+      padding: 0 14px;
+    }}
+
+    .artifact-root {{
+      min-height: 100vh;
+      padding: clamp(20px, 4vw, 64px);
+    }}
+
+    .layout {{
+      width: min(1180px, 100%);
+      margin: 0 auto;
+      display: grid;
+      gap: var(--space);
+    }}
+
+    .panel {{
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      background: color-mix(in oklch, var(--surface), white 12%);
+      padding: clamp(20px, 3vw, 40px);
+    }}
+
+    .eyebrow {{
+      margin: 0 0 12px;
+      color: var(--accent);
+      font-size: 13px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }}
+
+    h1 {{
+      max-width: 860px;
+      margin: 0;
+      font-size: clamp(36px, 5.2vw, 72px);
+      line-height: 1.08;
+      letter-spacing: 0;
+      text-wrap: balance;
+    }}
+
+    p {{
+      max-width: 720px;
+      color: var(--muted);
+      font-size: 18px;
+      line-height: 1.55;
+    }}
+
+    .tweaks-panel {{
+      position: fixed;
+      right: 20px;
+      bottom: 20px;
+      z-index: 40;
+      width: min(320px, calc(100vw - 40px));
+      display: none;
+      gap: 12px;
+      padding: 16px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      background: white;
+      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
+    }}
+
+    .tweaks-panel[data-open="true"] {{
+      display: grid;
+    }}
+{fixed}
+"""
+
+
+def body_for_mode(mode: str, title: str, pptx_export: bool = False) -> str:
+    escaped_title = html.escape(title)
+    if mode == "deck":
+        controls = "" if pptx_export else """
+    <nav class="stage-controls" aria-label="幻灯片控制" data-pptx-export="ignore">
+      <button type="button" id="prev-slide">上一页</button>
+      <button type="button" id="next-slide">下一页</button>
+    </nav>
+    <!-- 仅当用户明确要求演讲备注时，添加 id="speaker-notes" JSON，并在切页时同步 slideIndexChanged。 -->
+"""
+        return f"""
+  <div class="stage-shell">
+    <main class="scaled-stage" id="scaled-stage" data-pptx-layer="background">
+      <section class="slide" data-screen-label="01 标题" data-pptx-layer="slide">
+        <p class="eyebrow" data-pptx-layer="foreground" data-pptx-kind="text">HTML 演示</p>
+        <h1 data-pptx-layer="foreground" data-pptx-kind="text">{escaped_title}</h1>
+        <p data-pptx-layer="foreground" data-pptx-kind="text">将这一页作为第一张设计页。slide 标签从 1 开始编号。</p>
+      </section>
+    </main>
+{controls}
+  </div>
+"""
+    if mode == "canvas":
+        return f"""
+  <main class="artifact-root" data-screen-label="01 设计画布">
+    <div class="layout">
+      <section class="panel">
+        <p class="eyebrow">设计画布</p>
+        <h1>{escaped_title}</h1>
+        <p>在这个画布中比较视觉方向、组件处理、字体、配色或布局方案。</p>
+      </section>
+    </div>
+  </main>
+"""
+    if mode == "animation":
+        return f"""
+  <div class="stage-shell">
+    <main class="scaled-stage" id="scaled-stage" data-screen-label="01 动画演示" data-pptx-layer="background">
+      <p class="eyebrow" data-pptx-layer="foreground" data-pptx-kind="text">动效演示</p>
+      <h1 data-pptx-layer="foreground" data-pptx-kind="text">{escaped_title}</h1>
+        <p data-pptx-layer="foreground" data-pptx-kind="text">在这个舞台中组织时间线场景、播放控件和持久化时间状态。</p>
+    </main>
+    <nav class="stage-controls" aria-label="播放控制" data-pptx-export="ignore">
+      <button type="button" id="play-toggle">播放</button>
+    </nav>
+  </div>
+"""
+    label = "01 应用界面" if mode == "app-ui" else "01 网页"
+    eyebrow = "产品界面" if mode == "app-ui" else "网页体验"
+    return f"""
+  <main class="artifact-root" data-screen-label="{label}">
+    <div class="layout">
+      <section class="panel">
+        <p class="eyebrow">{eyebrow}</p>
+        <h1>{escaped_title}</h1>
+        <p>使用贴合用户产品语境和设计系统的具体内容。</p>
+      </section>
+    </div>
+  </main>
+"""
+
+
+def js_for_mode(mode: str, pptx_export: bool = False) -> str:
+    if pptx_export and mode == "deck":
+        return ""
+    scale_js = ""
+    deck_js = ""
+    if mode in {"deck", "animation"}:
+        scale_js = """
+    function fitStage() {
+      const stage = document.getElementById('scaled-stage');
+      if (!stage) return;
+      const scale = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);
+      stage.style.transform = `scale(${scale})`;
+    }
+    window.addEventListener('resize', fitStage);
+    fitStage();
+"""
+    if mode == "deck":
+        deck_js = """
+    let activeSlide = Number(localStorage.getItem('ui-design-active-slide') || 0);
+    function setActiveSlide(index) {
+      const slides = Array.from(document.querySelectorAll('.slide'));
+      if (!slides.length) return;
+      activeSlide = Math.max(0, Math.min(index, slides.length - 1));
+      slides.forEach((slide, i) => {
+        slide.hidden = i !== activeSlide;
+      });
+      localStorage.setItem('ui-design-active-slide', String(activeSlide));
+      window.parent.postMessage({ slideIndexChanged: activeSlide }, '*');
+    }
+    document.getElementById('prev-slide')?.addEventListener('click', () => setActiveSlide(activeSlide - 1));
+    document.getElementById('next-slide')?.addEventListener('click', () => setActiveSlide(activeSlide + 1));
+    setActiveSlide(activeSlide);
+"""
+    if mode == "animation":
+        deck_js = """
+    let isPlaying = localStorage.getItem('ui-design-animation-playing') === 'true';
+    function setPlaying(next) {
+      isPlaying = next;
+      localStorage.setItem('ui-design-animation-playing', String(isPlaying));
+      document.getElementById('play-toggle').textContent = isPlaying ? '暂停' : '播放';
+    }
+    document.getElementById('play-toggle')?.addEventListener('click', () => setPlaying(!isPlaying));
+    setPlaying(isPlaying);
+"""
+    return f"""
+    const UI_DESIGN_TWEAKS = /*EDITMODE-BEGIN*/{{
+      "primaryColor": "#2f80ed",
+      "density": "comfortable",
+      "variant": "A"
+    }}/*EDITMODE-END*/;
+
+    function applyTweaks(nextTweaks) {{
+      document.documentElement.style.setProperty('--accent', nextTweaks.primaryColor || '#2f80ed');
+      document.documentElement.dataset.variant = nextTweaks.variant || 'A';
+    }}
+
+    function persistTweakPatch(patch) {{
+      Object.assign(UI_DESIGN_TWEAKS, patch);
+      applyTweaks(UI_DESIGN_TWEAKS);
+      window.parent.postMessage({{ type: '__edit_mode_set_keys', edits: patch }}, '*');
+    }}
+
+    const tweaksPanel = document.querySelector('.tweaks-panel');
+    window.addEventListener('message', (event) => {{
+      if (event.data?.type === '__activate_edit_mode') {{
+        tweaksPanel?.setAttribute('data-open', 'true');
+      }}
+      if (event.data?.type === '__deactivate_edit_mode') {{
+        tweaksPanel?.setAttribute('data-open', 'false');
+      }}
+      if (event.data?.type === '__edit_mode_set_keys') {{
+        const patch = event.data.edits || event.data.keys || {{}};
+        Object.assign(UI_DESIGN_TWEAKS, patch);
+        applyTweaks(UI_DESIGN_TWEAKS);
+      }}
+    }});
+    window.parent.postMessage({{ type: '__edit_mode_available' }}, '*');
+    applyTweaks(UI_DESIGN_TWEAKS);
+{scale_js}{deck_js}
+    document.querySelector('[data-tweak-primary]')?.addEventListener('input', (event) => {{
+      persistTweakPatch({{ primaryColor: event.target.value }});
+    }});
+"""
+
+
+def render_html(mode: str, title: str, pptx_export: bool = False) -> str:
+    tweaks = "" if pptx_export and mode == "deck" else """  <aside class="tweaks-panel" aria-label="调整">
+    <strong>调整</strong>
+    <label>
+      强调色
+      <input data-tweak-primary type="color" value="#c75f3a">
+    </label>
+  </aside>
+"""
+    script = "" if pptx_export and mode == "deck" else f"""  <script>
+{js_for_mode(mode, pptx_export)}
+  </script>
+"""
+    return f"""<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{html.escape(title)}</title>
+  <style>
+{css_for_mode(mode, pptx_export)}
+  </style>
+</head>
+<body>
+{body_for_mode(mode, title, pptx_export)}
+{tweaks}{script}
+</body>
+</html>
+"""
+
+
+def parse_args() -> argparse.Namespace:
+    parser = argparse.ArgumentParser(description=__doc__)
+    parser.add_argument(
+        "--mode",
+        choices=MODES,
+        default="webpage",
+        help="要生成的 artifact 类型。deck-browser 是浏览器演示 deck；deck-pptx 是静态 PPTX 导出 deck。旧 deck 默认浏览器模式。",
+    )
+    parser.add_argument("--title", default="未命名设计", help="HTML 标题和起始主标题。")
+    parser.add_argument("--output", required=True, help="目标 HTML 文件。")
+    parser.add_argument("--force", action="store_true", help="如果目标文件已存在，则覆盖。")
+    parser.add_argument("--pptx-export", action="store_true", help="兼容旧用法：deck 模式下生成静态 PPTX 导出模板，不包含 Tweaks/localStorage/JS 缩放/翻页控制。")
+    return parser.parse_args()
+
+
+def main() -> int:
+    args = parse_args()
+    output = Path(args.output)
+    if output.exists() and not args.force:
+        raise SystemExit(f"拒绝覆盖已有文件：{output}。如需覆盖请传入 --force。")
+    mode, pptx_export = normalize_mode(args.mode, args.pptx_export)
+    output.parent.mkdir(parents=True, exist_ok=True)
+    output.write_text(render_html(mode, args.title, pptx_export), encoding="utf-8")
+    actual = "deck-pptx" if mode == "deck" and pptx_export else ("deck-browser" if args.mode == "deck-browser" else args.mode)
+    print(f"已写入 {actual} artifact 起始模板：{output}")
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())