Community程式設計與開發github.com

品牌系統

簡潔、編輯風格的品牌系統,作為預設品牌提供:淺色背景上的藍色調色板、Inter 字體、柔和漸層、藥丸形按鈕、帶輕微陰影的卡片、Phosphor 圖示。適用於所有沒有指定其他樣式的交付成果(簡報、文件、頁面、網頁元件),或作為可被專案樣式表取代的模板。需與 `slides`(版面配置)和 `pptx`(檔案生成)結合使用。一但要求精緻排版、視覺識別、設計標記或專業客戶交付成果時自動觸發。

品牌系統 是什麼?

此品牌系統為一個完整且即用的視覺與編輯規範,涵蓋色彩、字體、漸層、元件、標誌使用規則、外部溝通語氣及交付成果結構。它預設適用於所有面向客戶、潛在客戶或外部受眾的輸出,但當專案有自訂樣式表時,可使用專案專用值取代標記(調色板、字體、標誌),而排版規則、語氣和交付結構則維持不變。設計精神為簡潔、大量留白、高可讀性字體,並受瑞士與包浩斯美學啟發。可搭配 `slides`(15 種版面配置與敘事結構)和 `pptx`(技術性 .pptx 檔案生成)技能使用,以產出完整簡報,並可透過 `sober-writing` 和 `francais-parfait` 技能輔助編輯語氣與語言。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/marcus-clay/design-skills/tree/main/skills/brand-system

Installed? Explore more 程式設計與開發 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜歡的 AI 中提問

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

說明文件

品牌系統 是做什麼的?

一個完整且即用的視覺與編輯規範:色彩、字體、漸層、元件、標誌規則、外部溝通語氣及交付成果結構。適用於所有向客戶、潛在客戶或外部受眾提供的輸出。

這些是預設值。當專案有自訂樣式表時,應先讀取專案樣式表,並取代標記(調色板、字體、標誌):排版規則、語氣和交付結構則保持有效。

總體精神:簡潔、大量留白、高可讀性字體、瑞士與包浩斯美學。

參考檔案:

  • references/tokens.css 和 references/tokens.json:以下標記,可直接匯入。
  • references/charte.png(及 .svg):在一張圖板上顯示調色板、字體和元件。

1. 調色板

角色Hex備註
標誌顏色#295FEC僅限標誌使用
主要色(CTA、連結、強調)#3D65E8介面、強調文字、按鈕
淺色全域背景#EBEFF7內容幻燈片背景、橫幅
米白背景(漸層基底)#F8F9FB帶漸層的幻燈片與頁面基底
表面、卡片#FFFFFF卡片、區塊、框
淺色表面區塊#F0F2F7網格中的卡片
主要文字#111827正文、深色標題
次要文字#6B7280標籤、說明、元資料
狀態綠色#22C55E正向指示器

每種媒體僅使用一個強調色等級:主要色。

2. 背景漸層

柔和的徑向漸層,應用於淺色表面和幻燈片。保持細膩:第一眼應不明顯。

background: radial-gradient(
  ellipse at 85% 10%,
  rgba(180, 215, 245, 0.55) 0%,
  rgba(200, 230, 252, 0.25) 35%,
  transparent 65%
), #F8F9FB;

/* 對角變化 */
background:
  radial-gradient(ellipse at 90% 5%, rgba(165, 210, 245, 0.45) 0%, transparent 50%),
  radial-gradient(ellipse at 5% 95%, rgba(165, 210, 245, 0.25) 0%, transparent 45%),
  #F8F9FB;

在 PPTX 中:幻燈片背景 #F8F9FB,右上角徑向漸層填滿,起始顏色 #B4D7F5 透明度 55%,漸變至透明。

3. 元件

按鈕

  • 主要操作:藥丸形(圓角 999 px)、主要色背景、白色文字、右側箭頭圖示。
  • 次要操作:藥丸形、白色背景、細邊框、深色文字、右側箭頭圖示。

卡片

  • 白色或淺色表面背景、圓角 16 px、輕微陰影、無明顯邊框。
  • 元資料:以次要文字顯示年份,後接點分隔符(例如「2024 · 專案名稱」)。
  • 標題 SemiBold、正文 Regular、底部連結以次要文字顯示。

4. 字體

用途字體字重
主要標題InterBlack 900 或 ExtraBold 800
副標題、標籤InterSemiBold 600
正文InterRegular 400
元資料、說明InterRegular 400、次要文字

