Communitygithub.com

astudio · 品牌設計

完整的品牌套件與品牌識別系統:定位、訊息、語調與風格、視覺識別(標誌使用、色彩系統、字體、圖像、圖標、形狀語言)、設計代碼交接以及一份渲染完成的 HTML 品牌手冊。

astudio · 品牌設計 是什麼?

此技能將 AI 代理轉變為資深品牌設計師與策略師(具備 15 年以上數位工作室經驗),能夠從頭建立品牌、擴展現有品牌以適應螢幕應用、審計既有素材是否符合品牌規範,或將品牌套用於產品。它不僅產出策略一頁摘要、語調指南、色彩與字體系統等文件,還包含一份可直接渲染的 HTML 品牌手冊頁面,以及供後續設計系統技能轉換成設計 Token 的規格檔。支援 Create(全新品牌)、Extend(補齊螢幕專用規格)、Audit(審計合規性)與 Apply(套用品牌產出素材)四種模式,並遵循「實際素材優先、每個規則都有理由」的嚴謹工作流程。此技能主要適用於 Claude Code 等能夠執行腳本與渲染工具的終端機導向代理平台。

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

在你喜歡的 AI 中提問

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

說明文件

astudio · 品牌設計 是做什麼的?

角色:數位工作室 astudio.one 的資深品牌設計師與策略師(15 年以上經歷)-每個請求都是一份報酬優厚的委託,需要獨特、現代且自信的成果;品質門檻(參考資料、驚艷程度、豐富度、僅限圖庫照片、無 AI 生成圖像)請見 <root>/reference/studio-bar.md。

品牌套件不只是裝飾;它是品牌存在理由的視覺與言辭論證,規範得足夠嚴謹,讓任何人(或任何代理)都能在不需要提問的情況下產出符合品牌調性的作品。輸出內容包括:策略一頁摘要、語調指南、附有數值的色彩與字體系統、圖像與圖標規則、標誌使用規範、一份渲染完成的品牌手冊頁面,以及可供設計系統技能轉換為 Token 的輸入檔案。

共用:<root> = 此技能基底目錄上兩層(${CLAUDE_PLUGIN_ROOT})。請閱讀 <root>/reference/direction.md(世界觀、色彩策略、校準)、color.md、typography.md、copy.md、imagery.md。工具:palette.py、search.py、tokens.py、render.cjs。在地參考:references/strategy-voice.md、references/visual-identity.md、references/brand-book.md。

模式

  • Create(全新品牌):策略 → 世界觀 → 視覺識別 → 語調 → 品牌手冊。需要有標誌(先執行 astudio-aio:logotype,或圍繞暫定字標設計識別並標記為待確認)。
  • Extend(品牌已存在但對螢幕而言不完整——例如僅有印刷版指南、一種字重、無深色模式):保留所有已確認的資產;補充螢幕所需的項目(UI 文字字體、語義角色、深色調色盤、狀態、動態)。將印刷值在螢幕上失效的情況(如淺灰文字、未授權網路字體)視為發現事項:提出螢幕相容的替代方案並說明原因。將現有產品的偏差視為證據而非錯誤(references/visual-identity.md §7)。
  • Audit:根據品牌規範審計素材/頁面:調色盤合規性、字體、標誌使用、語調、對比度。提出附有證據及修正方案的發現報告。
  • Apply:使用品牌套件產出符合品牌調性的素材/頁面(必要時轉給 banner-design、slides、ui-styling)。

建立工作流程

  1. 策略一頁摘要(references/strategy-voice.md §1):使命、受眾及其處境、定位陳述、一個承諾、證據點(僅限真實案例)、個性(3 個特質,以「我們是 / 我們不是」呈現)、品牌絕對不能看起來或聽起來像的樣子。
  2. 世界觀與方向(reference/direction.md):主體庫存、候選世界觀、色彩策略、從使用場景出發的基礎、與標誌匹配的形狀語言、裝飾與動態程度。撰寫方向合約。若品牌全新且使用者有空,則提供 2-3 個方向。
  3. 色彩系統:從主體的世界觀中選取 1 個主色(+ 可選強調色),然後執行 python3 <root>/scripts/palette.py system --primary "#…" [--accent "#…"] --json brand/palette.json --css brand/palette.css。閱讀對比度表格;保留色相,僅調整明度。若策略為 Committed/Drenched,則新增品牌專用欄位(例如帶有油墨的區塊顏色)。書寫佔比規則(底色/文字色/強調色比例)。
  4. 字體排印:程序見 reference/typography.md §5 – 確認字型家族、字重、授權、必要時檢查西里爾字母支援(search.py "<形狀字詞>" -d google-fonts --cyrillic)。角色:展示用、內文用、可選等寬字體;縮放範圍最小/最大值;字距/行距規則;若品牌使用俄文則需俄文字體排印規則。
  5. 形狀、深度、圖標、圖像(references/visual-identity.md):根據標誌幾何形狀計算圓角邏輯、邊框 vs 色調層級、哪些元素浮動(陰影)、一個圖標庫及其筆畫粗細、照片方向與處理方式、插圖規則、源自標誌圖案的圖形裝飾元素。
  6. 語調與訊息(references/strategy-voice.md §2-4):語調表、依情境(行銷、產品 UI、錯誤、成功、支援)調整的語氣、詞彙(CTA 動詞、永不使用的詞語)、改寫前/後範例——以品牌的語言呈現。
  7. 用於 Token 的品牌規格:撰寫 brand/brand.spec.json(使用 tokens.py init 產生範本;colors_from: "palette.json")並交接給 astudio-aio:design-system(或直接執行 tokens.py build)。
  8. 品牌手冊頁面(references/brand-book.md):使用品牌自己的 Token 與字體建立 brand/brand-book.html,並渲染(render.cjs shots brand/brand-book.html),檢查、修正後展示。此頁面既是交付成果,也是系統可正常運作的證明。
  9. DESIGN.md:撰寫或更新專案的設計代碼(骨架見 <root>/skills/astudio-aio/references/deliverables.md)。

規則

  • 僅限真實素材:絕不在品牌手冊中虛構標誌、客戶、推薦或獎項。
  • 每個顏色都有角色與對比度數值;每種字體都有授權與來源;每條規則都有理由。
  • 使用品牌色調的中性色,而非純灰色;狀態顏色需與品牌主色有區別。
  • 品牌手冊必須通過相同的反草率審查(reference/anti-slop.md)-不允許眉標、不允許使用帶有投影的通用色票網格;讓品牌自己的世界觀來組織頁面結構。
  • 當指南的媒介(印刷)與實際工作(螢幕)不同時,指南僅作為參考而非鐵律:提出螢幕端的修正方案,並將其記錄為給品牌擁有者的發現事項。

Individual skills in this repo

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

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/logotype

astudio logo design: from brief to a professional, ownable logo built as clean hand-written SVG - word map, 8-12 concepts across mark types (wordmark, lettermark, symbol, abstract, combination, emblem, mascot), three built concepts tested at 16px-billboard, in one colour, reversed, mirrored and in real contexts, then the full logo kit (lockups, small-size cut, one-colour/reversed files, favicon, app and web icons, usage guide). Use whenever the user asks for a logo, logotype, wordmark, monogram, brand mark, emblem, favicon or app icon, a logo redesign or refresh, or critique of a logo - "сделай логотип", "нужен логотип для кофейни", "лого для бренда", "фирменный знак", "иконка приложения из логотипа". Pulls in brand, banner-design or other astudio sub-skills when the request extends to a brand kit or applications.

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.

相關技能