npm - @xenonbyte/da-vinci-workflow - Versions diffs - 0.1.2 - Mend

@xenonbyte/da-vinci-workflow 0.1.2

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 (48) hide show

package/README.md +306 -0
package/SKILL.md +377 -0
package/agents/openai.yaml +7 -0
package/bin/da-vinci.js +8 -0
package/commands/claude/da-vinci.md +23 -0
package/commands/claude/dv/breakdown.md +21 -0
package/commands/claude/dv/build.md +17 -0
package/commands/claude/dv/design.md +20 -0
package/commands/claude/dv/tasks.md +19 -0
package/commands/claude/dv/verify.md +16 -0
package/commands/codex/prompts/da-vinci.md +24 -0
package/commands/codex/prompts/dv-breakdown.md +19 -0
package/commands/codex/prompts/dv-build.md +13 -0
package/commands/codex/prompts/dv-design.md +14 -0
package/commands/codex/prompts/dv-tasks.md +16 -0
package/commands/codex/prompts/dv-verify.md +15 -0
package/commands/gemini/da-vinci.toml +26 -0
package/commands/gemini/dv/breakdown.toml +19 -0
package/commands/gemini/dv/build.toml +13 -0
package/commands/gemini/dv/design.toml +14 -0
package/commands/gemini/dv/tasks.toml +13 -0
package/commands/gemini/dv/verify.toml +15 -0
package/docs/workflow-examples.md +104 -0
package/examples/greenfield-spec-markupflow/README.md +40 -0
package/examples/greenfield-spec-markupflow/design-brief.md +24 -0
package/examples/greenfield-spec-markupflow/design-registry.md +15 -0
package/examples/greenfield-spec-markupflow/design.md +32 -0
package/examples/greenfield-spec-markupflow/page-map.md +19 -0
package/examples/greenfield-spec-markupflow/pencil-bindings.md +13 -0
package/examples/greenfield-spec-markupflow/pencil-design.md +29 -0
package/examples/greenfield-spec-markupflow/proposal.md +33 -0
package/examples/greenfield-spec-markupflow/site/index.html +192 -0
package/examples/greenfield-spec-markupflow/site/product-detail.html +165 -0
package/examples/greenfield-spec-markupflow/specs/marketing-site/spec.md +37 -0
package/examples/greenfield-spec-markupflow/tasks.md +28 -0
package/examples/greenfield-spec-markupflow/verification.md +37 -0
package/lib/cli.js +100 -0
package/lib/install.js +286 -0
package/package.json +31 -0
package/references/artifact-templates.md +364 -0
package/references/checkpoints.md +141 -0
package/references/design-inputs.md +55 -0
package/references/modes.md +84 -0
package/references/page-mapping.md +47 -0
package/references/pencil-design-to-code.md +64 -0
package/references/platform-adapters.md +66 -0
package/scripts/postinstall.js +9 -0
package/scripts/validate-assets.js +9 -0

package/examples/greenfield-spec-markupflow/site/index.html ADDED Viewed

