用途
sablier-design 用于指导创建独特、达到生产级质量的前端界面，帮助避免泛化的“AI 味”美学。它会在实现真实可运行代码的同时，对美学细节和创意选择给予高度关注。
适用触发场景：当用户要求构建 Web 组件、页面、应用或界面时使用。用户会提供前端需求，可能包含关于用途、受众或技术约束的背景信息。
主要能力
该技能围绕“设计思维”和“前端美学准则”两方面展开。
设计思维要求在编码前理解上下文，并确定一个大胆的美学方向，包括：
- 用途：这个界面解决什么问题？谁在使用？
- 基调：选择一种极端风格，例如极简、极繁混乱、复古未来、有机自然、奢华精致、玩具般俏皮、杂志编辑风、粗野原始、装饰几何、柔和粉彩、工业实用等。
- 约束：技术需求（框架、性能、可访问性）。
- 差异化：什么让这个设计令人难忘？
随后实现满足以下条件的 React 可运行代码：生产级且功能可用、视觉醒目且令人难忘、具有清晰统一的美学观点、每个细节都经过精心打磨。
前端美学准则涵盖：
- 排版：以 Urbanist 作为主字体（已在 @shared/theme/sablier.css 中定义），Roboto 可作为替代。利用主题的字号 token 和字距保持一致性。
- 颜色与主题：利用现有的 Sablier 主题（@shared/theme/sablier.css），包含标志性的橙到黄渐变、暗色表面以及蓝/紫强调色。Sablier 原生为暗色主题，使用主题的颜色 token 保持一致。
- 动效：使用动画实现效果和微交互。HTML 优先使用纯 CSS 方案；React 在可用时使用 Motion 库。聚焦高冲击力时刻，例如一次编排良好的页面加载配合错落显现（animation-delay），比零散的微交互更能带来愉悦感。使用能带来惊喜的滚动触发和悬停状态。
- 空间构图：采用出人意料的布局、不对称、重叠、对角线流动、打破网格的元素，以及大量留白或受控的密集排布。
- 背景与视觉细节：营造氛围与深度，而非默认使用纯色。添加与整体美学匹配的语境化效果和纹理，例如渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰性边框、自定义光标和颗粒叠加。
使用方式
用户提供前端需求（组件、页面、应用或界面），技能据此先确定美学方向，再实现 React 代码。技能强调根据美学愿景匹配实现复杂度：极繁设计需要大量动画和效果的精细代码；极简或精致设计则需要克制、精确，并仔细处理间距、排版和微妙细节。
适用场景
适用于需要构建具有 Sablier 暗色主题视觉语言、且追求独特设计感与生产级质量的 React 前端界面。
限制
应避免可预测的布局和组件模式等泛化 AI 生成美学，以及缺乏语境特征的千篇一律设计。需忠于 Sablier 既有的视觉语言。资料未提供关于收费、价格、平台支持范围或具体安装命令的信息。