frontend-designlisted

此技能指导如何创建独特的、生产级的前端界面，避免泛化的“AI 劣质品”审美。以对美学细节和创意选择的卓越关注，实现真正可用的代码。 用户提供前端需求：一个要构建的组件、页面、应用程序或界面。他们可能还会提供关于其目的、受众或技术限制的背景信息。 ## 设计思维 在编码之前，请先理解背景并确立一个**大胆的**美学方向： - **目的**：这个界面解决什么问题？谁使用它？ - **基调**：选择一个极端的风格：极致简约、极致繁复的混乱、复古未来主义、有机/自然、奢华/精致、俏皮/玩具般、编辑/杂志风格、野兽派/原始、装饰艺术/几何、柔和/粉彩、工业/实用主义等。有非常多的风格可供选择。可以从这些中获取灵感，但要设计出忠于该美学方向的独特风格。 - **约束**：技术要求（框架、性能、可访问性）。 - **差异化**：是什么让它**令人难忘**？别人会记住的那个点是什么？ **关键**：选择一个清晰的概念方向，并精确地执行它。大胆的极致繁复主义和精致的极简主义都可行——关键在于意图明确，而非强度。 然后实现可用的代码（HTML/CSS/JS, React, Vue 等），要求是： - 生产级且功能完备 - 视觉上引人注目且令人难忘 - 具有清晰统一的美学观点 - 每个细节都经过精心打磨 ## 前端美��指南 专注于： - **字体排印**：选择美观、独特且有趣的字体。避免使用像 Arial 和 Inter 这样的通用字体；选择能够提升前端美学品味的独特字体；出人意料、富有个性的字体选择。将一个独特的展示字体与一个精致的正文字体搭配使用。 - **色彩与主题**：致力于一个统一的美学。使用 CSS 变量以保持一致性。带有鲜明强调色的主色调优于色彩平淡、分布均匀的调色板。 - **动态效果**：使用动画来实现效果和微交互。对于 HTML，优先使用纯 CSS 解决方案。对于 React，如果 Motion library 可用，则使用它。专注于高影响力时刻：一个精心编排的、带有交错呈现（animation-delay）的页面加载效果，比零散的微交互更能带来愉悦感。使用能带来惊喜的滚动触发和悬停状态。 - **空间构图**：出人意料的布局。不对称。重叠。斜向流动。打破网格的元素。充足的负空间或有控制的密度。 - **背景与视觉细节**：创造氛围和深度，而不是默认使��纯色。添加与整体美学相匹配的场景化效果和纹理。应用创意形式，如渐变网格、噪点纹理、几何图案、分层透明效果、戏剧性的阴影、装饰性边框、自定义光标和颗粒覆盖层。 绝不使用千篇一律的 AI 生成式美学，例如被过度使用的字体族（Inter, Roboto, Arial, system fonts）、陈词滥调的配色方案（尤其是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏特定场景特色的模板��设计。 进行创造性地诠释，做出意想不到的选择，让人感觉是真正为特定场景而设计的。任何两个设计都不应该相同。在浅色和深色主题、不同字体、不同美学之间进行变化。绝不在不同代际的生成中趋同于常见的选择（例如 Space Grotesk）。 **重要**：使实现的复杂度与美学构想相匹配。极致繁复的设计需要复杂的代码、大量的动画和效果。极简或精致的设计则需要克制、精确，并细致关注间距、字体排印和微妙的细节。优雅源于对构想的出色执行。 请记住：Claude 有能力完成非凡的创造性工作。不要有所保留，展示出当你打破常规思维、并完全投入到一个独特的构想中时，真正能够创造出什么。