@@ -0,0 +1,192 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MarkupFlow - 首页</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              bg: '#06070A',
+              panel: '#10131A',
+              panelSoft: '#171D28',
+              panelMuted: '#131826',
+              line: '#2A3142',
+              textSoft: '#A1A1AA',
+              textMuted: '#71717A',
+              paper: '#F4F7FB',
+              ink: '#11131A',
+              inkSoft: '#556070',
+              accentA: '#A855F7',
+              accentB: '#EC4899'
+            },
+            fontFamily: {
+              display: ['"Funnel Sans"', 'Inter', 'sans-serif'],
+              body: ['Inter', 'sans-serif'],
+              mono: ['"IBM Plex Mono"', 'monospace']
+            },
+            boxShadow: {
+              float: '0 24px 64px rgba(0,0,0,.42)'
+            },
+            backgroundImage: {
+              accent: 'linear-gradient(135deg, #A855F7 0%, #EC4899 100%)',
+              preview: 'linear-gradient(135deg, #E8E1FF 0%, #D9F3FF 100%)'
+            }
+          }
+        }
+      };
+    </script>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Funnel+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+  </head>
+  <body class="bg-bg text-white font-body">
+    <main class="mx-auto max-w-[1520px] px-5 pb-16 pt-7 sm:px-8 lg:px-10">
+      <header class="flex flex-col gap-5 py-2 lg:flex-row lg:items-center lg:justify-between">
+        <div class="flex items-center gap-3">
+          <span class="h-3.5 w-3.5 rounded-full bg-accent"></span>
+          <span class="font-display text-xl font-bold sm:text-2xl">MarkupFlow</span>
+        </div>
+        <div class="flex flex-wrap items-center gap-4 text-sm text-textSoft sm:gap-5 sm:text-[15px]">
+          <a href="#capabilities" class="transition hover:text-white">能力矩阵</a>
+          <a href="#mcp-service" class="transition hover:text-white">MCP 服务</a>
+          <a href="product-detail.html" class="transition hover:text-white">工作流</a>
+          <a href="#cta" class="rounded-full bg-white px-4 py-3 text-sm font-semibold text-black transition hover:opacity-90">预约演示</a>
+        </div>
+      </header>
+      <section class="grid gap-8 pt-6 lg:grid-cols-[520px,minmax(0,1fr)] lg:items-center">
+        <div class="space-y-5">
+          <p class="font-mono text-[11px] uppercase tracking-[0.22em] text-accentA sm:text-xs">Desktop software for annotated design delivery</p>
+          <h1 class="max-w-[9ch] font-display text-[42px] font-bold leading-[0.98] sm:text-[56px] lg:text-[68px]">
+            把 HTML 与 Figma 一键转成可标注、可服务的设计稿。
+          </h1>
+          <p class="max-w-[34rem] text-base leading-7 text-textSoft sm:text-lg">
+            面向桌面软件团队的设计交付工作台。把 HTML 页面、Figma 设计稿与标注设计稿统一到一个可追溯的产物里，并通过 MCP 对外提供结构化设计数据。
+          </p>
+          <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
+            <a href="#cta" class="inline-flex items-center justify-center rounded-full bg-accent px-6 py-3.5 text-sm font-semibold text-white transition hover:opacity-95">开始生成桌面稿</a>
+            <a href="product-detail.html" class="inline-flex items-center justify-center rounded-full border border-line px-6 py-3.5 text-sm font-semibold text-[#D7DBE3] transition hover:border-white/30 hover:text-white">查看转换流程</a>
+          </div>
+          <p class="font-mono text-xs text-textMuted sm:text-[13px]">HTML 输入 · Figma 输入 · 标注输出 · MCP 数据服务</p>
+        </div>
+        <div class="rounded-[24px] bg-panel p-4 shadow-float sm:p-6">
+          <p class="font-mono text-[11px] uppercase tracking-[0.2em] text-textMuted sm:text-xs">Live product flow</p>
+          <div class="mt-4 grid gap-4 lg:grid-cols-[220px,96px,minmax(0,1fr)]">
+            <div class="space-y-4">
+              <article class="rounded-[18px] bg-panelSoft p-[18px]">
+                <p class="font-mono text-[15px] font-medium leading-6 text-white">HTML 页面<br />自动结构解析<br />转成可标注设计稿</p>
+              </article>
+              <article class="rounded-[18px] bg-panelSoft p-[18px]">
+                <p class="font-mono text-[15px] font-medium leading-6 text-white">Figma 稿件<br />统一图层与组件<br />输出标注设计稿</p>
+              </article>
+              <article class="rounded-[18px] bg-panelSoft p-[18px]">
+                <p class="font-mono text-[15px] font-medium leading-6 text-white">设计标注<br />结构化数据整理<br />通过 MCP 对外服务</p>
+              </article>
+            </div>
+            <div class="hidden flex-col items-center justify-center gap-3 lg:flex">
+              <p class="font-mono text-xs tracking-[0.18em] text-accentA">TRANSFORM</p>
+              <div class="h-24 w-px bg-white/10"></div>
+              <p class="font-mono text-xs tracking-[0.12em] text-textMuted">ANNOTATE · SERVE</p>
+            </div>
+            <article class="rounded-[20px] bg-paper p-5 text-ink">
+              <h2 class="font-display text-[26px] font-bold sm:text-[28px]">Annotated Design Output</h2>
+              <p class="mt-3 text-sm leading-6 text-inkSoft sm:text-[15px]">
+                输出可交付、可协作、可编排的标注设计稿，让设计资产既能给人看，也能给系统读。
+              </p>
+              <div class="mt-5 rounded-2xl bg-preview p-[18px]">
+                <p class="font-mono text-[11px] tracking-[0.15em] text-[#5F3DC4] sm:text-xs">Spec + Layers + Annotation</p>
+                <p class="mt-3 max-w-[26rem] text-base font-medium leading-7 text-ink sm:text-lg">
+                  页面结构、组件层级、尺寸标注、命名语义与交互说明，被统一为一个可共享的设计资产。
+                </p>
+              </div>
+              <div class="mt-5 flex flex-wrap gap-2.5">
+                <span class="rounded-full bg-[#EAEAF0] px-3 py-2 font-mono text-[11px] font-medium text-[#202532]">Layer Mapping</span>
+                <span class="rounded-full bg-[#EAEAF0] px-3 py-2 font-mono text-[11px] font-medium text-[#202532]">Measurement Notes</span>
+                <span class="rounded-full bg-[#EAEAF0] px-3 py-2 font-mono text-[11px] font-medium text-[#202532]">MCP Ready</span>
+              </div>
+            </article>
+          </div>
+        </div>
+      </section>
+      <section id="capabilities" class="mt-14 rounded-[24px] bg-panel p-6 sm:p-8">
+        <div class="max-w-[760px] space-y-3">
+          <p class="font-mono text-[11px] uppercase tracking-[0.2em] text-accentA sm:text-xs">Capabilities</p>
+          <h2 class="font-display text-[32px] font-bold leading-[1.05] sm:text-[42px]">一个桌面软件，完成三类设计资产转换。</h2>
+          <p class="text-base leading-7 text-textSoft sm:text-[17px]">
+            从已有页面、设计稿到结构化标注资产，再把标注资产变成对开发工具友好的 MCP 数据接口。
+          </p>
+        </div>
+        <div class="mt-6 grid gap-5 lg:grid-cols-3">
+          <article class="rounded-[20px] bg-panelSoft p-[22px]">
+            <p class="font-mono text-[11px] tracking-[0.14em] text-textMuted">INPUT 01</p>
+            <h3 class="mt-4 font-display text-[26px] font-bold leading-[1.08]">HTML 转标注设计稿</h3>
+            <p class="mt-4 text-[15px] leading-7 text-textSoft">解析页面结构、组件层级和主要视觉区域，生成可交付、可复查的标注设计稿。</p>
+          </article>
+          <article class="rounded-[20px] bg-panelSoft p-[22px]">
+            <p class="font-mono text-[11px] tracking-[0.14em] text-textMuted">INPUT 02</p>
+            <h3 class="mt-4 font-display text-[26px] font-bold leading-[1.08]">Figma 转标注设计稿</h3>
+            <p class="mt-4 text-[15px] leading-7 text-textSoft">统一图层命名、组件映射与尺寸说明，把视觉稿整理成更适合团队交付和协作的标注产物。</p>
+          </article>
+          <article class="rounded-[20px] bg-panelSoft p-[22px]">
+            <p class="font-mono text-[11px] tracking-[0.14em] text-textMuted">OUTPUT 03</p>
+            <h3 class="mt-4 font-display text-[26px] font-bold leading-[1.08]">标注设计稿提供 MCP 数据服务</h3>
+            <p class="mt-4 text-[15px] leading-7 text-textSoft">把标注设计稿中的页面结构、组件信息、尺寸标注与语义说明，通过 MCP 方式提供给开发与自动化工具。</p>
+          </article>
+        </div>
+      </section>
+      <section id="mcp-service" class="mt-14 grid gap-6 rounded-[24px] bg-paper p-6 text-ink sm:p-8 lg:grid-cols-[420px,minmax(0,1fr)]">
+        <div class="space-y-4">
+          <p class="font-mono text-[11px] uppercase tracking-[0.2em] text-[#7C3AED] sm:text-xs">MCP Data Service</p>
+          <h2 class="font-display text-[30px] font-bold leading-[1.05] sm:text-[40px]">标注设计稿不只是交付物，它还是一个可查询的数据源。</h2>
+          <p class="text-base leading-7 text-inkSoft sm:text-[17px]">
+            通过 MCP，把页面结构、组件映射、尺寸说明与语义标注供给给开发工具、自动化脚本和设计校验流程。
+          </p>
+          <p class="text-[15px] font-medium leading-7 text-ink">适合桌面端研发、设计校对、交付验收与自动生成场景。</p>
+        </div>
+        <div class="rounded-[20px] bg-[#0F1420] p-5 text-white">
+          <p class="font-mono text-[11px] uppercase tracking-[0.18em] text-[#717FA0] sm:text-xs">Service payload examples</p>
+          <div class="mt-4 space-y-3">
+            <article class="rounded-[14px] bg-[#151C2B] px-4 py-[14px]">
+              <p class="font-mono text-[11px] text-[#7C8AAF]">Page Structure</p>
+              <p class="mt-2 text-base font-medium leading-7">sections · slots · layout hierarchy · screen regions</p>
+            </article>
+            <article class="rounded-[14px] bg-[#151C2B] px-4 py-[14px]">
+              <p class="font-mono text-[11px] text-[#7C8AAF]">Component Map</p>
+              <p class="mt-2 text-base font-medium leading-7">component ids · variants · reusable blocks · states</p>
+            </article>
+            <article class="rounded-[14px] bg-[#151C2B] px-4 py-[14px]">
+              <p class="font-mono text-[11px] text-[#7C8AAF]">Measurement Notes</p>
+              <p class="mt-2 text-base font-medium leading-7">sizes · spacing · alignment · annotation notes</p>
+            </article>
+            <article class="rounded-[14px] bg-[#151C2B] px-4 py-[14px]">
+              <p class="font-mono text-[11px] text-[#7C8AAF]">Interaction Semantics</p>
+              <p class="mt-2 text-base font-medium leading-7">events · behavior notes · delivery hints · developer hooks</p>
+            </article>
+          </div>
+        </div>
+      </section>
+      <section id="cta" class="mt-14 rounded-[24px] bg-panelMuted px-6 py-10 text-center sm:px-10 sm:py-12">
+        <div class="mx-auto max-w-[760px]">
+          <p class="font-mono text-[11px] uppercase tracking-[0.2em] text-accentA sm:text-xs">Ready to ship annotated design</p>
+          <h2 class="mt-3 font-display text-[32px] font-bold leading-[1.08] sm:text-[42px]">让设计资产从静态稿，升级成团队可交付、可协作、可服务的系统。</h2>
+          <p class="mt-4 text-base leading-7 text-textSoft sm:text-[17px]">
+            从 HTML、Figma 到标注设计稿，再到对开发工具开放的 MCP 数据服务，形成完整的桌面端设计交付闭环。
+          </p>
+          <div class="mt-6 flex flex-col items-center justify-center gap-3 sm:flex-row">
+            <a href="#" class="inline-flex items-center justify-center rounded-full bg-accent px-6 py-3.5 text-sm font-semibold text-white transition hover:opacity-95">下载桌面版</a>
+            <a href="#" class="inline-flex items-center justify-center rounded-full border border-line px-6 py-3.5 text-sm font-semibold text-[#D7DBE3] transition hover:border-white/30 hover:text-white">联系团队演示</a>
+          </div>
+          <p class="mt-5 font-mono text-[11px] tracking-[0.12em] text-textMuted sm:text-xs">HTML → Annotated Design · Figma → Annotated Design · Annotated Design → MCP</p>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

