mcpField
B
brand-archetype-system

brand-archetype-system

github.com/rampstackco设计与 UI1.0k270 次安装1 周前更新
代码仓库

关于 brand-archetype-system

一套与技术栈和工具无关的品牌美学原型库,为设计工作提供起点。它为 Agent 和设计团队提供色彩、字体、布局、语调及图像方向建议,并要求根据具体简报调整,而非照搬。

主要功能

  1. 0112 种核心美学原型
  2. 0218 种行业应用
  3. 03色彩与字体起始方案
  4. 04布局、语调和图像方向
  5. 05基于简报的调整指引

适用场景

  1. 01从美学参考启动品牌设计
  2. 02根据行业简报调整默认方案
  3. 03收敛多个设计方向
  4. 04用另一种原型探索设计简报

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/rampstackco/claude-skills --skill brand-archetype-system

安装后在 Claude Code 中输入/brand-archetype-system确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

README.md
references/
00-archetype-system-overview.md
01-how-to-apply-an-archetype.md
references/by-vertical/
01-b2b-saas-developer-tools.md
02-b2b-saas-business-productivity.md
03-b2b-saas-marketing-sales.md
04-b2b-saas-data-analytics.md
05-fintech-consumer.md
06-fintech-enterprise.md
07-dtc-fashion.md
08-dtc-beauty.md
09-dtc-home-lifestyle.md
10-dtc-food-beverage.md
11-consumer-health-wellness.md
12-hospitality-travel.md
13-media-publishing.md
14-edtech.md
15-gaming-entertainment.md
16-marketplace.md
17-crypto-web3.md
18-real-estate-proptech.md
references/core-archetypes/
01-editorial-restrained.md
02-technical-precise.md
03-warm-conversational.md
04-bold-confident.md
05-playful-energetic.md
06-luxe-considered.md
07-clinical-trustworthy.md
08-rugged-utilitarian.md
09-retro-nostalgic.md

详细介绍

品牌原型系统

预先组合的美学原型默认值,可助力品牌设计工作快速起步。每种原型都整合了色彩倾向、字体搭配、布局模式、语气示例和图像方向,形成一类易于识别的美学风格。与技术栈无关,与工具无关。

这是一个起点素材库,而非方法论素材库。Agent 会将原型默认值应用于特定需求简报;原型本身提供的是锚点,而不是终点。


适用场景

  • 用户想要一个起点,而不是从基本原则开始设计
  • 用户提到想要借鉴其风格的品牌或美学类别
  • 需要从多个方向中更快收敛到一个方向
  • 用户想要符合垂直领域典型特征的默认值(例如,面向消费者的金融科技、B2B 开发者工具)
  • 用户想测试某份需求简报采用另一种原型后会是什么样子

不适用场景

  • 用户只需要方法论指导(使用 brand-identity)
  • 用户处于早期构思阶段,需要定位方向(使用 brand-ideation)
  • 为现有品牌定义语气(使用 brand-voice)
  • 记录已完成的品牌(使用 brand-style-guide)

与其他技能的组合方式

此技能可在 brand-identity 之前使用(提供起始默认值,再由 brand-identity 将其完善为完整系统),并行于 creative-direction 使用(可根据原型在 4 个 creative-direction 轴上的位置对其进行定位)。

调用此技能时的典型流程:

  1. 用户提供需求简报或提及目标原型
  2. Agent 选择最相关的核心原型,或由 2 个相邻原型组合而成
  3. Agent 根据需求简报调整原型默认值(调整颜色令牌、替换为适合垂直领域的字体、改写品牌语气示例)
  4. Agent 说明所做的调整选择

将原型的默认调色板直接照搬到新品牌中,是一种失败模式。原型用于限定设计空间;需求简报则确定该空间内的具体位置。


框架:12 种核心原型加 18 种垂直领域应用

references/ 中有两层内容:

核心原型(12 个文件)

