Community图像github.com

kostja94/hero生成器

当用户想要设计、优化或审查英雄区域（首屏上方的主要视觉区域）时使用。也适用于用户提及“英雄区域”、“首屏”、“首屏内容”、“登陆页英雄”、“主横幅”、“横幅区域”、“第一屏”、“英雄区域设计”、“英雄转化”、“分割布局英雄”、“居中英雄”或“英雄对齐”时。对于首页，请使用首页生成器。

hero生成器 是什么？

该技能专为开发者和AI代理用户设计，用于高效创建、优化和审计网站的英雄区域（即首屏上方的主要视觉区域）。它覆盖了从概念设计到性能优化的全流程，支持多种布局模式（如居中、分割布局、全屏背景等），并内置了转化率最佳实践指南。此技能适用于Claude Code、Cursor、Codex等主流AI代理平台，通过解析用户输入的自然语言描述（如“英雄区域”、“首屏”、“主横幅”等关键词），生成相应的HTML/CSS/JS代码片段或设计建议。对于首页场景，技能会推荐使用专用生成器以获得更精准的结果。其核心价值在于帮助用户快速制作高转化率的首屏视觉方案，避免常见的设计陷阱，并确保响应式与无障碍访问。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kostja94/marketing-skills/tree/main/skills/hero-generator

Installed? Explore more 图像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

查看原文→浏览所有技能

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

文档

hero生成器 是做什么的？

当用户想要设计、优化或审查英雄区域（首屏上方的主要视觉区域）时使用。也适用于用户提及“英雄区域”、“首屏”、“首屏内容”、“登陆页英雄”、“主横幅”、“横幅区域”、“第一屏”、“英雄区域设计”、“英雄转化”、“分割布局英雄”、“居中英雄”或“英雄对齐”时。对于首页，请使用首页生成器。

概述

本技能专门处理与网站“英雄区域”相关的所有任务——即用户访问网页时首先看到的首屏区域。它可用于设计、优化或审计英雄区域的性能、可访问性及转化率。

主要功能

  • 设计英雄区域：根据用户需求生成居中、分割布局、全屏背景等多种类型的英雄区域代码。
  • 优化英雄区域：分析现有英雄区域的加载性能、响应式布局、无障碍支持，并提供改进建议。
  • 审计英雄区域：检查英雄区域是否遵循最佳实践，如正确的文档结构、图片优化、CTA按钮放置等。

如何使用

  1. 描述你想要的英雄区域类型（例如：“居中带背景图片的英雄”、“分割布局左侧文本右侧图片”）。
  2. 提供必要的细节：期望的宽度/高度、颜色方案、CTA按钮文本、背景素材（如有）。
  3. 技能将生成完整的HTML、CSS及可选的JavaScript代码，并附带使用说明。

触发关键词

当用户输入以下任意词汇时，本技能将被触发：“hero”、“hero section”、“hero area”、“above the fold”、“above the fold content”、“landing hero”、“main banner”、“banner section”、“first fold”、“hero section design”、“hero conversion”、“split layout hero”、“centered hero”、“hero alignment”。

与首页生成器的关系

如果用户明确指定“首页”或“主页”，请使用homepage-generator技能，因为它包含更完整的页面结构。英雄区域生成器专注于单一块区域的设计，适合作为更大设计流程的一部分。

示例

用户输入：我需要一个居中布局的英雄区域，深色背景，带大标题和‘立即注册’按钮。

技能输出：生成响应式英雄区域的HTML结构，包含深色背景、居中的主标题、副标题文本，以及居中的‘立即注册’CTA按钮。同时提供CSS样式和媒体查询确保移动端适配。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

kostja94/affiliate-marketing

When the user wants to plan, implement, or optimize affiliate marketing strategy. Also use when the user mentions "affiliate marketing," "affiliate program strategy," "CPS model," "affiliate recruitment," "commission structure," "affiliate partners," "affiliate network," "affiliate tracking," "affiliate commission," or "partner marketing." For affiliate page, use affiliate-page-generator.

