Home / All Skills / Content & Media Creation / imagegen-frontend-web
English (EN)简体中文 (ZH)日本語 (JA)
Content & Media Creation · leonxlnx/taste-skill

imagegen-frontend-web

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 / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
Author leonxlnxGitHub leonxlnx/taste-skill ↗Stars 87309License MIT（仓库根 LICENSE，Copyright (c) 2026 Leonxlnx；GitHub API spdx_id=MIT）Commit ccbc15639c
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

The sole hard output rule is brought to the beginning of the text as the highest priority: generate a separate horizontal image for every section, where section count = image count, strictly prohibiting combining sections or substituting the whole page with a single tall image.

skills/imagegen-frontend-web/SKILL.md
**Generate one separate horizontal image PER section. Always. No exceptions.**
What is happening here: text-to-image models naturally tend to cram multi-screen content into a single image (since a single prompt call usually produces one image), making text illegibly small. The skill eliminates the model's shortcut-taking tendency through the verifiable audit trail of 'count = section count'.

Counting rules are structured as a lookup table with defaults for vague requests (landing page → 6 images, full website / marketing site → 8 images), eliminating room for the model to self-downsize.

skills/imagegen-frontend-web/SKILL.md
- "landing page" with no count -> default to 6 sections -> 6 images
§5 also provides standard page packages for 4/8/12 sections (Hero → Trust bar → Features → Product showcase → Benefits / use cases → Testimonials → Pricing → CTA, etc.), locking down both 'how many images' and 'what each image is' simultaneously.

Explicitly declares that this rule overrides the model's default behavior: even if it can only render one image at a time, it must output them sequentially one by one within the same response until all are delivered.

skills/imagegen-frontend-web/SKILL.md
This rule overrides any model default that wants to collapse output into a single image.
Accompanied by a requirement to report progress per image ('Section 1 of 8: Hero'), turning 'generation progress' into a visible commitment to the user and reducing abandoned jobs midway.

Anti-repetition mechanisms target the most common AI composition defaults: the left-text/right-image hero is called out as the most abused pattern, requiring the consideration of 9 other composition anchors first.

skills/imagegen-frontend-web/SKILL.md
The default **left-text / right-image hero is the most overused AI pattern**.
The pre-output check in §4 directly challenges the model: 'Did you default to left-text / right-image again?'; §2 Composition Anchor defines 10 anchors and requires at least 3 distinct anchors across the page.

Employs a combinatorial variation engine (theme / background / typography / hero architecture / section system / 4 signature components / 2 motion languages / per-section anchor and background pattern) to create diversity without introducing chaos.

skills/imagegen-frontend-web/SKILL.md
## 2. THE COMBINATORIAL VARIATION ENGINE
The key constraint statement is 'Do not mash everything together into chaos.'—only one choice per category is allowed and executed consistently across the page, keeping randomness constrained to controlled dimensions.

Cross-image consistency is isolated as a hard rule: multiple images must look like the same site (identical color palette, typography scale logic, CTA family, corner-radius language, image treatment), allowing variation only in anchors, backgrounds, scales, and secondary elements.

skills/imagegen-frontend-web/SKILL.md
Across all per-section images, enforce one brand world:
This compensates for the inevitable trade-off of the 'one image per section' strategy: splitting sections increases consistency risks, so document-level rules pull it back.

Conversion discipline is paired with technical aesthetics: every section must fulfill a funnel role, avoiding the generation of pure moodboards.

skills/imagegen-frontend-web/SKILL.md
The page's primary action stays unmistakable.
§18 Conversion focus requires a visible hook → proof → action path, and §19 establishes 'commit out loud to section count' as the very first step of the response workflow.

The anti-slop list is categorized and enumerated (layout, visual, typography, content, density, marquee, KPI across seven categories), explicitly naming forbidden words and fake brand names.

skills/imagegen-frontend-web/SKILL.md
Ban generic copy vibes like:
Forbidden words include unleash, elevate, revolutionize, next-gen, seamless, etc.; fake brand names include Acme, Nexus, Flowbit; this is more specific than the corresponding list in the repository's v1.

Concludes with a 21-item internal self-check (§17 CLARITY CHECK), transforming 'is it good enough' into an actionable checklist and requiring regeneration of missing parts if the image count falls short.

skills/imagegen-frontend-web/SKILL.md
Do not stop early. Do not summarize. Do not return only one image.
Checklist items cover hierarchy, hero cleanliness, AI tells, codeability, cross-image consistency, breathing room, second-read details, conversion path, as well as horizontal and single-section constraints.

2Core Capabilities