位于 references/core-archetypes/。每个文件描述一种美学风格,包含:

  • 美学概要
  • 在 4 个 creative-direction 轴上的位置
  • 色彩调色板起始方案(包含 4 到 6 个十六进制值、令牌名称和选择理由)
  • 字体搭配起始方案(Google Fonts 字体搭配及字号比例)
  • 布局与构图模式
  • 语气示例(5 到 10 条代表性文案)
  • 组件模式说明(主视觉、按钮、卡片、表格)
  • 图像方向
  • 适用场景和不适用场景
  • 调整指南
  • 带有归属说明的典型品牌
垂直领域应用(18 个文件)

位于 references/by-vertical/。每个文件将该垂直领域中的指定品牌映射到核心原型,包含:

  • 垂直领域概要
  • 常见原型
  • 品牌与原型的映射关系(每个垂直领域包含 5 到 10 个品牌)
  • 垂直领域专属调整说明
  • 品牌成熟过程中常见的原型演变模式
两个概览文件
  • 00-archetype-system-overview.md:系统的运作方式与分类体系
  • 01-how-to-apply-an-archetype.md:调整规范与失败模式

12 种核心原型

#原型一句话概述
01克制编辑风低饱和度、以字体为主、大量留白、经过审慎考量
02精准技术风突出等宽字体和网格、数据密集、富有系统感
03温暖亲和风采用人物图像、中等饱和度、字体友好、平易近人
04大胆自信风高对比度、大号展示字体、高饱和度、直截了当
05活泼动感风色彩明亮、以插画为主、充满动感、角色鲜明
06奢华考究风以衬线字体为主、间距宽裕、配色克制、彰显高端
07临床可信风冷色调、无衬线字体、简洁的医疗或金融风格
08粗犷实用风大地色系、融入工装风格、字体直截了当
09复古怀旧风采用特定年代的配色和字体,刻意致敬复古风格
10极简主义风黑、白、单一强调色、仅用无衬线字体、简约稀疏
11鲜艳饱和风全套配色均为高饱和度,以色彩塑造个性
12纪实真实风以摄影为主、展现真实人物、图像少经修饰

18 种垂直领域应用

  • B2B SaaS:开发者工具、商业生产力、营销与销售、数据与分析
  • 金融科技:消费级、企业级
  • DTC:时尚、美妆、家居与生活方式、食品与饮料
  • 消费者健康与身心 wellness
  • 酒店与旅行
  • 媒体与出版
  • 教育科技
  • 游戏与娱乐
  • 市场平台
  • 加密货币与 Web3
  • 房地产与 Proptech

商标与归属说明

原型以审美风格类别命名,而非以品牌命名。“克制编辑风”,而不是“类似 Stripe”。在描述文字中使用归属说明来引用品牌作为范例:“以 [brands] 为例”“常见于 [brands]”“具有 [brands] 的典型特征”。

这属于描述性和指称性合理使用范畴,并且不会因品牌重新设计而失效。品牌调整其形象,并不会使其曾经代表的原型失效。


四个创意方向轴(参考)

每种原型在 creative-direction 技能中定义的 4 个轴上都有相应定位。以下是供交叉参考的简要说明:

  • 语气风格:专业、对话式、活泼
  • 审美风格:克制、考究、表现力强、极繁
  • 受众关系:权威、同伴、伙伴、表演者
  • 感官目标:功能性、考究、沉浸式、戏剧化

每个核心原型文件都说明其在每个轴上的定位。


参考文件

12 个核心原型文件位于 references 下的 core-archetypes/ 子目录中,编号从 01(克制编辑风)到 12(纪实真实风)。18 个垂直领域应用文件位于 references 下的 by-vertical/ 子目录中,编号从 01(B2B SaaS 开发者工具)到 18(房地产与 Proptech)。对于同时指定审美风格类别和行业的需求,请一并加载相关核心原型文件和垂直领域文件。

评论

支持 Markdown