docs: 渐进式插件教程（L0→L5）+ DESIGN.md 视觉规范 + plugin-template 脚手架

packages/plugin-template/src/renderer.tsx

@@ -0,0 +1,29 @@
+/**
+ * 渲染层组件源码（JSX）。构建：
+ *   esbuild src/renderer.tsx --bundle --format=esm --outfile=renderer.mjs \
+ *     --jsx=automatic --alias:react=./shims/react.js --alias:react/jsx-runtime=./shims/jsx-runtime.js
+ * 产物 renderer.mjs 是自包含单文件，放回插件目录即被宿主装载。
+ * 样式类名只用 DESIGN.md 里的宿主词汇。
+ */
+import { useState } from 'react'
+
+export default function mount(ctx) {
+  function Panel() {
+    const [count, setCount] = useState(0)
+    return (
+      <div className="flex h-full flex-col gap-2 p-3">
+        <div className="text-[12.5px] text-ink">我的插件面板</div>
+        <div className="text-[12px] text-ink-3">计数：{count}</div>
+        <button
+          className="self-start rounded-control border border-line-strong px-2.5 py-1 text-[11.5px] text-ink hover:bg-hover"
+          onClick={() => setCount((c) => c + 1)}
+        >
+          +1
+        </button>
+      </div>
+    )
+  }
+
+  ctx.registerPanel(Panel)
+  ctx.registerView(Panel)
+}