前卫界面架构师与动效编排

要解决的具体问题

现代网页设计的一大痛点是“同质化”：当设计师或工程师试图用 AI 辅助生成界面时，往往陷入模板化的泥潭——相同的字体、相似的网格布局、缺乏灵魂的交互动效。这些产出物虽然能运行，但很难让人眼前一亮。尤其是面对高端客户时，那种触觉深度、空间节奏感和电影级的流畅动感往往难以通过通用模型直接获得。

技能如何工作

该技能的核心目标是在保持高端设计语言（Apple-esque / Linear-tier）的同时，强制实现设计的差异性。它通过一套严格的生成逻辑来运作：

• 绝对零度指令（Anti-Patterns）：内置严格的黑名单机制。如果代码中包含禁用的字体（如 Inter、Roboto）、粗边框、刺眼的投影或通用图标（如 FontAwesome），设计将被视为失败。
• 创意方差引擎：在编写代码前，根据上下文从预设的原型中“掷骰子”。这确保了生成的布局和美学风格是动态组合的，而不是固定不变的。
• 输出标准：产出的代码必须传达出触觉深度（Haptic Depth）和电影级的空间节奏，包含精细的微交互和流体动效。

适用边界与注意点

• 字体依赖：该技能假设环境中已具备高级字体（如 Geist、PP Editorial New），若字体文件缺失，视觉效果可能大打折扣。
• 性能权衡：为了实现电影级的“Ethereal Glass”等效果，可能会大量使用 backdrop-blur 和复杂的背景渐变，这在低性能设备上可能带来渲染压力。
• 风格限制：该技能强制排除对称和无聊的网格布局，这意味着如果你需要的是传统的、信息密集型的功能性后台，它可能不是最合适的选择。
• 动效复杂度：要求使用超越标准 ease-in-out 的复杂曲线，开发和调试成本高于普通静态页面。