@liu_jimmy/create-fe-kit 0.1.0 → 1.2.0

package/index.js

@@ -2,26 +2,17 @@
 
 /**
  * create-fe-kit
- * Usage: pnpm create @liu_jimmy/fe-kit   or   npx @liu_jimmy/create-fe-kit
+ * Usage: pnpm create @liu_jimmy/create-fe-kit   or   npx @liu_jimmy/create-fe-kit
  * Prompts for project name + framework (Vue / React / Svelte), then copies template.
  */
-import { createInterface } from "readline";
-import { createWriteStream, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from "fs";
+import { mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from "fs";
 import { dirname, join } from "path";
 import { fileURLToPath } from "url";
+import prompts from "prompts";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const TEMPLATES_DIR = join(__dirname, "templates");
 
-const rl = createInterface({ input: process.stdin, output: process.stdout });
-
-function ask(question, defaultAnswer = "") {
-  return new Promise((resolve) => {
-    const prompt = defaultAnswer ? `${question} (${defaultAnswer}): ` : `${question}: `;
-    rl.question(prompt, (answer) => resolve(answer.trim() || defaultAnswer));
-  });
-}
-
 function copyRecursive(src, dest, vars = {}) {
   mkdirSync(dest, { recursive: true });
   for (const name of readdirSync(src)) {
@@ -44,21 +35,37 @@ function copyRecursive(src, dest, vars = {}) {
 async function main() {
   console.log("\n  create-fe-kit — Vue / React / Svelte + Vite + fe-kit\n");
 
-  const projectName = await ask("Project name", "my-fe-kit-app");
+  const { projectName } = await prompts({
+    type: "text",
+    name: "projectName",
+    message: "Project name",
+    initial: "my-fe-kit-app",
+  });
+  if (projectName == null) {
+    process.exit(0);
+  }
   const nameSafe = projectName.replace(/\s+/g, "-").toLowerCase();
-  console.log("\nFramework:");
-  console.log("  1) Vue");
-  console.log("  2) React");
-  console.log("  3) Svelte");
-  const choice = await ask("Choose (1/2/3)", "1");
-  const framework = { "1": "vue", "2": "react", "3": "svelte" }[choice] || "vue";
+
+  const { framework } = await prompts({
+    type: "select",
+    name: "framework",
+    message: "Framework",
+    choices: [
+      { title: "Vue", value: "vue" },
+      { title: "React", value: "react" },
+      { title: "Svelte", value: "svelte" },
+    ],
+    initial: 0,
+  });
+  if (framework == null) {
+    process.exit(0);
+  }
 
   const templatePath = join(TEMPLATES_DIR, framework);
   try {
     statSync(templatePath);
   } catch {
-    console.error(`\nTemplate "${framework}" not found. Use Vue (1) for now.`);
-    rl.close();
+    console.error(`\nTemplate "${framework}" not found.`);
     process.exit(1);
   }
 
@@ -66,7 +73,6 @@ async function main() {
   try {
     statSync(targetDir);
     console.error(`\nDirectory already exists: ${targetDir}`);
-    rl.close();
     process.exit(1);
   } catch {}
 
@@ -78,15 +84,14 @@ async function main() {
   console.log(`\nCreating ${nameSafe} with ${framework}...`);
   copyRecursive(templatePath, targetDir, vars);
 
-  console.log("\nDone. Next steps:\n");
+  console.log("\nDone. Your project includes a landing page (hero + FAQ + footer).\n");
+  console.log("Next steps:\n");
   console.log(`  cd ${nameSafe}`);
   console.log("  pnpm install");
   console.log("  pnpm dev\n");
-  rl.close();
 }
 
 main().catch((err) => {
   console.error(err);
-  rl.close();
   process.exit(1);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liu_jimmy/create-fe-kit",
-  "version": "0.1.0",
+  "version": "1.2.0",
   "description": "Create a new project with fe-kit (Vue / React / Svelte + Vite + Tailwind v3 + ESLint)",
   "type": "module",
   "bin": {
@@ -26,5 +26,8 @@
   },
   "engines": {
     "node": ">=18"
+  },
+  "dependencies": {
+    "prompts": "^2.4.2"
   }
 }

package/templates/react/.cursor/rules/fe-kit-style.mdc

@@ -20,4 +20,12 @@ alwaysApply: true
 
 - 目录 kebab-case；组件文件 PascalCase；非组件文件 kebab-case；变量 camelCase；常量 UPPER_SNAKE_CASE；类型 PascalCase；函数动词开头。
 
-## 三、生成后应通过 `pnpm lint`。
+## 三、React 组件写法
+
+- **由 props 推导的 className**：用 `useMemo(..., [依赖])` 或 JSX 内联，禁止 `const c = f(props.x)` 只算一次。示例：`const cn = useMemo(() => base + ' ' + variants[variant], [variant]);`
+
+## 四、生成后应通过 `pnpm lint`。
+
+## 五、请求统计（ai record）
+
+- 回复末尾提示用户执行：命中缓存则 `ai record --request --cache-hit --tokens-saved <估算>`，否则 `ai record --request --tokens-used <估算>`。仅作记录用。

package/templates/react/AGENTS.md

@@ -1,3 +1,17 @@
 # AI 生成代码约束（fe-kit）
 
-生成或修改前端代码时必须遵守：只使用 fe-kit 语义 class（`bg-bg`、`text-fg`、`border-border`、`bg-primary`、`rounded-xl` 等），禁止内联颜色/任意 Tailwind 颜色或任意值；命名按 kebab-case 目录、PascalCase 组件、camelCase 变量、UPPER_SNAKE_CASE 常量；生成后应通过 `pnpm lint`。
+生成或修改前端代码时必须遵守以下约束。
+
+## 核心原则
+
+1. **样式**：只使用 fe-kit 语义 class（`bg-bg`、`text-fg`、`border-border`、`bg-primary`、`rounded-xl` 等），禁止内联颜色/任意 Tailwind 颜色或任意值。
+2. **命名**：目录 kebab-case、组件文件 PascalCase、变量 camelCase、常量 UPPER_SNAKE_CASE、类型 PascalCase；生成后应通过 `pnpm lint`。
+
+## 组件写法（React）
+
+- **由 props 推导的 className 或样式**：用 `useMemo(() => ..., [props.xxx])` 或模板内联表达式，禁止用只执行一次的变量（否则 props 变化时不会更新）。
+- 示例：带 `variant` 的按钮，`const buttonClass = useMemo(() => baseClass + ' ' + variantClass[variant], [variant]);` 或 JSX 内联 `className={baseClass + ' ' + variantClass[variant]}`。
+
+## AI 请求统计（fe-kit-cli）
+
+完成本次回复后，在回复**末尾**提示用户执行一次：若用到 block 缓存则 `ai record --request --cache-hit --tokens-saved <估算>`，否则 `ai record --request --tokens-used <估算>`。供 `ai stats` 仅作记录用。

package/templates/react/src/App.tsx

@@ -1,7 +1,10 @@
 import { useState } from "react";
+import { Landing } from "./pages/Landing";
 
 type ThemeId = "theme-blue" | "theme-purple" | "theme-green";
 
+const PROJECT_TITLE = "{{TITLE}}";
+
 const themes: { id: ThemeId; label: string }[] = [
   { id: "theme-blue", label: "蓝" },
   { id: "theme-purple", label: "紫" },
@@ -23,26 +26,22 @@ function App() {
   }
 
   function toggleDark() {
-    setIsDark((v) => !v);
-    document.documentElement.classList.toggle("dark", !isDark);
+    const next = !isDark;
+    setIsDark(next);
+    document.documentElement.classList.toggle("dark", next);
   }
 
   return (
     <div className="min-h-screen bg-bg text-fg font-sans">
       <header className="border-b border-border bg-bg-elevated px-6 py-4 shadow-sm">
-        <h1 className="text-2xl font-semibold text-fg">{{TITLE}}</h1>
-        <p className="mt-1 text-sm text-fg-muted">fe-kit + React + Vite</p>
-      </header>
-
-      <main className="mx-auto max-w-2xl space-y-8 p-6">
-        <section className="rounded-xl border border-border bg-bg-elevated p-6 shadow-md">
-          <h2 className="text-lg font-medium text-fg">主题</h2>
-          <div className="mt-4 flex flex-wrap gap-2">
+        <div className="mx-auto flex max-w-2xl items-center justify-between">
+          <h1 className="text-2xl font-semibold text-fg">{PROJECT_TITLE}</h1>
+          <div className="flex items-center gap-2">
             {themes.map((t) => (
               <button
                 key={t.id}
                 type="button"
-                className={`rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
+                className={`rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${
                   theme === t.id ? "bg-primary text-primary-fg" : "bg-primary-muted text-fg hover:bg-primary hover:text-primary-fg"
                 }`}
                 onClick={() => handleSetTheme(t.id)}
@@ -52,7 +51,7 @@ function App() {
             ))}
             <button
               type="button"
-              className={`rounded-lg border px-4 py-2 text-sm font-medium ${
+              className={`rounded-lg border px-3 py-1.5 text-sm font-medium ${
                 isDark ? "border-fg bg-fg text-bg" : "border-border bg-bg-muted text-fg"
               }`}
               onClick={toggleDark}
@@ -60,7 +59,11 @@ function App() {
               {isDark ? "浅色" : "深色"}
             </button>
           </div>
-        </section>
+        </div>
+      </header>
+
+      <main>
+        <Landing />
       </main>
     </div>
   );

package/templates/react/src/pages/Landing.tsx

@@ -0,0 +1,101 @@
+import { useState } from "react";
+
+const heroTitle = "Build faster";
+const heroSubtitle = "Ship modern web apps with fe-kit";
+const primaryAction = { label: "Get started", href: "#" };
+const secondaryAction = { label: "Learn more", href: "#" };
+
+const faqTitle = "Frequently asked questions";
+const faqItems = [
+  {
+    question: "What is fe-kit?",
+    answer:
+      "A cross-framework design system with tokens, Tailwind preset and BlockSpec for AI code cache.",
+  },
+  {
+    question: "Which frameworks?",
+    answer: "Vue, React and Svelte with the same tokens and conventions.",
+  },
+];
+
+const copyright = "© 2025 fe-kit";
+const footerLinks = [
+  { label: "Docs", href: "#" },
+  { label: "GitHub", href: "#" },
+];
+
+export function Landing() {
+  const [openIndex, setOpenIndex] = useState<number | null>(0);
+
+  return (
+    <div>
+      {/* Hero */}
+      <section className="border-b border-border bg-bg-elevated py-16">
+        <div className="mx-auto max-w-2xl px-6 text-center">
+          <h1 className="text-3xl font-bold text-fg md:text-4xl">{heroTitle}</h1>
+          <p className="mt-4 text-lg text-fg-muted">{heroSubtitle}</p>
+          <div className="mt-8 flex flex-wrap justify-center gap-4">
+            <a
+              href={primaryAction.href}
+              className="rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-primary-fg hover:bg-primary-hover"
+            >
+              {primaryAction.label}
+            </a>
+            <a
+              href={secondaryAction.href}
+              className="rounded-lg border border-border bg-bg px-5 py-2.5 text-sm font-medium text-fg hover:bg-bg-muted"
+            >
+              {secondaryAction.label}
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <section className="border-b border-border bg-bg py-16">
+        <div className="mx-auto max-w-2xl px-6">
+          <h2 className="text-2xl font-semibold text-fg">{faqTitle}</h2>
+          <ul className="mt-6 space-y-2">
+            {faqItems.map((item, i) => (
+              <li
+                key={i}
+                className="rounded-xl border border-border bg-bg-elevated"
+              >
+                <button
+                  type="button"
+                  className="flex w-full items-center justify-between px-4 py-3 text-left text-fg"
+                  onClick={() => setOpenIndex(openIndex === i ? null : i)}
+                >
+                  <span className="font-medium">{item.question}</span>
+                </button>
+                {openIndex === i && (
+                  <div className="border-t border-border px-4 py-3 text-fg-muted">
+                    {item.answer}
+                  </div>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-border bg-bg-muted py-8">
+        <div className="mx-auto flex max-w-2xl flex-col items-center justify-between gap-4 px-6 sm:flex-row">
+          <p className="text-sm text-fg-muted">{copyright}</p>
+          <nav className="flex gap-6">
+            {footerLinks.map((link, i) => (
+              <a
+                key={i}
+                href={link.href}
+                className="text-sm text-fg-muted hover:text-fg"
+              >
+                {link.label}
+              </a>
+            ))}
+          </nav>
+        </div>
+      </footer>
+    </div>
+  );
+}

package/templates/react/vite.config.ts

@@ -1,6 +1,13 @@
+import path from "path";
+import { fileURLToPath } from "url";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: { "@": path.resolve(__dirname, "src") },
+  },
 });

package/templates/svelte/.cursor/rules/fe-kit-style.mdc

@@ -6,3 +6,11 @@ alwaysApply: true
 # fe-kit 风格约束
 
 只使用 fe-kit 语义 class（bg-bg、text-fg、border-border、bg-primary、rounded-xl 等）；禁止内联颜色、任意 Tailwind 颜色或任意值；命名：目录 kebab-case、组件 PascalCase、变量 camelCase、常量 UPPER_SNAKE_CASE；生成后应通过 pnpm lint。
+
+## 组件写法（Svelte）
+
+- **由 props 推导的 class**：用响应式语句 `$: className = base + ' ' + map[prop];`，禁止只赋值一次的 `let className = ...`。
+
+## 请求统计（ai record）
+
+- 回复末尾提示用户执行：命中缓存则 `ai record --request --cache-hit --tokens-saved <估算>`，否则 `ai record --request --tokens-used <估算>`。仅作记录用。

package/templates/svelte/AGENTS.md

@@ -1,3 +1,11 @@
 # AI 生成代码约束（fe-kit）
 
-只使用 fe-kit 语义 class（bg-bg、text-fg、border-border、bg-primary、rounded-xl 等）；禁止内联颜色与任意 Tailwind 颜色；命名按 CONVENTIONS；生成后应通过 pnpm lint。
+只使用 fe-kit 语义 class（bg-bg、text-fg、border-border、bg-primary、rounded-xl 等）；禁止内联颜色与任意 Tailwind 颜色；命名按 kebab-case 目录、PascalCase 组件、camelCase 变量；生成后应通过 pnpm lint。
+
+## 组件写法（Svelte）
+
+- **由 props 或状态推导的 class**：用响应式语句 `$: buttonClass = baseClass + ' ' + variantClass[variant];`，禁止只赋值一次的 `let buttonClass = ...`（否则 variant 变化时不会更新）。
+
+## AI 请求统计（fe-kit-cli）
+
+完成本次回复后，在回复**末尾**提示用户执行一次：若用到 block 缓存则 `ai record --request --cache-hit --tokens-saved <估算>`，否则 `ai record --request --tokens-used <估算>`。供 `ai stats` 仅作记录用。

package/templates/svelte/src/App.svelte

@@ -1,4 +1,8 @@
 <script lang="ts">
+  import Landing from "./pages/Landing.svelte";
+
+  const projectTitle = "{{TITLE}}";
+
   type ThemeId = "theme-blue" | "theme-purple" | "theme-green";
 
   let theme: ThemeId = "theme-blue";
@@ -24,18 +28,13 @@
 
 <main class="min-h-screen bg-bg text-fg font-sans">
   <header class="border-b border-border bg-bg-elevated px-6 py-4 shadow-sm">
-    <h1 class="text-2xl font-semibold text-fg">{{TITLE}}</h1>
-    <p class="mt-1 text-sm text-fg-muted">fe-kit + Svelte + Vite</p>
-  </header>
-
-  <div class="mx-auto max-w-2xl space-y-8 p-6">
-    <section class="rounded-xl border border-border bg-bg-elevated p-6 shadow-md">
-      <h2 class="text-lg font-medium text-fg">主题</h2>
-      <div class="mt-4 flex flex-wrap gap-2">
+    <div class="mx-auto flex max-w-2xl items-center justify-between">
+      <h1 class="text-2xl font-semibold text-fg">{projectTitle}</h1>
+      <div class="flex items-center gap-2">
         {#each themes as t}
           <button
             type="button"
-            class="rounded-lg px-4 py-2 text-sm font-medium transition-colors {theme === t.id
+            class="rounded-lg px-3 py-1.5 text-sm font-medium transition-colors {theme === t.id
               ? 'bg-primary text-primary-fg'
               : 'bg-primary-muted text-fg hover:bg-primary hover:text-primary-fg'}"
             on:click={() => setTheme(t.id)}
@@ -45,12 +44,16 @@
         {/each}
         <button
           type="button"
-          class="rounded-lg border px-4 py-2 text-sm font-medium {isDark ? 'border-fg bg-fg text-bg' : 'border-border bg-bg-muted text-fg'}"
+          class="rounded-lg border px-3 py-1.5 text-sm font-medium {isDark ? 'border-fg bg-fg text-bg' : 'border-border bg-bg-muted text-fg'}"
           on:click={toggleDark}
         >
           {isDark ? "浅色" : "深色"}
         </button>
       </div>
-    </section>
+    </div>
+  </header>
+
+  <div>
+    <Landing />
   </div>
 </main>

package/templates/svelte/src/pages/Landing.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  const heroTitle = "Build faster";
+  const heroSubtitle = "Ship modern web apps with fe-kit";
+  const primaryAction = { label: "Get started", href: "#" };
+  const secondaryAction = { label: "Learn more", href: "#" };
+
+  const faqTitle = "Frequently asked questions";
+  const faqItems: { question: string; answer: string }[] = [
+    {
+      question: "What is fe-kit?",
+      answer:
+        "A cross-framework design system with tokens, Tailwind preset and BlockSpec for AI code cache.",
+    },
+    {
+      question: "Which frameworks?",
+      answer: "Vue, React and Svelte with the same tokens and conventions.",
+    },
+  ];
+
+  let openIndex: number | null = 0;
+
+  const copyright = "© 2025 fe-kit";
+  const footerLinks: { label: string; href: string }[] = [
+    { label: "Docs", href: "#" },
+    { label: "GitHub", href: "#" },
+  ];
+</script>
+
+<div>
+  <!-- Hero -->
+  <section class="border-b border-border bg-bg-elevated py-16">
+    <div class="mx-auto max-w-2xl px-6 text-center">
+      <h1 class="text-3xl font-bold text-fg md:text-4xl">{heroTitle}</h1>
+      <p class="mt-4 text-lg text-fg-muted">{heroSubtitle}</p>
+      <div class="mt-8 flex flex-wrap justify-center gap-4">
+        <a
+          href={primaryAction.href}
+          class="rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-primary-fg hover:bg-primary-hover"
+        >
+          {primaryAction.label}
+        </a>
+        <a
+          href={secondaryAction.href}
+          class="rounded-lg border border-border bg-bg px-5 py-2.5 text-sm font-medium text-fg hover:bg-bg-muted"
+        >
+          {secondaryAction.label}
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- FAQ -->
+  <section class="border-b border-border bg-bg py-16">
+    <div class="mx-auto max-w-2xl px-6">
+      <h2 class="text-2xl font-semibold text-fg">{faqTitle}</h2>
+      <ul class="mt-6 space-y-2">
+        {#each faqItems as item, i}
+          <li class="rounded-xl border border-border bg-bg-elevated">
+            <button
+              type="button"
+              class="flex w-full items-center justify-between px-4 py-3 text-left text-fg"
+              on:click={() => (openIndex = openIndex === i ? null : i)}
+            >
+              <span class="font-medium">{item.question}</span>
+            </button>
+            {#if openIndex === i}
+              <div class="border-t border-border px-4 py-3 text-fg-muted">
+                {item.answer}
+              </div>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer class="border-t border-border bg-bg-muted py-8">
+    <div
+      class="mx-auto flex max-w-2xl flex-col items-center justify-between gap-4 px-6 sm:flex-row"
+    >
+      <p class="text-sm text-fg-muted">{copyright}</p>
+      <nav class="flex gap-6">
+        {#each footerLinks as link}
+          <a
+            href={link.href}
+            class="text-sm text-fg-muted hover:text-fg"
+          >
+            {link.label}
+          </a>
+        {/each}
+      </nav>
+    </div>
+  </footer>
+</div>

package/templates/svelte/vite.config.ts

@@ -1,6 +1,13 @@
+import path from "path";
+import { fileURLToPath } from "url";
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
 export default defineConfig({
   plugins: [svelte()],
+  resolve: {
+    alias: { "@": path.resolve(__dirname, "src") },
+  },
 });

package/templates/vue/.cursor/rules/fe-kit-style.mdc

@@ -45,7 +45,12 @@ alwaysApply: true
 ## 四、Vue 组件
 
 - 模板中组件名 PascalCase；块顺序：script → template → style
+- **由 props 推导的 class**：必须用 `computed()`，禁止 `const x = f(props.xxx)`（不会随 props 更新）。示例：`const buttonClass = computed(() => baseClass + ' ' + variantClass[props.variant]);`
 
 ## 五、生成后自检
 
 - 代码应能通过 `pnpm lint`；若有报错只做最小修复。
+
+## 六、请求统计（ai record）
+
+- 本次回复结束后，在末尾提示用户执行一次：若命中缓存则 `ai record --request --cache-hit --tokens-saved <估算>`，否则 `ai record --request --tokens-used <估算>`。供 `ai stats` 仅作记录用。

package/templates/vue/AGENTS.md

@@ -20,3 +20,18 @@
 | 阴影 | `shadow-sm`～`shadow-xl` |
 
 主题：根节点 `theme-blue` / `theme-purple` / `theme-green`；深色加 `dark`。
+
+## 组件写法（Vue）
+
+- **由 props 推导的 class 或样式**：必须用 `computed()`，禁止用一次性 `const`（否则 props 变化时不会更新）。
+- 示例：带 `variant` 的按钮，class 应写为  
+  `const buttonClass = computed(() => baseClass + ' ' + variantClass[props.variant]);`  
+  模板中 `:class="buttonClass"`。
+- 组件名用 `defineOptions({ name: "PascalName" })`；props 用 `defineProps` + `withDefaults`，类型用 TypeScript。
+
+## AI 请求统计（fe-kit-cli）
+
+完成本次回复后，在回复**末尾**提示用户执行一次统计记录（项目已安装 `@liu_jimmy/fe-kit-cli` 时）：
+- 若本次用到了 block 缓存或等价复用：提示运行 `ai record --request --cache-hit --tokens-saved <估算值>`。
+- 若本次为普通生成/修改代码：提示运行 `ai record --request --tokens-used <估算值>`。
+用户复制到终端执行即可，用于 `ai stats` 的统计与 Cost saved 仅作记录参考。

package/templates/vue/src/App.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import Landing from "./pages/Landing.vue";
 
+const projectTitle = "{{TITLE}}";
 const theme = ref<"theme-blue" | "theme-purple" | "theme-green">("theme-blue");
 const isDark = ref(false);
 
@@ -25,20 +27,15 @@ function toggleDark() {
 <template>
   <div class="min-h-screen bg-bg text-fg font-sans">
     <header class="border-b border-border bg-bg-elevated px-6 py-4 shadow-sm">
-      <h1 class="text-2xl font-semibold text-fg">{{TITLE}}</h1>
-      <p class="mt-1 text-sm text-fg-muted">fe-kit + Vue + Vite</p>
-    </header>
-
-    <main class="mx-auto max-w-2xl space-y-8 p-6">
-      <section class="rounded-xl border border-border bg-bg-elevated p-6 shadow-md">
-        <h2 class="text-lg font-medium text-fg">主题</h2>
-        <div class="mt-4 flex flex-wrap gap-2">
+      <div class="mx-auto flex max-w-2xl items-center justify-between">
+        <h1 class="text-2xl font-semibold text-fg">{{ projectTitle }}</h1>
+        <div class="flex items-center gap-2">
           <button
             v-for="t in themes"
             :key="t.id"
             type="button"
             :class="[
-              'rounded-lg px-4 py-2 text-sm font-medium transition-colors',
+              'rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
               theme === t.id ? 'bg-primary text-primary-fg' : 'bg-primary-muted text-fg hover:bg-primary hover:text-primary-fg',
             ]"
             @click="setTheme(t.id)"
@@ -47,13 +44,17 @@ function toggleDark() {
           </button>
           <button
             type="button"
-            :class="['rounded-lg border px-4 py-2 text-sm font-medium', isDark ? 'border-fg bg-fg text-bg' : 'border-border bg-bg-muted text-fg']"
+            :class="['rounded-lg border px-3 py-1.5 text-sm font-medium', isDark ? 'border-fg bg-fg text-bg' : 'border-border bg-bg-muted text-fg']"
             @click="toggleDark"
           >
             {{ isDark ? "浅色" : "深色" }}
           </button>
         </div>
-      </section>
+      </div>
+    </header>
+
+    <main>
+      <Landing />
     </main>
   </div>
 </template>

package/templates/vue/src/pages/Landing.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const heroTitle = "Build faster";
+const heroSubtitle = "Ship modern web apps with fe-kit";
+const primaryAction = { label: "Get started", href: "#" };
+const secondaryAction = { label: "Learn more", href: "#" };
+
+const faqTitle = "Frequently asked questions";
+const faqItems = [
+  {
+    question: "What is fe-kit?",
+    answer:
+      "A cross-framework design system with tokens, Tailwind preset and BlockSpec for AI code cache.",
+  },
+  {
+    question: "Which frameworks?",
+    answer: "Vue, React and Svelte with the same tokens and conventions.",
+  },
+];
+
+const openIndex = ref<number | null>(0);
+
+const copyright = "© 2025 fe-kit";
+const footerLinks = [
+  { label: "Docs", href: "#" },
+  { label: "GitHub", href: "#" },
+];
+</script>
+
+<template>
+  <div>
+    <!-- Hero -->
+    <section class="border-b border-border bg-bg-elevated py-16">
+      <div class="mx-auto max-w-2xl px-6 text-center">
+        <h1 class="text-3xl font-bold text-fg md:text-4xl">{{ heroTitle }}</h1>
+        <p class="mt-4 text-lg text-fg-muted">{{ heroSubtitle }}</p>
+        <div class="mt-8 flex flex-wrap justify-center gap-4">
+          <a
+            :href="primaryAction.href"
+            class="rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-primary-fg hover:bg-primary-hover"
+          >
+            {{ primaryAction.label }}
+          </a>
+          <a
+            :href="secondaryAction.href"
+            class="rounded-lg border border-border bg-bg px-5 py-2.5 text-sm font-medium text-fg hover:bg-bg-muted"
+          >
+            {{ secondaryAction.label }}
+          </a>
+        </div>
+      </div>
+    </section>
+
+    <!-- FAQ -->
+    <section class="border-b border-border bg-bg py-16">
+      <div class="mx-auto max-w-2xl px-6">
+        <h2 class="text-2xl font-semibold text-fg">{{ faqTitle }}</h2>
+        <ul class="mt-6 space-y-2">
+          <li
+            v-for="(item, i) in faqItems"
+            :key="i"
+            class="rounded-xl border border-border bg-bg-elevated"
+          >
+            <button
+              type="button"
+              class="flex w-full items-center justify-between px-4 py-3 text-left text-fg"
+              @click="openIndex = openIndex === i ? null : i"
+            >
+              <span class="font-medium">{{ item.question }}</span>
+            </button>
+            <div
+              v-show="openIndex === i"
+              class="border-t border-border px-4 py-3 text-fg-muted"
+            >
+              {{ item.answer }}
+            </div>
+          </li>
+        </ul>
+      </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="border-t border-border bg-bg-muted py-8">
+      <div
+        class="mx-auto flex max-w-2xl flex-col items-center justify-between gap-4 px-6 sm:flex-row"
+      >
+        <p class="text-sm text-fg-muted">{{ copyright }}</p>
+        <nav class="flex gap-6">
+          <a
+            v-for="(link, i) in footerLinks"
+            :key="i"
+            :href="link.href"
+            class="text-sm text-fg-muted hover:text-fg"
+          >
+            {{ link.label }}
+          </a>
+        </nav>
+      </div>
+    </footer>
+  </div>
+</template>

package/templates/vue/vite.config.ts

@@ -1,6 +1,13 @@
+import path from "path";
+import { fileURLToPath } from "url";
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
 export default defineConfig({
   plugins: [vue()],
+  resolve: {
+    alias: { "@": path.resolve(__dirname, "src") },
+  },
 });