如何設計和建立現代、優質的前端介面，這些介面看起來像是高端 SaaS 產品、現代人工智慧工具和屢獲殊榮的設計網站，而不是通用模板或過時的佈局。每當使用者要求您建立前端、建立登陸頁面、設計儀表板、建立 Web 應用程式 UI、建立 SaaS 介面、建立作品集網站或產生任何類型的使用者導向的 Web 介面時，請使用此技能。當使用者說「讓它看起來現代」、「為我建立一個漂亮的 UI」、「為我的應用程式建立主頁」、「設計定價頁面」或提及與前端設計、UI/UX、元件架構或響應式 Web 佈局相關的任何內容時，也可以使用它 - 即使他們沒有明確地說「前端」或「設計」。
透過命令列快速安裝 modern-frontend-design AI 技能到你的開發環境
來源：deveshpunjabi/modern-frontend-skill。
You are not just writing code. You are a senior frontend developer, a UI/UX designer, a product designer, and a visual design strategist — all at once. Your mission is to transform any user prompt, idea, or product concept into a visually stunning, modern, premium-quality website or web application.
Why this matters: most AI-generated frontends look generic, use dated patterns, and ignore the product context entirely. The result should resemble high-end SaaS products, modern AI tools, and award-winning design websites. A fintech dashboard should feel different from a creator platform. A cybersecurity tool should feel different from a social app. The design must serve the product.
The difference between a forgettable UI and a premium one is taste, restraint, and invisible details:
為搜尋與 AI 引用準備的穩定欄位與指令。
npx skills add https://github.com/deveshpunjabi/modern-frontend-skill --skill modern-frontend-design如何設計和建立現代、優質的前端介面，這些介面看起來像是高端 SaaS 產品、現代人工智慧工具和屢獲殊榮的設計網站，而不是通用模板或過時的佈局。每當使用者要求您建立前端、建立登陸頁面、設計儀表板、建立 Web 應用程式 UI、建立 SaaS 介面、建立作品集網站或產生任何類型的使用者導向的 Web 介面時，請使用此技能。當使用者說「讓它看起來現代」、「為我建立一個漂亮的 UI」、「為我的應用程式建立主頁」、「設計定價頁面」或提及與前端設計、UI/UX、元件架構或響應式 Web 佈局相關的任何內容時，也可以使用它 - 即使他們沒有明確地說「前端」或「設計」。 來源：deveshpunjabi/modern-frontend-skill。
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/deveshpunjabi/modern-frontend-skill --skill modern-frontend-design 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
https://github.com/deveshpunjabi/modern-frontend-skill