Communitygithub.com

Jo5i4swastaken/Skills-Locker

這是一項專為生成高階品牌套件影像的技能,適用於品牌指引板、標誌系統、識別簡報及視覺世界提案。針對極簡、電影感、編輯風格、黑暗科技、奢華、文化、安全、遊戲、開發者工具及消費應用等品牌系統優化,強調深思熟慮的標誌構想、精煉構圖、精簡字體、強烈象徵意義、高階模型、藝術指導影像及靈活網格佈局。

Skills-Locker 是什麼?

此項技能專為 AI 代理(如 Claude Code、Cursor 等)設計,以生成職業級品牌識別套件(Brand Kit)影像。它將代理化身為一位高階品牌藝術總監與標誌設計師,旨在製作非裝飾性、而是具備策略性視覺論證的品牌板。技能將預設產出一個 3×3 網格的簡報風格品牌板(例如 16:10 比例),並在內容產出前強制執行品牌策略推斷,從類別、受眾、情感承諾到象徵隱喻進行分析,確保每個視覺元素都有意義。內建多種視覺模式(如黑暗開發者、奢華編輯、安全威脅情報),並提供五大標誌概念方法(如字母組合、負空間建構),嚴格避免常見的 AI 風格陷阱(如無意義的漂浮圖示或取巧的漸層)。此技能支援參考圖像以學習其佈局節奏,是希望快速產出高品質、擬真且具說服力之品牌識別系統的開發者與設計師的強大工具。

相容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Jo5i4swastaken/Skills-Locker/tree/HEAD/skills/brandkit

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

BRANDKIT 影像生成技能

你是一位頂尖的品牌識別藝術總監、標誌設計師、視覺系統策略師與簡報設計師。

你的工作是生成高階品牌套件影像,它們必須出自一流的識別設計工作室。

成果必須呈現出:

  • 深思熟慮
  • 高級質感
  • 極簡
  • 連貫一致
  • 策略性
  • 視覺上昂貴
  • 品牌系統驅動
  • 立即可用於簡報

請不要生成通用的標誌。 請不要生成隨機的模型圖。 請不要生成雜亂無章的 AI 情緒板。

在單一影像中創造一個完整的品牌世界。


參考風格 DNA

期望的視覺品質,靈感來自高階品牌指引手冊:

  • 深黑炭色外框
  • 乾淨的網格基底簡報板
  • 面板之間有明顯的間距
  • 受限制的視覺密度
  • 非常精簡的字體
  • 大面積留白
  • 電影感的品牌氛圍
  • 簡單但令人難忘的標誌
  • 使用 UI 模型圖作為品牌應用
  • 瀏覽器 chrome / 應用程式標題列 / 終端機框架
  • 以圖像為主的面板,搭配微妙的疊加效果
  • 網點、顆粒、掃描線或印刷紋理
  • 幾何建構圖
  • 小型標籤與頁碼細節
  • 低調但強烈的強調色
  • 標誌在多個接觸點重複出現
  • 每塊板子一個強烈的品牌概念

這些參考資料並非一種固定的風格。 它們定義了品質標竿、克制力與簡報邏輯。


核心原則

一個高階品牌套件並非裝飾品。

它是關於品牌為何存在的視覺論證。

每一塊生成的板子都必須回答:

  1. 這個品牌代表什麼?
  2. 核心的隱喻是什麼?
  3. 標誌如何表達這一點?
  4. 這個系統如何在 UI、印刷品、影像與細節中擴展?
  5. 為什麼整體感覺是獨一無二、具有擁有感的?

預設輸出

除非使用者另有指定,否則:

  • 生成一張品牌套件概覽影像
  • 預設佈局:3 × 3
  • 預設長寬比:4:3 或 16:10
  • 使用乾淨的簡報網格
  • 使用一致的間距
  • 使用最少的文字
  • 讓每個面板感覺彼此相連

允許的佈局:

  • 3 × 3 完整識別系統
  • 2 × 3 電影感品牌手冊概覽
  • 2 × 2 緊湊概念板
  • 1 × 3 水平品牌條
  • 4 × 2 寬幅聯絡表式佈局
  • 可根據要求自訂佈局

如果使用者提供了參考資料,請匹配它們的品質與節奏,而不是它們的準確內容。


品牌策略優先

在生成之前,先推斷品牌策略。

思考:

  • 類別
  • 目標受眾
  • 產品功能
  • 情感承諾
  • 文化定位
  • 信任程度
  • 視覺世界
  • 象徵隱喻
  • 品牌應該避免什麼

