| name | frontend-design-zh |
| description | 创建独特、生产级的前端界面，具有高质量的设计水准。当用户要求构建Web组件、页面、界面、海报或应用程序时使用此技能（示例包括网站、落地页、仪表板、React组件、HTML/CSS布局，或任何Web UI的样式美化）。生成富有创意、精致的代码和UI设计，避免通用的AI美学风格。 |
| license | 完整条款见 LICENSE.txt |
此技能指导创建独特、生产级的前端界面，避免通用的"AI审美"风格。实现真正可运行的代码，同时对美学细节和创意选择给予极致关注。
用户提供前端需求：需要构建的组件、页面、应用程序或界面。他们可能会包含关于目的、受众或技术约束的背景信息。
设计思维
在编码之前，理解上下文并确定一个大胆的美学方向：
- 目的：这个界面解决什么问题？谁在使用它？
- 调性：选择一个极端风格：极简主义、极繁主义混沌、复古未来主义、有机/自然、奢华/精致、俏皮/玩具感、编辑/杂志风、粗野主义/原始、装饰艺术/几何、柔和/粉彩、工业/实用主义等。有太多风格可供选择。以这些作为灵感，但要设计出真正符合美学方向的作品。
- 约束：技术要求（框架、性能、可访问性）。
- 差异化：是什么让这个设计令人难忘？用户会记住的那一点是什么？
关键：选择一个清晰的概念方向并精确执行。大胆的极繁主义和精致的极简主义都可行——关键是意图明确，而非单纯追求强度。
然后实现可运行的代码（HTML/CSS/JS、React、Vue等），需要做到：
- 生产级且功能完整
- 视觉冲击力强且令人难忘
- 具有清晰美学观点的整体连贯性
- 每个细节都经过精心打磨
前端美学指南
重点关注：
- 排版：选择美观、独特、有趣的字体。避免使用通用字体如Arial和Inter；选择能提升前端美感的独特字体；意想不到的、有个性的字体选择。将独特的展示字体与精致的正文字体搭配使用。
- 色彩与主题：确定一个连贯的美学风格。使用CSS变量保持一致性。主色调搭配鲜明的强调色比胆怯、均匀分布的色板效果更好。
- 动效：使用动画实现效果和微交互。HTML优先使用纯CSS解决方案。React项目可用时使用Motion库。专注于高影响力的时刻：一个精心编排的页面加载动画配合错开的元素显示（animation-delay）比零散的微交互更令人愉悦。使用滚动触发和令人惊喜的悬停状态。
- 空间构图：意想不到的布局。不对称。重叠。对角线流动。打破网格的元素。大量留白或有控制的密集感。
- 背景与视觉细节：创造氛围和深度，而非默认使用纯色。添加与整体美学相匹配的情境效果和纹理。运用创意形式如渐变网格、噪点纹理、几何图案、层叠透明度、戏剧性阴影、装饰性边框、自定义光标和颗粒叠加效果。
绝对不要使用通用的AI生成美学风格，如过度使用的字体系列（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（特别是白底紫色渐变）、可预测的布局和组件模式，以及缺乏特定场景个性的千篇一律设计。
创意性地进行诠释，做出符合场景的意想不到的选择。每个设计都应该是独一无二的。在不同生成之间变换明暗主题、不同字体、不同美学风格。绝不在多次生成中趋同于常见选择（例如Space Grotesk）。
重要：实现复杂度要与美学愿景相匹配。极繁主义设计需要精心制作的代码，包含大量动画和效果。极简或精致的设计需要克制、精确，并仔细关注间距、排版和微妙细节。优雅来自于对愿景的出色执行。
记住：Claude能够创作出非凡的创意作品。不要有所保留，展示出跳出框架思考并完全投入到独特愿景时真正能够创造的东西。
