القائمة
创建具有高设计水准、生产级的独特前端界面。当用户要求构建 Web 组件、页面、Artifact、海报或应用程序（例如网站、落地页、仪表板、React 组件、HTML/CSS 布局，或对任何 Web UI 进行美化/样式调整）时，应使用此技能。生成富有创意、打磨精细的代码和 UI 设计，避免平庸的 AI 审美。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
帮助用户发现并安装 Agent 技能。当用户询问“我该如何做 X”、“寻找关于 X 的技能”、“是否有技能可以...”或表现出扩展能力的兴趣时，应使用此技能。当用户寻找可能以安装技能形式存在的功能时，此技能非常有用。
管理 shadcn 组件和项目——添加、搜索、修复、调试、样式化和组合 UI。提供项目上下文、组件文档和使用示例。适用于使用 shadcn/ui、组件注册表 (registries)、预设 (presets)、--preset 代码或任何包含 components.json 文件的项目。也可由 "shadcn init"、"create an app with --preset" 或 "switch to --preset" 触发。
来自 Vercel 工程团队的 React 和 Next.js 性能优化指南。在编写、审查或重构 React/Next.js 代码以确保最佳性能模式时，应使用此技能。适用于涉及 React 组件、Next.js 页面、数据获取、包体积优化或性能提升的任务。
استنادا إلى تصنيف SOC المهني
| name | frontend-design |
| description | 创建具有高设计水准、生产级的独特前端界面。当用户要求构建 Web 组件、页面、Artifact、海报或应用程序（例如网站、落地页、仪表板、React 组件、HTML/CSS 布局，或对任何 Web UI 进行美化/样式调整）时，应使用此技能。生成富有创意、打磨精细的代码和 UI 设计，避免平庸的 AI 审美。 |
| license | 完整条款详见 LICENSE.txt |
此技能旨在引导创建具有独特性的生产级前端界面，避免平庸的“AI 工业垃圾”审美。实现真正的运行代码，并对审美细节和创意选择给予极大关注。
用户提供前端需求：要构建的组件、页面、应用程序或界面。他们可能还会提供有关用途、受众或技术限制的上下文。
在编码之前，请先理解上下文并致力于一个 大胆 (BOLD) 的审美方向：
关键点：选择一个清晰的概念方向并精准执行。大胆的繁复主义和精练的极简主义都有效——关键在于 意图 (intentionality)，而非强度。
然后实现可运行的代码（HTML/CSS/JS, React, Vue 等），并确保：
重点关注：
绝不 (NEVER) 使用通用的 AI 生成式审美，例如过度使用的字体族（Inter, Roboto, Arial, 系统字体）、陈词滥调的配色方案（特别是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏特定情境特征的模板化设计。
发挥创意并做出出人意料的选择，让人感觉是真正为该情境设计的。每个设计都应该是独一无二的。在亮色和暗色主题、不同字体、不同审美之间进行变化。在各次生成中，绝不 (NEVER) 趋同于共同的选择（例如 Space Grotesk）。
重要提示：实现的复杂度应与审美视觉相匹配。繁复主义设计需要包含大量动画和效果的复杂代码。极简或精炼的设计则需要克制、精准，并细致关注间距、字体和微妙细节。优雅源于对视觉愿景的完美执行。
记住：Claude 能够完成非凡的创意工作。不要保留，展示出打破常规思维并全力投入独特视觉时真正能创造出的作品。
