frontend-dev

Frontend Studio

透過協調 5 項專業能力來建立完整、可上線的前端頁面：設計工程、動態系統、AI 生成素材、說服力文案與生成式藝術。

呼叫方式

/frontend-dev <請求>

使用者以自然語言提供請求（例如「建立一個音樂串流應用的登陸頁面」）。

技能結構

frontend-dev/
├── SKILL.md                      # 核心技能（本檔案）
├── scripts/                      # 素材生成腳本
│   ├── minimax_tts.py            # 文字轉語音
│   ├── minimax_music.py          # 音樂生成
│   ├── minimax_video.py          # 影片生成（非同步）
│   └── minimax_image.py          # 圖片生成
├── references/                   # 詳細指南（需要時閱讀）
│   ├── minimax-cli-reference.md  # CLI 參數快速參考
│   ├── asset-prompt-guide.md     # 素材提示工程規則
│   ├── minimax-tts-guide.md      # TTS 使用與聲音
│   ├── minimax-music-guide.md    # 音樂提示與歌詞格式
│   ├── minimax-video-guide.md    # 鏡頭指令與模型
│   ├── minimax-image-guide.md    # 比例與批次生成
│   ├── minimax-voice-catalog.md  # 所有聲音 ID
│   ├── motion-recipes.md         # 動畫程式碼片段
│   ├── env-setup.md              # 環境設定
│   └── troubleshooting.md        # 常見問題
├── templates/                    # 視覺藝術模板
│   ├── viewer.html               # p5.js 互動藝術基底
│   └── generator_template.js     # p5.js 程式碼參考
└── canvas-fonts/                 # 靜態藝術字型（TTF + 授權）

專案結構

素材（通用）

所有框架使用相同的素材組織方式：

assets/
├── images/
│   ├── hero-landing-1710xxx.webp
│   ├── icon-feature-01.webp
│   └── bg-pattern.svg
├── videos/
│   ├── hero-bg-1710xxx.mp4
│   └── demo-preview.mp4
└── audio/
    ├── bgm-ambient-1710xxx.mp3
    └── tts-intro-1710xxx.mp3

素材命名： {type}-{descriptor}-{timestamp}.{ext}

依框架

框架	素材位置	元件位置
Pure HTML	`./assets/`	N/A（行內或 `./js/`）
React/Next.js	`public/assets/`	`src/components/`
Vue/Nuxt	`public/assets/`	`src/components/`
Svelte/SvelteKit	`static/assets/`	`src/lib/components/`
Astro	`public/assets/`	`src/components/`

Pure HTML

project/
├── index.html
├── assets/
│   ├── images/
│   ├── videos/
│   └── audio/
├── css/
│   └── styles.css
└── js/
    └── main.js           # 動畫（GSAP/原生）

React / Next.js

project/
├── public/assets/        # 靜態素材
├── src/
│   ├── components/
│   │   ├── ui/           # Button, Card, Input
│   │   ├── sections/     # Hero, Features, CTA
│   │   └── motion/       # RevealSection, StaggerGrid
│   ├── lib/
│   ├── styles/
│   └── app/              # 頁面
└── package.json

Vue / Nuxt

project/
├── public/assets/
├── src/                  # 或 Nuxt 的根目錄
│   ├── components/
│   │   ├── ui/
│   │   ├── sections/
│   │   └── motion/
│   ├── composables/      # 共用邏輯
│   ├── pages/
│   └── assets/           # 處理過的素材（選用）
└── package.json

Astro

project/
├── public/assets/
├── src/
│   ├── components/       # .astro, .tsx, .vue, .svelte
│   ├── layouts/
│   ├── pages/
│   └── styles/
└── package.json

元件命名： PascalCase（HeroSection.tsx、HeroSection.vue、HeroSection.astro）

合規要求

本技能中的所有規則均為強制性。違反任何規則即為阻斷錯誤 — 修正後才能繼續或交付。

工作流程

階段 1：設計架構

分析請求 — 決定頁面類型與情境
根據頁面類型設定設計參數
規劃版面區塊並識別素材需求

階段 2：動態架構

根據區塊選擇動畫工具（參見工具選擇矩陣）
遵循效能規範規劃動畫序列

階段 3：素材生成

