如何设计和构建现代、优质的前端界面，这些界面看起来像高端 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