package/examples/greenfield-spec-markupflow/site/product-detail.html ADDED Viewed

@@ -0,0 +1,165 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MarkupFlow - Product Detail</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              bg: '#06070A',
+              panel: '#10131A',
+              panelSoft: '#171D28',
+              panelMuted: '#131826',
+              line: '#2A3142',
+              textSoft: '#A1A1AA',
+              textMuted: '#71717A',
+              paper: '#F4F7FB',
+              ink: '#11131A',
+              inkSoft: '#556070',
+              accentA: '#A855F7',
+              accentB: '#EC4899'
+            },
+            fontFamily: {
+              display: ['"Funnel Sans"', 'Inter', 'sans-serif'],
+              body: ['Inter', 'sans-serif'],
+              mono: ['"IBM Plex Mono"', 'monospace']
+            },
+            backgroundImage: {
+              accent: 'linear-gradient(135deg, #A855F7 0%, #EC4899 100%)',
+              preview: 'linear-gradient(135deg, #EDE9FE 0%, #DBEAFE 100%)'
+            }
+          }
+        }
+      };
+    </script>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Funnel+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+  </head>
+  <body class="bg-bg text-white font-body">
+    <main class="mx-auto max-w-[1520px] px-5 pb-16 pt-7 sm:px-8 lg:px-10">
+      <header class="flex flex-col gap-5 py-2 lg:flex-row lg:items-center lg:justify-between">
+        <div class="flex items-center gap-3">
+          <span class="h-3.5 w-3.5 rounded-full bg-accent"></span>
+          <span class="font-display text-xl font-bold sm:text-[22px]">MarkupFlow / Product Detail</span>
+        </div>
+        <p class="font-mono text-[11px] tracking-[0.12em] text-textMuted">DESKTOP EDITOR · ANNOTATION PIPELINE · MCP SERVICE</p>
+      </header>
+      <section class="grid gap-7 pt-3 lg:grid-cols-[520px,minmax(0,1fr)] lg:items-start">
+        <div class="space-y-4">
+          <p class="font-mono text-[11px] uppercase tracking-[0.2em] text-accentA sm:text-xs">Product Detail</p>
+          <h1 class="max-w-[11ch] font-display text-[40px] font-bold leading-[0.98] sm:text-[50px] lg:text-[60px]">把导入、标注、发布三段工作流压进一个桌面工作台。</h1>
+          <p class="max-w-[34rem] text-base leading-7 text-textSoft sm:text-lg">
+            第二页聚焦产品内部结构：HTML 导入、Figma 导入、标注编辑、结构化检查、MCP 发布，各自如何在一条桌面端工作流里接力完成。
+          </p>
+          <div class="space-y-2.5 font-mono text-[13px] text-[#D7DBE3]">
+            <p>01&nbsp;&nbsp;Import queue for HTML and Figma sources</p>
+            <p>02&nbsp;&nbsp;Annotation editor with structure and measurement views</p>
+            <p>03&nbsp;&nbsp;MCP publisher exposing machine-readable design payloads</p>
+          </div>
+        </div>
+        <div class="rounded-[24px] bg-panel p-6">
+          <p class="font-mono text-[11px] uppercase tracking-[0.2em] text-textMuted sm:text-xs">Desktop Workspace</p>
+          <div class="mt-4 grid gap-4 lg:grid-cols-[240px,minmax(0,1fr)]">
+            <div class="space-y-3">
+              <article class="rounded-2xl bg-panelSoft p-[18px]">
+                <h2 class="font-display text-[22px] font-bold">Import Queue</h2>
+                <p class="mt-2 text-sm leading-6 text-[#9CA3AF]">HTML batches · Figma files · source metadata</p>
+              </article>
+              <article class="rounded-2xl bg-panelSoft p-[18px]">
+                <h2 class="font-display text-[22px] font-bold">Validation</h2>
+                <p class="mt-2 text-sm leading-6 text-[#9CA3AF]">layer naming · component mapping · note completeness</p>
+              </article>
+            </div>
+            <article class="rounded-[18px] bg-paper p-[18px] text-ink">
+              <h2 class="font-display text-[28px] font-bold sm:text-[30px]">Markup Editor</h2>
+              <p class="mt-3 text-[15px] leading-7 text-[#4B5563]">
+                在一个工作台里查看页面结构、标注说明、尺寸数据与交互语义，让设计稿既能交付给人，也能发布给系统。
+              </p>
+              <div class="mt-4 rounded-[14px] bg-preview p-[18px]">
+                <p class="font-mono text-[11px] text-[#5B21B6] sm:text-xs">Annotation Layer + Measurement Layer + Semantic Notes</p>
+                <p class="mt-3 text-base font-medium leading-7 text-ink sm:text-lg">
+                  导入来源经过结构归一、标注补全与语义整理后，输出为一份可回查、可协作、可供下游系统读取的桌面设计资产。
+                </p>
+              </div>
+            </article>
+          </div>
+        </div>
+      </section>
+      <section class="mt-14 rounded-[24px] bg-panel p-6 sm:p-8">
+        <div class="max-w-[760px] space-y-3">
+          <p class="font-mono text-[11px] uppercase tracking-[0.2em] text-accentA sm:text-xs">Pipeline</p>
+          <h2 class="font-display text-[32px] font-bold leading-[1.05] sm:text-[42px]">三段式转换流程，把来源资产整理成可消费的标注数据。</h2>
+          <p class="text-base leading-7 text-textSoft sm:text-[17px]">
+            每一段都承担不同职责：导入归一、标注补全、服务发布。它们共同构成桌面端交付工作流。
+          </p>
+        </div>
+        <div class="mt-6 grid gap-5 lg:grid-cols-3">
+          <article class="rounded-[20px] bg-panelSoft p-[22px]">
+            <p class="font-mono text-[11px] tracking-[0.14em] text-textMuted">STEP 01</p>
+            <h3 class="mt-4 font-display text-[26px] font-bold leading-[1.08]">Import &amp; Normalize</h3>
+            <p class="mt-4 text-[15px] leading-7 text-textSoft">读取 HTML 页面或 Figma 设计稿，抽取结构、层级、元信息，并统一为内部可处理的设计对象。</p>
+          </article>
+          <article class="rounded-[20px] bg-panelSoft p-[22px]">
+            <p class="font-mono text-[11px] tracking-[0.14em] text-textMuted">STEP 02</p>
+            <h3 class="mt-4 font-display text-[26px] font-bold leading-[1.08]">Annotate &amp; Review</h3>
+            <p class="mt-4 text-[15px] leading-7 text-textSoft">在桌面编辑器中补充尺寸、命名语义、层级说明、组件映射与交互注释，让设计稿具备完整交付含义。</p>
+          </article>
+          <article class="rounded-[20px] bg-panelSoft p-[22px]">
+            <p class="font-mono text-[11px] tracking-[0.14em] text-textMuted">STEP 03</p>
+            <h3 class="mt-4 font-display text-[26px] font-bold leading-[1.08]">Publish &amp; Serve</h3>
+            <p class="mt-4 text-[15px] leading-7 text-textSoft">把标注设计稿中的页面结构、组件信息、尺寸说明和语义字段，经由 MCP 暴露给开发工具链与自动化服务。</p>
+          </article>
+        </div>
+      </section>
+      <section class="mt-14 grid gap-6 rounded-[24px] bg-paper p-6 text-ink sm:p-8 lg:grid-cols-[420px,minmax(0,1fr)]">
+        <div class="space-y-4">
+          <p class="font-mono text-[11px] uppercase tracking-[0.2em] text-[#7C3AED] sm:text-xs">Workspace Modules</p>
+          <h2 class="font-display text-[30px] font-bold leading-[1.05] sm:text-[40px]">桌面工作台内部分为编辑区、检查区、服务区。</h2>
+          <p class="text-base leading-7 text-inkSoft sm:text-[17px]">
+            不是一个静态导出器，而是一套让设计交付逐步走向结构化与服务化的桌面工作台。
+          </p>
+        </div>
+        <div class="rounded-[20px] bg-[#0F1420] p-5 text-white">
+          <div class="space-y-3">
+            <article class="rounded-[14px] bg-[#151C2B] px-4 py-[14px]">
+              <p class="font-mono text-[11px] text-[#7C8AAF]">Editor Surface</p>
+              <p class="mt-2 text-base font-medium leading-7">layout view · note layer · semantic fields · component outline</p>
+            </article>
+            <article class="rounded-[14px] bg-[#151C2B] px-4 py-[14px]">
+              <p class="font-mono text-[11px] text-[#7C8AAF]">Review Checks</p>
+              <p class="mt-2 text-base font-medium leading-7">naming rules · mapping gaps · annotation completeness · drift alerts</p>
+            </article>
+            <article class="rounded-[14px] bg-[#151C2B] px-4 py-[14px]">
+              <p class="font-mono text-[11px] text-[#7C8AAF]">MCP Publisher</p>
+              <p class="mt-2 text-base font-medium leading-7">structured payloads · queryable fields · downstream tool consumption</p>
+            </article>
+          </div>
+        </div>
+      </section>
+      <section class="mt-14 rounded-[24px] bg-panelMuted px-6 py-10 text-center sm:px-10 sm:py-12">
+        <div class="mx-auto max-w-[760px]">
+          <p class="font-mono text-[11px] uppercase tracking-[0.2em] text-accentA sm:text-xs">Desktop delivery loop</p>
+          <h2 class="mt-3 font-display text-[32px] font-bold leading-[1.08] sm:text-[42px]">当页面、设计稿和标注数据被统一管理，交付就不再只是截图和说明文档。</h2>
+          <p class="mt-4 text-base leading-7 text-textSoft sm:text-[17px]">
+            让桌面端设计工作台承担导入、编辑、校验、发布职责，把标注设计稿真正推到开发链路中。
+          </p>
+          <div class="mt-6 flex flex-col items-center justify-center gap-3 sm:flex-row">
+            <a href="#" class="inline-flex items-center justify-center rounded-full bg-accent px-6 py-3.5 text-sm font-semibold text-white transition hover:opacity-95">预约产品演示</a>
+            <a href="#" class="inline-flex items-center justify-center rounded-full border border-line px-6 py-3.5 text-sm font-semibold text-[#D7DBE3] transition hover:border-white/30 hover:text-white">查看 MCP 接入</a>
+          </div>
+          <p class="mt-5 font-mono text-[11px] tracking-[0.12em] text-textMuted sm:text-xs">Import → Normalize → Annotate → Review → Publish → Serve</p>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