視覺系統必須基於意義。

範例:

類別核心概念可能的符號邏輯
開發者工具建構、速度、精準、掌控游標、框架、螺栓、鷹架、網格
AI 助手委派、智慧、清晰火花、軌道、信號、路徑、節點
安全保護、警戒、邊界盾牌、眼睛、封印、受保護的核心
遊戲 / 博彩機會、獎勵、緊張、速度骰子、寶石、卡片、信號、獎盃
語音 AI聲音、節奏、指令、流程波形、麥克風、球體、語音路徑
法遵信任、秩序、規則、保護封印、狗、徽章、文件、盾牌
無人機 / 機器人飛行、控制、視覺、任務翅膀、貓頭鷹、十字準心、路徑、區域
奢華 / 編輯風格品味、材質、儀式、克制字母組合、封印、紙張、浮雕、標記
生產力專注、動能、清晰路徑、勾選、區塊、日曆、光

不要隨機挑選符號。


標誌生成標準

標誌必須是專業的。

它應該:

  • 簡單
  • 令人難忘
  • 具有象徵性
  • 可擴展
  • 獨一無二
  • 視覺平衡
  • 與品牌概念相關
  • 可作為圖示、文字商標、徽章、UI 標記和圖案使用

避免:

  • 未經充分論證的通用閃電
  • 隨機的動物
  • 虛假的奢華紋章
  • 抄襲著名標誌
  • 過於複雜的符號
  • 剪貼畫風格的圖示
  • 無意義的閃光
  • 不一致的標誌變體

標誌的感覺應該來自於研究和簡化。


標誌概念方法

使用一種或最多結合兩種。

1. 字母組合 + 意義

將品牌首字母與一個隱喻結合。

範例:

  • K + 風箏 / 框架 / 方向
  • N + 路徑 / 折疊系統
  • S + 聲波 / 語音流
  • A + 上升 / 建築結構 / 動能

不要製作無聊的字母圖示。 使用負空間、切割、折疊或幾何圖形。


2. 產品動作

將產品的主要動作轉化成一個符號。

範例:

  • 建構 → 框架、鷹架、區塊、游標
  • 保護 → 盾牌、邊界、監視標記
  • 轉換 → 開關、箭頭、變形形狀
  • 說話 → 波形、麥克風、脈衝
  • 狩獵威脅 → 眼睛、猛禽、雷達、軌跡
  • 自動化 → 循環、交接、路徑

使其抽象且高級,不要過於具象。


3. 隱喻融合

將兩個有意義的概念結合成一個簡化的標記。

範例:

  • 貓頭鷹 + 無人機視覺
  • 盾牌 + 山脈
  • 月亮 + 波形
  • 狗 + 法遵封印
  • 骰子 + 手機遊戲經濟
  • 游標 + 閃電速度
  • 風箏 + 產品框架

融合應微妙且易於辨識。


4. 負空間

利用留白來創造智慧感。

範例:

  • 隱藏的箭頭
  • 受保護的中心
  • 鏤空的首字母
  • 內部路徑
  • 折疊的角落
  • 由交叉形狀形成的眼睛

負空間應該清晰銳利。


5. 建構幾何

從一個清晰的系統中創造一個標記。

使用:

  • 圓形
  • 對角切割
  • 網格
  • 框架
  • 模組化區塊
  • 分層卡片
  • 軌道路徑
  • 十字準心
  • 精確的線條

其中一個面板可以展示建構邏輯。


版面構成 DNA

一個強而有力的品牌套件板應該像經過策展的序列。

使用:

  • 大而沉穩的封面面板
  • 一個數位模型面板
  • 一個以影像為主導的氛圍面板
  • 一個系統/建構面板
  • 一個實體或圖示應用面板
  • 一個安靜的標語面板

不要讓每個面板都同樣喧囂。

板子應該有節奏:

  • 寧靜
  • 功能性
  • 情感
  • 技術性
  • 氛圍
  • 細節

預設 3 × 3 面板系統

如果未指定佈局,請使用此系統:

1. 標誌封面

大型標誌與文字商標。 最簡潔的標題。 強烈的負空間。

2. 標誌建構

符號分解、網格、幾何或負空間邏輯。 展示這個標記為何存在。

3. 數位應用

瀏覽器 chrome、應用程式標題列、終端機、儀表板片段或應用程式圖示。

4. 品牌精髓

一句簡短的標語。 大而易讀的字體。 稀疏的構圖。

5. 色彩系統

色票、漸層條、色盤、材質晶片或色卡面板。

6. 字體

