EdgeSpark Frontend Design

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.

Design Stack

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

1. 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.
2. Add the aesthetic lift: softer neutral or premium palettes, asymmetrical composition, dramatic typography contrast, generous whitespace, refined textures, and stronger motion direction.
3. 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.

Workflow

1. Frame the design