使用 scripts/ 生成所有圖片/影片/音訊素材。絕對不要使用佔位符 URL（unsplash、picsum、placeholder.com、via.placeholder、placehold.co 等）或外部 URL。

解析素材需求（類型、風格、規格、用途）
精心設計提示，向使用者展示，生成前需確認
透過腳本執行，儲存至專案 — 在所有素材本地儲存完成前，不得進入階段 5

階段 4：文案撰寫與內容

遵循文案框架（AIDA、PAS、FAB）撰寫所有文字內容。不得使用「Lorem ipsum」— 撰寫真實文案。

階段 5：建立 UI

搭建專案骨架，並根據設計與動態規則建立每個區塊。整合生成的素材與文案。所有 <img>、<video>、<source> 與 CSS background-image 必須引用階段 3 的本地素材。

階段 6：品質檢查

執行最終檢查清單（參見品質檢查區段）。

1. 設計工程

1.1 基礎設定

參數	預設值	範圍
DESIGN_VARIANCE	8	1=對稱, 10=不對稱
MOTION_INTENSITY	6	1=靜態, 10=電影級
VISUAL_DENSITY	4	1=輕盈, 10=密集

根據使用者請求動態調整。

1.2 架構慣例

依賴檢查： 匯入任何函式庫前先檢查 package.json。若缺少則輸出安裝指令。
框架： React/Next.js。預設使用伺服器元件。互動元件必須隔離為 "use client" 葉節點元件。
樣式： Tailwind CSS。檢查 package.json 中的版本 — 絕對不要混用 v3/v4 語法。
反表情符號政策： 絕對不要在任何地方使用表情符號。僅使用 Phosphor 或 Radix 圖示。
視口： 使用 min-h-[100dvh] 而非 h-screen。使用 CSS Grid 而非 flex 百分比計算。
版面： max-w-[1400px] mx-auto 或 max-w-7xl。

1.3 設計規則

規則	指令
字體排版	標題：`text-4xl md:text-6xl tracking-tighter`。內文：`text-base leading-relaxed max-w-[65ch]`。絕對不要使用 Inter — 使用 Geist/Outfit/Satoshi。絕對不要在儀表板上使用襯線字體。
色彩	最多 1 個強調色，飽和度 < 80%。絕對不要使用 AI 紫/藍色。堅持使用同一色板。
版面	當 VARIANCE > 4 時，絕對不要使用置中主視覺。強制使用分割畫面或不對稱版面。
卡片	當 DENSITY > 7 時，絕對不要使用通用卡片。使用 `border-t`、`divide-y` 或間距。
狀態	務必實作：載入（骨架）、空狀態、錯誤狀態、觸覺回饋（`scale-[0.98]`）。
表單	標籤在輸入框上方。錯誤訊息在下方。輸入區塊使用 `gap-2`。

1.4 反粗糙技巧

液態玻璃： backdrop-blur + border-white/10 + shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]
磁吸按鈕： 使用 useMotionValue/useTransform — 連續動畫絕對不要使用 useState
永續動態： 當 INTENSITY > 5 時，加入無限微動畫（脈衝、漂浮、閃爍）
版面轉場： 使用 Framer 的 layout 與 layoutId props
錯開： 使用 staggerChildren 或 CSS animation-delay: calc(var(--index) * 100ms)

1.5 禁止模式

