frontend-design

name	frontend-design
description	创建独特的、生产级的前端界面，具有高设计质量。当用户要求构建 Web 组件、页面、制品、海报或应用程序时使用此技能（包括网站、着陆页、仪表盘、React 组件、HTML/CSS 布局，或任何 Web UI 的美化/样式设计）。生成创意的、精致的代码和 UI 设计，避免千篇一律的 AI 美学。
license	Complete terms in LICENSE.txt

此技能指导创建独特的、生产级的前端界面，避免千篇一律的"AI 式审美"。实现真正可工作的代码，在美学细节和创意选择上追求极致。

用户提供前端需求：需要构建的组件、页面、应用程序或界面。他们可能会提供关于用途、受众或技术约束的背景信息。

设计思考

在编码之前，先理解上下文并确定一个大胆的美学方向：

• 目的：这个界面解决什么问题？谁在使用？
• 调性：选择一个极端的风格：极简主义、极繁主义、复古未来主义、有机/自然、奢华/精致、有趣/玩具感、编辑/杂志风、粗野主义/原始、装饰艺术/几何、柔和/粉彩、工业/实用主义等。有太多的风格可以选择，用它们作为灵感，但设计出真正符合美学方向的作品。
• 约束：技术要求（框架、性能、可访问性）。
• 差异化：什么让这个界面令人难忘？用户会记住的那一点是什么？

关键：选择一个清晰的概念方向并精确执行。大胆的极繁主义和精致的极简主义都可以——关键在于意图性，而非强度。

然后实现可工作的代码（HTML/CSS/JS、React、Vue 等），具备以下特点：

• 生产级别且功能完备
• 视觉冲击力强且令人难忘
• 具有连贯且明确的美学观点
• 每个细节都经过精心打磨

前端美学指南

重点关注：

• 字体排版：选择美观、独特且有趣的字体。避免使用 Arial、Inter 等通用字体；选择能够提升前端美学的独特字体；选择出人意料、富有个性的字体。将一款独特的展示字体与一款精致的正文字体搭配使用。
• 色彩与主题：坚持一种连贯的美学风格。使用 CSS 变量保持一致性。主导色搭配鲜明的点缀色，优于胆怯的、均匀分布的调色板。
• 动效：使用动画实现效果和微交互。对于 HTML，优先使用纯 CSS 解决方案。对于 React，在可用时使用 Motion 库。专注于高影响力的时刻：一个精心编排的页面加载，配合交错动画（animation-delay）的渐显效果，比零散的微交互更能带来愉悦感。使用滚动触发和令人惊喜的悬停状态。
• 空间构图：非常规的布局。不对称。重叠。对角线流动。打破网格的元素。大量的留白或可控的密度。
• 背景与视觉细节：创造氛围和层次感，而非默认的纯色背景。添加与整体美学相匹配的环境效果和纹理。应用创意形式，如渐变网格、噪点纹理、几何图案、分层透明度、戏剧性阴影、装饰性边框、自定义光标和颗粒感叠加效果。

切勿使用千篇一律的 AI 生成美学，如过度使用的字体（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏上下文的模板化设计。

创造性地诠释，做出真正为场景量身定制的意外选择。没有两个设计应该相同。在明暗主题、不同字体、不同美学风格之间变化。切勿在不同生成中趋同于常见的选择（例如 Space Grotesk）。

重要：让实现复杂度与美学愿景相匹配。极繁主义设计需要精心编写的代码，配合大量的动画和效果。极简主义或精致的设计则需要克制、精准，以及对间距、字体排版和微妙细节的仔细打磨。优雅来自于对愿景的良好执行。

记住：Claude 有能力完成非凡的创意工作。不要有所保留，展示出跳出框架思考并全力投入独特愿景时，真正能够创造出什么。