imagegen-frontend-web：网站视觉参考生成器
为前端网站生成高品质、可落地实施的分区视觉参考图，杜绝AI风格化“垃圾”输出。
该技能仅基于提示文本生成图像，不请求系统权限、不外泄数据，未发现恶意行为或过度权限。MIT许可证明确，发布者未经验证但不构成扣分。扣分原因：未包含用户确认机制（如输出图像前要求确认），且对生成图像的使用范围（如版权、敏感内容）未作说明。
技能指令自洽，明确要求每个section单独生成一张横图。但静态审查无法执行验证，且未提供测试用例或CI来证明关键路径可复现。扣分原因：缺少可执行验证证据，对异常输入（如用户要求合图）的处理说明不充分。
技能明确面向目标网页、营销站点等场景，并给出了不同风格映射和默认section数量，边界清晰。但未说明在无法访问海外服务时的降级策略，且技能依赖的图像生成模型可能需要海外网络。扣分原因：对中国大陆网络可达性未作说明。
SKILL.md结构清晰，分层提供了硬性规则、配置、组件指导等。仓库有README和MIT许可证，但该技能文件无版本号或变更日志（虽然仓库有CHANGELOG）。扣分原因：技能文件自身缺少版本信息，维护责任未明确。
技能提供了详细的防AI味规则和设计系统参考，理论上能生成高质量前端参考图。但静态审查无法验证输出质量，且未提供实际生成样例或用户反馈。扣分原因：价值声明无法在静态审查中验证，比较证据不足。
仓库无CI工作流或测试套件，技能为提示文本，无法通过自动化测试验证。README中有示例图片，但该技能本身没有独立的可复现证据。扣分原因：仅有作者声明，无独立佐证。
- 生成图像可能涉及版权或敏感内容，使用时应确保合规。
- 该技能依赖海外图像生成服务，在中国大陆可能无法直接使用，需考虑备选方案。
- 作者未验证，安装前请自行评估风险。
这个 Skill 能做什么，适合哪些场景？
这是一个面向 Agent 的图像生成技能，专门产出“网站视觉参考图”。它要求每个页面分区单独生成一张横向参考图（例如8个分区就生成8张图），并统一了多个可调参数（设计变化度、视觉密度、艺术指导等）来避免常见的AI模板化设计。技能内置了大量的反AI通病规则，如禁止滥用左文右图布局、统一配色、强制多样化的构图和背景模式。它适合用于落地页、营销网站和产品页面等场景的设计参考。
该技能读取用户的页面需求（如“落地页”或“8个分区”），自动确定分区数量，然后为每个分区生成一张独立的横向图像（默认落地页为6张，整个网站为8张）。它会依据预设的基线配置（如设计变化度=8、视觉密度=4、艺术指导=8等）在内部选择主题范式、背景特色、字体风格、英雄布局、组合锚点等，并执行严格的输出规则——每个分区一张图、横向、统一品牌世界。它不写代码，只输出参考图。
- 设计师或开发者需要为落地页快速生成高质量的分区视觉参考，可在提示中直接说“生成一个6分区的落地页”。
- 使用 ChatGPT Images 或 Codex 图像模式时，可将该技能的 SKILL.md 粘贴进去并请求“英雄”“信任条”等多张参考图。
- 在“图像转代码”流程中，该技能先产出视觉参考，再交给编码 Agent（如 Codex、Cursor、Claude Code）实现前端。
- 需要为营销网站或产品页面制作一套风格统一、避免千篇一律AI设计的参考图时。
这个 Skill 有哪些优点和局限？
- 强制的“一区一图”输出规则，避免将多分区塞进一张图。
- 内置大量反AI模板规则，显著减少千篇一律的设计。
- 提供具体可调参数（如视觉密度、艺术指导），可适配不同设计风格。
- 强调可实施性，生成图可作为前端实现的清晰参考。
- 开源且遵循 MIT 许可证。
- 技能仅输出图像参考，不生成任何代码。
- 实际生成效果依赖底层图像模型的能力，可能无法完全达到Awwwards级别。
- 未附测试或验证机制，无法保证所有提示词都能完美执行。
- 技能内部规则较多，可能需要一定学习成本才能完全掌握。
如何安装这个 Skill？
该技能可通过仓库的 npx skills add 命令安装（安装时指定 --skill imagegen-frontend-web），也可以直接从仓库复制 skills/imagegen-frontend-web/SKILL.md 到项目中，或将其内容粘贴到支持图像生成的对话中。具体复制到指定文件夹或生效方式请参考仓库的安装说明。
如何使用这个 Skill？
将技能内容附加或粘贴到支持图像生成的对话中（如 ChatGPT Images、Codex），然后以自然语言发出请求，例如：“生成一个8分区的营销网站，每分区一张图”，或“为AI创业公司设计一个英雄分区”。技能会自动决定分区数量并生成对应的横向参考图。使用后可将图片交给编码 Agent 实现。
这个 Skill 与同类方案有什么区别？
仓库内还有 imagegen-frontend-mobile（移动端）和 brandkit（品牌套件）两个图像生成技能，分别针对移动端屏幕和品牌识别，而此技能专门针对网页前端。