What is it?
一个综合工具，用于从单一来源生成专业的网页资源 - 无论是 logo 图像、文本标语还是 emoji。创建完整的 favicon 集、PWA 应用图标以及所有主要平台(Facebook、Twitter、LinkedIn)的社交媒体 Open Graph 图像。将单个输入转换为您的网站需要的所有图标和图像，带有内置验证、可访问性检查和特定于框架的集成代码。
How to use it?
该技能使用 Claude 的交互式可视 UI 实现简化的工作流程:
-
选择资源类型 - 为您需要的内容提供可视选择器:仅 favicon、仅应用图标、仅社交图像或全部
-
提供来源 - 选择您的输入方法:
- 上传现有 logo/图像
- 使用自定义颜色从文本/标语生成
- 使用精选的 emoji 建议(按行业组织的 60 多个)
-
生成和验证 - 技能自动:
- 生成所有所需尺寸(16×16 到 512×512)
- 验证文件大小和尺寸
- 检查可访问性的 WCAG 对比度合规性
- 使用适当的配置创建 PWA manifest.json
-
框架集成 - 自动检测您的框架(Next.js、Astro 等)并提供将 HTML 标签添加到代码中的选项
-
测试 - 提供验证器链接(realfavicongenerator.net 等)用于最终验证
无需手动图像编辑 - 从单个输入到带有验证和集成代码的完整资源集。
Key Features
- 完整的资源生成 - Favicons(16×16 到 96×96)、应用图标(180×180 到 512×512)、社交图像(1200×630、1200×675)
- 多种输入方法 - 从图像(logos)、从文本(带自定义背景)、从 emojis(60 多个精选建议)
- 交互式可视 UI - 使用 Claude 的 AskUserQuestion 实现清晰快速选择的基于问题的工作流程
- 全面验证 - 文件大小、尺寸、格式、可访问性的 WCAG 对比度合规性
- PWA manifest 生成 - 使用图标、颜色和应用设置自动生成 manifest.json
- 框架自动检测 - 检测 Next.js、Astro 等并提供特定于框架的集成代码
- Emoji 库 - 按行业组织的 60 多个精选 emojis(技术、食品、商业、创意、数据)
- 测试验证器链接 - 提供 URL 以在实际场景中测试您生成的资源
Related Skills
More from DesignFrontend Design
The official Claude frontend design skill by Anthropic. Guides Claude Code to create distinctive, production-grade frontend interfaces with high design quality, covering typography, color, motion, spatial composition, and UI design patterns
Architecture Diagram Creator
Creates comprehensive HTML architecture diagrams with SVG visualizations showing business context, data flows, processing pipelines, and system architecture
Flowchart Creator
Creates HTML flowcharts and process diagrams with SVG-based nodes, decision diamonds, connecting arrows, and optional swimlanes with color-coded types