用途
该技能定位为精英级前端编排器，目标是把完整的设计技术栈组织成一条有纪律的流水线，产出达到 Awwwards 水准、令人印象深刻的界面。它适用于品牌落地页、营销页、主视觉区、作品集等“设计即产品”的场景；如果需求只是内部管理后台、增删改查表单或缺陷修复，技能会建议改用更轻量的方案。
主要能力
技能以九个阶段组织工作：设计简报、色彩调板、灵感参考、版式构成、动效校准、代码实现、视频（可选）、打磨审计、浏览器验证。简报阶段要明确目的、受众、品牌或产品定位、美学方向、一个令人难忘的元素以及约束条件。色彩阶段要求输出 OKLCH 令牌并保存为 CSS 变量，避免纯黑纯白。灵感阶段可借助设计知识库与组件库检索参考，强调混搭而非照搬。构成阶段强调独特字体、非对称布局、有层次的背景。动效阶段在克制、精致、趣味三种取向中选择一种并保持一致。实现阶段给出三条架构分支：单 HTML 文件（ES 模块导入映射、htm 免编译 JSX、React 岛屿）、Next.js 生产框架、Remotion 视频。动效工具矩阵涵盖 Framer Motion、anime.js、Three.js 与纯 CSS。打磨阶段检查视觉层级、对比度、可访问性、响应式与边界情况。验证阶段要求用真实浏览器在 320/768/1280/1920 视口截图、键盘遍历与交互测试。
使用方式
按阶段推进，前六个阶段与打磨、验证为强制项；灵感阶段在已有明确参考时可省，动效阶段在加入任何过渡时必做，视频阶段仅在交付视频时启用。每个阶段对应特定工具或技能，例如色彩提取、色彩专家、设计原则、Remotion 最佳实践、审计与浏览器验证工具。文档还列出常见陷阱，如斜体渐变与字符拆分导致文字不可见、在辅助函数中调用 React Hook 违反规则、PowerShell 与 UTF-8 编码问题等。
适用场景
适合需要高度视觉表现力的品牌页面、营销落地页、作品集、演示页与客户提案页面。文档强调避免通用模板：不使用 Inter/Roboto/Arial 等系统字体，不使用白底紫色渐变、居中等距的英雄区、平淡的色彩分布、不强化含义的动画，也不编造推荐语、标识或指标。
限制
该技能明确不适用于常规功能性需求，也不承诺交付时间或价格，文档禁止在对外文案中写交付时间承诺，并建议用“无代理机构开销”替代“比其他机构便宜”的表述。收费、平台支持范围等细节暂未提供。