Agent Skills
返回列表
💻

AI生图Web前端

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md 安装 @user_3c6cb52e/imagegen-frontend-web-3ajl。

技能介绍

解决的问题

在构建落地页或完整网站模板时，开发者常需要为每个板块生成对应的配图。但当模型生成整页截图时，各板块之间往往难以保持清晰和独立。单张高图会导致细节模糊、无法单独编辑或复用，修改时必须重新生成整页，沟通和返工成本很高。

技能如何工作

@user_3c6cb52e/imagegen-frontend-web-3ajl 强制执行一条严格的输出规则：

  • 每个板块生成一张独立的水平图像，绝不合并
  • 支持指定数量：1/4/8/12 个板块对应相应张数
  • 未指定数量时，根据上下文给出合理默认值：

- “landing page” → 6 张
- “full website template” → 8 张

  • 每次图像调用只针对一个板块，并标注进度
  • 若模型无法并发渲染，则按顺序逐张输出，直到所有板块完成

这样每张图都是独立、可复用的资产，而不是一张难以拆分的拼图。

适用边界与注意点

  • 本技能面向板块级图像生成，不适用于整页一次性渲染
  • 输出质量依赖底层生图模型，复杂排版可能需要额外调整
  • 生成结果仍需按实际前端布局做后续裁剪或适配
  • 建议在项目早期明确板块数量与命名约定，获得一致输出体验

使用场景

  • 构建落地页时，为每个板块生成独立水平配图，避免整页截图模糊
  • 开发完整网站模板，需要8个不同板块的单独图像用于不同页面区域
  • 为客户演示设计稿时，按12个板块分别生成图片，便于逐个讲解调整
  • 搭建营销活动页面，根据6个功能区块生成对应配图，确保视觉独立性

适合人员

  • 前端开发工程师，需要在Web项目中快速获取分板块的高质量配图，用于组件化开发
  • UI设计师，为不同设计稿的板块生成独立图像，方便后续在设计工具中调整使用
  • 独立开发者，构建产品落地页时，按6个板块生成连续的水平图，确保视觉一致性
  • 产品经理，在规划完整网站模板时，通过8个板块的独立图像直观展示整体结构