package/examples/greenfield-spec-markupflow/specs/marketing-site/spec.md ADDED Viewed

@@ -0,0 +1,37 @@
+# Spec
+## Capability
+- Name: MarkupFlow launch marketing site
+## Behavior
+- the homepage must explain the three core product capabilities: HTML to annotated design, Figma to annotated design, and annotated design as MCP data service
+- the homepage must establish that the product is for desktop-software teams
+- the homepage must route users to a deeper workflow page
+- the product detail page must explain the import, annotation, and publish pipeline
+- the product detail page must describe the desktop workspace and its major modules
+- both pages must preserve a consistent product voice and visual system
+## States
+- Success: both pages render the intended content blocks and cross-link correctly
+- Error: not applicable for this static forward test
+- Restricted: not applicable for this static forward test
+## Inputs
+- product description
+- capability list
+- Pencil screen structure and copy
+## Outputs
+- static homepage
+- static product detail page
+- implementation-to-Pencil traceability
+## Acceptance
+- the homepage includes hero, capabilities, MCP service, and CTA sections
+- the product detail page includes desktop workspace, pipeline, modules, and CTA sections
+- each page maps to one Pencil screen with a stable identifier
+- implementation text and structure remain aligned with the requested product narrative
+## Edge Cases
+- if the active Pencil source changes names or screen ids, `pencil-bindings.md` must be updated before implementation continues
+- if the live `.pen` file becomes unavailable, the current HTML outputs remain the fallback implementation baseline

