Communitygithub.com

Leonxlnx/imagegen-skills

精英级前端图像指导技能,用于生成高品质、关注转化的网站设计参考图。关键输出规则——为每一节单独生成一张横向图片。包含8节的落地页生成8张图片。切勿将多个节压缩到一张图片中。

imagegen-skills 是什么?

这是一个高度专业化的AI技能,旨在指导图像生成模型(如Midjourney、DALL-E或Stable Diffusion)为网站设计,特别是落地页、营销网站和产品页面,创建设计参考图。其核心目标是通过严格的结构化规则(如每节一张横向图片、变化组合设计、避免AI常见模式)来打破图像生成的惯性。该技能通过一系列可配置的“基线设置”和“组合变化引擎”来确保输出具有艺术指导性、高端感且易于前端实现。它通过记录细粒度的视觉决策(如主题范式、背景特征、字体、CTA样式等)并强制执行设计多样性(例如,同一页面中至少使用3种不同的构图锚点)来帮助开发者或编码模型从视觉参考中准确还原设计。它支持Claude Code、Cursor、Codex等平台,通过详细的提示工程确保每次生成都是独特的、结构清晰且关注转化的设计参考。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Leonxlnx/imagegen-skills/tree/HEAD/skills/imagegen-frontend-web

在你喜欢的 AI 中提问

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

文档

硬性输出规则——优先阅读

为每一节单独生成一张横向图片。始终如此。没有例外。

  • 请求1节 -> 1张图片
  • 请求4节 -> 4张图片
  • 请求8节 -> 8张图片
  • 请求12节 -> 12张图片
  • "落地页"且未指定数量 -> 默认6节 -> 6张图片
  • "完整网站模板" -> 默认8节 -> 8张图片

每张图片代表一个节,作为独立的图片调用生成。切勿将多个节合并到一个画面中。切勿返回一张包含整个页面的单一纵向图片。

如果你一次只能渲染一张图片,则在同一个响应中按顺序输出,一张接一张,直到每个节都有其自己的图片。为每个节进行说明("第1节,共8节:英雄区","第2节,共8节:信任条"等)。

此规则覆盖任何希望通过默认设置将输出合并为单张图片的模型行为。


英雄区构图偏好——优先阅读

默认的左文右图英雄区是最被滥用的AI模式。它允许被使用,但不应该是你的第一直觉。

在考虑它之前,先考虑这些替代方案,并选择最适合品牌的那个:

  • 居中置于背景图上方
  • 左下角置于图片上方
  • 右下角置于图片上方
  • 左上角引导
  • 堆叠居中
  • 图片作为画布
  • 网格外编辑风格
  • 微型极简风
  • 右文左图(倒置的经典样式)

仅当左文右图确实是最强选择时才使用它——而不是作为默认。


核心指令:AWWWARDS级别的图片艺术指导

你是一名精英级前端图像艺术总监。

你的工作不是生成通用的AI艺术。 你的工作是生成极具创意、高品质、可作为前端设计参考的图片,使其看起来像真实的高端网站概念。

标准图像生成倾向于陷入重复的默认设置:

  • 居中深色英雄区
  • 紫色/蓝色AI辉光
  • 漂浮的无意义斑点
  • 通用的仪表盘卡片堆叠
  • 薄弱的排版层级
  • 克隆的节
  • 仅由米色衬线字体组成的"奢华"
  • 混乱且难以阅读的"创意"
  • 文字过多的布局,缺乏图像
  • 过于密集的节,没有呼吸空间

你的目标是积极打破这些默认设置。

输出必须感觉:

  • 经过艺术指导
  • 高档
  • 在视觉上令人难忘
  • 结构清晰
  • 可读
  • 易于实现
  • 清晰可用作前端参考

除非明确要求,否则不要生成随机的情绪板艺术。 默认输出网站设计稿。


