Taste

Taste: Marketing Design Specialist

Use this skill as the marketing-specific aesthetic layer on top of frontend-design. It does not own framework selection, dependency installation, application architecture, or redesign preservation.

Apply instructions in this order of precedence:

1. User requirements
2. Existing brand, accessibility, functionality, and project conventions
3. redesign preservation and migration constraints, when applicable
4. frontend-design implementation principles
5. This skill's marketing heuristics

Treat stylistic guidance as contextual. Accessibility, usability, truthful content, and explicit brand direction are requirements; aesthetic heuristics are not universal bans.

Surface Mode Applicability

Use the mode selected by frontend-design:

• Persuade: Apply the full skill to landing pages, campaigns, pricing, and conversion surfaces.
• Experience: Apply the full skill to portfolios, galleries, showcases, and immersive brand experiences.
• Read: Apply typography, composition, imagery, and content guidance selectively when brand expression is central. Comprehension and navigation remain primary.
• Operate: Do not apply this skill to dashboards, settings, editors, admin tools, dense forms, or other task-oriented product UI.

Classify mixed products per surface. A public landing page may use this skill while the authenticated application remains out of scope.

1. Read the Brief

Before editing, infer:

• The surface type and its primary job
• The audience and what earns their attention or trust
• Explicit tone, brand, reference, and competitor signals
• Existing logos, typography, colors, photography, and design tokens
• Accessibility, regulatory, performance, and content constraints
• Whether the work is greenfield, an extension, or an existing-surface redesign

State one concise design read before implementation:

Reading this as: [surface] for [audience], using [visual language] to support [primary outcome].

Ask one focused question only when different answers would materially change the direction. Do not ask users to choose CSS values or edit this skill.

2. Set the Design Dials

Choose and state three contextual values from 1-10:

• Design variance: 1 is highly conventional; 10 is highly experimental.
• Motion intensity: 1 is nearly static; 10 is cinematic or heavily choreographed.
• Visual density: 1 is sparse; 10 is information-dense.

Infer values from the audience, content, mode, and established brand. There is no universal default. Existing surfaces begin from their current values, not a new baseline.

Use the dials to maintain consistency rather than to justify unnecessary complexity. High variance still requires clear hierarchy; high motion still requires reduced-motion behavior; low density must still communicate enough information.

3. Implementation Boundaries

frontend-design owns technical implementation choices. Follow these constraints:

• Preserve the existing framework, styling system, component library, icon family, tokens, and dependencies unless the user approves changing them.
• Check the dependency manifest before importing any package.
• Do not install or recommend a package merely because it matches an aesthetic category.
• Prefer existing dependencies and platform capabilities. Ask before adding a major dependency or design system.
• When a new dependency is approved, use a reviewed, pinned version that satisfies the project's supply-chain policy. Do not use floating or @latest commands.
• Use an official design system only when the project already uses it, the platform requires it, or the user explicitly approves adopting it after hearing the compatibility impact.
• Do not modify CI/CD, infrastructure, deployment configuration, or remote services as part of visual design work unless explicitly requested.
• Do not add code comments solely to explain aesthetic inspiration.

4. Marketing Design Principles

Typography

• Use typography to establish a recognizable voice and clear hierarchy.
• Preserve established brand type. For greenfield work, choose fonts based on audience, content, language coverage, performance, and licensing.
• Avoid reflexive defaults, but do not replace a suitable system font or common sans merely to appear distinctive.
• Keep body text readable, headings balanced, and line lengths appropriate to the content.
• Test real copy at representative breakpoints. Prevent clipping, overflow, orphaned controls, and wrapped primary CTA labels.

Color and Theme

• Build one coherent tokenized palette with clear foreground, surface, accent, and semantic-state roles.
• Use the existing or requested theme strategy. Do not require dual light/dark themes unless the product supports or requests them.
• Maintain WCAG AA contrast for text and controls, visible focus, and non-color state indicators.
• Avoid arbitrary accent changes between sections. Deliberate theme transitions are acceptable when the brief and composition justify them.
• Treat familiar palettes and gradients as options, not defaults or prohibitions.

Layout and Composition

• Derive section structure from content and visitor progression rather than a template.
• Use visual variety where it improves pacing, but preserve a coherent grid, spacing rhythm, and responsive behavior.
• Avoid repeating the same card row, split section, eyebrow, or decorative device throughout a page.
• Keep navigation and primary actions easy to find. Ensure the initial viewport communicates the primary value and action without forcing rigid word or line counts.
• Define an explicit mobile fallback for every nontrivial desktop composition.

Visual Assets

• Prefer supplied brand assets and real product imagery.
• Use generated or third-party imagery only when available, appropriate, and permitted. Verify licensing, reliability, dimensions, and attribution requirements before inclusion.
• Use placeholders when required assets are unavailable, and tell the user exactly which assets are still needed.
• Do not present invented logos, testimonials, customers, metrics, screenshots, or photography as real.
• A product preview should be a real screenshot, an approved mock clearly labeled as illustrative, or a functioning component preview. Avoid decorative fake interfaces that misrepresent the product.
• Text-led or intentionally image-free design is valid when it serves the brief.