首選後備字體:Public Sans。系統後備:Geist、SF Pro、Helvetica Neue。禁止使用襯線或裝飾字體。

5. 圖示

Phosphor Icons 或 Lucide,根據上下文使用 Regular 或 Light 字重。交付成果中禁止使用表情符號。

6. 標誌

專案標誌隨專案提供:此技能不附帶任何標誌檔案。適用於任何標誌的使用規則:

  • 幻燈片、有色背景封面: 左上角放置標誌組合,若有白色版本則使用白色版本,符號高度 36 到 40 px。
  • 內容幻燈片、淺色背景: 僅使用符號或完整的標誌組合,置於頁尾,高度 20 到 24 px,次要文字,左下角對齊。
  • Word 文件: 第一頁頁首左側放置標誌組合,高度 28 到 32 px,勿拉伸。
  • 網頁元件: 內聯 SVG 符號,32 px,附帶指向網站的連結。
  • 保護邊距: 標誌兩側至少保留符號高度 1 倍的空間,區域內不得有文字或圖形元素。
  • 避免: 變形或拉伸標誌、使用非標誌顏色或白色以外的顏色重新著色、使用模糊或低解析度版本、放置在對比度不足的背景上。

7. 外部溝通語氣

  • 同儕對等,絕不居高臨下,絕不商業化。
  • 精確且具體:真實案例、指標、可觀察機制。
  • 易於理解但不失專業。專業性體現在精確度,而非誇大詞彙。
  • 同時應用 sober-writing 以輔助寫作姿態,若為法文文本則應用 francais-parfait。

所有外部文件中禁止使用:「充滿熱情」、「結果導向」、「價值創造者」、自我吹噓的第三人稱傳記、缺乏背景或證明的技能清單、承諾多於說明的廣告語氣。

8. 交付成果結構

商業提案、一頁式文件

  1. 客戶的背景與挑戰,不先介紹自己。
  2. 介入的角度與機制。
  3. 交付成果與里程碑。
  4. 價格與條款。
  5. 相關參考案例(類似案例)。

案例研究

  1. 初始情況:指標、限制、組織。
  2. 所做的決定及其原因。
  3. 可衡量的結果。
  4. 可以做得不同的地方。

專業傳記(80 到 100 字)

  • 以角色和區別角度開頭。
  • 兩到三個具體證據:客戶、成果、背景。
  • 以目前可用性或專業領域結尾。

開發信件:針對收件人的特定主旨;正文 80 到 120 字,包含對其情況的觀察、直接提案和明確的行動呼籲。

Word 文件:頁首放置標誌組合、頁尾包含專案聯絡資訊、正文使用 Inter 或 Public Sans、標題使用 SemiBold、僅使用一個強調色、無裝飾浮誇元素。

9. 與 slides 和 pptx 結合

三項技能、三個角色:

技能角色
brand-system(此技能)識別:調色板、字體、漸層、元件、標誌、語氣
slides版面配置:十五種版面配置、敘事結構、標題
pptx(Anthropic 的技能,需另外安裝)技術性 .pptx 檔案生成

產生簡報的步驟:

  1. 讀取 brand-system 以設定標記(或使用專案標記取代)。
  2. 讀取 slides 以選擇簡報結構與版面配置,並套用這些標記。
  3. 讀取 pptx 以生成檔案,套用前兩項的值。
  4. 逐張幻燈片檢查結果(匯出為圖片),並使用 slides 進行驗證。

10. 所有交付成果前的檢查

  1. 定位基於證據,而非形容詞。
  2. 語氣為同儕對等,而非商業化。
  3. 標誌遵守使用規則與邊距。
  4. 標誌顏色與介面強調色不同:#295FEC 用於標誌,#3D65E8 用於介面。
  5. 僅使用 Inter 或 Public Sans 字體。
  6. 無表情符號、無長破折號、無空洞流行詞。
  7. 已套用 sober-writing,若為法文文本則已套用 francais-parfait。

Individual skills in this repo

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

card-illustrations

Use when asked for an illustration, a thumbnail or a card picture for a card in a grid of content, such as a library of resources (guide, template, deck, article), when a set of cards needs one consistent treatment, or when product screenshots are shared as a reference for card illustrations. Two modes, "noir et blanc" (ink accent) or "accent couleur" (ten-hue palette), chosen by the argument or the wording of the request.

direction-design

