Align popiart-server repo with the clean local source snapshot

The remote master branch was carrying AppleDouble metadata, local database state, and checked-in Next.js build output. This commit syncs the repository to the current local source snapshot, preserves the skillhub static pages that exist locally, and extends ignore rules so these runtime artifacts stay out of history going forward. Constraint: The existing remote history already contained tracked macOS metadata files and web build output Constraint: The local source tree must remain deployable after removing repository noise Rejected: Force-push the unrelated local bootstrap commit | would discard the existing remote history Rejected: Leave tracked runtime artifacts in place | would keep polluting future diffs and deployments Confidence: high Scope-risk: moderate Reversibility: clean Directive: Keep AppleDouble files, local SQLite state, and web build artifacts out of version control; regenerate them per-environment instead Tested: go test ./...; go build -o /tmp/popiartserver-sync ./cmd/popiartserver Not-tested: Remote test-server deployment
2026-04-10 16:05:33 +08:00
parent 4b20dc5e37
commit b99c49790a
335 changed files with 1032 additions and 2856 deletions
@@ -1,6 +1,11 @@
-web/node_modules
-web/dist
+web/node_modules/
+web/dist/
+web/.next/

 *.tgz

-dist
+dist/
+data/*.db
+.omx/
+.DS_Store
+._*
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title data-i18n="console.meta.title">Popi.art Console</title>
+    <meta name="description" data-i18n-content="console.meta.description" content="Popi.art 控制台静态页原型。" />
+    <link rel="stylesheet" href="./skillhub_assets/site.css" />
+    <script src="./skillhub_assets/site.js" defer></script>
+  </head>
+  <body data-page="console">
+    <div class="site-shell">
+      <header class="site-header site-header-console">
+        <a class="site-brand" href="./skillhub_index.html">
+          <span class="site-brand-dot"></span>
+          <span>Popi<span class="accent">.art</span></span>
+        </a>
+        <nav class="site-nav">
+          <a href="./skillhub_index.html" data-i18n="common.nav.home">首页</a>
+          <a href="./skillhub_docs.html" data-i18n="common.nav.docs">文档</a>
+          <a href="./skillhub_skills.html" data-i18n="common.nav.skills">技能页</a>
+          <a class="is-active" href="./skillhub_console.html" data-i18n="common.nav.console">控制台</a>
+          <a href="./skillhub_pricing.html" data-i18n="common.nav.pricing">定价</a>
+        </nav>
+        <div class="site-actions site-actions-console">
+          <a class="locale-link" href="./skillhub_console.html" data-locale-toggle data-i18n="common.localeToggle">中文</a>
+          <div class="profile-chip">
+            <span class="profile-avatar"></span>
+            <span>creator_010007288</span>
+          </div>
+          <a class="locale-link" href="./skillhub_login.html" data-i18n="common.logout">登出</a>
+        </div>
+      </header>
+
+      <main class="site-main">
+        <div class="page-stack">
+          <section class="console-dashboard">
+            <div class="console-heading" data-i18n-html="console.heading">
+              <h1>控制台</h1>
+              <p>管理产品层 Key、查看 Credits 用量、快速安装。</p>
+            </div>
+
+            <div class="console-stats-grid">
+              <article class="console-stat-card" data-i18n-html="console.stat1">
+                <div class="console-stat-label">剩余 Credit</div>
+                <strong>0</strong>
+                <span>总计 0 Credit</span>
+              </article>
+              <article class="console-stat-card" data-i18n-html="console.stat2">
+                <div class="console-stat-label">已使用</div>
+                <strong>0</strong>
+                <span>本月累计消耗</span>
+              </article>
+              <article class="console-stat-card" data-i18n-html="console.stat3">
+                <div class="console-stat-label">调用次数</div>
+                <strong>0</strong>
+                <span>本月 CLI / API 调用</span>
+              </article>
+            </div>
+          </section>
+
+          <section class="section">
+            <div class="section-title section-heading" data-i18n-html="console.apiHeading">
+              <h2>API 密钥</h2>
+            </div>
+
+            <article class="secret-panel" data-i18n-html="console.secrets">
+              <div class="secret-row">
+                <div class="secret-copy">
+                  <div class="secret-label">POPIART_KEY</div>
+                  <div class="secret-value" id="console-key-value">pk_559196••••••••••••••••••••••••</div>
+                </div>
+                <button class="button button-secondary" data-copy-target="console-key-value" type="button">复制</button>
+              </div>
+
+              <div class="secret-divider"></div>
+
+              <div class="secret-row">
+                <div class="secret-copy">
+                  <div class="secret-label">POPIART_TOKEN</div>
+                  <div class="secret-value" id="console-endpoint-value">pk_559196••••••••••••••••••••••••</div>
+                </div>
+                <button class="button button-secondary" data-copy-target="console-endpoint-value" type="button">复制</button>
+              </div>
+            </article>
+          </section>
+
+          <section class="section">
+            <div class="section-title section-heading" data-i18n-html="console.installHeading">
+              <h2>快速安装指令</h2>
+            </div>
+
+            <article class="console-install-card" data-i18n-html="console.installCard">
+              <div class="code-head">
+                <span>Quick Install</span>
+                <button class="button copy-button" data-copy-target="console-install-command" type="button">复制</button>
+              </div>
+              <pre><code id="console-install-command">brew tap wtgoku-create/popi
+brew install wtgoku-create/popi/popiart
+export POPIART_KEY="pk_559196_demo"
+export POPIART_ENDPOINT="https://api.creatoragentos.io/v1"
+popiart bootstrap --agent codex --discoverable</code></pre>
+            </article>
+          </section>
+        </div>
+      </main>
+
+      <footer class="site-footer">
+        <div class="footer-grid">
+          <div>
+            <strong data-i18n="console.footer.title">Popi.art Console Prototype</strong>
+            <div class="footer-subtitle" data-i18n-html="console.footer.subtitle">控制台布局深度参考 `open-claw`，配置项与安装命令改写自 `popiartcli`。</div>
+          </div>
+          <div class="footer-links">
+            <a href="./skillhub_index.html" data-i18n="common.nav.home">首页</a>
+            <a href="./skillhub_login.html" data-i18n="common.login">登录</a>
+            <a href="./skillhub_pricing.html" data-i18n="common.nav.pricing">定价</a>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title data-i18n="docs.meta.title">Popi.art Docs</title>
+    <meta name="description" data-i18n-content="docs.meta.description" content="Popi.art CLI 与 SkillHub 的静态文档页原型。" />
+    <link rel="stylesheet" href="./skillhub_assets/site.css" />
+    <script src="./skillhub_assets/site.js" defer></script>
+  </head>
+  <body data-page="docs">
+    <div class="site-shell">
+      <header class="site-header">
+        <a class="site-brand" href="./skillhub_index.html">
+          <span class="site-brand-dot"></span>
+          <span>Popi<span class="accent">.art</span></span>
+        </a>
+        <nav class="site-nav">
+          <a href="./skillhub_index.html" data-i18n="common.nav.home">首页</a>
+          <a class="is-active" href="./skillhub_docs.html" data-i18n="common.nav.docs">文档</a>
+          <a href="./skillhub_skills.html" data-i18n="common.nav.skills">技能页</a>
+          <a href="./skillhub_console.html" data-i18n="common.nav.console">控制台</a>
+          <a href="./skillhub_pricing.html" data-i18n="common.nav.pricing">定价</a>
+        </nav>
+        <div class="site-actions">
+          <a class="locale-link" href="./skillhub_docs.html" data-locale-toggle data-i18n="common.localeToggle">中文</a>
+          <a class="button button-primary button-header" href="./skillhub_login.html" data-i18n="common.login">登录</a>
+        </div>
+      </header>
+
+      <main class="site-main">
+        <div class="page-stack">
+          <section class="section">
+            <div class="section-title section-heading" data-i18n-html="docs.heading">
+              <div class="eyebrow">DOCUMENTATION</div>
+              <h2>围绕 <span>真实 CLI 命令面</span> 写文档</h2>
+              <p>本页内容来自 `popiartcli` README、当前状态文档和命令树，不使用想象中的未来命令。</p>
+            </div>
+          </section>
+
+          <section class="docs-layout">
+            <aside class="toc-card" data-i18n-html="docs.toc">
+              <div class="eyebrow">ON THIS PAGE</div>
+              <ul class="toc-list">
+                <li><a href="#install">安装</a></li>
+                <li><a href="#quick-start">快速开始</a></li>
+                <li><a href="#commands">命令面</a></li>
+                <li><a href="#mcp">MCP</a></li>
+                <li><a href="#baseline">Runtime Baseline</a></li>
+              </ul>
+            </aside>
+
+            <div class="doc-stack">
+              <article class="doc-card" id="install" data-i18n-html="docs.install">
+                <div class="eyebrow">INSTALL</div>
+                <h3>安装方式</h3>
+                <p>`popiartcli` 当前 README 已经明确列出 Homebrew、curl/install.sh、PowerShell 与 source build 四条安装路径。</p>
+                <div class="code-block">
+                  <div class="code-head">
+                    <span>Homebrew</span>
+                    <button class="button copy-button" data-copy-target="docs-install-brew" type="button">复制</button>
+                  </div>
+                  <pre><code id="docs-install-brew">brew tap wtgoku-create/popi
+brew install wtgoku-create/popi/popiart
+popiart bootstrap --agent codex --discoverable</code></pre>
+                </div>
+                <div class="code-block">
+                  <div class="code-head">
+                    <span>Source Build</span>
+                    <button class="button copy-button" data-copy-target="docs-install-source" type="button">复制</button>
+                  </div>
+                  <pre><code id="docs-install-source">git clone https://github.com/wtgoku-create/popiartcli.git
+cd popiartcli
+go install ./cmd/popiart
+popiart --help</code></pre>
+                </div>
+              </article>
+
+              <article class="doc-card" id="quick-start" data-i18n-html="docs.quickstart">
+                <div class="eyebrow">QUICK START</div>
+                <h3>快速开始</h3>
+                <p>最小闭环是：安装 CLI、登录、发现 skill、运行任务、轮询 jobs、拉取 artifacts。</p>
+                <div class="code-block">
+                  <div class="code-head">
+                    <span>Quick Start</span>
+                    <button class="button copy-button" data-copy-target="docs-quick-start" type="button">复制</button>
+                  </div>
+                  <pre><code id="docs-quick-start">popiart auth login --key pk-...
+popiart skills list --tag image
+popiart run popiskill-image-text2image-basic-v1 --input @params.json --wait
+popiart jobs get job_xxx
+popiart artifacts pull art_xxx</code></pre>
+                </div>
+              </article>
+
+              <div class="doc-grid" id="commands">
+                <article class="doc-card" data-i18n-html="docs.coreCommands">
+                  <div class="eyebrow">COMMAND GROUP</div>
+                  <h3>Core Commands</h3>
+                  <ul class="meta-list">
+                    <li><strong>auth</strong> 管理身份验证和 API key</li>
+                    <li><strong>skills</strong> 发现、安装和查看 skill schema</li>
+                    <li><strong>run</strong> 调用一个 skill 并返回 `job_id`</li>
+                    <li><strong>jobs</strong> 查询和等待作业状态</li>
+                    <li><strong>artifacts</strong> 拉取作业产物</li>
+                  </ul>
+                </article>
+
+                <article class="doc-card" data-i18n-html="docs.platformCommands">
+                  <div class="eyebrow">COMMAND GROUP</div>
+                  <h3>Platform Commands</h3>
+                  <ul class="meta-list">
+                    <li><strong>budget</strong> 查看令牌使用情况和剩余预算</li>
+                    <li><strong>project</strong> 管理当前项目上下文</li>
+                    <li><strong>models</strong> 查询模型路由与直接推理能力</li>
+                    <li><strong>bootstrap</strong> 生成本地 discoverability 资产</li>
+                    <li><strong>update</strong> 从 GitHub Releases 下载新版本</li>
+                  </ul>
+                </article>
+              </div>
+
+              <article class="doc-card" id="mcp" data-i18n-html="docs.mcp">
+                <div class="eyebrow">MCP</div>
+                <h3>MCP discoverability 已落地的部分</h3>
+                <p>当前 repo 已实现 `popiart mcp serve / print-config / doctor`，并暴露一套可调用的 tool surface。</p>
+                <div class="code-block">
+                  <div class="code-head">
+                    <span>MCP</span>
+                    <button class="button copy-button" data-copy-target="docs-mcp" type="button">复制</button>
+                  </div>
+                  <pre><code id="docs-mcp">popiart mcp serve --describe
+popiart mcp print-config
+popiart mcp doctor
+popiart bootstrap --agent codex --discoverable</code></pre>
+                </div>
+                <ul class="meta-list meta-list-spaced">
+                  <li><strong>Implemented tools:</strong> list_skills, get_skill, run_skill, get_job, wait_job, pull_artifact</li>
+                  <li><strong>Not done yet:</strong> MCP resources / prompts / sampling</li>
+                </ul>
+              </article>
+
+              <article class="doc-card" id="baseline" data-i18n-html="docs.baseline">
+                <div class="eyebrow">RUNTIME BASELINE</div>
+                <h3>当前官方执行基线</h3>
+                <p>`popiartcli` 当前状态文档明确只把三个 skill 视为官方 runtime baseline，它们是官网和控制台里最适合优先展示的可执行能力。</p>
+                <ul class="meta-list meta-list-spaced">
+                  <li><strong>popiskill-image-text2image-basic-v1</strong></li>
+                  <li><strong>popiskill-image-img2img-basic-v1</strong></li>
+                  <li><strong>popiskill-video-image2video-basic-v1</strong></li>
+                </ul>
+              </article>
+            </div>
+          </section>
+        </div>
+      </main>
+
+      <footer class="site-footer">
+        <div class="footer-grid">
+          <div>
+            <strong data-i18n="docs.footer.title">Popi.art Docs Prototype</strong>
+            <div class="footer-subtitle" data-i18n-html="docs.footer.subtitle">文档内容改写自 `popiartcli` README、命令树和 current-status 文档。</div>
+          </div>
+          <div class="footer-links">
+            <a href="./skillhub_index.html" data-i18n="common.nav.home">首页</a>
+            <a href="./skillhub_skills.html" data-i18n="common.nav.skills">技能页</a>
+            <a href="./skillhub_console.html" data-i18n="common.nav.console">控制台</a>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title data-i18n="login.meta.title">Popi.art Login</title>
+    <meta name="description" data-i18n-content="login.meta.description" content="Popi.art 登录页静态原型。" />
+    <link rel="stylesheet" href="./skillhub_assets/site.css" />
+    <script src="./skillhub_assets/site.js" defer></script>
+  </head>
+  <body data-page="login">
+    <div class="site-shell">
+      <header class="site-header">
+        <a class="site-brand" href="./skillhub_index.html">
+          <span class="site-brand-dot"></span>
+          <span>Popi<span class="accent">.art</span></span>
+        </a>
+        <nav class="site-nav">
+          <a href="./skillhub_index.html" data-i18n="common.nav.home">首页</a>
+          <a href="./skillhub_docs.html" data-i18n="common.nav.docs">文档</a>
+          <a href="./skillhub_skills.html" data-i18n="common.nav.skills">技能页</a>
+          <a href="./skillhub_console.html" data-i18n="common.nav.console">控制台</a>
+          <a href="./skillhub_pricing.html" data-i18n="common.nav.pricing">定价</a>
+        </nav>
+        <div class="site-actions">
+          <a class="locale-link" href="./skillhub_login.html" data-locale-toggle data-i18n="common.localeToggle">中文</a>
+          <a class="button button-primary button-header" href="./skillhub_login.html" data-i18n="common.login">登录</a>
+        </div>
+      </header>
+
+      <main class="site-main">
+        <div class="page-stack">
+          <section class="login-layout">
+            <article class="auth-card" data-i18n-html="login.form">
+              <div class="eyebrow">SIGN IN</div>
+              <h2>使用产品层 key 登录</h2>
+              <p>当前 `popiartcli` 的真实身份模型是：使用 PopiArt 产品层 key 登录，而不是直接粘贴 OpenAI、Gemini、Sora 或其他 provider key。</p>
+
+              <div class="auth-form">
+                <div class="field">
+                  <label for="api-key">PopiArt API Key</label>
+                  <input id="api-key" type="text" placeholder="pk-..." />
+                </div>
+                <div class="field">
+                  <label for="endpoint">Endpoint</label>
+                  <input id="endpoint" type="text" value="https://api.creatoragentos.io/v1" />
+                </div>
+                <div class="helper-text">CLI 中的真实命令是 `popiart auth login --key pk-...`。</div>
+                <div class="hero-actions">
+                  <button class="button button-primary" type="button">验证并登录</button>
+                  <a class="button button-secondary" href="./skillhub_docs.html">查看命令文档</a>
+                </div>
+              </div>
+            </article>
+
+            <div class="console-stack">
+              <article class="preview-card" data-i18n-html="login.why">
+                <div class="eyebrow">WHY THIS MODEL</div>
+                <h3>统一网关边界</h3>
+                <p>`popiartcli` 是本地入口，`popiartServer` 是产品后端，`PopiNewAPI` 是模型网关。真实 provider key 不进入 CLI。</p>
+              </article>
+
+              <article class="preview-card" data-i18n-html="login.after">
+                <div class="eyebrow">AFTER LOGIN</div>
+                <h3>登录后可以做什么</h3>
+                <ul class="meta-list">
+                  <li><strong>Discover</strong>：查询远端和本地合并后的 skills</li>
+                  <li><strong>Run</strong>：发起 skill execution 并返回 `job_id`</li>
+                  <li><strong>Artifacts</strong>：拉取 job 工件</li>
+                  <li><strong>MCP</strong>：生成 discoverability 配置与运行 doctor</li>
+                </ul>
+              </article>
+
+              <article class="preview-card" data-i18n-html="login.store">
+                <div class="eyebrow">STORE</div>
+                <h3>本地凭证保存方式</h3>
+                <p>已保存的 key 会进入 `~/.popiart/config.json`，并允许 `POPIART_KEY` / `POPIART_TOKEN` 覆盖。</p>
+              </article>
+            </div>
+          </section>
+        </div>
+      </main>
+
+      <footer class="site-footer">
+        <div class="footer-grid">
+          <div>
+            <strong data-i18n="login.footer.title">Popi.art Login Prototype</strong>
+            <div class="footer-subtitle" data-i18n-html="login.footer.subtitle">登录模型以 `popiart auth login --key` 为准，不虚构账号体系。</div>
+          </div>
+          <div class="footer-links">
+            <a href="./skillhub_docs.html" data-i18n="common.nav.docs">文档</a>
+            <a href="./skillhub_console.html" data-i18n="common.nav.console">控制台</a>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title data-i18n="pricing.meta.title">Popi.art Pricing</title>
+    <meta name="description" data-i18n-content="pricing.meta.description" content="Popi.art 定价与开通方式静态页原型。" />
+    <link rel="stylesheet" href="./skillhub_assets/site.css" />
+    <script src="./skillhub_assets/site.js" defer></script>
+  </head>
+  <body data-page="pricing">
+    <div class="site-shell">
+      <header class="site-header">
+        <a class="site-brand" href="./skillhub_index.html">
+          <span class="site-brand-dot"></span>
+          <span>Popi<span class="accent">.art</span></span>
+        </a>
+        <nav class="site-nav">
+          <a href="./skillhub_index.html" data-i18n="common.nav.home">首页</a>
+          <a href="./skillhub_docs.html" data-i18n="common.nav.docs">文档</a>
+          <a href="./skillhub_skills.html" data-i18n="common.nav.skills">技能页</a>
+          <a href="./skillhub_console.html" data-i18n="common.nav.console">控制台</a>
+          <a class="is-active" href="./skillhub_pricing.html" data-i18n="common.nav.pricing">定价</a>
+        </nav>
+        <div class="site-actions">
+          <a class="locale-link" href="./skillhub_pricing.html" data-locale-toggle data-i18n="common.localeToggle">中文</a>
+          <a class="button button-primary button-header" href="./skillhub_login.html" data-i18n="common.login">登录</a>
+        </div>
+      </header>
+
+      <main class="site-main">
+        <div class="page-stack">
+          <section class="section">
+            <div class="section-title section-heading" data-i18n-html="pricing.heading">
+              <div class="eyebrow">PRICING</div>
+              <h2>购买更多 <span>Credits</span></h2>
+              <p>静态定价页先沿用 `open-claw` 的 Credits 结构，能力名称与分类来自 `popiartcli` 和 `Popiart_skillhub`。</p>
+            </div>
+          </section>
+
+          <section class="credits-layout">
+            <article class="credits-pack" data-i18n-html="pricing.packs">
+              <div class="eyebrow eyebrow-soft">CREDIT PACKS</div>
+              <h3>登录后选择积分包继续</h3>
+              <p>静态页先展示积分包信息架构。真实价格、充值、余额和账单应由 `popiartServer` 提供。</p>
+
+              <div class="credits-tier-list">
+                <div class="credits-tier">
+                  <div>
+                    <strong>Starter Pack</strong>
+                    <span>200 Credits / 适合 quick start 与单次 demo</span>
+                  </div>
+                  <em>¥29</em>
+                </div>
+                <div class="credits-tier">
+                  <div>
+                    <strong>Creator Pack</strong>
+                    <span>1000 Credits / 适合日常 run、jobs 与 artifacts workflow</span>
+                  </div>
+                  <em>¥99</em>
+                </div>
+                <div class="credits-tier">
+                  <div>
+                    <strong>Studio Pack</strong>
+                    <span>5000 Credits / 适合多项目与较高频的 agent 调用</span>
+                  </div>
+                  <em>¥399</em>
+                </div>
+              </div>
+
+              <div class="hero-actions">
+                <a class="button button-primary" href="./skillhub_login.html">登录后购买</a>
+                <a class="button button-secondary" href="./skillhub_docs.html">查看文档</a>
+              </div>
+            </article>
+
+            <article class="usage-board" data-i18n-html="pricing.usage">
+              <div class="eyebrow">CREDIT 消耗</div>
+              <h3>按能力查看静态消耗示意</h3>
+              <p>能力名称和分类依据当前 catalog；Credits 数字仅用于静态页面演示，后续应从服务端真实计费表生成。</p>
+
+              <div class="usage-columns">
+                <div class="usage-group">
+                  <h4>图片工具</h4>
+                  <div class="usage-list">
+                    <div class="usage-item">
+                      <div>
+                        <strong>popiskill-image-text2image-basic-v1</strong>
+                        <span>从文本生成图片</span>
+                      </div>
+                      <em>4 Credits/张</em>
+                    </div>
+                    <div class="usage-item">
+                      <div>
+                        <strong>popiskill-image-img2img-basic-v1</strong>
+                        <span>对已有图片进行编辑</span>
+                      </div>
+                      <em>2 Credits/张</em>
+                    </div>
+                    <div class="usage-item">
+                      <div>
+                        <strong>popiskill-image-img2img-edit-v1</strong>
+                        <span>多图参考与局部编辑</span>
+                      </div>
+                      <em>3 Credits/张</em>
+                    </div>
+                    <div class="usage-item">
+                      <div>
+                        <strong>popiskill-image-text2image-character-sheet-v1</strong>
+                        <span>角色设定图与多视图生成</span>
+                      </div>
+                      <em>6 Credits/张</em>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="usage-group">
+                  <h4>视频与音频工具</h4>
+                  <div class="usage-list">
+                    <div class="usage-item">
+                      <div>
+                        <strong>popiskill-video-image2video-basic-v1</strong>
+                        <span>以图片为首帧生成视频</span>
+                      </div>
+                      <em>20 Credits/5s</em>
+                    </div>
+                    <div class="usage-item">
+                      <div>
+                        <strong>popiskill-video-text2video-studio-v1</strong>
+                        <span>从文本生成视频片段</span>
+                      </div>
+                      <em>25 Credits/5s</em>
+                    </div>
+                    <div class="usage-item">
+                      <div>
+                        <strong>popiskill-video-avatar-talking-head-v1</strong>
+                        <span>Talking head 与头像驱动视频</span>
+                      </div>
+                      <em>18 Credits/5s</em>
+                    </div>
+                    <div class="usage-item">
+                      <div>
+                        <strong>popiskill-audio-tts-multimodel-v1</strong>
+                        <span>多模型 TTS 语音生成</span>
+                      </div>
+                      <em>3 Credits/次</em>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </article>
+          </section>
+
+          <section class="section">
+            <div class="section-title section-heading" data-i18n-html="pricing.faqHeading">
+              <div class="eyebrow">FAQ</div>
+              <h2>常见问题</h2>
+            </div>
+
+            <div class="faq-list">
+              <article class="faq-card" data-i18n-html="pricing.faq1">
+                <h3>资源包可以叠加购买吗？</h3>
+                <p>静态原型先按“可叠加”设计，多个积分包累加到同一产品层账户。真实有效期和叠加规则后续应由账单服务确定。</p>
+              </article>
+              <article class="faq-card" data-i18n-html="pricing.faq2">
+                <h3>SkillHub 里的 59 个 skill 都能立刻运行吗？</h3>
+                <p>不能默认这么假设。当前 CLI 状态文档明确只有 3 个 skill 被视为官方 runtime baseline，其余还取决于服务端注册和路由情况。</p>
+              </article>
+              <article class="faq-card" data-i18n-html="pricing.faq3">
+                <h3>超出额度后还能继续使用吗？</h3>
+                <p>静态原型先按“需续购 Credits 包”来设计。未来若接月度套餐或赠送额度，规则应由 `popiartServer` 的 billing 层统一返回。</p>
+              </article>
+              <article class="faq-card" data-i18n-html="pricing.faq4">
+                <h3>为什么登录用的是产品层 key，而不是 provider key？</h3>
+                <p>`popiartcli` 明确不应直接持有上游 provider key。真实 provider key 应该留在 gateway 和 server 边界之后。</p>
+              </article>
+            </div>
+          </section>
+        </div>
+      </main>
+
+      <footer class="site-footer">
+        <div class="footer-grid">
+          <div>
+            <strong data-i18n="pricing.footer.title">Popi.art Pricing Prototype</strong>
+            <div class="footer-subtitle" data-i18n-html="pricing.footer.subtitle">定价文案围绕产品层价值组织，避免直接暴露 provider 细节。</div>
+          </div>
+          <div class="footer-links">
+            <a href="./skillhub_index.html" data-i18n="common.nav.home">首页</a>
+            <a href="./skillhub_docs.html" data-i18n="common.nav.docs">文档</a>
+            <a href="./skillhub_login.html" data-i18n="common.login">登录</a>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title data-i18n="skills.meta.title">Popi.art Skills</title>
+    <meta name="description" data-i18n-content="skills.meta.description" content="Popi.art SkillHub 技能目录静态页原型。" />
+    <link rel="stylesheet" href="./skillhub_assets/site.css" />
+    <script src="./skillhub_assets/site.js" defer></script>
+  </head>
+  <body data-page="skills">
+    <div class="site-shell">
+      <header class="site-header">
+        <a class="site-brand" href="./skillhub_index.html">
+          <span class="site-brand-dot"></span>
+          <span>Popi<span class="accent">.art</span></span>
+        </a>
+        <nav class="site-nav">
+          <a href="./skillhub_index.html" data-i18n="common.nav.home">首页</a>
+          <a href="./skillhub_docs.html" data-i18n="common.nav.docs">文档</a>
+          <a class="is-active" href="./skillhub_skills.html" data-i18n="common.nav.skills">技能页</a>
+          <a href="./skillhub_console.html" data-i18n="common.nav.console">控制台</a>
+          <a href="./skillhub_pricing.html" data-i18n="common.nav.pricing">定价</a>
+        </nav>
+        <div class="site-actions">
+          <a class="locale-link" href="./skillhub_skills.html" data-locale-toggle data-i18n="common.localeToggle">中文</a>
+          <a class="button button-primary button-header" href="./skillhub_login.html" data-i18n="common.login">登录</a>
+        </div>
+      </header>
+
+      <main class="site-main">
+        <div class="page-stack">
+          <section class="section">
+            <div class="section-title section-heading" data-i18n-html="skills.heading">
+              <div class="eyebrow">SKILL CATALOG</div>
+              <h2>把 `Popiart_skillhub` 直接转成 <span>产品目录页</span></h2>
+              <p>目录结构来自 `index.json`，技能详情结构来自每个 `skills/*/SKILL.md`，不再手写另一套平行数据。</p>
+            </div>
+
+            <div class="stat-row">
+              <article class="metric">
+                <strong>58</strong>
+                <span data-i18n="skills.metrics.origin">popiart origin skills</span>
+              </article>
+              <article class="metric">
+                <strong>1</strong>
+                <span data-i18n="skills.metrics.upstream">upstream reference skill</span>
+              </article>
+              <article class="metric">
+                <strong>2</strong>
+                <span data-i18n="skills.metrics.showcase">showcase skills</span>
+              </article>
+              <article class="metric">
+                <strong>3</strong>
+                <span data-i18n="skills.metrics.baseline">runtime baseline</span>
+              </article>
+            </div>
+          </section>
+
+          <section class="section">
+            <div class="hero-proof">
+              <span class="pill" data-i18n="skills.pills.naming">Naming: popiskill-&lt;category&gt;-&lt;capability&gt;-&lt;slug&gt;-v&lt;major&gt;</span>
+              <span class="pill" data-i18n="skills.pills.categories">Categories: image / video / audio / meta</span>
+              <span class="pill" data-i18n="skills.pills.source">Source: index.json + SKILL.md</span>
+            </div>
+          </section>
+
+          <section class="section">
+            <div class="section-title section-heading" data-i18n-html="skills.featuredHeading">
+              <div class="eyebrow">FEATURED</div>
+              <h2>精选技能</h2>
+            </div>
+
+            <div class="skill-grid">
+              <article class="skill-card" data-i18n-html="skills.card1">
+                <div class="skill-card-top">
+                  <span class="badge badge-primary">IMAGE</span>
+                  <span class="badge badge-success">BASELINE</span>
+                </div>
+                <h3>popiskill-image-text2image-basic-v1</h3>
+                <p>当前官方 runtime baseline 之一，适合作为首页和控制台的默认引导能力。</p>
+                <ul class="meta-list">
+                  <li><strong>Capability:</strong> text2image</li>
+                  <li><strong>Origin:</strong> popiart</li>
+                  <li><strong>Display:</strong> 文生图</li>
+                </ul>
+              </article>
+
+              <article class="skill-card" data-i18n-html="skills.card2">
+                <div class="skill-card-top">
+                  <span class="badge badge-primary">IMAGE</span>
+                  <span class="badge badge-success">BASELINE</span>
+                </div>
+                <h3>popiskill-image-img2img-basic-v1</h3>
+                <p>基础图像编辑能力，是从静态目录进入真实图像编辑执行面的关键入口。</p>
+                <ul class="meta-list">
+                  <li><strong>Capability:</strong> img2img</li>
+                  <li><strong>Origin:</strong> popiart</li>
+                  <li><strong>Display:</strong> 图像编辑</li>
+                </ul>
+              </article>
+
+              <article class="skill-card" data-i18n-html="skills.card3">
+                <div class="skill-card-top">
+                  <span class="badge badge-primary">VIDEO</span>
+                  <span class="badge badge-success">BASELINE</span>
+                </div>
+                <h3>popiskill-video-image2video-basic-v1</h3>
+                <p>当前 video 路径中最适合在产品站里承担“可执行示例”角色的公开 skill。</p>
+                <ul class="meta-list">
+                  <li><strong>Capability:</strong> image2video</li>
+                  <li><strong>Origin:</strong> popiart</li>
+                  <li><strong>Display:</strong> 图生视频</li>
+                </ul>
+              </article>
+
+              <article class="skill-card" data-i18n-html="skills.card4">
+                <div class="skill-card-top">
+                  <span class="badge badge-primary">IMAGE</span>
+                  <span class="badge badge-warning">SHOWCASE</span>
+                </div>
+                <h3>popiskill-image-img2img-popistudio-alice-showcase-v1</h3>
+                <p>基于固定 Alice reference image 的角色一致性 showcase workflow，适合 demo 与 proof frame。</p>
+                <ul class="meta-list">
+                  <li><strong>Capability:</strong> img2img</li>
+                  <li><strong>Showcase:</strong> true</li>
+                  <li><strong>Display:</strong> PopiStudio Alice</li>
+                </ul>
+              </article>
+
+              <article class="skill-card" data-i18n-html="skills.card5">
+                <div class="skill-card-top">
+                  <span class="badge badge-primary">VIDEO</span>
+                  <span class="badge badge-warning">SHOWCASE</span>
+                </div>
+                <h3>popiskill-video-image2video-popistudio-alice-showcase-v1</h3>
+                <p>把 Alice showcase 从单帧扩展到 teaser motion clip，是很适合首页营销区展示的 skill。</p>
+                <ul class="meta-list">
+                  <li><strong>Capability:</strong> image2video</li>
+                  <li><strong>Showcase:</strong> true</li>
+                  <li><strong>Display:</strong> Alice teaser</li>
+                </ul>
+              </article>
+
+              <article class="skill-card" data-i18n-html="skills.card6">
+                <div class="skill-card-top">
+                  <span class="badge badge-primary">AUDIO</span>
+                  <span class="badge badge-success">CATALOG</span>
+                </div>
+                <h3>popiskill-audio-tts-multimodel-v1</h3>
+                <p>目录里的一批 audio skill 说明站点不能只围绕图像和视频设计，音频能力是完整品类。</p>
+                <ul class="meta-list">
+                  <li><strong>Capability:</strong> tts</li>
+                  <li><strong>Category:</strong> audio</li>
+                  <li><strong>Display:</strong> 多模型 TTS</li>
+                </ul>
+              </article>
+            </div>
+          </section>
+
+          <section class="spotlight">
+            <article class="spotlight-card" data-i18n-html="skills.detail">
+              <div class="eyebrow">DETAIL EXAMPLE</div>
+              <h3>Skill 详情页应该长什么样</h3>
+              <p>从 `SKILL.md` 里可以稳定提取：frontmatter 描述、适用场景、不适用场景、required inputs、workflow、command pattern、payload template 和 artifact handling。</p>
+              <ul class="meta-list meta-list-spaced-lg">
+                <li><strong>Use when:</strong> demo frame / proof frame / character consistency</li>
+                <li><strong>Do not use:</strong> text-only / batch / long-form video</li>
+                <li><strong>Required input:</strong> scene_prompt</li>
+                <li><strong>Optional:</strong> shot_type / camera / mood / aspect_ratio</li>
+              </ul>
+            </article>
+
+            <article class="doc-card" data-i18n-html="skills.command">
+              <div class="eyebrow">REAL COMMAND</div>
+              <h3>Alice Showcase Command Pattern</h3>
+              <div class="code-block">
+                <div class="code-head">
+                  <span>Skill Run</span>
+                  <button class="button copy-button" data-copy-target="skills-alice-run" type="button">复制</button>
+                </div>
+                <pre><code id="skills-alice-run">popiart run popiskill-image-img2img-popistudio-alice-showcase-v1 \
+  --input @params.json \
+  --wait</code></pre>
+              </div>
+            </article>
+          </section>
+        </div>
+      </main>
+
+      <footer class="site-footer">
+        <div class="footer-grid">
+          <div>
+            <strong data-i18n="skills.footer.title">Popi.art Skill Catalog Prototype</strong>
+            <div class="footer-subtitle" data-i18n-html="skills.footer.subtitle">技能页字段按 `index.json` 和 `SKILL.md` 设计，后续可直接接远端 registry。</div>
+          </div>
+          <div class="footer-links">
+            <a href="./skillhub_index.html" data-i18n="common.nav.home">首页</a>
+            <a href="./skillhub_docs.html" data-i18n="common.nav.docs">文档</a>
+            <a href="./skillhub_console.html" data-i18n="common.nav.console">控制台</a>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
@@ -1 +0,0 @@
-hiv_u2wYd0IjRyI8kQgdJ
@@ -1,73 +0,0 @@
-{
-  "pages": {
-    "/_not-found/page": [
-      "static/chunks/webpack-4a462cecab786e93.js",
-      "static/chunks/4bd1b696-c023c6e3521b1417.js",
-      "static/chunks/255-cb395327542b56ef.js",
-      "static/chunks/main-app-9a4b1037170263df.js",
-      "static/chunks/app/_not-found/page-5da2e95e06e9d89b.js"
-    ],
-    "/layout": [
-      "static/chunks/webpack-4a462cecab786e93.js",
-      "static/chunks/4bd1b696-c023c6e3521b1417.js",
-      "static/chunks/255-cb395327542b56ef.js",
-      "static/chunks/main-app-9a4b1037170263df.js",
-      "static/css/22340215a903e6f9.css",
-      "static/chunks/app/layout-80e4095a41e633c1.js"
-    ],
-    "/page": [
-      "static/chunks/webpack-4a462cecab786e93.js",
-      "static/chunks/4bd1b696-c023c6e3521b1417.js",
-      "static/chunks/255-cb395327542b56ef.js",
-      "static/chunks/main-app-9a4b1037170263df.js",
-      "static/chunks/app/page-08e7e91dc45b8f09.js"
-    ],
-    "/[locale]/layout": [
-      "static/chunks/webpack-4a462cecab786e93.js",
-      "static/chunks/4bd1b696-c023c6e3521b1417.js",
-      "static/chunks/255-cb395327542b56ef.js",
-      "static/chunks/main-app-9a4b1037170263df.js",
-      "static/chunks/619-ba102abea3e3d0e4.js",
-      "static/chunks/app/[locale]/layout-9948ac0ba26fdd9d.js"
-    ],
-    "/[locale]/console/page": [
-      "static/chunks/webpack-4a462cecab786e93.js",
-      "static/chunks/4bd1b696-c023c6e3521b1417.js",
-      "static/chunks/255-cb395327542b56ef.js",
-      "static/chunks/main-app-9a4b1037170263df.js",
-      "static/chunks/619-ba102abea3e3d0e4.js",
-      "static/chunks/app/[locale]/console/page-9948ac0ba26fdd9d.js"
-    ],
-    "/[locale]/docs/page": [
-      "static/chunks/webpack-4a462cecab786e93.js",
-      "static/chunks/4bd1b696-c023c6e3521b1417.js",
-      "static/chunks/255-cb395327542b56ef.js",
-      "static/chunks/main-app-9a4b1037170263df.js",
-      "static/chunks/app/[locale]/docs/page-08e7e91dc45b8f09.js"
-    ],
-    "/[locale]/login/page": [
-      "static/chunks/webpack-4a462cecab786e93.js",
-      "static/chunks/4bd1b696-c023c6e3521b1417.js",
-      "static/chunks/255-cb395327542b56ef.js",
-      "static/chunks/main-app-9a4b1037170263df.js",
-      "static/chunks/619-ba102abea3e3d0e4.js",
-      "static/chunks/app/[locale]/login/page-9948ac0ba26fdd9d.js"
-    ],
-    "/[locale]/page": [
-      "static/chunks/webpack-4a462cecab786e93.js",
-      "static/chunks/4bd1b696-c023c6e3521b1417.js",
-      "static/chunks/255-cb395327542b56ef.js",
-      "static/chunks/main-app-9a4b1037170263df.js",
-      "static/chunks/619-ba102abea3e3d0e4.js",
-      "static/chunks/app/[locale]/page-9948ac0ba26fdd9d.js"
-    ],
-    "/[locale]/pricing/page": [
-      "static/chunks/webpack-4a462cecab786e93.js",
-      "static/chunks/4bd1b696-c023c6e3521b1417.js",
-      "static/chunks/255-cb395327542b56ef.js",
-      "static/chunks/main-app-9a4b1037170263df.js",
-      "static/chunks/619-ba102abea3e3d0e4.js",
-      "static/chunks/app/[locale]/pricing/page-9948ac0ba26fdd9d.js"
-    ]
-  }
-}
@@ -1,9 +0,0 @@
-{
-  "/_not-found/page": "/_not-found",
-  "/page": "/",
-  "/[locale]/console/page": "/[locale]/console",
-  "/[locale]/docs/page": "/[locale]/docs",
-  "/[locale]/login/page": "/[locale]/login",
-  "/[locale]/page": "/[locale]",
-  "/[locale]/pricing/page": "/[locale]/pricing"
-}
@@ -1,33 +0,0 @@
-{
-  "polyfillFiles": [
-    "static/chunks/polyfills-42372ed130431b0a.js"
-  ],
-  "devFiles": [],
-  "ampDevFiles": [],
-  "lowPriorityFiles": [
-    "static/hiv_u2wYd0IjRyI8kQgdJ/_buildManifest.js",
-    "static/hiv_u2wYd0IjRyI8kQgdJ/_ssgManifest.js"
-  ],
-  "rootMainFiles": [
-    "static/chunks/webpack-4a462cecab786e93.js",
-    "static/chunks/4bd1b696-c023c6e3521b1417.js",
-    "static/chunks/255-cb395327542b56ef.js",
-    "static/chunks/main-app-9a4b1037170263df.js"
-  ],
-  "rootMainFilesTree": {},
-  "pages": {
-    "/_app": [
-      "static/chunks/webpack-4a462cecab786e93.js",
-      "static/chunks/framework-acd67e14855de5a2.js",
-      "static/chunks/main-8855236d7552d914.js",
-      "static/chunks/pages/_app-7d307437aca18ad4.js"
-    ],
-    "/_error": [
-      "static/chunks/webpack-4a462cecab786e93.js",
-      "static/chunks/framework-acd67e14855de5a2.js",
-      "static/chunks/main-8855236d7552d914.js",
-      "static/chunks/pages/_error-cb2a52f75f2162e2.js"
-    ]
-  },
-  "ampFirstPages": []
-}
@@ -1 +0,0 @@
-{"previewModeId":"d79731eebe7a4ff7914762a316b2515c","previewModeSigningKey":"835abf86d7274dc6de79d62f944ab73c0c0e03f83eb4dddd7f6a840cf99a25f7","previewModeEncryptionKey":"3a1b53ad329ef17b1d240d7ecbd7e04b797c96b9df5913d0060a1855940f45c2","expireAt":1775876840356}
@@ -1 +0,0 @@
-{"encryption.key":"gnZ+MDSYAQagmVEHLKb3Sx0ukMcGDNTgM9VI30pizzk=","encryption.expire_at":1775876738235}
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				`{"previewModeId":"d79731eebe7a4ff7914762a316b2515c","previewModeSigningKey":"835abf86d7274dc6de79d62f944ab73c0c0e03f83eb4dddd7f6a840cf99a25f7","previewModeEncryptionKey":"3a1b53ad329ef17b1d240d7ecbd7e04b797c96b9df5913d0060a1855940f45c2","expireAt":1775876840356}`
				`@@ -1 +0,0 @@`
				`{"encryption.key":"gnZ+MDSYAQagmVEHLKb3Sx0ukMcGDNTgM9VI30pizzk=","encryption.expire_at":1775876738235}`