01Strict one-image-per-section counting discipline (including defaults for landing/full sites)
0210 composition anchors + prohibition of consecutive repetition (no anchor repeated across more than 2 consecutive sections)
0312 background patterns (full-bleed imagery, dual-tone, color block, paper texture, vignette, micro-noise gradient, etc.) with a 'background confidence' principle
04Hero minimalism and composition bias rules (10–5 word headlines, ban on badge/fake data clutter)
05Brief-to-direction mapping table: hero scale, background patterns, and gradient strategies mapped across minimalist/editorial/cinematic/SaaS/agency/e-commerce styles
06Palette and gradient discipline: 1 primary + 1 secondary + 1 accent + neutral ramp, allowing professional low-saturation gradients while banning rainbow/purple-blue AI gradients and gradient text
07Narrative concept spine and 'second-read' technique: 6 concept spines + exactly 1 second-read detail (serving scanning hierarchy or brand memorability)
08Anti-AI slop and anti-fake data: ban on fake KPI trios, meaningless skeuomorphic dashboards, and tiny logo marquees

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Can be auto-loaded
For Administrators
Register source and version
Evidence & Triggers (File Paths & Excerpts)
  • SKILL.md: Pure prompt instructions and rule text, without script execution or external impact.
Audit Notes: Pure prompt-based skill: contains no scripts, no outbound network requests, no credential reading, and no local disk writes, without referencing external image sources or packages. All actions take place entirely within the host's multimodal generation pipeline. The only aspects users need to evaluate are asset purpose and generation time: the rules mandate section-by-section image generation (8 sections = 8 generations), representing a operational cost rather than a security risk; this counting discipline is also purposefully used to prevent model slacking.

5Second-Pass Verification

  • [ok] 文首硬规则与正文是否自洽（一处打脸风险点） — 文首三令（一 section 一图 / hero 构图偏置 / 计数表）与 §5、§16、§19、§20 三处示例解读一致；§20 例 2 明确 '8 separate horizontal images (one per section)'，无自相矛盾。
  • [discrepancy] 『Does not write code』声明的出处与 SKILL.md 自述 — README/llms.txt 声明 'Image-generation-only skill for creating premium website design reference images. Does not write code.'；但 SKILL.md 正文没有这句禁令——它反而在 §17 自检里写 'Can someone code from this?'、在 §1 写 '(1 = loose moodboard, 10 = very codeable UI reference)'，把『可编码』当作质量标准。两者不冲突（skill 本身不产出代码，只是要求参考图可被复刻），但与姊妹 skill imagegen-frontend-mobile 相比，后者正文有显式禁令（'This skill generates images only. / Do not switch into coding mode.'），web 版缺这句，跨模型时可能被误拉入编码模式。已记录。
  • [ok] 外部依赖与网络调用清单为空 — 全文无 URL、无端点、无包名、无安装指令；连占位图源都未指定（§8 只禁『endless centered sections』等模式，不指定图片服务）。对比 gpt-taste 与 taste-skill-v1 均会写 picsum.photos，本文件确实为零依赖。
  • [ok] 梯度/全幅背景规则是否与同仓库反渐变口径冲突 — §13 明确区分：允许低彩同色系渐变、晕影、微噪渐变；禁彩虹 mesh、紫蓝 AI 默认、霓虹描边、渐变文字作『高级感』捷径。属细分而非矛盾，已记录于 traits。
  • [ok] 是否有隐藏脚本或可执行内容 — 文件为纯 markdown（含代码块仅为示例 HTML/CSS 描述与包名列表），grep 'exec|subprocess|bash|python|npm install' 零命中；无 sha/哈希、无 base64 载荷。
  • [ok] 元数据（license / stars / last_push / 路径 / commit） — gh api：MIT、87309 stars、pushed_at 2026-08-24T15:23:56Z；git ls-files 确认 skills/imagegen-frontend-web/SKILL.md；HEAD == origin/main == ccbc15639c97057cbfcf32ecebc38ef716e4bb37。

6Verdict & Scenarios

  • Completely shuts down the most common failure mode in text-to-image (cramming multi-screen content into one image → illegible text) using a verifiable count rule, providing presets for vague prompts.
  • Anti-repetition is enumerated rather than merely sloganized: 10 composition anchors, 12 background patterns, 6 hero architectures, and explicit consecutive usage limits.
  • Respects user briefs: explicitly declares that the brief overrides defaults and provides a mapping table from six category keywords to direction parameters, avoiding rigid formulaic output.
  • Enforces hard constraints for cross-image consistency, resolving the consistency trade-off inherent in the 'one image per section' strategy.
  • Zero dependencies and zero external links: introduces no image sources or packages, operating entirely offline within any multimodal host.
    • Best for: Those who need high-quality website visual concepts before coding: conceptual comps and section-by-section visual references for product/marketing landing pages, official websites, and portfolios; 'image-first' workflows handing comps to Codex/Cursor/Claude Code for recreation; teams needing to quickly pitch multiple visual directions to clients; users leveraging tools like ChatGPT Images who want to suppress the default behavior of cramming an entire page into a single image.
    Not for: Tasks requiring actual code outputs or interactive prototypes (it only produces images); workflows requiring pixel-perfect reproducible outputs (text-to-image randomness cannot be fully controlled, and the skill provides no seed/parameter control); mobile app interfaces (use imagegen-frontend-mobile from the same repository); brand identity/logo design systems (use brandkit); short-context environments or per-generation cost-sensitive workflows unwilling to incur the cost of multiple image outputs; tasks requiring final multilingual/localized copy (the skill only demands short copy and does not guarantee linguistic consistency).
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload imagegen-frontend-web.tar.gz
    sha256: 68d29515cc937bdb…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit ccbc15639c.