edgespark-frontend-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

EdgeSpark Frontend Design

EdgeSpark前端设计

Use this skill to turn safe, average UI into deliberate visual design with strong hierarchy, clearer art direction, and higher content quality.

Consult design-principles.md for doctrine, asset strategy, implementation details, and anti-patterns. Load the sections relevant to your task.

使用此技能将平淡无奇的普通UI转化为具有清晰层级、明确艺术导向和更高内容质量的视觉设计。

参考design-principles.md获取设计准则、资源策略、实现细节及反模式。加载与你的任务相关的章节。

Design Stack

设计栈

Apply the design standard in layers instead of relying on one vague "make it modern" pass:

Start with the base web system: context-first framing, 12-column structure, 8-point spacing, semantic tokens, responsive behavior, and WCAG 2.1 AA contrast.
Add the aesthetic lift: softer neutral or premium palettes, asymmetrical composition, dramatic typography contrast, generous whitespace, refined textures, and stronger motion direction.
Enforce the anti-generic bans from the reference before shipping.

This layering is what prevents the model from drifting into safe but mediocre frontend output.

分层应用设计标准，而非依赖模糊的"现代化"一次性调整：

从基础Web系统开始：以场景为优先的框架、12列布局结构、8点间距规范、语义化令牌、响应式行为，以及WCAG 2.1 AA对比度标准。
添加美学提升：柔和的中性或高端配色、不对称构图、富有冲击力的排版对比、充足的留白、精致的纹理，以及更明确的动效导向。
交付前执行参考文档中的"反通用设计"禁令。

这种分层方式可避免模型输出安全但平庸的前端成果。

Workflow

工作流程

1. Frame the design

1. 确定设计框架

Before touching code, derive:

user goal
audience
primary tasks
key content types
success metric
emotional tone
one unforgettable visual move
visual thesis: one sentence describing mood, material, and energy
content plan: hero, support, detail, final CTA when the task is a landing page or marketing surface
interaction thesis: 2-3 specific motion ideas that change the feel of the page

Give each section one job, one dominant visual idea, and one primary takeaway or action.

Choose a concrete direction instead of a vague "modern" target. Pick an extreme that fits the product, such as editorial, luxury, industrial, playful, organic, brutalist, or retro-futuristic. Map a minimal user journey and reflect it in layout, hierarchy, and copy.

在编写代码前，明确以下内容：

用户目标
目标受众
核心任务
关键内容类型
成功指标
情感基调
一个令人印象深刻的视觉亮点
视觉主旨：用一句话描述氛围、质感与活力
内容规划：若任务是登陆页面或营销界面，需包含核心展示区、辅助内容区、细节区及最终行动召唤（CTA）
交互主旨：2-3个能改变页面质感的具体动效创意

为每个区域设定一个核心作用、一个主导视觉理念，以及一个核心要点或行动指令。

选择具体的设计方向，而非模糊的"现代化"目标。挑选符合产品定位的极端风格，例如编辑风、奢华风、工业风、趣味风、自然风、粗野主义或复古未来主义。绘制极简用户旅程，并在布局、层级和文案中体现出来。

2. Diagnose weak UI before changing it

2. 优化前诊断UI问题

For redesign work, inspect the current UI and answer:

are the colors visually fatiguing, cheap-looking, or too vibrant
is the layout overly traditional, symmetrical, or monotonous
what modern design elements are missing
does the page feel static and need motion to come alive
what is the current brand positioning and intended emotional experience

对于重设计任务，检查当前UI并回答以下问题：

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

3. Rebuild from the reference, not from habit

3. 基于参考文档重构，而非凭习惯

Load only the sections you need from 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
```

仅从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
```
（产品UI实用文案）
```
Responsive And Accessibility Baseline
```
（响应式与可访问性基准）
```
Execution Style
```
（执行风格）
```
Optimization Order
```
（优化顺序）
```
Anti-Patterns
```
（反模式）
```
Litmus Checks
```
（验证检查）

4. Follow the non-negotiables

4. 遵循不可妥协的规则

Start with composition, not components.
Prefer CSS animations by default. Use Motion or Framer Motion for React, driven by animation tokens.
Use intersection observers for scroll-triggered entry rather than ad hoc scroll listeners.
Default to proactive real-image search for visual surfaces. Use placeholders only in the narrow cases listed in the reference.
Support token-based light and dark modes when the product needs both.
Match implementation complexity to the chosen direction instead of flattening every design into the same safe template.

从构图入手，而非组件。
默认优先使用CSS动画。对于React项目，使用Motion或Framer Motion，并由动画令牌驱动。
使用交叉观察者（intersection observers）实现滚动触发的入场效果，而非临时滚动监听器。
视觉界面默认优先使用真实图片搜索。仅在参考文档列出的少数情况下使用占位符。
当产品需要时，支持基于令牌的亮色与暗色模式。
根据所选设计方向匹配实现复杂度，而非将所有设计简化为相同的安全模板。

5. Validate the finish

5. 验证最终成果

Confirm mobile and desktop behavior.
Confirm WCAG 2.1 AA contrast and visible interactive states.
Confirm that motion, typography, color, and imagery all align with the chosen direction.
Confirm that the result passes the anti-pattern check in the reference.

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

EdgeSpark Use

EdgeSpark使用说明

Use this skill for the design layer. Pair it with building-edgespark-apps when the task also needs EdgeSpark-specific implementation guidance.

将此技能用于设计层。当任务同时需要EdgeSpark特定的实现指导时，搭配building-edgespark-apps使用。