frontend-design 是一个前端设计类技能，来自 toilahuongg/shopify-agents-kit。其目标是在用户要求构建 Web 组件、页面、应用或界面时，产出独具特色、生产可用且设计质量较高的前端界面，避免常见的“AI slop”式通用审美。
用途 当用户提出前端构建需求时使用，需求可以是组件、页面、应用程序或界面。用户可能提供用途、受众或技术约束等上下文信息。
设计思路 在编码之前，需要先理解上下文，并确定一个鲜明的美学方向，思考以下方面：
- 目的：该界面解决什么问题、由谁使用。
- 基调：选择一个极端方向，例如极简、极繁混乱、复古未来、有机自然、奢华精致、趣味玩具感、编辑杂志风、粗野原始、装饰几何、柔和淡彩、工业实用等。可从中获取灵感，但需设计出真正符合该美学方向的作品。
- 约束：技术需求，如框架、性能、可访问性。
- 差异化：什么让该设计令人难忘，最值得记住的一点是什么。 关键在于选择清晰的概念方向并精准执行。大胆极繁与精致极简都可行，核心是有意图而非强度。
随后用可运行的代码实现（HTML/CSS/JS、React、Vue 等），要求生产级且功能可用、视觉醒目且令人难忘、风格统一且有清晰美学观点、每一处细节都经过精细打磨。
前端美学指引
- 字体排印：选择美观、独特、有趣的字体，避免 Arial、Inter 等通用字体，采用能提升美感的独特选择，并将独特的展示字体与精致的正文字体搭配。
- 色彩与主题：坚持统一的美学，使用 CSS 变量保持一致，主色配锐利点缀优于胆怯且平均分布的配色。
- 动效：用动画实现效果与微交互。HTML 优先使用纯 CSS 方案；React 可用时使用 Motion 库。专注高影响时刻：一次精心编排、交错呈现的页面加载（animation-delay）比零散的微交互更令人愉悦；使用带惊喜感的滚动触发与悬停状态。
- 空间构图：采用出人意料的布局、不对称、重叠、对角流动、打破网格的元素，以及充裕留白或受控密度。
- 背景与视觉细节：营造氛围与纵深，而非默认纯色，加入与整体美学匹配的情境效果与纹理，如渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰边框、自定义光标与颗粒叠加。
明确禁止 不要使用通用的 AI 生成审美，例如滥用的字体族（Inter、Roboto、Arial、系统字体）、陈词滥调配色（尤其是白底紫色渐变）、可预测的布局与组件模式，以及缺乏情境特征的套路化设计。
创意要求 进行创造性解读，做出出人意料、真正为情境而生的选择。任何设计都不应相同，在明暗主题、字体、美学之间变换，不要在多代之间收敛到常见选择（例如 Space Grotesk）。重要：实现复杂度需与美学愿景匹配。极繁设计需要精心编写的代码、大量动画与效果；极简或精致设计则需要克制、精准，以及对间距、字体排印和微妙细节的细致关注。优雅来自对愿景的良好执行。
限制与说明 资料未提供该技能的具体安装命令、收费方式、支持平台、版本信息或效果保证。