跳转到使用指南
imagegen-frontend-web作者 Leonxlnx

ImageGen Frontend Web Skill.

Claude Code 和 Codex 的 UI 设计 skill:通过图像生成创建逐节网站设计参考。

  • Web & UI
  • Image
Leonxlnx/taste-skill · skills/imagegen-frontend-web/SKILL.mdSKILL.md
--- name: imagegen-frontend-web description: Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / … --- ## 1. ACTIVE BASELINE CONFIGURATION ## 2. THE COMBINATORIAL VARIATION ENGINE ## 3. FRONTEND REFERENCE RULE ## 4. HERO MINIMALISM RULES ## 5. IMAGE COUNT & PAGE SLICING ## 6. CREATIVITY ESCALATION RULE
从上游文件读取的前置内容和章节标题,2026-09-14 · 完整内容 36,780 字符

01 功能说明

imagegen-frontend-web Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

该 skill 生成高端网站设计参考图,以独立的横向图像呈现——每个板块一张图。它强制打破常见的左文右图套路,大胆使用满版背景,让 Hero 区域的比例产生变化(巨大/中等/迷你),并在所有板块中保持统一的调色方案。适用于落地页、营销网站以及开发者或编程模型需要还原的产品设计稿。

它使用可配置的基准参数:DESIGN_VARIANCE 8、VISUAL_DENSITY 4、ART_DIRECTION 8、IMPLEMENTATION_CLARITY 9、IMAGE_USAGE_PRIORITY 9、SPACING_GENEROSITY 8。该 skill 通过组合式变化——选择一种主题范式、字体特征、Hero 架构、板块体系与叙事概念主线——来打破 AI 的默认输出模式,同时保持转化纪律与板块间充裕、均匀的留白。

它产出什么

  • 横向图像(16:9、16:10 或 21:9),以高保真方式每帧呈现一个聚焦的板块
  • 按板块标注的图像集:“Section X of N: <name>”,直到交付完整数量
  • 所有帧保持统一的品牌世界观:相同的调色方案、字体家族、CTA 识别、圆角、图像处理方式与语气基调
查看示例提示词 ↗

工作方式

  1. 01
    阅读 brief 并调整基准参数

    该 skill 会仔细阅读用户提示,然后根据 brief 调整各项参数(设计差异度、视觉密度、艺术方向、实现清晰度、图像使用、间距、布局变化、转化纪律)、Hero 比例、背景模式、渐变使用与构图多样性。

  2. 02
    从每个组合类别中选择一个选项

    该 skill 会根据提示确定一种主题范式、一种背景特征、一种字体特征、一种 Hero 架构、一种板块体系、恰好 4 个标志性组件、恰好 2 种隐含运动语言,以及一条叙事概念主线。

  3. 03
    为每个板块生成一张横向图像

    每个板块都会获得独立的横向 16:9、16:10 或 21:9 图像。该 skill 从不将多个板块合并为一帧,也不会返回单张高长条图。

  4. 04
    变化构图锚点与背景模式

    在各个板块中,该 skill 会选择不同的构图锚点(居中、左下叠加图像、左上引导、居中堆叠、离网编辑式等)和背景模式(纯色、满版图像、编辑式侧图、双色调、径向渐晕),以避免页面出现重复的 AI 布局。

  5. 05
    输出前进行 21 项清晰度检查

    在最终确定之前,该 skill 会验证层级结构、Hero 区域的干净程度、视觉独特性、是否存在 AI 痕迹、高端质感、可编码性、多图一致性、图像表现力、留白空间、均匀间距、有意为之的创意,以及图像数量是否正确。

02 找到适合场景

何时使用 imagegen-frontend-web Skill

当任务是这类 UI 设计时,在 Claude Code 或 Codex 中使用 imagegen-frontend-web skill。适用范围和限制取自该 skill 自己的文件。

适合场景

  • 开发者或编程模型需要精确还原的落地页、营销网站与产品设计稿
  • 具备清晰转化路径的高端设计——而非纯艺术情绪板
  • 以摄影作为核心设计素材的图像主导型设计
  • 需要高度可编码 UI 参考的开发者或编程模型
  • 需要在各板块间实现大胆构图多样性以避免重复 AI 布局的网站

了解边界

  • 希望得到一张合并的高长条图,而非按板块分开的独立图像的请求
  • 安全的商业布局,缺乏创意野心或大胆表达

需要提供的信息

  • 网站类型与转化目标该 skill 会从提示词中推断网站类型(落地页、营销网站、产品页、作品集、SaaS、电商、代理机构、编辑类站点)以及主要转化目标,以此指导设计决策。
  • 区块数量或默认模糊处理指定区块数量,否则该 skill 默认落地页为 6 个区块、完整网站为 8 个区块。
  • 品牌氛围关键词诸如 minimalist、clean、editorial、magazine、cinematic、atmospheric、premium、luxury、SaaS、product、fintech、agency、creative studio、e-commerce 等关键词会引导 hero 比例、背景模式、渐变使用及构图选择。
  • 行业或地区以匹配文化调性当 brief 中指明行业或地区时,该 skill 会调整配色和字体气质以匹配——除非有意做通用型 SaaS,否则不会默认套用中性的旧金山初创公司风格。

03 Skill 内部

imagegen-frontend-web Skill 为 Claude Code 和 Codex 设定的规则

