feat: VibeSkill docs site with i18n support (zh-CN + EN)

Author: LuckyOneTwoThree

.github/workflows/deploy.yml

@@ -0,0 +1,57 @@
+name: Deploy VitePress site to Pages
+
+on:
+  push:
+    branches: [main]
+
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build with VitePress
+        run: npm run docs:build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+.vitepress/cache/
+.vitepress/dist/
+.DS_Store
+*.log
+.trae/

DESIGN.md

@@ -0,0 +1,327 @@
+# Design System
+
+## Overview
+
+VibeSkill 是一个方法论驱动的 Vibe Coding 学习门户。设计系统围绕"清晰、温暖、有结构"的品牌人格构建，采用浅色系米白底色 + 珊瑚橙强调色的配色策略，传递友好开放的学习氛围。
+
+## Theme
+
+**Scene sentence**: 一个产品经理在明亮的咖啡厅里，用笔记本电脑浏览 VibeSkill，寻找如何用 AI 做对产品的系统化方法——页面应该像一本精心编排的教材，既有知识的厚重感，又有探索的愉悦感。
+
+**Theme decision**: Light mode only (for now). The learning context is daytime, focused reading, and the warm cream palette creates an inviting atmosphere that reduces cognitive load.
+
+## Color Strategy
+
+**Full palette** — 3 named roles, each used deliberately:
+
+### Primary (Coral Orange — 活力与行动)
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--color-primary-50` | `#FFF7ED` | 最浅背景 tint |
+| `--color-primary-100` | `#FFEDD5` | 悬停/高亮背景 |
+| `--color-primary-200` | `#FED7AA` | 边框、分隔线 |
+| `--color-primary-300` | `#FDBA74` | 次要强调 |
+| `--color-primary-400` | `#FB923C` | 图标、标签 |
+| `--color-primary-500` | `#F97316` | 主按钮、核心强调 |
+| `--color-primary-600` | `#EA580C` | 主按钮悬停、链接 |
+| `--color-primary-700` | `#C2410C` | 深色强调 |
+| `--color-primary-800` | `#9A3412` | 文字强调 |
+| `--color-primary-900` | `#7C2D12` | 最深色 |
+
+### Neutral (Warm Gray — 结构与层次)
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--color-neutral-50` | `#FFFBF5` | 页面背景（米白） |
+| `--color-neutral-100` | `#F5F0E8` | 卡片背景、交替行 |
+| `--color-neutral-200` | `#E8E0D4` | 边框、分隔线 |
+| `--color-neutral-300` | `#D4C8B8` | 禁用状态边框 |
+| `--color-neutral-400` | `#A89B8C` | 占位符文字 |
+| `--color-neutral-500` | `#8C7F6E` | 次要文字 |
+| `--color-neutral-600` | `#6B5F4F` | 正文文字 |
+| `--color-neutral-700` | `#4A4238` | 标题文字 |
+| `--color-neutral-800` | `#2D2924` | 最深文字 |
+| `--color-neutral-900` | `#1A1814` | 几乎黑色 |
+
+### Accent (Teal — 平衡与信任)
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--color-accent-50` | `#F0FDFA` | 浅背景 tint |
+| `--color-accent-100` | `#CCFBF1` | 信息提示背景 |
+| `--color-accent-200` | `#99F6E4` | 成功状态 |
+| `--color-accent-500` | `#14B8A6` | 成功图标、完成标记 |
+| `--color-accent-600` | `#0D9488` | 链接悬停 |
+| `--color-accent-700` | `#0F766E` | 深色强调 |
+
+### Domain Colors (for Skill Constellation)
+
+| Domain | Color | Token |
+|--------|-------|-------|
+| PM (产品) | `#3B82F6` (Blue) | `--color-domain-pm` |
+| UI (设计与前端) | `#8B5CF6` (Purple) | `--color-domain-ui` |
+| Backend (后端) | `#10B981` (Green) | `--color-domain-backend` |
+| Cross (跨领域) | `#F59E0B` (Amber) | `--color-domain-cross` |
+
+### Semantic Colors
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--color-success` | `#10B981` | 成功状态 |
+| `--color-warning` | `#F59E0B` | 警告状态 |
+| `--color-error` | `#EF4444` | 错误状态 |
+| `--color-info` | `#3B82F6` | 信息提示 |
+
+## Typography
+
+### Font Families
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--font-display` | `"Manrope", system-ui, sans-serif` | 标题、Hero 文字 |
+| `--font-body` | `"Inter", system-ui, sans-serif` | 正文、UI 元素 |
+| `--font-mono` | `"JetBrains Mono", "Fira Code", monospace` | 代码、Skill 名称、数据 |
+
+### Type Scale
+
+Fluid scale using `clamp()` for headings:
+
+| Token | Size | Line Height | Weight | Letter Spacing |
+|-------|------|-------------|--------|----------------|
+| `--text-hero` | `clamp(2.5rem, 5vw, 4rem)` | 1.1 | 800 | -0.02em |
+| `--text-h1` | `clamp(2rem, 4vw, 3rem)` | 1.2 | 700 | -0.01em |
+| `--text-h2` | `clamp(1.5rem, 3vw, 2.25rem)` | 1.3 | 700 | -0.01em |
+| `--text-h3` | `clamp(1.25rem, 2vw, 1.75rem)` | 1.4 | 600 | 0 |
+| `--text-h4` | `1.125rem` | 1.5 | 600 | 0 |
+| `--text-body` | `1rem` | 1.7 | 400 | 0 |
+| `--text-body-sm` | `0.875rem` | 1.6 | 400 | 0 |
+| `--text-caption` | `0.75rem` | 1.5 | 500 | 0.02em |
+| `--text-code` | `0.875rem` | 1.6 | 400 | 0 |
+
+## Spacing
+
+### Base Unit
+
+`--space-unit: 0.25rem` (4px)
+
+### Scale
+
+| Token | Value |
+|-------|-------|
+| `--space-1` | `0.25rem` (4px) |
+| `--space-2` | `0.5rem` (8px) |
+| `--space-3` | `0.75rem` (12px) |
+| `--space-4` | `1rem` (16px) |
+| `--space-5` | `1.25rem` (20px) |
+| `--space-6` | `1.5rem` (24px) |
+| `--space-8` | `2rem` (32px) |
+| `--space-10` | `2.5rem` (40px) |
+| `--space-12` | `3rem` (48px) |
+| `--space-16` | `4rem` (64px) |
+| `--space-20` | `5rem` (80px) |
+| `--space-24` | `6rem` (96px) |
+| `--space-32` | `8rem` (128px) |
+
+### Section Spacing
+
+| Token | Value |
+|-------|-------|
+| `--section-padding-y` | `clamp(3rem, 8vw, 6rem)` |
+| `--section-padding-x` | `clamp(1rem, 5vw, 3rem)` |
+| `--content-max-width` | `1200px` |
+| `--content-narrow` | `720px` |
+
+## Elevation
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--shadow-sm` | `0 1px 2px 0 rgb(0 0 0 / 0.05)` | 轻微提升 |
+| `--shadow-md` | `0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)` | 卡片 |
+| `--shadow-lg` | `0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)` | 下拉、弹窗 |
+| `--shadow-xl` | `0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)` | 模态框 |
+| `--shadow-glow` | `0 0 20px rgb(234 88 12 / 0.15)` | 主按钮悬停光晕 |
+
+## Border Radius
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--radius-sm` | `0.375rem` (6px) | 小元素、标签 |
+| `--radius-md` | `0.5rem` (8px) | 按钮、输入框 |
+| `--radius-lg` | `0.75rem` (12px) | 卡片 |
+| `--radius-xl` | `1rem` (16px) | 大卡片、模态框 |
+| `--radius-2xl` | `1.5rem` (24px) | Hero 区域 |
+| `--radius-full` | `9999px` | 胶囊按钮、头像 |
+
+## Components
+
+### Button
+
+**Primary Button**
+- Background: `--color-primary-500`
+- Text: white
+- Padding: `0.75rem 1.5rem`
+- Border radius: `--radius-full`
+- Font: `--font-body`, weight 600
+- Hover: Background `--color-primary-600`, shadow `--shadow-glow`
+- Active: Scale 0.98
+
+**Secondary Button**
+- Background: transparent
+- Border: 1.5px solid `--color-neutral-200`
+- Text: `--color-neutral-700`
+- Hover: Background `--color-neutral-100`, border `--color-neutral-300`
+
+**Ghost Button**
+- Background: transparent
+- Text: `--color-primary-600`
+- Hover: Background `--color-primary-50`
+
+### Card
+
+**Standard Card**
+- Background: white
+- Border: 1px solid `--color-neutral-200`
+- Border radius: `--radius-lg`
+- Padding: `--space-6`
+- Shadow: `--shadow-sm`
+- Hover: Shadow `--shadow-md`, border `--color-neutral-300`
+- Transition: all 200ms ease-out
+
+**Feature Card** (for Skill cards, stage cards)
+- Background: white
+- Border: 1px solid `--color-neutral-200`
+- Border radius: `--radius-xl`
+- Padding: `--space-8`
+- Shadow: none (flat)
+- Hover: Shadow `--shadow-md`, translateY -2px, border `--color-primary-200`
+- Transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1)
+
+### Tag / Badge
+
+**Domain Tag**
+- Padding: `0.25rem 0.75rem`
+- Border radius: `--radius-full`
+- Font: `--font-mono`, `--text-caption`
+- Background: domain color at 10% opacity
+- Text: domain color
+
+**Stage Badge**
+- Background: `--color-primary-50`
+- Text: `--color-primary-700`
+- Border: 1px solid `--color-primary-200`
+
+### Navigation
+
+**Top Nav**
+- Background: white with 80% opacity + backdrop blur
+- Border bottom: 1px solid `--color-neutral-200`
+- Height: 64px
+- Position: sticky top
+
+**Nav Link**
+- Text: `--color-neutral-600`
+- Hover: `--color-primary-600`
+- Active: `--color-primary-700`, font-weight 600
+- Underline on active: 2px solid `--color-primary-500`
+
+## Layout Patterns
+
+### Container
+
+```css
+.container {
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+  padding: 0 var(--section-padding-x);
+}
+
+.container-narrow {
+  max-width: var(--content-narrow);
+  margin: 0 auto;
+  padding: 0 var(--section-padding-x);
+}
+```
+
+### Section
+
+```css
+.section {
+  padding: var(--section-padding-y) 0;
+}
+
+.section-alt {
+  background: var(--color-neutral-100);
+}
+```
+
+### Grid
+
+```css
+.grid-skills {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--space-6);
+}
+
+.grid-stages {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: var(--space-8);
+}
+```
+
+## Animation
+
+### Timing
+
+| Token | Value |
+|-------|-------|
+| `--duration-fast` | `150ms` |
+| `--duration-normal` | `250ms` |
+| `--duration-slow` | `400ms` |
+| `--ease-out` | `cubic-bezier(0.4, 0, 0.2, 1)` |
+| `--ease-out-expo` | `cubic-bezier(0.16, 1, 0.3, 1)` |
+| `--ease-spring` | `cubic-bezier(0.34, 1.56, 0.64, 1)` |
+
+### Common Patterns
+
+**Fade Up**
+```css
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+```
+
+**Scale In**
+```css
+@keyframes scaleIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+```
+
+**Stagger Children**
+- Delay increment: 50ms
+- Max stagger: 500ms (cap at 10 items)
+
+## Responsive Breakpoints
+
+| Token | Value |
+|-------|-------|
+| `--breakpoint-sm` | `640px` |
+| `--breakpoint-md` | `768px` |
+| `--breakpoint-lg` | `1024px` |
+| `--breakpoint-xl` | `1280px` |
+
+## Z-Index Scale
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--z-base` | `0` | 默认 |
+| `--z-dropdown` | `100` | 下拉菜单 |
+| `--z-sticky` | `200` | 粘性导航 |
+| `--z-modal` | `300` | 模态框 |
+| `--z-toast` | `400` | 通知 |
+| `--z-tooltip` | `500` | 工具提示 |