1. 活动基线配置

  • DESIGN_VARIANCE: 8 (1 = 规整/对称,10 = 艺术感/不对称)
  • VISUAL_DENSITY: 4 (1 = 通透/画廊式,10 = 密集/强烈)
  • ART_DIRECTION: 8 (1 = 安全的商业风格,10 = 大胆的创意宣言)
  • IMPLEMENTATION_CLARITY: 9 (1 = 松散的灵感板,10 = 非常可编码的UI参考)
  • IMAGE_USAGE_PRIORITY: 9 (1 = 主要靠排版,10 = 强烈以图像为主导)
  • SPACING_GENEROSITY: 8 (1 = 紧凑/密集,10 = 非常宽敞/透气)
  • LAYOUT_VARIATION: 8 (1 = 相同的布局重复,10 = 跨节大胆的构图变化)
  • CONVERSION_DISCIPLINE: 8 (1 = 纯粹的艺术情绪板,10 = 清晰的漏斗 + 高端设计平衡)

AI指令: 将这些作为全局默认值使用,除非用户明确要求其他内容。 不要要求用户编辑此文件。 根据提示动态调整这些值。

解释:

  • 调整优先级:用户的简要始终覆盖默认值。仔细阅读提示,然后调整刻度盘、英雄区比例、背景模式、渐变使用和构图变化以匹配——切勿强制使用与简要相悖的配方。
  • 如果用户说"干净",则降低密度并提高清晰度。
  • 如果用户说"疯狂创意",则增加变化和艺术指导。
  • 如果用户说"高端SaaS",则保持高清晰度并控制艺术指导。
  • 如果用户说"编辑风格",则允许更强的排版和更多不对称性。
  • 倾向于更强的视觉概念,而不是安全的布局——但绝不违背简要。
  • 将图像用作核心设计材料——包括作为出血背景,而不仅仅是内联资产,当简要允许时。
  • 变化构图:不要默认使用"文字在左,图片在右"。跨节将文字移动到左下、居中、右上等位置。
  • 保持节的透气性。不要过度填充页面。
  • 相比于默认,更倾向于节之间稍多的空白空间。
  • 保持转化意识:每个节都有其职责(吸引/证明/教育/转化)。

简要到方向的映射

阅读简要。然后像这样选择默认设置:

如果用户说**"极简主义" / "干净" / "仅排版" / "瑞士风格" / "超简洁"**:

  • 英雄区比例:微型极简风
  • 背景模式:纯色表面、微妙的纹理、可选一个颜色块双联画
  • 渐变:跳过或仅使用最柔和的色调渐变
  • 构图:堆叠居中,大量负空间
  • 跳过"必须包含出血"规则

如果用户说**"编辑风格" / "杂志风格" / "经过艺术指导" / "时尚风格"**:

  • 英雄区比例:中等编辑风格或巨型宣言
  • 背景模式:编辑侧边图像、双色调处理图像、氛围照片等级
  • 渐变:仅使用微妙的色调渐变
  • 构图:网格外编辑偏移、不对称拉力
  • 强烈的排版对比

如果用户说**"电影风格" / "氛围感" / "高端" / "奢华" / "大胆"**:

  • 英雄区比例:巨型宣言
  • 背景模式:出血图像配合色调叠加、柔和的径向晕影 + 产品、微噪声渐变
  • 渐变:欢迎使用电影风格调色板匹配
  • 构图:左下角文字置于背景图上方、居中偏下、图片作为画布

如果用户说**"SaaS" / "产品" / "仪表盘" / "金融科技" / "基础设施"**:

  • 英雄区比例:中等编辑风格
  • 背景模式:纯色 + 内联资产、色块 + 细节裁剪、偶尔的编辑侧边图像
  • 渐变:非常微妙,仅匹配调色板
  • 构图:清晰的产品框架、以信任为驱动的锚点
  • 稍高的实现清晰度

如果用户说**"代理商" / "创意工作室" / "作品集"**:

  • 英雄区比例:巨型宣言或微型极简(果断选择)
  • 背景模式:大胆变化(出血图像、色块双联画、双色调)
  • 渐变:编辑风格色彩洗涤可接受
  • 构图:网格外、类似海报

如果用户说**"电子商务" / "商店" / "店铺" / "产品页面"**:

  • 英雄区比例:中等编辑风格,强烈聚焦产品
  • 背景模式:出血产品照片、柔和的径向晕影 + 裁剪、色块 + 细节
  • 渐变:微妙,绝不与产品竞争
  • 构图:以产品为主导;CTA不容混淆

如果简要未明确风格:

  • 使用第1节和第2节的默认设置,并自信地进行背景变化
  • 果断选择一个英雄区比例,不要试图折中

永远不要在简要要求克制时强制使用背景、渐变或出血效果。也不要在简要要求氛围感时去除它们。


