Community编程与开发github.com

品牌系统

简洁、编辑风格的品牌系统,作为默认品牌提供:浅色背景上的蓝色调色板、Inter 字体、柔和渐变、药丸形按钮、带轻微阴影的卡片、Phosphor 图标。适用于所有交付物(演示文稿、文档、页面、网页内容),当未指定其他品牌指南时使用,或作为模板并在项目品牌指南明确时替换。需与 `slides`(页面布局)和 `pptx`(文件生成)结合使用。一旦要求进行精细排版、视觉标识、设计令牌或具有专业外观的客户交付物时触发。

品牌系统 是什么?

该技能提供了一个全面的、即用型的视觉和编辑参考系统,包括色彩、排版、渐变、组件、Logo 使用规则、对外语气以及交付物结构。它被设计为所有面向客户、潜在客户或外部受众的产出的默认品牌。当项目有自己的品牌指南时,应首先读取该指南,并用项目特定的令牌(如调色板、字体和 Logo)替换默认值,而保留通用的布局规则、语气和交付结构。该系统的整体精神是“少即是多”,强调留白、高可读性排版以及瑞士/包豪斯美学。它最适合与 `slides`(管理幻灯片页面布局)和 `pptx`(处理技术性的 `.pptx` 文件生成)技能结合使用,以创建结构化的演示文稿。该技能还包含一份详尽的“交付前检查清单”,以确保所有产出都符合其标准。

兼容平台✓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 的新对话。

文档

品牌系统 是做什么的?

一个完整、即用型的视觉和编辑参考系统:色彩、排版、渐变、组件、Logo 规则、对外语气和交付物结构。适用于所有面向客户、潜在客户或外部受众的输出。

这些值是默认值。当某个项目有自己的品牌指南时,请先读取该指南并替换令牌(调色板、字体、Logo):但布局规则、语气和交付物结构仍然有效。

整体精神:手段经济、留白慷慨、高可读性排版、瑞士/包豪斯美学。

参考文件:

  • references/tokens.css 和 references/tokens.json:以下令牌,可直接导入。
  • references/charte.png(及 .svg):包含配套卡片上的调色板、排版和组件。

1. 调色板

角色十六进制颜色说明
Logo 颜色#295FEC仅用于 Logo
主要 (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 · 项目名称”)。
  • 标题为半粗体,正文为常规体,底部链接为次要文本。

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. Logo

项目的 Logo 随项目一起提供:此技能不附带任何 Logo 文件。适用于任何 Logo 的使用规则:

  • 幻灯片、彩色背景封面: Logo 位于左上角,如有白色版本则使用,符号高度为 36-40 px。
  • 内容幻灯片、浅色背景: 仅在页脚使用符号或完整 Logo,高度 20-24 px,次要文本,左下角对齐。
  • Word 文档: Logo 位于第一页页眉,左对齐,高度 28-32 px,不拉伸。
  • 网页内容: 内联 SVG 符号,32 px,并带有指向网站的链接。
  • 保护边距: 每边至少为符号高度的一倍,此区域内不得有任何文本或图形元素。
  • 禁止事项: 变形或拉伸 Logo;将其重新着色为除其指定颜色或白色以外的颜色;使用模糊或低分辨率版本;将其放置在对比度不足的背景上。

7. 对外语气

  • 平等对等,绝不居高临下,绝不商业推销。
  • 精确且立足实际:真实案例、指标、可观察的机制。
  • 通俗易懂但不简化。专业性体现在精确性上,而非夸大其词。
  • 同时应用 sober-writing 以实现编辑姿态,应用 francais-parfait 以实现法语文本。

在所有外部文档中禁止出现的内容:“充满热情”、“结果导向”、“价值创造者”、第三人称自我吹捧的简介、没有背景或证据的技能列表、以及承诺很多但解释很少的机构语气。

8. 交付物结构

商业提案、一页纸

  1. 客户的背景和挑战,无需关于自我的介绍。
  2. 干预的角度及其机制。
  3. 交付物和里程碑。
  4. 价格和条款。
  5. 相关参考(类似案例)。

案例研究

  1. 起始情况:指标、约束、组织。
  2. 所做的决定及其原因。
  3. 可衡量的结果。
  4. 原本可以做得不同的地方。

专业简介(80-100 字)

  • 以角色和差异化的角度开头。
  • 两到三个具体证据:客户、结果、背景。
  • 以当前的可用性或专业领域结束。

拓展邮件:针对收件人的具体主题行;正文 80-120 字,包含对其情况的一个观察、一个直接建议和一个明确的行动号召。

Word 文档:页眉中的 Logo,页脚中的项目联系信息,正文使用 Inter 或 Public Sans,标题为半粗体,仅一个强调色,无装饰性点缀。

9. 与 slides 和 pptx 结合

三个技能,三个角色:

技能角色
brand-system(当前)身份:调色板、排版、渐变、组件、Logo、语气
slides页面布局:十五种布局、叙事结构、标题
pptx(Anthropic 的技能,需单独安装).pptx 文件的技术生成

生成演示文稿的步骤:

  1. 读取 brand-system 以固定令牌(或将其替换为项目的令牌)。
  2. 读取 slides 以选择演示文稿结构和页面布局,并应用这些令牌。
  3. 读取 pptx 以生成文件,应用前两者的值。
  4. 使用 slides 的验证功能,逐张幻灯片检查结果(导出为图像)。

10. 所有交付物前的检查清单

  1. 定位基于证据,而非限定词。
  2. 语气对等,而非商业推销。
  3. Logo 遵守其使用规则和边距。
  4. Logo 颜色和界面强调色不同:#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.

相关技能