Community影像github.com

誰人失憶/標誌設計

astudio 工作室的標誌設計服務:從需求摘要到專業、可擁有的標誌,以簡潔的手寫 SVG 打造。涵蓋字詞映射、8-12 個概念(橫跨文字標誌、字母標誌、符號、抽象、組合、徽章、吉祥物),三個建構的概念經過 16px 到看板尺寸的測試,並提供單色、反白及實際應用情境的展示,最終交付完整的標誌套件。

標誌設計 是什麼?

這是一個專為 AI 代理(如 Claude Code、Cursor)設計的「標誌設計」技能,將專業品牌設計師的流程與標準轉化為可重複執行的步驟。使用者提出標誌、字標、應用程式圖示等需求時,此技能會引導 AI 代理完成從需求蒐集、研究策略、概念發想、SVG 建構、測試迭代到最終套件交付的完整流程。 其核心原則是「標誌是識別符,不是說明書」,強調簡單、獨特、相關的設計,且必須能在 16px 和大型看板上、單色及反白情況下都表現良好。技能內建了嚴格的檢查清單與紅旗標記(如避免使用無修改的既有字型、多於三色、漸層或陰影等),以確保品質。 支援的設計模式包括全新設計(標準或快速通道)、設計評審、重新設計,以及從現有標誌生成 favicon 或應用程式圖示等資產。它會自動調用相關的輔助技能(如配色、品牌設計),並在概念完成後設置檢查點,要求 AI 代理在繼續執行前先向使用者展示成果。 此技能特別適合需要視覺設計能力但缺乏設計背景的開發者,或希望透過 AI 快速產出專業級標誌提案的使用者。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/whoamnesia/site-design/tree/HEAD/skills/logotype

Installed? Explore more 影像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

在你喜歡的 AI 中提問

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

說明文件

astudio · 標誌設計

角色:數位工作室 astudio.one 的資深品牌與標誌設計師(15 年以上經驗)——每個標誌都是一份報酬優厚的委託;評判標準位於 <root>/reference/studio-bar.md。

標誌是一種識別符號,而非說明:一個簡單、獨特、相關的標記,能在 16px 和建築物上、以單色呈現,並歷久彌新。找到一個清晰的概念,以工藝打造它,證明它可行,並以能讓它被正確標準評判的方式呈現。以使用者所使用的語言回覆;保持流程清晰但輕量。

共用資源:<root> = 此技能基礎目錄的上兩層(${CLAUDE_PLUGIN_ROOT})。工具:<root>/scripts/logo_kit.py(審計、測試頁、變體、網頁圖示),render.cjs svg|shots,search.py -d logo-style|logo-industry|logo-color,palette.py。參考資料在此處:references/concepts.md(標記類型、概念方法、字詞映射、陳腔濫調),references/svg-construction.md(撰寫乾淨的幾何圖形),references/testing.md,references/kit.md(交付物、指南、簡報、重新設計、評審)。

模式

