impeccable
運用 AI 打造精緻的前端介面
AI 生成的介面往往流於通用與模板化。Impeccable 引導 AI 做出專業的設計決策，產出獨具特色且達生產等級的前端程式碼。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「impeccable」。 Create a hero section for a creative agency portfolio with bold typography and asymmetric layout
預期結果:
A responsive hero section with fluid display typography using clamp(), an asymmetric grid layout with varied spacing, a distinctive font pairing chosen through the font selection procedure, and a clear visual hierarchy that passes the squint test.
正在使用「impeccable」。 Extract reusable tokens from a page with inconsistent color values
預期結果:
A cohesive design token system with OKLCH-based primitive colors, tinted neutral scales, semantic color mappings for primary and status colors, and documented guidance on when to use each token.
正在使用「impeccable」。 Design an accessible contact form with proper validation
預期結果:
A form with visible labels, validation on blur, descriptive error messages with aria-describedby, proper focus rings using focus-visible, and appropriately sized touch targets for mobile users.
安全審計
低風險All 329 static findings are false positives. The scanner misinterpreted Markdown code fences as shell commands, design terminology as cryptographic patterns, and documentation URLs as network risks. The only real operational risk is a post-update cleanup script that removes deprecated skill files from the filesystem, which is benign and documented to the user before execution. No malicious intent, data exfiltration, or dangerous code execution detected.
低風險問題 (1)
風險因素
品質評分
你能建構什麼
官網改版重塑
一位新創公司創辦人希望他們的登陸頁面能從大量雷同的 SaaS 模板中脫穎而出。Impeccable 引導 AI 透過大膽的美學方向，搭配獨特的排版與色彩選擇進行設計。
設計系統從零建立
開發者需要從現有程式碼庫中萃取一致的設計令牌、元件與模式，建立為可重複使用的設計系統。Extract 模式會識別可重複使用的模式並將其正式化。
無障礙表單與互動設計
產品團隊需要妥善設計的表單、焦點狀態、載入模式與鍵盤導航功能。Impeccable 提供有關 WCAG 合規、Popover API 與焦點環設計的參考資料。
試試這些提示
Run /impeccable teach to gather design context for my project. Scan the codebase first, then ask me the questions you still need answered.
Run /impeccable craft a pricing page for a SaaS product. The target audience is small business owners who value clarity and speed. The brand tone is confident, practical, and no-nonsense.
Run /impeccable extract the shared design tokens and reusable components from my existing component library. Focus on colors, spacing, typography, and button variants.
Run /impeccable craft a dark-mode dashboard for an observability tool used by SREs. The interface needs to be information-dense but readable, with a muted color palette and strong data visualization hierarchy.
最佳實務
- 在生成任何設計成果前，務必先從使用者收集設計脈絡。先檢查現有的指示文件，再查看 .impeccable.md，最後執行 teach 流程。
- 堅持大膽的美學方向，而非退守到安全但通用的預設值。只要有明確意圖，極簡主義與極繁主義都能奏效。
- 對每項輸出執行 AI 低質測試：一般人是否會一眼看出這是 AI 生成的？如果是，代表設計需要更具獨特性的創意選擇。
避免
- 使用反射性字型如 Inter、Fraunces、Space Grotesk 和 Cormorant，這些字型會導致 AI 生成專案出現單一文化現象。
- 預設使用暗色背景上的青色、紫到藍漸層或發光效果，這些是最容易辨識的 AI 設計痕跡。
- 在卡片上使用左側邊框強調條紋、漸層文字和毛玻璃效果作為裝飾，這些已被明確列為 AI 低質模式而禁用。
常見問題
我何時應該呼叫 Impeccable？
craft、teach 和 extract 模式有何差異？
Impeccable 能搭配 React、Vue 或其他框架使用嗎？
Impeccable 如何防止設計看起來像通用的 AI 風格？
Impeccable 能協助無障礙合規嗎？
更新 Impeccable 至新版本時會發生什麼事？
開發者詳情
作者
pbakaus授權
Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution.
引用
main