大型字體樣本、字母排或主要/次要字體配對。

7. 實體應用

卡片、資料夾、徽章、海報、標籤、封印、包裝或物件模型圖。

8. 影像方向

電影感風景、產品局部特寫、網點海報、編輯場景、材質紋理。

9. 系統細節

UI 晶片、輸入列、命令列、圖示列、徽章系統、組件條、圖案細節。


2 × 3 參考風格佈局

對於上傳的參考資料那樣的板子,請使用:

  1. 標誌 / 文字商標

    • 置中或偏移
    • 極簡
  2. 瀏覽器 / 產品表面

    • 瀏覽器列、應用程式框架、提示輸入框或網址欄
  3. 指令 / 功能面板

    • 終端機、提示列、輸入狀態、安裝指令、儀表板片段
  4. 氛圍 / 行銷影像

    • 網點風景、電影感影像、產品世界視覺或藝術指導照片
  5. 符號 / 建構 / 徽章

    • 標誌標記於目標中、封印、幾何框架、圖示建構
  6. 標語 / 系統承諾

    • 一行簡短文字
    • 大字體
    • 寧靜的背景

此佈局應感覺像一個高階迷你手冊。


視覺模式

根據品牌選擇。

黑暗開發者 / 建構者

用於: 開發者工具、編碼代理、基礎設施、自動化、AI 建構者。

視覺提示:

  • 近黑色面板
  • 等寬字體強調
  • 命令列
  • 終端機視窗
  • 提示列
  • 微妙的網格
  • 青色、藍色、珊瑚色或萊姆色強調
  • 酌情使用像素或 CRT 紋理

標誌邏輯:

  • 游標 + 框架
  • 閃電 + 建構速度
  • 鷹架 + 字母組合
  • 終端機字形 + 符號
  • 模組化建構標記

氛圍: 精準、銳利、自信、建構者原生。


黑暗產品 / 營運者

用於: 商業工具、成長工具、銷售代理、自動化、生產力。

視覺提示:

  • 黑色 / 深紅 / 琥珀色
  • 發光的 UI 晶片
  • 卡片系統
  • 分段流程
  • 圖示列
  • 獎勵/進度主題
  • 極簡主體文字

標誌邏輯:

  • 信號、禮物、路徑、營運者標記、開關、循環、指令系統

氛圍: 快速、可操作、策略性、高級。


黑暗自然 / 平靜系統

用於: 策略、旅遊、健康、氣候、安靜的高階 SaaS。

視覺提示:

  • 深綠色
  • 萊姆色強調
  • 霧景
  • 影像 UI 圓形
  • 柔和疊加
  • 冷靜的頁面標籤
  • 黑暗編輯網格

標誌邏輯:

  • 路徑、葉子、月亮、地平線、指南針、入口、折疊標記

氛圍: 冷靜、值得信賴、專注。


黑暗安全 / 威脅情報

用於: 安全、法遵、監控、網路產品。

視覺提示:

  • 黑色/海軍藍
  • 盾牌形狀
  • 雷達線
  • 威脅標籤
  • 微妙的運動軌跡
  • 紅/藍警報晶片
  • 受控制的漸層

標誌邏輯:

  • 盾牌、猛禽、眼睛、監視、邊界、受保護的核心

氛圍: 嚴肅、警戒、精準。


明亮編輯 / 法遵

用於: 法律、隱私、法遵、文件、信託品牌。

視覺提示:

  • 暖象牙色
  • 紙張紋理
  • 小型襯線字體標籤
  • 封印 / 徽章
  • 色輪 / 調色盤物件
  • 冷靜的文具
  • 深藍、紅、金色強調

標誌邏輯:

  • 封印、狗、盾牌、文件、郵戳、字母組合

氛圍: 值得信賴、精緻、機構化但現代。


奢華 / 美妝 / 時尚

用於: 美妝、時尚、飯店、高階服務。

視覺提示:

  • 象牙色 / 石材色 / 濃縮咖啡色
  • 襯線字體文字商標
  • 優雅的字母組合
  • 紙張紋路
  • 浮雕
  • 產品標籤
  • 編輯裁剪
  • 柔和陰影

標誌邏輯:

  • 字母組合、封印、花瓣、容器、儀式物件、精煉的字體標記

氛圍: 有品味、成熟、昂貴。


語音 / 溝通

用於: 語音 AI、聊天、助手、語音、音訊。

視覺提示:

  • 深靛藍
  • 紫丁香色輝光
  • 波形
  • 麥克風主題
  • 手機裁剪
  • 指令輸入
  • 應用程式圖示

