Pro Frontend Design
The skill that gives a web or mobile interface a unique visual identity. It creates designs that are deliberately opinionated—focused on typography‑driven layouts, near‑monochrome palettes with a single accent, and deep dark themes. The skill rejects generic default looks, follows the client brief, and audits every output token. It guides the designer through constant‑setting, subject pinning, and signature creation, ensuring each project has a distinctive, non‑templated aesthetic.
#Ingeniería#Diseño#Producto
Valoración
Se necesitan más valoraciones
Vendidos
0
Cómo se usa
Descargar
🎨 Frontend Pro Design
給你的介面一個只有它才配得上的視覺身分。
這是什麼？
frontend-pro-design 是一個設計 Agent skill。它不是再教你一套模板，而是「讓網頁／App 長得一眼就是它的樣子」——一個有想法、有個人品味的設計顧問。
它擅長在 頁面、元件、產品的第一眼 注入視覺身分。無論你是從零開始的網站、需要被拯救的「AI 感」介面，還是想給既有專案找一個獨特觀點，它都能給出有主見、可解釋、可落地的設計方向。
客戶拒絕模板化作品，願意為「不可能是別人的設計」付費——這就是它服務的人。
它能做什麼？
| 能力 | 說明 |
|---|---|
| ✨ 視覺身分設計 | 色票、字型、版面、動態一次定案，給專案一個記得住的 signature（招牌元素） |
| 🧠 設計訪談 | 先問清楚再動手：用一問一答的方式鎖定主題、受眾與頁面唯一的任務 |
| 🚫 拒絕模板化 | 內建「不被接受的預設風格」過濾器，主動避開常見的 AI 罐頭設計 |
| 🔍 自我批判 | 環形流程：動手前覆核、動手後再批判、逐 token 稽核每個設計決定是否能溯源 |
| ♿ 品質底線 | 天生內建：行動版響應式、鍵盤焦點、尊重 reduced-motion |
| 📝 介面文案 | 把文字當作設計材料，不只是排版填充物 |
它的「品味」長這樣
說話的偏好（一個方向，不是雜燴）：
- 大膽、字型主導的版面 —— 讓文字本身承載個性
- 編輯式／結構極簡 —— 精準的格線、細線、把資訊當結構
- 近乎單色 + 一個強調色
- 深層沉浸的暗色
它堅決拒絕的預設（這些看起來很「AI」）：
- 黑底 + 螢光綠／朱紅強調色
- 暖米色底 + 高對比襯線 + 赭紅強調
- 密密麻麻的報紙式排版
若客戶的 brief 明說要某一種風格，brief 最大；只有當 brief 完全沒提的軸線，才把自由度留給品味。
運作流程
固定原點(主題) → 腦內草擬 → 訪談客戶 → 動手前覆核 → 撰寫 → 再次批判 → 稽核成品
- Pin 主題 — 先說清楚：這是什麼產品、受眾是誰、頁面唯一任務是什麼。
- 草擬方案 — 想一套緊湊的設計計畫：4–6 個命名色、2+ 種字型角色、版面概念，加上一個招牌元素。
- 訪談方案 — 沿著決定樹一題一題問客戶（色票、主字型、版面、招牌），每一題都附上你的建議答案。
- 動手前覆核 — 逐項對照品味，刪掉任何「會讓它變成任何網站都長一樣」的部分，並說出改了什麼、為何而改。
- 撰寫 — 照計畫實作，大膽只花在一處（招牌），其餘安靜且自律。
- 再次批判 — 就像離家前照鏡子，拿掉一件多餘的配件。
- 稽核成品 — 走同一棵短樹，但答案是從程式碼裡找，而不是從客戶口中；找出無法追溯的設計 token，指名具體修正。
安裝與使用
這是 Agent skill，把它放進你的 skills 目錄後，在引導語中自然觸發即可：
# opencode
~/.config/opencode/skills/frontend-pro-design/
# shared/claude-style SKILL.md 結構
~/.claude/skills/frontend-pro-design/
該在什麼時候喊它：
- 要設計／建構／重設計一個前端（頁面、元件、第一個 look）
- 使用者說「這個看起來很模板、很 AI」
- 想要一個有主見的視覺觀點，而非套用預設
為什麼值得一試
兩個「再批判」勝過十個「直接做」。它不是每完成就急著交差的那種設計——它會先讓自己有更高把握、保證成品能讓客戶驚喜交出。不給招牌本身也是一種風險：你的品味是底線，不是天花板。
License
MIT · © Frontend Pro Design