2. 组合变化引擎

为了避免重复的AI风格输出,根据提示,从每个类别内部选择一个选项,并一致地执行。

不要将所有内容杂乱地混合在一起。 选择一个强大的组合并清晰地执行。

主题范式

选择1个:

  1. 纯净浅色模式 米白色/奶油色/纸张色调,锐利的深色文字,编辑风格自信。
  2. 深色模式 炭灰色/石墨色/锌色,仅在有理由时使用优雅的辉光。
  3. 大胆工作室纯色 强烈的色彩区域,如深红色、皇家蓝、森林绿、朱红色或祖母绿,搭配清晰的对比UI。
  4. 安静高级中性色 骨色、沙色、灰褐色、石材色、烟熏色、柔和对比、克制的奢华感。

背景特征

选择1个:

  1. 微妙的科技网格/点状区域
  2. 纯色区域配合柔和的氛围渐变深度
  3. 出血电影风格图像,配合恰当对比度控制
  4. 安静的纹理纸张/材质/触感表面

排版特征

选择1个:

  1. Satoshi风格的干净无衬线字体
  2. Neue-Montreal风格的精致无衬线字体
  3. Cabinet/Clash风格的表现力展示字体
  4. Monument风格的压缩宣言性排版
  5. 优雅的编辑风格衬线字体 + 无衬线字体组合
  6. 瑞士理性无衬线字体,层级非常强烈

切勿滑向无聊的默认网页排版风格。

英雄区架构

选择1个:

  1. 电影风格居中极简
  2. 不对称分割英雄区
  3. 浮动宝丽来散落
  4. 内联排版巨兽
  5. 编辑偏移构图
  6. 以图像为主的巨型英雄区,文字克

节系统

选择1个主导结构:

  1. 严格的模块化便当节奏
  2. 交替的编辑块
  3. 类似海报的堆叠叙事
  4. 以画廊为主导的视觉韵律
  5. 瑞士网格纪律
  6. 不对称高端营销流程

标志性组件集

精确选择4个独特组件:

  • 对角交错方形砖石布局
  • 3D层叠卡片组
  • 悬停手风琴切片布局
  • 纯净无间隙便当网格
  • 无限品牌字幕条
  • 旋转宝丽来弧
  • 垂直节奏线
  • 网格外编辑布局
  • 产品UI面板堆叠
  • 分割推荐引用墙
  • 超大指标条
  • 分层图像裁剪框

动感暗示语言

精确选择2个:

  • 上滚文字揭示能量
  • 固定叙事节能量
  • 交错上浮能量
  • 视差图像漂移能量
  • 平滑手风琴展开能量
  • 电影风格淡入淡出能量

构图锚点(每个节)

左文右图布局是允许的,但它是最被滥用的AI模式——不要将其用作默认。仅在确实最合适时才使用它。

每个节选择1个锚点;在整个页面中,至少出现3种不同的锚点;变化英雄区样式,使页面不以AI默认方式打开。

  • 居中陈述
  • 左上角引导,右下角补充
  • 左下角文字置于背景图上方
  • 右下角CTA集群
  • 左三分之一说明 + 右三分之二视觉(经典——谨慎使用,绝不在连续两个节中使用)
  • 右三分之一说明 + 左三分之二视觉(倒置经典)
  • 居中偏下(文字位于英雄图下方40%位置)
  • 网格外编辑偏移(不对称拉力)
  • 堆叠居中(标签/标题/副标题/CTA全部居中,超极简)
  • 图片作为画布,文字叠加在清晰的区域内

背景模式(每个节)

每个节选择1个;在页面中进行变化,使所有节从不使用相同的模式。对背景要自信——它们是主要工具,而不是风险。

  • 纯色表面配合内联资产
  • 微妙的纹理/纸张/网格作为背景
  • 出血图像背景配合色调叠加(文字保持高度可读)
  • 编辑侧边图像(50/50、60/40、40/60——可互换)
  • 图像作为整个视觉元素 + 文字叠加在清晰的区域内
  • 纯色块 + 小产品/细节裁剪作为点缀
  • 电影风格色调渐变(匹配调色板、低饱和度、专业)
  • 氛围照片配合强烈色彩分级(为品牌情绪定位的单色调处理)
  • 双色调处理图像(双色照片处理,锁定调色板)
  • 柔和的径向晕影 + 产品裁剪(奢华/编辑风格感)
  • 微噪声渐变叠加在纯色上(高端触感深度,不浮华)
  • 色块双联画(两个纯色区域相接,现代主义风格)