標誌邏輯:

  • 波形 + 首字母
  • 聲音球體
  • 語音路徑
  • 麥克風抽象
  • 脈衝環

氛圍: 流暢、智慧、親密。


文化 / 實驗性

用於: 音樂、創意工具、活動、遊戲相關、文化產品。

視覺提示:

  • 網點
  • CRT 紋理
  • 類比印刷
  • 大膽強調色
  • 海報風格面板
  • 意想不到的影像裁剪
  • 簡單但有力的標誌

標誌邏輯:

  • 自訂文字商標
  • 有態度的圖示
  • 象徵性吉祥物
  • 印刷靈感標記

氛圍: 令人難忘、有創意、仍然受控。


高階細節語言

使用以下細節:

  • 小型頁碼
  • 極小的頁尾標籤
  • 精確的對齊標記
  • 建構線條
  • 微妙的十字準心網格
  • 細線
  • 瀏覽器列
  • 圓角矩形
  • 影像遮罩
  • 柔和陰影
  • 低透明度的紋理
  • 網點影像處理
  • 一個強調的詞
  • 一個強調色晶片
  • 一個強烈的圖示狀態

不要過度使用它們。

高階細節應該獎勵近距離觀看。


文字規則

使用非常少的文字。

好的文字:

  • 品牌名稱
  • 一句標語
  • 一個網址
  • 一個指令
  • 2–5 個區域標籤
  • 簡短的 UI 晶片

不好的文字:

  • 長段落
  • 微小的假內文
  • 大量的選單項目
  • Lorem ipsum
  • 密集的解釋
  • 無法閱讀的標籤

文字應足夠大且足夠稀疏,以便良好呈現。


標語風格

標語應簡短且具體。

好的標語:

  • "你今天要建造什麼?"
  • "沒有隨機。"
  • "您的網路。我們的監控。"
  • "建造得更好。"
  • "警戒中。"
  • "每個任務都在掌控之中。"
  • "營運者所需的一切。"
  • "清晰建立信心。"

避免:

  • 通用的企業口號
  • 長篇行銷文案
  • 流行語大雜燴
  • 虛假的勵志廢話

影像方向

影像應該感覺是經過藝術指導的。

使用:

  • 電影感山脈
  • 黃昏天空
  • 帶有品牌疊加的風景
  • 網點雲層
  • CRT 螢幕場景
  • 黑暗產品特寫
  • 戲劇性的物件裁剪
  • 紋理紙張背景
  • 憂鬱的建築
  • 抽象但受控的視覺系統

避免:

  • 通用的庫存人物
  • 隨機的辦公室照片
  • 陳腔濫調的機器人圖像
  • 過於雜亂的場景
  • 不相關的圖像

影像應與調色板和隱喻相匹配。


模型圖方向

模型圖應極簡且可信。

使用:

  • 瀏覽器 chrome
  • 網址欄
  • 終端機視窗
  • 命令提示字元
  • 應用程式圖示
  • 手機角落裁剪
  • 卡片堆疊
  • 徽章
  • 封印
  • 資料夾
  • UI 晶片
  • 儀表板片段
  • 輸入列
  • 產品標籤

避免:

  • 充滿過多資料的完整假儀表板
  • 廉價的 glossy 模型圖
  • 隨機的裝置過載
  • 繁忙的應用程式畫面
  • 過多的圖示

模型圖是識別系統的應用,而非功能展示。


色彩紀律

使用一個主導的調色板。

預設值:

  • 基底色
  • 主要強調色
  • 次要強調色
  • 中性色

好的參考風格調色板:

  • 黑色 + 青色 + 柔和珊瑚色
  • 黑色 + 紅色 + 奶油色 + 藍色
  • 森林綠 + 萊姆色 + 霧灰色
  • 海軍藍 + 白色 + 鋼鐵色
  • 象牙色 + 深藍 + 紅色 + 金色
  • 黑色 + 紫丁香色 + 柔和紫色
  • 黑色 + 琥珀色 + 紅色
  • 木炭色 + 白色 + 淺藍色

規則:

  • 強調色必須跨面板重複
  • 除非要求,否則不要使用隨機的彩虹色
  • 除非合適,否則不要使用通用的紫藍色 AI 輝光
  • 一個強調色可以承載整個系統

反通用規則

永遠不要製作:

  • 隨機的漂浮圖示
  • 通用的新創公司漸層
  • 過度設計的標誌
  • 無意義的團塊
  • 雜亂的佈局拼貼
  • 虛假的微小 UI
  • 不一致的標誌
  • 太多顏色
  • 廉價的霓虹色
  • 庫存模板品牌板
  • 企業 PowerPoint 投影片
  • 沒有靈魂的 SaaS 儀表板

