Frontend Design Visual Expression

Problem

• Frontend designs can drift into generic templates: warm cream backgrounds, black backgrounds with bright lime or vermilion accents, and broad newspaper-style column layouts that feel unrelated to the actual product or theme.
• Copy, color, and typography are often treated as content padding instead of design material.
• Generated pages may look complete but lack explainable aesthetic judgment, a clear subject anchor, and implementation constraints.

How It Works

The skill asks the model to act as a small studio design lead, not a generic page generator. Its workflow includes:
- Anchor the theme: if the brief lacks a product, audience, or single task, name a concrete theme, audience, and page task, then explain the choice.
- Define design tokens: use 4–6 named hex colors, two or more typographic roles, a layout concept, and an ASCII wireframe to form a compact plan.
- Review against defaults: before implementation, check whether any part resembles a generic default that would appear on many similar pages, especially unverified use of #F4F1EA cream, black backgrounds with lime or vermilion accents, and newspaper-style layouts.
- Constrain implementation: watch CSS specificity and avoid conflicting .section and .cta styles; keep mobile responsiveness, visible keyboard focus, and prefers-reduced-motion support.
- Treat copy as design material: labels, prompts, errors, and empty states should use user-visible names, active voice, and consistent action words, such as “Save changes” instead of abstract submit labels.

Boundaries

It fits web or landing-page design tasks where visual judgment, theme expression, and implementation constraints matter. If the brief explicitly requests a visual direction, follow the brief first; if real copy is missing, the skill expects descriptive content rather than marketing filler.