kostja94/analytics-tracking

When the user wants to set up, audit, or optimize analytics tracking (GA4, events, conversions). Also use when the user mentions "Google Analytics," "GA4," "event tracking," "conversions," "attribution model," "gtag," "data layer," "GA4 setup," "conversion tracking," "event setup," "User ID tracking," or "CTA attribution." For traffic insights, use traffic-analysis.

kostja94/article-content

When the user wants to write, generate, or create article body content—blog post body, long-form content, how-to guide, listicle. Also use when the user mentions "write article," "article content," "blog post content," "article body," "long-form content creation," "generate article," "article draft," "how-to guide content," "listicle content," "information gain," or "content density." For single post page structure, schema, and SEO metadata, use article-page-generator. For blog index/listing page, use blog-page-generator. For short ad, landing, or email copy, use copywriting.

kostja94/branding

When the user wants to define, audit, or apply brand strategy—purpose, values, positioning, storytelling, voice, narrative (not only visuals). Also use when the user mentions "brand strategy," "brand story," "brand storytelling," "brand voice," "brand identity," "brand guidelines," "brand purpose," "brand values," "origin story," "brand narrative," "brand personality," "brand archetype," "slide deck branding," "PPT brand colors," or "document style guide." For typography, colors, design tokens, and frontend visuals, use brand-visual-generator.

kostja94/brand-visual-generator

When the user wants to define, audit, or apply visual identity (typography, colors, spacing, design tokens, frontend aesthetics). Also use when the user mentions "brand style guide," "visual identity," "design system," "typography," "color palette," "brand guidelines," "AI brand aesthetics," "brand colors," "font choices," "spacing system," "design tokens," "motion," "distinctive design," "frontend aesthetics," "PowerPoint theme," "Google Slides brand," or "slide master colors." For brand story, positioning, and voice, use branding.

kostja94/carousel

When the user wants to design, optimize, or audit carousel/slider layouts for content display. Also use when the user mentions "carousel," "slider," "carousel layout," "testimonial carousel," "gallery carousel," "quote carousel," "image slider," or "carousel accessibility." For hero-area patterns, use hero-generator.

kostja94/competitor-research

When the user wants to analyze competitors for SEO, content, backlinks, or positioning. Also use when the user mentions "competitor analysis," "competitor research," "competitor keywords," "competitor backlinks," "link gap," "content gap," "competitor content," "competitive analysis," or "competitor comparison." For content roadmap, use content-strategy.

kostja94/content-optimization

When the user wants to optimize content for SEO—word count, H2 keywords, keyword density, multimedia, tables, lists. Also use when the user mentions "content length," "word count," "keyword stuffing," "H2 keywords," "keyword density," "tables," "bullet points," or "content structure." For keywords, use keyword-research.

kostja94/content-strategy

When the user wants to plan content for SEO, create content calendar, or build topic clusters. Also use when the user mentions "content strategy," "content plan," "topic clusters," "pillar content," "pillar page," "cluster articles," "editorial calendar," "content hub," "content planning," "content clusters," "topic cluster strategy," "content strategy for SEO," or "content calendar." For editorial mix, use content-marketing.

kostja94/conversion-optimization

When the user wants to improve conversion rates, run A/B tests, optimize funnels, or reduce friction. Also use when the user mentions "CRO," "conversion rate optimization," "A/B test," "split test," "funnel optimization," "checkout optimization," "form optimization," or "conversion funnel." For pricing psychology, use pricing-strategy.

kostja94/copywriting

When the user wants to write or optimize short-form marketing copy—headlines, CTAs, ad copy, landing page copy, email copy. Also use when the user mentions "copywriting," "headline," "CTA copy," "ad copy," "landing page copy," "sales copy," "conversion copy," "PAS," "AIDA," "BAB," "copy formula," or "differentiation." For long-form article bodies (blog posts, guides), use article-content.

