edgespark-frontend-design

EdgeSpark 前端设计

使用此技能，将安全平庸的 UI 转化为经过精心设计的界面，拥有鲜明的层次、更清晰的艺术指导和更高的内容品质。

请参阅 design-principles.md，了解设计准则、素材策略、实现细节和反模式。根据任务加载相关章节。

设计体系

分层应用设计标准，而不是只依赖一句含糊的“让它更现代”：

1. 从基础 Web 体系着手：优先考虑上下文、12 列结构、8 点间距、语义化令牌、响应式行为，以及符合 WCAG 2.1 AA 标准的对比度。
2. 提升美感：采用柔和的中性色或高级配色、不对称构图、强烈的字体对比、宽裕的留白、精致的纹理，以及更鲜明的动效方向。
3. 交付前，落实参考文档中的反通用化禁令。

这种分层方式可以避免模型产出安全却平庸的前端设计。

工作流

1. 明确设计方向

编写代码前，先明确：

• 用户目标
• 受众
• 主要任务
• 关键内容类型
• 成功指标
• 情感基调
• 一个令人难忘的视觉亮点
• 视觉主张：用一句话描述氛围、材质和能量
• 内容规划：如果任务涉及落地页或营销界面，规划主视觉区、辅助内容、细节内容和最终 CTA
• 交互主张：提出 2-3 个具体的动效构想，改变页面的整体感受

为每个版块设定一个目标、一个主导视觉创意，以及一个主要信息或行动。

选择具体的设计方向，而不是含糊地追求“现代”。根据产品特点选定鲜明风格，例如编辑风、奢华风、工业风、趣味风、有机风、粗野主义或复古未来主义。 梳理精简的用户旅程，并将其体现在布局、层级和文案中。

2. 修改前诊断薄弱的 UI

对于重新设计的任务，检查当前 UI 并回答：

• 配色是否容易造成视觉疲劳、显得廉价或过于鲜艳？
• 布局是否过于传统、对称或单调？
• 缺少哪些现代设计元素？
• 页面是否显得静态，是否需要动效来焕发活力？
• 当前的品牌定位和预期的情感体验是什么？

3. 依据参考文档重建，而不是沿用惯例

从 design-principles.md 中仅加载所需章节：

• Layout And Spacing
• Typography
• Color
• Visual Treatments
• Motion And Interaction
• Landing Pages
• Apps
• Content Authenticity
• Visual Asset Role
• Utility Copy For Product UI
• Responsive And Accessibility Baseline
• Execution Style
• Optimization Order
• Anti-Patterns
• Litmus Checks

4. 遵守不可妥协的要求

• 从构图入手，而不是从组件入手。
• 默认优先使用 CSS 动画。对于 React，使用 Motion 或 Framer Motion，并由动画令牌驱动。
• 使用交叉观察器触发滚动进入动效，不要临时添加滚动监听器。
• 默认主动为视觉界面搜索真实图片。仅在参考文档列出的少数情况中使用占位内容。
• 如果产品需要同时支持浅色和深色模式，请通过令牌支持这两种模式。
• 根据所选方向匹配实现复杂度，不要把所有设计都简化成同一种安全模板。

5. 验证最终效果

• 确认移动端和桌面端的表现。
• 确认符合 WCAG 2.1 AA 对比度要求，且交互状态清晰可见。
• 确认动效、排版、配色和图像都与所选方向一致。
• 确认结果通过参考文档中的反模式检查。

EdgeSpark 的使用方式

将此技能用于设计层。如果任务还需要 EdgeSpark 专属的实现指导，请搭配使用 building-edgespark-apps。