package/examples/greenfield-spec-markupflow/tasks.md ADDED Viewed

@@ -0,0 +1,28 @@
+# Tasks
+## 1. Scope And Page Definition
+- [x] capture the desktop-product design brief
+- [x] define the proposal and delivery scope
+- [x] write the marketing-site behavior spec
+- [x] define the canonical page map
+- [x] `PASS` discovery checkpoint
+- [x] `PASS` spec checkpoint
+## 2. Pencil Source And Mapping
+- [x] register the active Pencil source
+- [x] record the active Pencil screens and implementation notes
+- [x] bind implementation pages to Pencil screens
+- [x] `PASS` design checkpoint
+- [x] `PASS` mapping checkpoint
+## 3. Static Page Implementation
+- [x] implement the homepage from requirements plus Pencil structure
+- [x] implement the product detail page from requirements plus Pencil structure
+- [x] preserve cross-page navigation and shared visual language
+- [x] `PASS` execution checkpoint after top-level page implementation
+## 4. Verification
+- [x] confirm requirement coverage against the spec
+- [x] confirm design coverage against the Pencil pages
+- [x] record known gaps and next steps
+- [x] `PASS` task checkpoint

package/examples/greenfield-spec-markupflow/verification.md ADDED Viewed

@@ -0,0 +1,37 @@
+# Verification
+## Mode
+- `greenfield-spec`
+## Checkpoint Summary
+- discovery checkpoint: `PASS`
+- spec checkpoint: `PASS`
+- design checkpoint: `PASS`
+- mapping checkpoint: `PASS`
+- task checkpoint: `PASS`
+- execution checkpoint: `PASS`
+## Requirement Coverage
+- homepage explains the three core capabilities
+- homepage positions the product as desktop-software-oriented
+- homepage links to the workflow detail page
+- product detail page explains import, annotate, and publish flow
+- product detail page explains desktop workspace modules
+## Design Coverage
+- the homepage implementation follows the Pencil screen structure for hero, capabilities, MCP service, and CTA
+- the product detail implementation follows the Pencil screen structure for workspace hero, pipeline, modules, and CTA
+- implementation pages are explicitly bound to Pencil screen ids
+## Drift Findings
+- no blocking requirement drift recorded in this forward test
+- no blocking design drift recorded in this forward test
+## Known Gaps
+- the `.pen` file is not yet committed into the repository
+- the implementation is static `HTML + Tailwind`, not a production componentized application
+- mobile behavior is acceptable for a launch-page example but was not the design priority
+## Conclusion
+- Da Vinci successfully ran the `greenfield-spec` flow from product description to Pencil-backed static implementation
+- the example demonstrates that requirements, Pencil bindings, tasks, and code outputs can stay aligned in one repository

