# Frontend Redesign — Design > 讀此檔前請先讀 `requirements.md` 和 `design-source/index.html`。 > 視覺 spec 的 single source of truth 是 `design-source/`（Claude Design 匯出的 HTML/JSX prototype）。 --- ## 1. 架構總覽 ``` landing/ (Next.js 15 App Router) ├── app/ │ ├── layout.tsx ← 全站 layout：next/font + design tokens + 全域 CSS 匯入 │ ├── globals.css ← 匯入 design-tokens.css；Tailwind @import │ ├── design-tokens.css ← 新增：從 design-source 抽出的 CSS variables（:root {...}） │ ├── page.tsx ← Landing（RSC） │ ├── auth/ │ │ └── page.tsx ← Auth（"use client"） │ ├── dashboard/ │ │ └── page.tsx ← Dashboard（"use client"，仍靠 middleware 保護） │ ├── keys/ │ │ └── page.tsx ← API Keys（"use client"） │ ├── workflows/ │ │ ├── page.tsx ← Workflows 清單（redirect 到 dashboard 的 table，本身極簡） │ │ └── [name]/page.tsx ← Workflow Viewer（"use client"） │ ├── integrations/page.tsx ← 保留現有 │ ├── api-docs/page.tsx ← 保留現有 │ └── login/page.tsx ← 保留現有（redirect /auth 同義；見 §9 遷移策略） ├── components/ │ ├── shell/ │ │ ├── Logo.tsx │ │ ├── Icon.tsx │ │ ├── TopNav.tsx │ │ ├── Footer.tsx │ │ └── Sidebar.tsx │ ├── primitives/ │ │ ├── Button.tsx ← btn / btn-primary / btn-secondary / btn-ghost 對應 class │ │ ├── Pill.tsx │ │ ├── Toggle.tsx │ │ ├── Terminal.tsx ← landing hero 右卡用 │ │ └── ChatPreview.tsx ← landing hero 右卡用 │ └── workflow/ │ ├── Canvas.tsx ← wf-viewer 本體（節點 + SVG edges） │ ├── NodeCard.tsx │ ├── DetailPanel.tsx │ ├── Minimap.tsx │ └── ZoomControls.tsx ├── lib/ │ ├── api.ts ← typed fetch wrapper（fetch ${API_BASE}${path}, credentials: 'include'） │ ├── workflows.ts ← listWorkflows / getWorkflow / getWorkflowYaml │ ├── apiKeys.ts ← listKeys / createKey / patchKey / deleteKey │ └── me.ts ← 已存在邏輯，集中到此 ├── middleware.ts ← 擴展 matcher（加 /keys, /workflows/*） └── ...（既有 package.json / wrangler.toml 不變） ``` **路由對照設計稿的 5 screen**： | Screen | Route | |---|---| | Landing | `/` | | Auth | `/auth`（新增；`/login` 保留並內部 `redirect('/auth')`） | | Dashboard | `/dashboard` | | API Keys | `/keys` | | Workflow Viewer | `/workflows/[name]` | --- ## 2. Design tokens 對應 設計稿所有 CSS 變數抄進 `app/design-tokens.css`，**不解析、不改名**： ```css :root { --bg: #0F0F0F; --bg-1: #141414; --card: #1A1A1A; --card-2: #222222; --line: #262626; --line-2: #303030; --text: #EDEDED; --text-dim: #A0A0A0; --text-mute: #6B6B6B; --primary: #6366F1; --primary-2: #8B5CF6; --primary-soft: rgba(99, 102, 241, 0.12); --primary-ring: rgba(99, 102, 241, 0.32); --success: #22C55E; --warn: #F59E0B; --danger: #EF4444; --gradient: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); --gradient-soft: linear-gradient(135deg, rgba(99,102,241,0.16) 0%, rgba(139,92,246,0.16) 100%); } ``` 並在 Tailwind v4 的 `@theme inline` block 內對應出： ```css @theme inline { --color-bg: var(--bg); --color-card: var(--card); --color-card-2: var(--card-2); --color-line: var(--line); --color-line-2: var(--line-2); --color-text: var(--text); --color-text-dim: var(--text-dim); --color-text-mute: var(--text-mute); --color-primary: var(--primary); --color-primary-2: var(--primary-2); } ``` 這樣 JSX 裡可用 `bg-bg / text-text-dim / border-line`，又保留 CSS 變數語義。 **現有的 `--background: #0a0a0a` 要換成 `#0F0F0F`**（視覺 breaking change；受影響：所有沿用 `bg-[#0a0a0a]` 的 inline 值）。 --- ## 3. 字型 ```tsx // app/layout.tsx import { Inter, JetBrains_Mono } from 'next/font/google'; const inter = Inter({ subsets: ['latin'], variable: '--font-inter', weight: ['300', '400', '500', '600', '700', '800'], }); const mono = JetBrains_Mono({ subsets: ['latin'], variable: '--font-mono', weight: ['400', '500', '600'], }); // body class = `${inter.variable} ${mono.variable}` ``` `globals.css` 中的 `body { font-family: var(--font-inter), -apple-system, sans-serif; }`，`.mono` class 用 `font-family: var(--font-mono)`。 **移除**： - `design-source/index.html` 第 7-9 行的 ` / `（不寫入 production）。 - React / Babel standalone script 標籤（prototype 專用，不進 production）。 --- ## 4. 元件 porting 規則 Claude Design 用了 `window.Icon / window.Logo / window.AppIcon / window.TopNav ...` 的 globals 風格 — 那是 prototype 專用。Port 到 Next.js 時： 1. 每個元件拆單檔、具名 export。 2. 用 Tailwind + `className` 模板字串；共用 variant（如 btn）用 `cva`-style helper 即可（自己寫 5 行的 `clsx`-alike 函式），**不引入 class-variance-authority / clsx 套件**（避免新依賴）。 3. Icon 的 `paths` 直接搬，但每個 icon 拆成自己的 functional component 或集中在一個 ``（沿用 design source 的 pattern）。 4. SVG arc wordmark 的 logo 直接 port。 --- ## 5. 各 screen 實作細節 ### 5.1 Landing — `app/page.tsx` - 結構：`` + `` + `` + `` + `