Aide à tenir une position de responsable design : cadrer les besoins de conception à l'échelle d'une feuille de route plutôt que d'un seul sujet, planifier les bonnes instances et revues, et construire l'argumentaire qui permet de défendre un point de vue design et de peser dans un arbitrage, y compris dans une organisation pilotée par la direction technique. Déclencher dès qu'il faut préparer une feuille de route design, décider quelles instances créer ou faire évoluer, ou construire un argumentaire pour défendre une position dans un arbitrage ou une négociation de priorité.

drawing-animated-diagrams

Use when a page needs an explanatory diagram (process, timeline, flow, structure, before/after) as an SVG React component that draws itself as it scrolls into view, in a minimalist ink-and-grey style, for a Next.js or React site. Also when asked for a "diagramme animé", "schéma qui se dessine".

marker-sketch

Dessine n'importe quelle idée, description, flux, architecture, organisation, wireframe ou scène sous forme de croquis au feutre sur papier à points (SVG noir, blanc, gris, ombres portées, un accent rare), de façon rapide et toujours avec la même construction. Quatre modes, Croquis (réponse directe), Live (réunion, atelier, échange oral), Atelier (schéma dense, mise en page automatique), Interactif (évolution maintenant, ensuite, plus tard, éléments déplaçables, formes qui changent). À utiliser dès qu'on demande un schéma, diagramme, flow, croquis, sketch, illustration, wireframe, maquette rapide, carte mentale, vue d'ensemble dessinée, "montre-moi", "dessine", "visualise", "schématise", ou une illustration animée ou interactive d'une évolution. Utiliser même si l'utilisateur ne parle pas de style : ce style est le défaut.

personal-os

OS personnel avec Claude Code. À utiliser pour créer ou faire évoluer un second cerveau (un « brain »), un dossier de fichiers Markdown qui sert de mémoire et de tableau de bord à Claude Code. Déclencher quand on veut structurer son travail, traiter une inbox (comptes rendus, transcriptions, notes), mettre en place des règles d'ingestion, des agents, des commandes ou des vues générées, préparer un 1:1, tenir un registre de décisions, ou propager un changement dans tous ses contenus.

ship-to-show

Framework en 7 phases pour transformer un prototype en case study portfolio avec vidéos animées, contenu narratif bilingue et pack d'intégration. Déclencher quand l'utilisateur veut documenter un prototype, créer un case study, produire des vidéos de démonstration d'une interface, ou publier un projet dans un portfolio. Entrée : un fichier de code ou un prototype. Sortie : case study complet publié avec vidéos.

signal-research

Scans current signals across UI/UX, product design, design strategy, AI-assisted workflows, the design toolchain, B2B/B2G/SaaS design, AI regulation and process automation, then generates content angles calibrated to the user's own positioning. Use when the user asks for content ideas, wants to know what is trending or debated in design, product or AI, needs an editorial plan, or names a topic to write about (search first, then differentiate).

slides

Système de création de présentations et de slides : tokens de design, catalogue de quinze mises en page, structure narrative et conventions de rédaction des titres. Appliquer à tout output de type deck, pitch, présentation client, keynote, support de formation ou rapport visuel. Déclencher dès que la demande implique des slides, un deck, une présentation PowerPoint, Google Slides, ou tout support visuel multi-pages. Prend la priorité sur une skill de génération de fichiers (pptx) pour les choix visuels et stylistiques : celle-ci gère la technique, slides gère les tokens, la structure narrative et les mises en page.

socle

Framework de création de projet digital en 5 étapes : Structurer, Outiller, Construire, Livrer, Élargir. Appliquer systématiquement au démarrage de tout nouveau projet web, app, SaaS, ou outil interne. Déclencher dès que l'utilisateur mentionne un nouveau projet, un MVP, un prototype, un produit à construire, une app à développer, ou demande comment organiser le développement d'un produit. Également pertinent quand l'utilisateur a une idée de produit et veut passer à la réalisation, ou quand il se demande par où commencer. Ce skill prend la priorité sur les approches ad-hoc ou les scaffoldings improvisés.

ux-et-design-thinking

Apporte un regard de méthodologie UX, de cycle de design et de design thinking sur un parcours, un écran ou une proposition de conception : logique Jobs-to-be-Done, ergonomie d'interface, cohérence de parcours (customer journey), avec prise de hauteur plutôt que jugement esthétique. Déclencher dès qu'on demande un avis de conception, qu'on veut challenger un écran ou un parcours, ou qu'on réfléchit à une approche méthodologique UX.

相關技能