package/lib/cli.js ADDED Viewed

@@ -0,0 +1,100 @@
+const {
+  VERSION,
+  installPlatforms,
+  uninstallPlatforms,
+  getStatus,
+  validateAssets
+} = require("./install");
+function getOption(args, name) {
+  const direct = args.find((arg) => arg.startsWith(`${name}=`));
+  if (direct) {
+    return direct.slice(name.length + 1);
+  }
+  const index = args.indexOf(name);
+  if (index >= 0) {
+    return args[index + 1];
+  }
+  return undefined;
+}
+function formatStatus(status) {
+  return [
+    `Da Vinci v${status.version}`,
+    `Home: ${status.homeDir}`,
+    `Codex: prompt=${status.codex.prompt ? "yes" : "no"} skill=${status.codex.skill ? "yes" : "no"}`,
+    `Claude: command=${status.claude.command ? "yes" : "no"} actions=${status.claude.actionSet ? "yes" : "no"}`,
+    `Gemini: command=${status.gemini.command ? "yes" : "no"} actions=${status.gemini.actionSet ? "yes" : "no"}`
+  ].join("\n");
+}
+function printHelp() {
+  console.log(
+    [
+      "Da Vinci CLI",
+      "",
+      "Usage:",
+      "  da-vinci install --platform codex,claude,gemini",
+      "  da-vinci uninstall --platform codex,claude,gemini",
+      "  da-vinci status",
+      "  da-vinci validate-assets",
+      "  da-vinci --version",
+      "",
+      "Options:",
+      "  --platform <value>   codex, claude, gemini, or all",
+      "  --home <path>        override HOME for installation targets"
+    ].join("\n")
+  );
+}
+async function runCli(argv) {
+  const [command] = argv;
+  const homeDir = getOption(argv, "--home");
+  if (!command || command === "help" || command === "--help" || command === "-h") {
+    printHelp();
+    return;
+  }
+  if (command === "--version" || command === "-v" || command === "version") {
+    console.log(`Da Vinci v${VERSION}`);
+    return;
+  }
+  if (command === "install") {
+    const platformValue = getOption(argv, "--platform") || "all";
+    const result = installPlatforms(platformValue, { homeDir });
+    console.log(
+      `Installed Da Vinci v${result.version} for ${result.platforms.join(", ")} at ${result.homeDir}`
+    );
+    return;
+  }
+  if (command === "uninstall") {
+    const platformValue = getOption(argv, "--platform") || "all";
+    const result = uninstallPlatforms(platformValue, { homeDir });
+    console.log(
+      `Uninstalled Da Vinci v${result.version} for ${result.platforms.join(", ")} from ${result.homeDir}`
+    );
+    return;
+  }
+  if (command === "status") {
+    console.log(formatStatus(getStatus({ homeDir })));
+    return;
+  }
+  if (command === "validate-assets") {
+    const result = validateAssets();
+    console.log(`Da Vinci v${result.version} assets are complete (${result.requiredAssets} required files).`);
+    return;
+  }
+  throw new Error(`Unknown command: ${command}`);
+}
+module.exports = {
+  runCli
+};