frontend-design

这项技能指导你创建独具特色、达到生产级品质的前端界面，避免千篇一律的“AI 垃圾美学”。编写真正可用的代码，并格外注重美学细节与创意选择。

参考代码库

• shadcn-svelte：面向 Svelte 的 shadcn/ui 移植版，采用 Bits UI 基元
• shadcn-svelte-extras：shadcn-svelte 的附加组件
• Svelte：Svelte 5 框架

上游依据

当设计实现依赖 Svelte 的行为时，先查证源码，再依据记忆行事。如果 DeepWiki MCP 可用，请针对 sveltejs/svelte 提出具体问题；对于 shadcn-svelte 或 extras 的组件 API，请查询 huntabyte/shadcn-svelte 或 ieedan/shadcn-svelte-extras。如果 DeepWiki 不可用或仓库未被索引，请直接查阅上游源码或官方文档。将 DeepWiki 作为参考，然后在修改代码前，依据本地 @epicenter/ui 封装、已安装的类型、源码或官方文档核实关键细节。

不要将上游仓库作为视觉品味的依据，只将其用于了解组件 API 和行为。

用户会提供前端需求：要构建的组件、页面、应用或界面。他们可能会补充用途、受众或技术限制等背景信息。

何时使用这项技能

在以下情况下使用此模式：

• 构建或重新设计前端组件、页面或完整界面。
• 编码前确定并执行鲜明的美学方向。
• 通过有意设计的字体、色彩、动效和构图，打造精致的 UI。
• 避免通用、重复的 AI 风格设计选择。
• 让实现复杂度与选定的视觉方向相匹配。

重构保真度

重新设计或重构现有 UI 时，应先判断像素级保真是否必要，而非默认将其视为要求。这项技能负责视觉方向、层级、无障碍性、重要状态和鲜明的产品感。

如果要精确复现间距、断点、动画、悬停状态、空状态、DOM 结构、完整组件树或快照，必须引入大量样式或状态分支，请切换到 asymmetric-wins 做出是否拒绝的判断。视觉判断仍由本技能负责：当保真度影响理解、无障碍性、信任、品牌或对回归敏感的状态时，它就至关重要。

如果本地 UI 基元能够保留相同的工作流、层级、状态和无障碍约定，优先使用它们。不要只为让设计稿看起来精确就复刻完整的 HTML 树；除非精确的 DOM 结构本身就是产品约定或问题根源，否则请使用截图、简洁草图、状态表或局部结构。

设计思考

编码前，先理解背景，并选定一个大胆鲜明的美学方向：

• 用途：这个界面要解决什么问题？谁会使用它？
• 风格：选择一个极端方向：极致极简、极繁混乱、复古未来主义、有机自然、奢华精致、玩具般俏皮、编辑部／杂志风、粗野原始、装饰艺术／几何、柔和粉彩、工业实用主义等。可供选择的风格非常多。可以从这些方向汲取灵感，但最终设计应忠于所选美学方向。
• 限制：技术要求（框架、性能、无障碍性）。
• 差异化：怎样才能让人过目难忘？人们会记住哪一点？

关键：选定清晰的概念方向，并精准执行。大胆繁复与精致极简都可行——关键在于用心设计，而不是追求强烈的视觉冲击。

然后编写可用的代码（HTML/CSS/JS、React、Vue 等），确保它：

• 达到生产级品质且功能完备
• 视觉鲜明、令人难忘
• 风格统一，观点明确
• 每个细节都经过精心打磨

前端美学指南

重点关注：

• 字体排版：选择美观、独特且有趣的字体。避免使用 Arial 和 Inter 等常见字体；改用能提升前端美感的鲜明字体，选择出人意料、个性十足的字体。将独特的展示字体与精致的正文字体搭配使用。
• 色彩与主题：坚持统一的美学风格。使用 CSS 变量保持一致性。与其选择谨慎、分布均匀的配色，不如采用主导色搭配鲜明的点缀色。
• 动效：使用动画来呈现效果和微交互。对于 HTML，优先采用纯 CSS 方案；如果可用，在 React 中使用 Motion 库。聚焦于影响力大的时刻：通过错落展现（animation-delay）精心编排一次页面加载动画，比零散的微交互更能带来惊喜。使用滚动触发效果和令人惊喜的悬停状态。
• 空间构图：尝试出人意料的布局、不对称、重叠、斜向流动、突破网格的元素，以及充足的留白或经过控制的紧凑布局。
• 背景与视觉细节：营造氛围与层次感，而不是默认使用纯色。添加与整体美学相契合的情境效果和纹理。运用富有创意的形式，例如渐变网格、噪点纹理、几何图案、分层透明效果、醒目的阴影、装饰性边框、自定义光标和颗粒叠加效果。

绝不要采用常见的 AI 生成美学风格，例如过度使用的字体系列（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏情境特色的千篇一律设计。

发挥创造力，做出令人意外、真正贴合情境的选择。每个设计都应与众不同。在浅色和深色主题、不同字体和不同美学风格之间灵活变化。绝不要在多次生成中趋同于常见选择（例如 Space Grotesk）。

重要：让实现复杂度与美学构想相匹配。极繁主义设计需要编写复杂代码，并加入丰富的动画和效果。极简或精致的设计则需要克制、精准，并仔细打磨间距、字体排版和细微之处。优雅源于出色地实现构想。

请记住：Claude 能够完成非凡的创意作品。不要有所保留，尽情展现跳出框架思考并全力贯彻鲜明构想时，真正能够创造出怎样的作品。