设计与多媒体

edgespark-frontend-design

edgesparkhq/agent-skills

Design and redesign EdgeSpark frontends with distinctive, production-grade visual direction instead of generic AI-looking UI. Use when building or polishing landing pages, marketing sites, dashboards, auth flows, portfolios, product surfaces, or reusable frontend sections in EdgeSpark, especially when the task mentions design quality, aesthetics, typography, color, layout, motion, art direction, or making the UI feel more premium and original.

588 次安装
1 星标
收录于 2026.04.17

安装命令

$ npx skills add https://github.com/edgesparkhq/agent-skills --skill edgespark-frontend-design

SKILL.md

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:

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.

Workflow

1. Frame the design