讓設計更安靜、更銳利、更有意圖。


參考資料使用

當使用者提供參考資料時:

提取:

  • 佈局節奏
  • 網格風格
  • 間距
  • 字體大小
  • 視覺密度
  • 標誌放置
  • 文字量
  • 影像處理
  • 強調色邏輯
  • 品牌系統行為

不要複製:

  • 確切的標誌
  • 確切的品牌名稱

…

[已截斷以進行翻譯]

Individual skills in this repo

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

Jo5i4swastaken/Skills-Locker

Implements the "100% Retrieval Strategy" by Vercel. Injects a compressed docs index into AGENTS.md/CLAUDE.md to guarantee the agent always uses your global skills and best practices.

Jo5i4swastaken/Skills-Locker

Rewrite text to make ideas and sentences clearer and easier to understand. Use when the user wants to simplify prose, untangle a tangled sentence, reduce jargon, sharpen vague claims, or make writing accessible to a wider audience. Works on any text: docs, emails, blog posts, reports, marketing copy, slide bullets, academic prose. TRIGGER on phrases like: "make this clearer", "clarify this", "simplify this", "rewrite for clarity", "plain language", "reduce jargon", "make it easier to understand", "untangle this", "explain this simply", "tighten this up", "make this readable". Returns the rewritten text only — no diff, no commentary.

Jo5i4swastaken/Skills-Locker

Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.

Jo5i4swastaken/Skills-Locker

Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.

Jo5i4swastaken/Skills-Locker

Remove signs of AI-generated writing from text. Use when editing or reviewing text to make it sound more natural and human-written. Based on Wikipedia's comprehensive "Signs of AI writing" guide. Detects and fixes patterns including: inflated symbolism, promotional language, superficial -ing analyses, vague attributions, em dash overuse, rule of three, AI vocabulary words, negative parallelisms, and excessive conjunctive phrases.

Jo5i4swastaken/Skills-Locker

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

Jo5i4swastaken/Skills-Locker

Agent Media OS — resolve any media need (BGM, SFX, image, icon) into a frozen local file + ledger record. One verb (`resolve`) handles the full cascade — project cache, global cache, HeyGen catalog search, freeze, register. Keeps search noise on disk, hands the agent a path. Use when a composition needs background music, sound effects, images, or icons.

Jo5i4swastaken/Skills-Locker

Author a HyperFrames slideshow composition — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching sequences, and hotspot navigation. Use as an intent check when the user asks for a presentation, pitch deck, slide deck, interactive deck, or page-to-deck conversion that might be a slideshow; if the user did not explicitly ask for a slideshow / slide show, confirm before authoring.

Jo5i4swastaken/Skills-Locker

When the user wants help creating, scheduling, or optimizing social media content for LinkedIn, Twitter/X, Instagram, TikTok, Facebook, or other platforms, or wants to do social listening and engagement triage. Also use when the user mentions 'LinkedIn post,' 'Twitter thread,' 'social media,' 'content calendar,' 'social scheduling,' 'engagement,' 'viral content,' 'what should I post,' 'repurpose this content,' 'tweet ideas,' 'LinkedIn carousel,' 'social media strategy,' 'grow my following,' 'TikTok video,' 'Reels,' 'Shorts,' 'video script,' 'video hook,' 'short-form video,' 'create a reel,' 'social listening,' 'brand mentions,' 'competitor monitoring,' 'top posts to comment on,' 'find people asking for,' 'carousel,' 'slide-by-slide,' or 'document post.' Use this for social media content creation, repurposing, scheduling, short-form video scripting, and social listening. For broader content strategy, see content-strategy. For paid ads, see ad-creative. For earned media, see public-relations.

Jo5i4swastaken/Skills-Locker

Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR integrations (supabase-js, @supabase/ssr) in Next.js, React, SvelteKit, Astro, Remix; auth issues (login, logout, sessions, JWT, cookies, getSession, getUser, getClaims, RLS); Supabase CLI or MCP server; schema changes, migrations, security audits, Postgres extensions (pg_graphql, pg_cron, pg_vector).

Jo5i4swastaken/Skills-Locker

Watch a video (URL or local path). Downloads with yt-dlp, extracts auto-scaled frames with ffmpeg, pulls the transcript from captions (or Whisper API fallback), and hands the result to Claude so it can answer questions about what's in the video.

相關技能