web-asset-generator
通过自然对话，让 Claude 自动生成网站图标和社交媒体图片。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：web-asset-generator。 它的用途是：通过自然对话，让 Claude 自动生成网站图标和社交媒体图片。 完整的 Skill 内容见：https://321skill.com/skills/web-asset-generator/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“为我的‘极客咖啡’博客创建一个带咖啡杯表情的网站图标和 Twitter 分享卡片图片。” 它会先询问你的品牌主色，然后自动从表情符号库中挑选合适的咖啡相关图标供你选择，接着生成从 16x16 到 512x512 的所有尺寸图标、favicon.ico 以及尺寸为 1200x675 的 Twitter 卡片图片，并验证文件合规性。
介绍
Web Asset Generator 是一个 Claude Code Skill，它解决了开发者和内容创作者在构建网站或应用时，手动制作各种尺寸和格式的图标（如网站图标、应用图标、社交媒体分享图）的繁琐问题。用户只需用自然语言向 Claude 描述需求，例如“为我的咖啡店网站创建一个网站图标”，该技能便会自动调用，引导用户完成设计，并生成一套生产就绪的图片文件。
使用方式非常直观。安装该技能后，在 Claude Code 中直接对话即可。Claude 会询问设计偏好（如使用 Logo、文字还是表情符号），然后自动生成从 16x16 到 512x512 的各种尺寸图标、favicon.ico 文件，以及适用于 Facebook、Twitter 等平台的 Open Graph 图片。整个过程无需用户手动操作图像编辑软件。
这个技能非常适合前端开发者、独立产品开发者、博主以及任何需要为自己的网站或应用快速生成专业级视觉资产的人。它尤其适合那些不擅长设计或希望将重复性设计任务自动化，以专注于核心开发的用户。
与同类图标生成工具或在线服务相比，它的核心区别在于深度集成在 Claude 的对话工作流中。它不是孤立的工具，而是 Claude 智能体的一部分，能够理解上下文、提供智能建议（如推荐相关表情符号）、自动检测项目框架（如 Next.js, Astro），并可直接将生成的代码片段插入到用户的项目文件中，实现了从创意到部署的无缝衔接。
核心特点
深度集成于 Claude 对话流，能根据上下文智能推荐设计元素（如表情符号），并自动检测用户项目框架以提供针对性的代码集成方案，而非仅仅生成图片文件。
注意事项
不适合需要高度定制化、复杂图层或高级图形特效的设计场景，主要面向基于 Logo、文字或表情符号的标准化图标生成。
常见问题
需要会编程或设计吗？
完全不需要，只需用自然语言向 Claude 描述你的想法即可。
支持哪些图片格式和尺寸？
支持生成 PNG、ICO 格式，覆盖从浏览器网站图标到社交媒体大图的全套标准尺寸。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/web-asset-generator/raw/index.md 读取 web-asset-generator 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/web-asset-generator/raw/index.md（查看排版版本）