Motion and Interaction

• Every animation should communicate hierarchy, feedback, state, or narrative progression.
• Match motion to the selected intensity and surface mode. One authored moment is often stronger than repeated reveals on every section.
• Respect prefers-reduced-motion and keep the interface understandable and operable without animation.
• Animate performant properties when possible and clean up listeners, observers, timers, and animation contexts.
• Avoid scroll hijacking, perpetual animation, custom pointer physics, or heavy effects unless the interaction is central to the approved concept and remains accessible and performant.

Content and Trust

• Use product-specific, plain language instead of generic marketing filler.
• Keep CTA labels consistent for the same action and distinct for different actions.
• Use only supplied facts. Invented values must be clearly labeled as examples or sample data.
• Do not fabricate social proof, availability, urgency, technical precision, legal claims, or business outcomes.
• Preserve established content voice during redesign unless copy changes are in scope.
• Review every visible string for grammar, clarity, referents, and consistency.

States and Forms

• Include applicable hover, focus, active, disabled, loading, empty, success, and error states.
• Keep labels visible, associate errors and help text correctly, and preserve user input after recoverable failures.
• Make touch targets, keyboard order, focus management, contrast, and status announcements accessible.
• Validate untrusted input on the server; client validation exists to improve feedback.

5. Anti-Template Heuristics

Check for these common defaults and keep them only when they genuinely fit the brief:

• Centered hero over a generic gradient or glow
• Three identical feature cards as the main page structure
• Eyebrows or section numbers above every heading
• Repeated image-and-text zigzags
• Decorative glass, grain, status dots, grid lines, or terminal motifs
• Generic startup names, people, avatars, metrics, and testimonials
• Identical entrance animation on every section
• Cards used where spacing or grouping would communicate hierarchy better
• Decorative version labels, weather strips, scroll instructions, or metadata
• Mismatched icon families, corner-radius systems, palettes, or copy registers
• Long specification lists presented as undifferentiated rows
• Stock imagery or fake product previews that weaken trust

Do not mechanically replace one cliché with another. The correction must follow the design read, content, and audience.

6. Accessibility and Performance Floor

Before completion, verify applicable requirements:

• Semantic structure, heading order, landmarks, labels, alternative text, and keyboard operation
• Visible focus, adequate contrast, text zoom, responsive reflow, and reduced motion
• Stable image dimensions and font loading to avoid layout shift
• Reasonable asset sizes, bundle impact, and above-the-fold loading behavior
• No unbounded animation loops, scroll-state React rerenders, or effects that visibly degrade interaction
• Working controls and links with no placeholder destinations presented as functional
• Loading, failure, and external-resource fallback behavior for important journeys

Use measured or rendered evidence where available. Do not claim accessibility or performance outcomes that were not verified.

7. Redesign Integration

When modifying an existing interface, invoke redesign before applying this skill.

• redesign owns the baseline, preservation boundaries, change classification, approval requirements, and regression checks.
• This skill owns the marketing design read, dial selection, anti-template heuristics, asset strategy, content density, motion choices, and visual preflight.
• Do not reset an established brand or current dial values during a refinement or evolution.
• Apply this skill only to the marketing or brand-heavy surfaces in scope, not adjacent product UI in the same repository.
• If a stylistic preference conflicts with preserved brand, accessibility, functionality, analytics, routes, or user direction, follow redesign precedence and report the conflict.

8. Focused Preflight

Run only the checks the change could plausibly affect, in one bounded visual pass. A narrow change inside an established marketing surface needs only the affected checks, not the full list:

• The design read and dial values match the brief, audience, and surface mode.
• Existing stack, dependencies, brand, routes, analytics, and accessibility behavior were preserved unless changes were approved.
• The page has a coherent type, color, spacing, icon, shape, and motion system.
• The composition follows the content rather than repeating a stock page template.
• Primary value, navigation, and actions are clear at representative desktop and mobile widths.
• Real content and extreme lengths do not overflow, clip, or obscure actions.
• Images, logos, claims, testimonials, and metrics are real, supplied, licensed, or clearly labeled as illustrative.
• Controls include relevant interaction, loading, empty, success, error, and disabled states.
• Keyboard access, focus visibility, contrast, semantics, text zoom, and reduced motion were checked.
• Motion is purposeful, performs acceptably, and cleans up correctly.
• Mobile collapse and touch behavior are explicit for nontrivial layouts.
• Visible copy is truthful, grammatical, specific, and consistent.
• Relevant tests, type checks, linting, build, and browser verification passed or any blockers were reported.

Use frontend-design's bounded visual verification process. Fix observed defects in one batch, perform at most one confirmation pass, and stop unless defects remain or the user requests another iteration.