SKILL.md 为 Agent 设定的 4 条具体指令、默认值和限制——正是文件中真正改变结果的部分。

  1. 默认避免左文右图的 Hero

    默认的左文右图 hero 是被滥用最多的 AI 模式。

  2. 多样化构图——至少要出现 3 种不同的锚点

    每个区块选取一种构图锚点(居中、左上引导、图片上叠加左下、右下 CTA 集群、左三分之一/右三分之二、右三分之一/左三分之二、居中偏低、越出网格的编辑式、堆叠居中、图像作画布)。

  3. 按请求类型划分的默认区块数量

    落地页或站点模板默认为 6 个区块(6 张图片)。完整网站或营销网站默认为 8 个区块(8 张图片)。产品页或作品集默认为 6 个区块。

  4. 保持 Hero 标语简短而有力

    H1 在视觉上应呈现为一句高端陈述。标语通常应是 5-10 个有力的词,而非一整段话。

04 投入使用

在 Claude Code 或 Codex 中安装 imagegen-frontend-web

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 imagegen-frontend-web 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-web

针对 skills/imagegen-frontend-web/SKILL.md 的通用 skills CLI 形式;该仓库可能记录了自己的路径。

给 Skill 一个首次 UI 设计任务

使用你自己的内容和约束调整此提示,然后在 Claude Code 或 Codex 中运行它。

Example prompt
design 8 sections for a fintech website

来源:SKILL.md 示例(原文照录)。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 图片总数等于区块数量——绝不能更少
  • 页面留白得当——区块间距均匀且受控,不过于密集
  • 各区块构图有变化——锚点与背景模式交替使用
  • 有人可以照此参考进行编码

在 OpenDesign 中imagegen-frontend-web 已内置:Plugins → Skills,在顶部栏中选择它即可。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill 分支 main
Skill 文件
skills/imagegen-frontend-web/SKILL.md 验证时记录的内容校验和;提交 ccbc156
License
MIT 来自 LICENSE。
仓库星标数
86,946 GitHub 快照拍摄于 2026-09-14,针对整个 Leonxlnx/taste-skill 仓库,该仓库在此目录中包含 11 个 skill。不是 imagegen-frontend-web 的评分或使用次数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可证文本和星标数。已捆绑在 OpenDesign 主版本中(检查于 2026-08-28);此页面尚未记录实际运行。

SKILL.md 内部

  1. 硬性输出规则——请先阅读始终为每个区块单独生成一张横向图片,绝不将多个区块合并到同一帧中
  2. HERO 构图偏向——请先阅读避免被过度使用的左文右图默认 hero;优先选择居中叠加背景或左下叠加图片等替代方案
  3. 1. 活跃基线配置设置各项参数:DESIGN_VARIANCE 8、VISUAL_DENSITY 4、ART_DIRECTION 8、IMPLEMENTATION_CLARITY 9、IMAGE_USAGE_PRIORITY 9、SPACING_GENEROSITY 8,并根据提示词进行调整
  4. 2. 组合式变化引擎从每个类别中选择一个选项:主题范式、背景特征、字体特征、Hero 架构、板块系统、4 个标志性组件、2 种动效语言、叙事主线
  5. 4. HERO 极简规则保持 Hero 简洁,标题简短有力,优先留白,避免第一屏被 pills 和细节元素挤得过满
  6. 5. 图片数量与页面切分每个板块一张横向图片;落地页默认 6 张,完整网站 8 张;混合不同尺寸的板块以增加多样性;确保帧与帧之间的连贯性
  7. 6. 创意升级规则通过在以下至少 3 项上加大力度,展现真正的创意野心:构图、字体、尺度对比、Hero 概念、图像处理、板块节奏、取景方式
  8. 7. 以图像为先的艺术指导将图像积极用作核心设计素材:具有艺术指导感的摄影、产品图像、编辑类图像、图片裁切、带边框面板、分层构图
  9. 8. 反 AI 套路规则禁止:无限重复的居中板块、紫/蓝色 AI 渐变、漂浮色块、玻璃拟态滥用、渐变标题、通用文案、跑马灯 logo 条、虚假 KPI
  10. 10. 板块节奏规则通过改变密度、图文比例、对齐方式、尺度、留白、卡片分组、背景强度来变化板块节奏;避免重复的模板化盒子
  11. 12. 密度与间距规范页面必须有呼吸感;主要板块之间使用均匀的垂直间距,避免忽紧忽空的跳跃;留白本身也是一种设计手法
  12. 13. 色彩与材质规则使用一套受控的调色板:1 个主色、1 个辅色、1 个强调色、一套中性色阶;允许专业的色调渐变;禁止彩虹网格色块
Skill 自身的描述
"精英级前端图像指导 skill,用于生成高端、注重转化的网站设计参考。关键输出规则——为每个区块生成一张独立的横向图像。一个包含 8 个区块的落地页会生成 8 张图像。绝不将多个区块压缩到一张图像中。强制执行构图多样性(不总是左文字/右图像)、背景图像自由度、多样化的 CTA、多样化的 hero 比例(巨型/中型/迷你极简主义)、叙事概念主线、二次阅读时刻,以及所有图像的单一一致调色板。针对开发者或编程模型可以准确重建的落地页、营销网站和产品 comps 进行了优化。"

来自 SKILL.md 的 Front-matter 描述。完整文件约 36,780 字符。在 GitHub 上阅读完整文件。

ImageGen Frontend Web

在真实 UI 设计任务上运行 imagegen-frontend-web。

imagegen-frontend-web skill 已内置于 OpenDesign。下载应用,在 Plugins → Skills 中选择该 skill,粘贴上面的提示词,在查看结果前先阅读计划。

终端
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-web