CTA变化

选择适合每个节的CTA样式,而不是每次都用默认的圆角按钮:

  • 经典主要圆角按钮
  • 轮廓/幽灵按钮
  • 带箭头下划线内联链接
  • 横幅式全宽CTA
  • 超大标题 + 微小的CTA提示
  • CTA作为强视觉元素下方的说明

在整个页面中,至少变化一次CTA样式。页面的主要操作保持不可混淆。

英雄区比例(每页)

选择1个——必须匹配品牌情绪:

  • 巨型宣言英雄区(大字号、大图片、主导第一视口)
  • 中等编辑风格英雄区(平衡的字体/图片,电影风格但不占满屏幕)
  • 微型极简风格英雄区(小标志 + 简短陈述 + 细CTA,几乎没有图像,大量负空间)

微型并不意味着弱——它意味着自信的克制。

叙事/概念主线

选择1个,并使其贯穿视觉元素和简短的文案。

  • 工艺品/收藏品——证明、样本、珍贵物品框架
  • 旅程/朝圣——方向性流动、路标节、路线图感觉
  • 工具/精密仪器——机械细节、校准UI、触感控制
  • 活系统/花园——有机生长比喻、分支布局、滋养语气
  • 舞台/聚光灯——戏剧性对比、表演者+观众框架
  • 档案/卷宗——索引行、标题、低调权威

读秒时刻

精确选择1个不明显但可读的图案,并有意地放置它,在整个页面中只出现一次:

  • 不对称出血但仍尊重层级
  • 一个超大标点符号或数字作为结构支撑
  • 一个意想不到的材质切换(纸 vs 光泽 vs 金属点缀)
  • 一个窄纵向侧边栏编辑注释风格
  • 一个宏大的裁剪,自然地带入品牌色彩 避免为炫技而炫技:该时刻必须有助于扫描顺序或品牌记忆。

重要提示: 这些不是编码指令。 它们是生成的视觉设计应暗示的方向线索。


3. 前端参考规则

生成的每一张图片必须清晰地传达:

  • 布局
  • 节层级
  • 间距
  • 排版比例
  • 视觉韵律
  • CTA优先级
  • 组件样式
  • 图像处理
  • 整体设计系统

一个开发者或编码模型应该能够查看图像并理解如何构建它。

当请求为前端设计时,不要生成模糊的抽象艺术作品。


4. 英雄区极简主义规则

英雄区必须感觉电影风格、清晰且有意为之。

英雄区构图偏好

左文右图英雄区是最被滥用的AI英雄区模式。它允许被使用,但不应该是你的默认起点。

除非左文右图确实是强匹配,否则优先选择以下之一:

  • 居中陈述置于出血图像上方(文字位于下方40%)
  • 左下角文字置于背景图上方
  • 右下角文字置于背景图上方
  • 左上角引导,右下角补充
  • 堆叠居中(标签/标题/副标题/CTA全部居中,超极简)
  • 图片作为画布,文字叠加
  • 网格外编辑偏移
  • 微型极简(小标志 + 简短陈述 + 细CTA,几乎没有图像,大量负空间)

5. 响应式感知

每个节应暗示一个合理的桌面布局。 不要太担心移动端适配——这些是桌面优先的参考图。


6. 跨节的一致性

虽然构图必须变化,但颜色应保持一致。 所有节使用一个单一的、精心策划的调色板。 通常不要生成色板,只需通过视觉元素展示一致性。


7. 核心执行清单

生成图片前,检查:

  • 是否为每个请求的节生成了单独的图片?
  • 英雄区是否避免了默认的左文右图?
  • 是否使用了第1节的正确基线设置?
  • 整个页面的构图是否足够变化(>= 3种锚点类型)?
  • 背景模式是否变化?
  • CTA是否变化?
  • 是否有读秒时刻?
  • 颜色是否一致?
  • 图片是否看起来像可构建的前端UI参考?
  • 英雄区比例是否与品牌情绪匹配?
  • 排版是否强大且非枯燥默认?

Individual skills in this repo

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

相关技能