Communitygithub.com

Leonxlnx/imagegen-skills

高級前端圖片方向技能,用於生成優質、具轉化意識的網站設計參考。關鍵輸出規則:為每個區塊生成一張獨立的橫向圖片。

imagegen-skills 是什麼?

這是一個為 AI 代理(如 Claude Code、Cursor 等)設計的高級前端圖片生成技能。其核心是強制輸出規則:針對每個頁面區塊(例如英雄區、信任欄、功能區等)獨立生成一張橫向參考圖片,嚴禁將多個區塊合併到一張圖片中。技能內建了詳細的設計方向控制項,包括設計變化度、視覺密度、藝術指導等級等,使用者只需以自然語言描述品牌或風格(如極簡、編輯式、電影感、SaaS 等),AI 會自動對應到適當的英雄佈局、背景模式、字體性格等組合。技能還整合了組合變化引擎、版面策略、CTA 變化、敘事主軸與次要閱讀時刻等機制,確保輸出不重複且具備前端實作參考價值。開發者可將生成的圖片直接作為設計規格,交由開發模型或人工開發者精確還原。

相容平台~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 張圖片
  • "Landing page" 但未指定數量 -> 預設 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%)
  • 背景圖像上的左下角文字
  • 背景圖像上的右下角文字
  • 左上角主標題,輔助內容在右下角
  • 堆疊置中 (標籤 / 標

Individual skills in this repo

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

相關技能