EdgeSpark Frontend Design 是一个面向 EdgeSpark 前端的视觉设计技能。它的目标是把安全、平均的 UI 转化为经过刻意设计的视觉作品，强调强层级、清晰的艺术方向与更高内容质量。在设计与重构任务中，它用于承担“设计层”的工作；当任务还需要 EdgeSpark 特定实现指导时，可与 building-edgespark-apps 配合使用。
【设计栈的分层方式】 该技能要求按层应用设计标准，而不是依赖一次含糊的“做得现代一点”。第一层是基础 Web 体系：语境优先的框架、12 栏结构、8 点间距、语义化 token、响应式行为，以及 WCAG 2.1 AA 对比度。第二层是美学提升：更柔和的中性色或高级配色、非对称构图、戏剧性的字体对比、充足留白、精致质感，以及更强的动效方向。最后一层是在交付前执行参考文档中的反通用化禁令。这种分层是为了防止模型滑向安全但平庸的前端输出。
【工作流程】
- 框定设计：在动代码之前，先推导用户目标、受众、主要任务、关键内容类型、成功指标、情绪基调、一个令人难忘的视觉动作、一句视觉主张（描述情绪、材质与能量）、内容计划（当任务是落地页或营销界面时的 hero、支撑、细节、最终 CTA），以及交互主张（2-3 个能改变页面感受的具体动效想法）。每个区块只承担一项职责、一个主导视觉想法和一个主要结论或行动。选择具体方向而非模糊的“现代”，例如编辑风、奢华风、工业风、玩趣风、有机风、粗野主义或复古未来主义。映射一条最小用户旅程，并体现在布局、层级与文案中。
- 在改动前诊断弱 UI：针对重构工作，检查当前 UI 的颜色是否刺眼、廉价或过于鲜艳，布局是否过于传统、对称或单调，缺少哪些现代设计元素，页面是否显得静态而需要动效激活，当前品牌定位与预期情绪体验是什么。
- 依据参考文档而非习惯重建：按需加载 design-principles.md 中的相关章节，包括布局与间距、排版、颜色、视觉处理、动效与交互、落地页、应用、内容真实性、视觉资产角色、产品 UI 的实用文案、响应式与无障碍基线、执行风格、优化顺序、反模式、检验清单。
- 遵循不可妥协项：从构图而非组件开始；默认优先使用 CSS 动画，React 中使用 Motion 或 Framer Motion 并由动画 token 驱动；使用 intersection observers 处理滚动触发进入，而不是临时滚动监听；默认对视觉表面主动搜索真实图片，仅在参考文档列出的少数情况下使用占位符；在产品需要时支持基于 token 的亮色与暗色模式；让实现复杂度匹配所选方向，而不是把所有设计压平成同一个安全模板。
- 验证完成度：确认移动端与桌面端行为；确认 WCAG 2.1 AA 对比度与可见交互状态；确认动效、排版、颜色与图像均与所选方向一致；确认结果通过参考文档中的反模式检查。
【适用场景与限制】 适用场景为构建或打磨 EdgeSpark 前端界面，尤其是需要避免通用 AI 风格 UI 的设计与重构工作。限制方面：该技能承担设计层职责，EdgeSpark 特定实现指导需与 building-edgespark-apps 搭配；具体安装命令、代码示例、收费与价格信息在现有资料中暂未提供。