# Taste > Marketing-design specialist for creating or meaningfully changing the visual design of landing pages, portfolios, editorial pages, and other brand-heavy web surfaces, or when the user explicitly asks for stronger creative direction. Use with `frontend-design`; when modifying an existing surface, also use `redesign`. Do not use for dashboards, admin tools, dense product UI, bug fixes, copy or wiring changes that keep the current design, or nonvisual frontend work. - Skill: `jrudman25/taste` (Agent Skill) - Install (CLI): `npx skillmds@latest add jrudman25/taste` - Raw SKILL.md: https://api.skillmd.com/api/skills/jrudman25/taste/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - Author: jrudman25 (https://skillmd.com/u/jrudman25) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/jrudman25/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.