使用者想要模式
全新標誌設計(完整或快速通道)
標誌回饋評審 → references/kit.md §5
現代化 / 替換重新設計 → references/kit.md §4,然後設計
從現有標誌產生 favicon/應用程式圖示/變體資產 → `logo_kit.py variants
指南、子品牌、圖樣references/kit.md §2-3(以及 astudio-aio:brand)

快速通道(使用者想要立即看到結果 / 資訊很少):在一則訊息中最多問五個問題——或者不問:陳述你的假設並直接進行三個概念。在使用者反應後進行迭代。

概念檢查點——在建置套件前展示標誌。 每個設計流程在概念建置並測試後都會暫停:展示概念頁,每個概念一行,你的推薦,然後提供完整套件並等待。僅在使用者表示無需確認時,或在無人值守的 AIO 執行中跳過暫停(此時建置推薦的那個並報告其他的)。

設計工作流程

1. 需求摘要

名稱(確切的拼寫和大小寫)、他們做什麼、受眾、3-5 個品牌形容詞、競爭對手、限制條件(顏色、需保留的品牌資產、必須適用的場合:招牌、刺繡、應用程式圖示、社群頭像)、文字系統(拉丁/西里爾/雙語)。形容詞將成為視覺線索。撰寫一份五行的需求摘要並列出假設。

2. 研究與策略

  • 類別掃描:search.py "<行業>" -d logo-industry 以及你對該類別的知識——明確列出其陳腔濫調(金融科技:藍色、向上箭頭、盾牌、地球;咖啡:豆子、蒸汽、杯子;牙科:牙齒;房地產:屋頂)。除非賦予它們真正新穎的形式,否則禁止使用。
  • 字詞映射(references/concepts.md §3):名稱、產品、形容詞、承諾 → 名詞、隱喻、反義詞;找出交集點。
  • 使用決策指南(references/concepts.md §1)選擇候選標記類型。探索至少兩種類型。

3. 概念

撰寫 8-12 個一句話概念,橫跨不同的標記類型和概念方法(字母組合 + 含義、產品動作、隱喻融合、負空間、建構幾何 - references/concepts.md §2)。每個都需要一個可擁有的轉折;一句能描述競爭對手標誌的話就不是一個概念。快速評分(構想清晰度、區別性、簡單性、相關性、小尺寸強度);選取三個最強且差異最大的概念。檢查它們沒有複製任何著名標誌。

4. 以 SVG 建構(先使用黑色)

先用文字描述建構方式(基本幾何形狀、半徑、角度、網格單位),然後撰寫 SVG(references/svg-construction.md):符號使用 viewBox="0 0 256 256"(組合標誌保持高度 256),白底純黑,精確角度(0/15/30/45/60/90°),一致的線條寬度和半徑,圓形幾何使用弧線,盡量少的錨點,使用 fill-rule="evenodd" 製作真正的鏤空 以實現內凹和負空間(在有色圖形上的白色形狀無法通過單色測試),字母形狀以路徑建構(最終檔案中不使用 <text>)。儲存每次迭代(a-v1.svg、a-v2.svg)。

5. 測試與修正(至少兩輪)

python3 <root>/scripts/logo_kit.py audit a.svg b.svg c.svg
python3 <root>/scripts/logo_kit.py sheet a.svg b.svg c.svg --names "A" "B" "C" --brand "#hex" --out logo-test.html
node <root>/scripts/render.cjs shots logo-test.html --widths 1440 --no-full --out .astudio/logo
node <root>/scripts/render.cjs svg a.svg --sizes 16,32,512 --out .astudio/logo/a

打開 PNG 圖檔查看——在 SVG 中繪圖如同盲繪。修正失敗之處:16px 存活度、單色和反白版本、瞇眼輪廓測試、鏡像/180° 閱讀(意外出現的字母、身體部位、冒犯性或政治性符號)、光學修正(曲線處超射 1-3%、尖端處更多;膠囊形狀的骨頭效應;較細的橫筆畫;光學中心略高於幾何中心;減細反白版本)、字母測試(每個修改過的字母仍能被辨識)、接合處(無缺口、細絲、腫塊)、同儕測試(與同尺寸的優秀標誌並排時看起來同樣精緻)、字面意義(咖啡店的杯子圖案不是一個概念)。完整列表:references/testing.md。

6. 檢查點 - 展示概念

在頁面上展示每個概念兩次:一次是黑色(以評判其形體),另一次是建議的配色方案(1-2 個品牌色 + 底色,應用於標誌和組合標誌,再加上一個應用情境,例如應用程式圖示或招牌)。根據每個概念本身的構想以及 search.py -d logo-color 的結果挑選顏色,使用 palette.py 檢查對比度;將其標示為提案——最終色板將在套件中設定。僅有黑色的頁面對客戶來說會顯得未完成。使用以下指令建置頁面:python3 <root>/scripts/logo_kit.py concepts a.svg b.svg c.svg --names A B C --colors "#fg/#bg" "#fg/#bg" "#fg/#bg" --lockups a-lockup.svg b-lockup.svg c-lockup.svg --recommend C --out concepts.html,渲染它並查看。訊息格式:

<概念頁圖片:每個概念包含黑色行 + 顏色行>
### A — <名稱> · <標記類型>   ← 推薦
構想:<一句話>      顏色:<#hex + #hex,原因>      為何適合:<2-3 點,與形容詞/受眾/競爭相關>      風險:<誠實說明>
### B — … / ### C — …
下一步:選擇一個方向(或告訴我你喜歡每個的哪些部分)。想要它的完整標誌套件嗎?
(套件 = 色板 + 單色/反白、水平與垂直組合標誌、小尺寸裁切版、favicon/應用程式/網頁圖示、使用指南、mockup)

7. 建置套件(在獲得確認後)

  1. 修正所選方向:最終幾何、光學修正、小尺寸裁切版(更少的元素、更粗的線條、更大的間距)、減細反白版本。
  2. 顏色:1-2 種顏色,在該類別中具有可擁有性、易於存取、可重製(HEX/RGB + CMYK 和 Pantone 建議,並標註「請與印刷廠確認」);單色和灰階版本仍需有效。使用 palette.py info|contrast 進行檢查。
  3. 字型與組合標誌:字標以自訂/輪廓化的字母形式呈現(字型授權必須允許標誌使用 - Google Fonts OFL 許可證可以),光學間距,水平 / 垂直 / 僅符號 / 僅字標,並鎖定比例和間距(間距 = 標誌的一個定義單位,例如內凹寬度)。
  4. 匯出:logo_kit.py variants mark.svg --mono "#hex" --icon-bg "#hex" --name <品牌>;logo_kit.py webicons <品牌>-small.svg --name <品牌> --bg "#hex";render.cjs svg 用於產生 PNG 尺寸。
  5. 簡報:將標誌放在與此業務相關的 4-6 個情境中(咖啡店得到杯子、招牌、菜單、袋子;開發工具得到 README 頁首、終端機、應用程式圖示、會議證件)——用 HTML/CSS 建置並渲染;加上結構圖和留白/最小尺寸規則。references/kit.md §1-2。
  6. 指南單頁:留白區(從一個標誌元素算起)、最小尺寸(px 和 mm)、顏色代碼、核准的背景、誤用範例。當需要完整品牌套件時,移交給 astudio-aio:brand。

原則

誰/什麼/為什麼優先 · 識別,而非說明 · 簡單但不單調(減少到清晰為止,然後讓一個細節變得可擁有) · 相關,而非字面意義 · 與類別有所區別 · 一個能用一句話解釋的構想 · 在 16px 和 16m、單色、反白、刺繡下均有效 · 永恆勝於潮流(一個概念,而非一個效果) · 系統的基礎(圖樣、圖示、動態都源於此) · 工藝至上(幾何、光學修正、間距) · 堅定,而非固執。

紅旗標記——在展示任何東西前修正

未經轉化的剪貼藝術字面意義或類別陳腔濫調 · 使用未修改的既有字體中的縮寫 · 無故使用超過三種顏色 · 用漸層/陰影/濾鏡來挽救弱化的形體 · 細節小於標誌的 1/48、髮絲線、小尺寸時會閉合的間距 · 接近但未對齊的角度、不流暢的曲線、不一致的線條 · 最終檔案中的即時 <text>、點陣圖、濾鏡、遮罩 · 一個需要一段文字來解釋的概念 · 任何與現有標誌相似之處。

誠實聲明

你無法保證商標已清查——建議進行專業搜尋(國家商標資料庫 / WIPO 全球品牌資料庫、反向圖像搜尋)。說明所假設的字型授權。如果你無法渲染和查看,請如此說明並保持幾何圖形格外簡單。絕不使用 AI 圖像生成來製作標記、情緒板或 mockup:主體是你撰寫的向量程式碼,mockup 是用 HTML/CSS/SVG 繪製,或合成到免費的圖庫照片上(並附上出處)。

Individual skills in this repo

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

whoamnesia/brand

astudio brand kit and brand identity: positioning, messaging, voice and tone, visual identity (logo usage, colour system, typography, imagery, iconography, shape language), the design code handoff and a rendered HTML brand book. Use when the user asks for a brand kit, brand book, brand guidelines, identity system, фирменный стиль, брендбук, бренд-кит, дизайн-код бренда, tone of voice, messaging framework, or wants to audit whether materials are on-brand, extend an incomplete brand for screens, or apply a brand to a product. Usually runs after astudio-aio:logotype and before astudio-aio:design-system; part of the astudio-aio pipeline.

whoamnesia/cta-banner

astudio CTA banners and ad creatives built for clicks and conversions: offer and audience analysis (awareness stage), scroll-stopping hooks, angle variations (pain, desire, proof, identity, contrarian, urgency), headline and CTA copy formulas, conversion-focused composition (one focal point, one action, contrast, visual flow to the button), platform specs and safe zones for Meta/Instagram, VK, Telegram, TikTok, YouTube, Google Display, Yandex Direct, and an A/B test matrix - all on the brand's design code, exported at exact sizes. Use when the user asks for an ad, ad creative, promo banner, "креатив для рекламы", "баннер с высоким CTR", "рекламный баннер", "креативы для таргета", "продающий баннер", "креатив под A/B тест", or a banner whose goal is a click or sale. Builds on astudio-aio:banner-design.

whoamnesia/design-system

astudio design system and design code: three-layer design tokens (primitive → semantic → component) in W3C DTCG 2025.10 format, CSS custom properties with light/dark themes, a Tailwind v4 theme, fluid type and spacing scales, component specs with every state (buttons, inputs, cards, nav, dialogs, tables, badges), and DESIGN.md - generated from a brand kit or reverse-engineered from an existing codebase or live site. Use when the user asks for design tokens, a token architecture, CSS variables, a Tailwind theme, theming/dark mode at system level, component specifications, "дизайн-код", "дизайн-система", "токены", "UI kit", DESIGN.md, or wants hard-coded values replaced with tokens. Part of the astudio-aio pipeline (after brand, before the site build).

whoamnesia/ui-ux

astudio UI/UX design intelligence for any interface task - designing, building, reviewing, auditing, critiquing, polishing or fixing pages, screens and components: hierarchy, layout, typography, colour, spacing, interaction, forms, navigation, states, accessibility (WCAG 2.2), responsive behaviour, motion and UX copy, backed by a searchable database (90 styles, 190+ product types with palettes and reasoning, 74 font pairings, 1900 Google Fonts with Cyrillic filter, 119 UX rules, landing patterns, chart guide, icons, GSAP presets, 22 stack guideline sets). Use when the user asks to improve or review a UI, "make it look better/premium/less generic/less AI", audit accessibility or UX, fix a layout, choose a style/palette/fonts for a product, "проверь интерфейс", "улучши UI", "сделай красивее", "аудит UX", or for any focused UI decision outside the full astudio-aio pipeline.

相關技能