類別	禁止項目
視覺	霓虹光暈、純黑 (#000)、過飽和強調色、標題漸層文字、自訂游標
字體排版	Inter 字體、過大的 H1、儀表板上的襯線字體
版面	三欄等寬卡片列、間距尷尬的浮動元素
元件	未經自訂的預設 shadcn/ui

1.6 創意軍火庫

類別	模式
導航	Dock 放大、磁吸按鈕、黏性選單、動態島、放射狀選單、快速撥號、巨型選單
版面	Bento 網格、瀑布流、色度網格、分割畫面捲動、窗簾揭示
卡片	視差傾斜、聚光燈邊框、玻璃擬態、全息箔片、滑動堆疊、變形模態框
捲動	黏性堆疊、水平劫持、Locomotive 序列、縮放視差、進度路徑、液態滑動
圖庫	穹頂圖庫、封面流、拖曳平移、手風琴滑塊、懸停軌跡、故障效果
文字	動態跑馬燈、文字遮罩揭示、亂碼效果、圓形路徑、漸層描邊、動態網格
微互動	粒子爆炸、下拉刷新、骨架閃爍、方向懸停、漣漪點擊、SVG 繪製、網格漸層、鏡頭模糊

1.7 Bento 範例

色板： 背景 #f9fafb，卡片純白搭配 border-slate-200/50
表面： rounded-[2.5rem]，擴散陰影
字體排版： Geist/Satoshi，標題 tracking-tight
標籤： 在卡片外部且下方
動畫： 彈簧物理（stiffness: 100, damping: 20），無限循環，React.memo 隔離

5 種卡片原型：

智慧列表 — 使用 layoutId 自動排序
指令輸入 — 打字機效果 + 閃爍游標
即時狀態 — 呼吸指示器
寬資料流 — 無限水平輪播
情境 UI — 錯開高亮 + 浮入工具列

1.8 品牌覆寫

當品牌樣式啟用時：

深色：#141413，淺色：#faf9f5，中間色：#b0aea5，柔和色：#e8e6dc
強調色：橘色 #d97757，藍色 #6a9bcc，綠色 #788c5d
字型：Poppins（標題），Lora（內文）

2. 動態引擎

2.1 工具選擇矩陣

需求	工具
UI 進出/版面	Framer Motion — `AnimatePresence`、`layoutId`、彈簧
捲動敘事（固定、跟隨）	GSAP + ScrollTrigger — 影格精確控制
循環圖示	Lottie — 延遲載入（約 50KB）
3D/WebGL	Three.js / R3F — 隔離 `<Canvas>`，自有 `"use client"` 邊界
懸停/聚焦狀態	僅 CSS — 零 JS 成本
原生捲動驅動	CSS — `animation-timeline: scroll()`

衝突規則 [強制]：

絕對不要在同一元件中混用 GSAP + Framer Motion
R3F 必須存在於隔離的 Canvas 包裝器中
務必延遲載入 Lottie、GSAP、Three.js

2.2 強度等級

等級	技巧
1-2 微妙	僅 CSS 轉場，150-300ms
3-4 流暢	CSS 關鍵影格 + Framer animate，錯開 ≤3 個項目
5-6 順暢	`whileInView`、磁吸懸停、視差傾斜
7-8 電影級	GSAP ScrollTrigger、固定區段、水平劫持
9-10 沉浸式	完整捲動序列、Three.js 粒子、WebGL 著色器

2.3 動畫配方

完整程式碼請參閱 references/motion-recipes.md。摘要：

配方	工具	用途
捲動揭示	Framer	進入視口時淡入+滑入
錯開網格	Framer	序列列表動畫
固定時間軸	GSAP	帶固定的水平捲動
傾斜卡片	Framer	滑鼠追蹤 3D 透視
磁吸按鈕	Framer	游標吸引按鈕
文字亂碼	原生	矩陣風格解碼效果
SVG 路徑繪製	CSS	捲動關聯路徑動畫
水平捲動	GSAP	垂直轉水平劫持
粒子背景	R3F	裝飾性 WebGL 粒子
版面變形	Framer	卡片到模態框的展開

2.4 效能規則

僅 GPU 屬性（僅動畫這些）： transform、opacity、filter、clip-path

絕對不要動畫： width、height、top、left、margin、padding、font-size — 如果需要這些效果，請改用 transform: scale() 或 clip-path。

隔離：

永續動畫必須放在 React.memo 葉節點元件中
will-change: transform 僅在動畫期間使用
在重量級容器上使用 contain: layout style paint

行動裝置：

務必尊重 prefers-reduced-motion
務必在 pointer: coarse 時停用視差/3D
粒子上限：桌機 800、平板 300、手機 100
在手機 < 768px 時停用 GSAP 固定

清理： 每個包含 GSAP/觀察者的 useEffect 必須 return () => ctx.revert()

2.5 彈簧與緩動

感覺	Framer 設定
乾脆	`stiffness: 300, damping: 30`
流暢	`stiffness: 150, damping: 20`
彈性	`stiffness: 100, damping: 10`
沉重	`stiffness: 60, damping: 20`

CSS 緩動	值
平滑減速	`cubic-bezier(0.16, 1, 0.3, 1)`
平滑加速	`cubic-bezier(0.7, 0, 0.84, 0)`
彈性	`cubic-bezier(0.34, 1.56, 0.64, 1)`

2.6 無障礙

務必將動畫包裹在 prefers-reduced-motion 檢查中
絕對不要閃爍內容超過 3 次/秒（癲癇風險）
務必提供可見的焦點環（使用 outline 而非 box-shadow）
務必為動態揭示的內容添加 aria-live="polite"
務必為自動播放的動畫包含暫停按鈕

2.7 依賴

npm install framer-motion           # UI（保持頂層）
npm install gsap                    # 捲動（延遲載入）
npm install lottie-react            # 圖示（延遲載入）
npm install three @react-three/fiber @react-three/drei  # 3D（延遲載入）

3. 素材生成

3.1 腳本

類型	腳本	模式
TTS	`scripts/minimax_tts.py`	同步
音樂	`scripts/minimax_music.py`	同步
影片	`scripts/minimax_video.py`	非同步（建立 → 輪詢 → 下載）
圖片	`scripts/minimax_image.py`	同步

環境變數：MINIMAX_API_KEY（必要）。

3.2 工作流程

解析： 類型、數量、風格、規格、用途
設計提示： 具體說明（構圖、光線、風格）。絕對不要在圖片提示中包含文字。
執行： 向使用者展示提示，必須確認後才能生成，然後執行腳本
儲存： <project>/public/assets/{images,videos,audio}/ 命名為 {type}-{descriptor}-{timestamp}.{ext} — 必須儲存至本地
後處理： 圖片 → WebP，影片 → ffmpeg 壓縮，音訊 → 正規化
交付： 檔案路徑 + 程式碼片段 + CSS 建議

3.3 預設快捷鍵

快捷鍵	規格
`hero`	16:9，電影級，文字安全區
`thumb`	1:1，主體置中
`icon`	1:1，扁平，乾淨背景
`avatar`	1:1，人像，可圓形裁切
`banner`	21:9，OG/社群
`bg-video`	768P，6 秒，`[Static shot]`
`video-hd`	1080P，6 秒
`bgm`	30 秒，無人聲，可循環
`tts`	MiniMax HD，MP3

3.4 參考資料

references/minimax-cli-reference.md — CLI 參數
references/asset-prompt-guide.md — 提示規則
references/minimax-voice-catalog.md — 聲音 ID
references/minimax-tts-guide.md — TTS 使用方式
references/minimax-music-guide.md — 音樂生成（提示、歌詞、結構標籤）
references/minimax-video-guide.md — 鏡頭指令
references/minimax-image-guide.md — 比例、批次

4. 文案撰寫

4.1 核心任務

吸引注意 → 2. 創造渴望 → 3. 消除障礙 → 4. 促使行動

4.2 框架

AIDA（登陸頁面、電子郵件）：

ATTENTION（注意）：  大膽標題（承諾或痛點）
INTEREST（興趣）：   詳細說明問題（「對，就是我」）
DESIRE（渴望）：     展示轉變
ACTION（行動）：     明確的行動呼籲

PAS（痛點驅動產品）：

PROBLEM（問題）：    清楚陳述
AGITATE（加劇）：    製造急迫感
SOLUTION（解決方案）：你的產品

FAB（產品差異化）：

FEATURE（功能）：    它做什麼
ADVANTAGE（優勢）：  為什麼重要
BENEFIT（利益）：    客戶獲得什麼

4.3 標題

公式	範例
承諾	「30 天內讓開信率翻倍」
提問	「還在每週浪費 10 小時？」
如何	「如何自動化你的銷售管道」
數字	「扼殺轉換率的 7 個錯誤」
負面	「停止流失潛在客戶」
好奇心	「讓預約量翻三倍的那個改變」
轉變	「從 50 個到 500 個潛在客戶」

要具體。以結果而非方法開頭。

4.4 行動呼籲

不好： 提交、點擊這裡、了解更多

好：「開始免費試用」、「立即取得模板」、「預約策略諮詢」

公式： [動作動詞] + [他們得到的東西] + [急迫性/便利性]

放置位置：摺頁上方、價值之後、長頁面多處。

4.5 情感觸發

觸發	範例
錯失恐懼症	「僅剩 3 個名額」
損失恐懼	「沒有這個，你每天損失 X 元」
地位	「加入 10,000 多家頂尖代理商」
便利	「設定一次。永遠忘記。」
挫折	「受夠了那些毫無成果的工具？」
希望	「是的，你可以達到月收入 1 萬美元」

4.6 異議處理

異議	回應
太貴	展示 ROI：「兩週內回本」
對我不適用	來自類似客戶的社會證明
沒時間	「設定只需 10 分鐘」
失敗怎麼辦	「30 天退款保證」
需要考慮	急迫性/稀缺性

放置位置：常見問題、推薦、行動呼籲附近。

4.7 證明類型

推薦（附姓名/頭銜）、案例研究、數據/指標、社會證明、認證

5. 視覺藝術

哲學優先的工作流程。兩種輸出模式。

5.1 輸出模式

模式	輸出	時機
靜態	PDF/PNG	海報、印刷品、設計素材
互動	HTML（p5.js）	生成式藝術、可探索的變化

5.2 工作流程

步驟 1：哲學創建

為運動命名（1-2 個字）。闡述哲學（4-6 段），涵蓋：

靜態：空間、形式、色彩、比例、節奏、層級
互動：計算、湧現、雜訊、參數變化

步驟 2：概念種子

識別微妙、小眾的參考 — 精緻而非直白。就像爵士樂手引用另一首歌。

步驟 3：創作

靜態模式：

單頁，高度視覺化，設計優先
重複圖案、完美形狀
來自 canvas-fonts/ 的稀疏字體排版
無重疊，適當邊距
輸出：.pdf 或 .png + 哲學 .md

互動模式：

先閱讀 templates/viewer.html
保留固定區段（頁首、側邊欄、種子控制）
替換可變區段（演算法、參數）
基於種子的隨機性：randomSeed(seed); noiseSeed(seed);
輸出：單一自包含 HTML

步驟 4：精煉

精煉，而非添加。使其清晰。打磨成傑作。

品質檢查

設計：

[ ] 高變異設計的行動版版面收合（w-full、px-4）
[ ] 使用 min-h-[100dvh] 而非 h-screen
[ ] 提供空狀態、載入狀態、錯誤狀態
[ ] 在間距足夠時省略卡片

動態：

[ ] 根據選擇矩陣使用正確工具
[ ] 同一元件中未混用 GSAP + Framer
[ ] 所有 useEffect 都有清理回傳
[ ] 尊重 prefers-reduced-motion
[ ] 永續動畫在 React.memo 葉節點元件中
[ ] 僅動畫 GPU 屬性
[ ] 重量級函式庫已延遲載入

一般：

[ ] 已在 package.json 中驗證依賴
[ ] 無佔位符 URL — 在輸出中搜尋 unsplash、picsum、placeholder、placehold、via.placeholder、lorem.space、dummyimage。若發現任何，停止並在交付前以生成的素材取代。
[ ] 所有媒體素材皆為專案素材目錄中的本地檔案
[ ] 素材提示已在生成前與使用者確認

React 與 Next.js 分別為 Meta Platforms, Inc. 與 Vercel, Inc. 的商標。Vue.js 為 Evan You 的商標。Tailwind CSS 為 Tailwind Labs Inc. 的商標。Svelte 與 SvelteKit 為其各自所有者的商標。GSAP/GreenSock 為 GreenSock Inc. 的商標。Three.js、Framer Motion、Lottie、Astro 及其他所有產品名稱均為其各自所有者的商標。

您可能也喜歡

fix

247Kfrontend

Use when you have lint errors, formatting issues, or before committing code to ensure it passes CI.

facebook

獲取

motion-advanced

237Kfrontend

Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loaders, and the full API decision tree. Requires motion-foundations.

affaan-m

獲取

next-cache-components-adoption

141Kfrontend

Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the `cacheComponents` flag, work through a flood of blocking-prerender / instant validation errors, run the `cache-components-instant-false` codemod, or decide between opting routes out with `export const instant = false` and fixing them in place.

vercel

獲取

繼續探索

瀏覽 frontend 熱門 Skills 最近更新