frontend-design
建立獨特的前端介面
也可從以下取得: 92Bilal26,anthropics,AdamAugustinsky,AgentWorkforce,AJV009,DennisLiuCk,anthropics,YYH211,7Spade,1bertogit,7Spade,92Bilal26,1bertogit,CesarAugustusGroB,davila7,AI-Vibe-Prompts,Azeem-2
用戶苦於生成式 AI 框架式的前端程式碼，缺乏視覺特色。本技能提供設計思維指導和美學原則，幫助打造具有獨特、令人難忘視覺識別的正式上線等級介面。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「frontend-design」。 Create a pricing page for a SaaS product with a bold, modern aesthetic
預期結果:
一個完整的定價頁面，包含三個方案，自訂定價卡片採用漸層色調、載入時的交錯揭示動畫、懸停微互動、月/年定價切換開關，以及具有鮮明對比色的獨特深色主題。字體搭配大膽的展示字體與簡潔的正文字體。
正在使用「frontend-design」。 Build a login form with personality
預期結果:
一個具有獨特分割畫面配置的動態登入表單。左側帶有顆粒紋理的抽象幾何背景。右側是表單，包含浮動標籤的自訂樣式輸入框、令人難忘的懸停動畫提交按鈕，以及具有平滑轉換的錯誤狀態。
安全審計
安全All 16 static findings are false positives. The scanner incorrectly flagged 'weak cryptographic algorithm' on design guideline text (lines mentioning 'design', 'bold', 'retro-futuristic', 'art deco'). The 'system reconnaissance' flags on lines 7, 30, 34 refer to design context ('purpose', 'spatial composition'), not actual system scanning. This is a pure documentation skill with no scripts, network calls, filesystem access, environment access, or external commands. Safe to publish.
品質評分
你能建構什麼
從頭建立 Landing Page
為新創產品建立具有大膽美學方向的視覺醒目 Landing Page
設計 React 元件庫
開發具有一致設計語言的協調樣式 React 元件集合
將線框圖轉化為精緻 UI
將基本需求提升為創意、正式上線等级的介面
試試這些提示
為 [use case] 建立一個 [component type]。使其具有視覺獨特性並符合 [style preference] 的正式上線標準。
建立一個完整的 [page type] 頁面。使用 [aesthetic direction，如 brutalist/minimalist/retro-futuristic] 美學方向。包含 [specific sections]。
建立一組具有協調 [specific aesthetic] 的相關 [component name]。它們應該在 [context] 應用程式中协同運作。
建立一個具有資料視覺化、過濾器和互動元素的 [dashboard type]。選擇符合 [industry/use case] 的獨特視覺識別。
最佳實務
- 選擇一個明確的美學方向並完全堅持下去——精緻的極簡主義或大膽的極繁主義都可以，但混合的意圖會產生框架式的結果
- 使用獨特的字體搭配：避免 Inter/Roboto/Arial，改選擇令人難忘的展示字體搭配精緻的正文類型
- 優先選擇較少但更具影響力的動畫，而不是分散的微互動——一個經過精心設計的揭示動畫能創造更多的驚喜
避免
- 趨向常見的 AI 選擇，如 Space Grotesk、紫色漸層或可預測的元件模式
- 使用膽怯、均勻分布的色彩配置，而不是主色調搭配鮮明對比色
- 默認使用純色背景，沒有紋理、深度或情境視覺氛圍