kostja94/email-marketing

When the user wants to plan email marketing, EDM, newsletter strategy, or email deliverability. Also use when the user mentions "email marketing," "EDM," "newsletter," "SPF," "DKIM," "DMARC," "email deliverability," "email content strategy," "email campaigns," "newsletter strategy," "email automation," or "cold email." For signup UI, use newsletter-signup-generator.

kostja94/entity-seo

When the user wants to optimize for entity recognition, Knowledge Graph, or entity-based SEO. Also use when the user mentions "entity SEO," "entity optimization," "Knowledge Graph," "Knowledge Panel," "entity signals," "brand entity," "entity linking," "entity relationships," or "entity-first content." For structured data, use schema-markup.

kostja94/generative-engine-optimization

When the user wants to optimize for AI search visibility (ChatGPT, Claude, Perplexity, AI Overviews). Also use when the user mentions "GEO," "AEO," "generative engine optimization," "AI search visibility," "LLM optimization," "GitHub GEO," "Grokipedia," "optimize for ChatGPT," "AI Overviews," "Bing Copilot," "Yandex AI," "Perplexity optimization," "GEO strategy," or "AI search optimization." For third-party publishing strategy (which platforms to use), use parasite-seo. For GitHub repos, README, and Awesome lists, use github. For Medium.com only, use medium-posts. For Grokipedia edits, use grokipedia-recommendations. For traditional Google SERP strategy, use seo-strategy.

kostja94/google-ads

When the user wants to set up, optimize, or manage Google Ads campaigns. Also use when the user mentions "Google Ads," "Google Search Ads," "PPC," "SEM," "PMF testing with ads," "test product-market fit," "Responsive Search Ads," "RSA," "Performance Max," "Quality Score," "keyword bidding," or "Google Display/YouTube ads." For paid mix, use paid-ads-strategy.

kostja94/google-search-console

When the user wants to analyze Google Search Console data, use the GSC API, or interpret search performance. Also use when the user mentions "GSC," "Search Console," "indexing report," "Core Web Vitals," "Enhancements," "Insights report," "search performance," "search queries," "search performance report," "URL inspection," "impressions," "CTR," "average position," "index coverage," "GSC data analysis," "Search Console API," or "searchanalytics.query." When the user wants to rewrite title tags (not only report on them), use title-tag. For meta description rewrites, use meta-description.

kostja94/grokipedia-recommendations

When the user wants to add recommendations, links, or content to Grokipedia. Also use when the user mentions "Grokipedia," "GEO wiki," "AI encyclopedia," "suggest Grokipedia article," "Grokipedia citation," "Grokipedia listing," "AI search citation," "GEO visibility," or "Grokipedia optimization." For multi-platform parasite SEO strategy, use parasite-seo. For broad AI search visibility, use generative-engine-optimization.

kostja94/growth-funnel

When the user wants to plan growth using the AARRR framework, diagnose growth bottlenecks, or map actions across the customer lifecycle. Also use when the user mentions "growth funnel," "AARRR," "pirate metrics," "acquisition activation retention," "customer lifecycle metrics," or "growth framework." For retention tactics, use retention-strategy.

kostja94/influencer-marketing

When the user wants to plan, implement, or optimize influencer marketing strategy. Also use when the user mentions "influencer marketing," "KOL," "creator partnership," "brand ambassador," "sponsored content," "influencer campaign," "micro-influencer," "influencer outreach," "creator collaboration," or "influencer deal." For creator programs, use creator-program.

kostja94/keyword-research

When the user wants to research keywords, find target keywords, or analyze search intent. Also use when the user mentions "keyword research," "keyword tool," "target keywords," "search volume," "search intent," "keyword difficulty," "topical map," "keyword clustering," "People Also Ask," "Google autocomplete," "autocomplete keywords," or "alphabet method." For clusters, use content-strategy.

相关技能

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More 图像 skills