Frontend Design Toolkit

## 概述

一個設計到頁面的工作流程：從設計方向開始，生成視覺模型，然後構建登陸頁面——三個互補工具集於一身。

- **frontend-design** — 定義視覺識別：風格、調色板、字體，以及生產級元件代碼
- **canvas-design** — 建立視覺模型：海報、主圖片和佈局藝術，輸出為 PNG/PDF
- **page-builder** — 使用 Tailark 元件組裝登陸頁面，包含結構化區塊

## 快速開始

1. 安裝插件：`npx skillstore add @frontend-design-toolkit`
2. 向 **frontend-design** 描述您的項目和目標受眾 → 獲得風格方向、調色板和元件代碼
3. 使用 **canvas-design** 生成符合該風格的主圖片、横幅或視覺資產
4. 將設計標記和內容交給 **page-builder** → 獲得完整的登陸頁面

## 教學：建立產品發布頁面

**步驟 1 — 設計方向**
> "為開發者工具 SaaS 創建一個設計系統。現代、深色主題，配以藍色和紫色強調色。"

frontend-design 返回：調色板、字體規模、按鈕/卡片元件的生產級代碼。

**步驟 2 — 視覺資產**
> "為登陸頁面創建一個主頁橫幅。抽象幾何形狀、深色背景、藍色漸變。"

canvas-design 生成一張符合既定調色板的 PNG 主圖片。

**步驟 3 — 頁面組裝**
> "建立一個登陸頁面，包含：主圖區塊、三欄功能網格、定價表格、CTA 頁腳。"

page-builder 使用 Tailark 元件生成完整頁面，整合步驟 1 的設計標記。

## 範圍與邊界

**此工具包專為以下設計：**
- 新登陸頁面、行銷頁面、活動頁面
- 產品發布頁面和推廣微型網站
- 原型與設計探索
- 作品集頁面和個人網站

**不適合用於：**
- 接管現有的複雜網頁應用程式
- 取代已投入生產的完整設計系統
-電子商務結帳流程或多步驟表單
- 伺服器端渲染或後端整合

## 失敗處理

- **設計不符合品牌形象** → 返回步驟 1（frontend-design）並優化風格方向。在重新生成下游資產之前，先調整調色板、字體或風格
- **視覺模型偏離目標** → 使用更具體的約束條件重新執行 canvas-design。明確引用步驟 1 的設計標記
- **頁面結構錯誤** → 使用區塊級指令修改 page-builder 提示。輸出是標準 HTML/Tailwind——始終可以進行手動編輯
- **永遠不會自動部署到生產環境** — 所有輸出都是本地文件。由您手動審查和部署
- **保留生成的資產版本** — 儲存每個迭代，以便您可以比較並回滾到之前的設計方向

## 技巧

- 從 frontend-design 寬泛開始，然後收窄。清晰的風格方向能使其他兩個工具更加有效
- canvas-design 創原創藝術——從不複製現有藝術家的作品
- page-builder 使用具體的區塊描述比模糊的要求效果更好
- 三個工具都產生靜態輸出（代碼、圖片、HTML）— 無需運行時依賴項