yuv-design-system

Name: yuv-design-system
Author: hoodini

github.com/hoodini设计与 UI29146 次安装5 天前更新

代码仓库

关于 yuv-design-system

yuv-design-system 是面向 Claude 等工具的 YUV.AI 品牌设计规范技能，指导何时应用品牌规则，以及如何按媒介选择配色、字体和素材。它仅用于 Yuval 个人或 YUV.AI 品牌内容，不适用于通用设计任务。

主要功能

01按场景判断是否应用品牌规范
02提供 Neon、Decks 和 Warm Editorial 配色模式
03规定字体、构图与品牌视觉元素
04按媒介提供深入参考文件

适用场景

01制作 YUV.AI 网站或应用界面
02设计 Yuval 的演示文稿或社交图片
03为品牌介绍页选择字体和素材

安装

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

$npx skills add https://github.com/hoodini/ai-agents-skills --skill yuv-design-system

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

包含的文件

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

references/

lessons-learned.md

palettes-neon.md

palettes-warm-editorial.md

presentations.md

social-and-links.md

social-images.md

typography.md

visuals-and-charts.md

web-and-react.md

references/components/

AltimeterDial.tsx

CompassDial.tsx

CounterUp.tsx

FlightHUD.tsx

HeroBg.tsx

index.ts

keyframes.css

PurpleBar.tsx

YellowUnderline.tsx

references/tokens/

palette.css

palette.json

tailwind.config.js

详细介绍

yuv-design-system

Yuval Avidani（yuv.ai）的个人品牌与设计系统标准。此技能规定 YUV.AI 的作品应当呈现何种视觉效果——包括调色板、排版、视觉元素、素材、链接——以及何时应用这些规则。

**权威信息源：**位于 https://github.com/hoodini/yuv-design-system 的公开参考仓库（私有）。该仓库包含可运行的设计令牌和组件；此技能则编码了相关规则，让 Claude 能在任何情境中应用这些规则。

此技能在 YUV.AI 金字塔中的位置：yuv-design-system 是中间层的视觉规则技能。它的上层是 yuv-pilot——金字塔顶层的编排器，会将含义不明确或涉及多种媒介的 YUV.AI 请求分发给合适的下游技能。它的下层（以及中间层的同级技能）是 yuv-decks（幻灯片制作）和 yuv-viral-video（病毒式短 MP4 视频）。当 yuv-pilot 或同级技能调用此技能时，它们会指定一种调色板模式（Neon / Decks / Warm Editorial）——绝不要在任务中途更换模式。完整的金字塔示意图请参阅 yuv-pilot/SKILL.md。

§0. 何时应用此技能——请先阅读

此技能代表 YUV.AI 品牌形象，不是通用的视觉设计技能。请谨慎应用。

✅ 适用情况

输出明确面向 YUV.AI 或 Yuval 本人——例如他的作品集、品牌网站、主题演讲、幻灯片、演讲者简介、个人资料、社交媒体卡片、About 页面、linktree、课程落地页，或使用其品牌素材或徽标的作品。
Yuval 提到“我的品牌”“我的设计系统”“我的幻灯片”“我的网站”“我的演示文稿”“为我制作”“YUV.AI”“Fly High”“Let's Fly High”，或任何表明输出属于其品牌形象的内容。
需要使用 YUV.AI 品牌素材（徽标、个人照片、水印）。

❌ 不适用情况

Yuval 要求制作通用的游戏、Web 应用、仪表盘、落地页、演示、原型或视觉作品，且没有 YUV.AI 相关背景。（“给我做个贪吃蛇游戏” → 选择适合游戏的任意调色板，而不是品牌调色板。）
作品属于其他品牌、客户、第三方或 Yuval 本人以外的任何人。
Yuval 明确指定了其他调色板或框架。

不确定时

只问一次：“这是用于 YUV.AI 品牌，还是可以自由选择调色板？”——然后确定方案。不要在任务中途摇摆。

Claude / Copilot / Cursor 的默认行为：如果没有 YUV.AI 相关信号，就不要启用此技能，让所选工具依照自身的设计判断处理。过度触发此技能，远比触发不足更糟。

如何使用此技能（适用时）

根据媒介选择调色板模式（见 §1）：
- 演示文稿 / 幻灯片 / 主题演讲 → Decks（Fly High 紫色/黄色/灰色）
- Web / 应用 / 游戏 / 仪表盘 / 社交媒体 / 通用 → Neon（默认——粉色/青色/白色）
- Hope / Marcus / bigcats / 课程落地页 → Warm Editorial（粉色/黄色/骨白色）
应用强制字体（Anton/Inter + Rubik/Assistant——见 §2）。
贯穿通用的 Fly High 主线（跨模式使用视觉元素——见 §1a）。
适合时使用随附的品牌素材，例如徽标、个人照片或水印（见 §3）。
在页脚、About 区块、致谢和演讲者简介中加入标准链接集与资历信息（见 §4）。

深入参考资料——加载与媒介相匹配的文件：

媒介	阅读此文件
YUV.AI Web / 应用 / 游戏 / 仪表盘	`references/palettes-neon.md` + `references/web-and-react.md`
幻灯片 / 主题演讲	`references/presentations.md`
信息图 / 图表 / 数据可视化	`references/visuals-and-charts.md`
社交图片 / 海报	`references/social-images.md`
希伯来语 / 双语 / RTL	`references/typography.md` § Hebrew
强化模式	`references/lessons-learned.md`

只加载相关内容，以保持上下文精简。

§1. 配色模式 — 按媒介选择

共有三种命名模式。根据输出类型选择，而不是凭直觉。 不要偏离。

模式	适用场景	配色
Neon （YUV.AI 品牌项目的默认模式）	网站、Web 应用、游戏、仪表板、社交媒体图片、海报、AI 工具、个人资料／关于页面内容，以及任何非幻灯片形式的 YUV.AI 视觉作品	亮粉色 + 霓虹青色 + 白色 + 黑色
Decks （Fly High）	演示文稿、幻灯片、主题演讲、黑客松演示文稿、演讲录制、采用幻灯片形式的视频横幅	紫色 + 黄色 + 浅灰色
Warm Editorial	Hope（猎豹）、Marcus（白狮）、bigcats.ai、practical.yuv.ai 课程落地页——任何属于编辑风粉色与骨白色品牌系列的项目	暖粉色 + 黄色 + 米白色 + 骨白色

如果在任务中途选择模式时无法确定，请询问一次，然后就此决定。

§1a. Fly High 的通用主线（适用于所有模式）

无论配色如何，YUV.AI 的作品都承载着相同的品牌基因——这些元素让作品呈现出 YUV.AI 的感觉：

文案中的飞行隐喻：爬升／巡航／下降／飞行前／已着陆／起飞／航向／高度／“让我们飞得更高”。
**进度可视化：**渐变进度条（Decks 为紫色→黄色，Neon 为粉色→青色，Warm Editorial 为粉色→黄色）、HUD 条、类似高度计／罗盘的刻度盘、统计数据的递增动画。
在有意义的位置加入凤凰标志（或 Y-bird）——主视觉、关于页面、水印。
在任何可分享的界面（幻灯片、社交卡片、主视觉裁剪图）右下角添加 “LET'S FLY HIGH · YUV.AI” 水印。
用 letter-spacing: 0 作为默认值，采用 Anton 全大写展示字体。
JetBrains Mono 用于仪表风格读数和字距为 0.2em+ 的章节眉题。

这些品牌基因元素贯穿所有模式。配色告诉你这是哪个品牌篇章；这些元素则告诉你它依然是 YUV.AI。

§1b. Neon — 新的默认模式（Web、应用、游戏、通用视觉作品）

日常使用的 YUV.AI 品牌风格。灵感来自 Tavus：以亮粉色为主色，以霓虹青色为电光般的对比色，以白色或浓郁黑色为画布。最适合产品界面、Web 应用、游戏、仪表板，以及任何在浏览器中呈现或可交互的内容。

:root {
  --yuv-pink:       #FF1464;   /* primary brand — CTAs, accents, the thread color */
  --yuv-pink-hot:   #FF0080;   /* high-energy variant for glow / shadow / hover */
  --yuv-cyan:       #00E5FF;   /* electric secondary — data, highlights, focus rings */
  --yuv-cyan-edge:  #00FFFF;   /* max-neon variant — small surfaces only */
  --yuv-white:      #FFFFFF;   /* canvas (light mode) or text-on-dark */
  --yuv-black:      #0A0A0A;   /* canvas (dark mode) or text-on-light */
  --yuv-charcoal:   #1A1A1A;   /* secondary surface (dark mode), text on light */
  --yuv-soft:       #F4F4F6;   /* alt light surface for layering on white */
}

Neon 模式规则：

**两种画布选项：**白色 #FFFFFF 或浓郁黑色 #0A0A0A。每个界面只选一种。不要使用中间灰色。
粉色是贯穿主线的颜色——主要 CTA 填充色、主视觉标题强调色、品牌条纹。
青色是第二种声音——次要 CTA、焦点环、主视觉数据点、链接悬停色、进度填充色（青色衬粉色）。青色不可大面积铺开——只能用作强调色。
允许发光。text-shadow: 0 0 24px var(--yuv-pink)、box-shadow: 0 0 32px rgba(0,229,255,0.4)。品牌可以闪耀，但不能闪烁（禁止彩虹色和多色渐变）。
**渐变：**仅限粉色 → 青色。用于小面积界面元素（按钮、文字下划线、进度条）。绝不用于整页铺色。
**标题：**Anton 全大写；深色背景上用白色或粉色，白色背景上用黑色。line-height: 1.0 保持紧凑，默认 letter-spacing: 0。
**卡片样式：**浓郁黑色 #0A0A0A 背景，边框为 1px solid rgba(255,20,100,0.25)；悬停时可选用 0 0 0 1px #00E5FF 内发光。浅色画布上使用白色卡片，边框为 1px solid rgba(0,0,0,0.08)，左侧加 4px solid #FF1464 条纹。
光标和 UI 交互元素可以带青色色调；主视觉则以粉色为主。

完整指南——构图模式、发光配方、霓虹主题组件 → references/palettes-neon.md。

§1c. Decks（Fly High）— 仅用于演示文稿

这是现有的紫色／黄色／灰色幻灯片系统。**仅用于幻灯片、主题演讲和演示文稿。**不要用于 Web 应用或游戏。

:root {
  --yuv-purple:      #5E17EB;   /* primary deck brand, act-slide backgrounds, vertical accent bars */
  --yuv-purple-dark: #3D0DA8;   /* decorative depth, diagonal accents */
  --yuv-yellow:      #FFEC00;   /* loud accent only — never a slide background */
  --yuv-grey:        #F1F2F2;   /* content-slide background */
  --yuv-white:       #FFFFFF;   /* cards on grey, headers on purple */
  --yuv-black:       #000000;   /* headers on grey, body */
  --yuv-grey-dark:   #D4D6D6;   /* dividers on grey */
}

完整的幻灯片规则——双背景规则、FlightHUD、PurpleBar、YellowUnderline、标志性视频横幅样式——见 references/presentations.md。只有 Decks 模式使用紫色／黄色配色。

双背景规则（Decks 模式，不容妥协）

每张幻灯片只能处于两种状态之一。**绝不虚构第三种。**黄色是强调色，绝不能用作背景。

类型	背景	标题颜色	用途
Act	紫色 `#5E17EB`	白色 `#FFFFFF`	标题、章节分隔页、结束页、主视觉
Content	浅灰色 `#F1F2F2`	黑色 `#000000`	其他所有内容——信息、证据、列表

§1d. Warm Editorial 设计令牌

:root {
  --pink:       #FF1464;   /* primary brand, CTAs, thread color */
  --yellow:     #E5FF00;   /* accent — when it shows up, it dominates */
  --black:      #0A0A0A;   /* warm near-black, never blue-black */
  --off-white:  #FAFAF7;   /* paper-feel, replaces #FFFFFF entirely */
  --bone:       #F5EEE4;   /* transitional sections, cream */
  --charcoal:   #1A1A1A;   /* primary text on light */
}

完整的 Warm Editorial 规则（纸张颗粒、暖色阴影、渐变禁令等）→ references/palettes-warm-editorial.md。

适用于所有模式的规则

不要使用默认 Tailwind 调色板。 不要使用 slate、zinc、indigo、emerald 等。始终遵循所选模式。
边框圆角：只能是 0 或 999px。 8–12px 的中间值最容易暴露“AI 模板”的痕迹。
尽可能采用不对称布局，而非完美网格。 列错位，让一个元素打破网格。
留白要充足。 克制才能彰显高级感。
内容最大宽度为 1440px。 桌面端区块内边距为 120–160px，移动端为 64–80px。

各模式的画布／白色规则

模式	根元素可用纯 `#FFFFFF` 吗？	白色可用位置
Neon	可以——`#FFFFFF` 是有效画布（两种颜色之一，另一种是浓黑色 `#0A0A0A`）。	任何位置，但每个表面只能选一种。不要使用灰白之间的颜色。
Decks	不可以——页面／幻灯片根元素必须是 `#5E17EB`（act）或 `#F1F2F2`（content）。	内容幻灯片中的卡片可以使用纯白色。
Warm Editorial	不可以——任何位置都禁止使用 `#FFFFFF`。请使用灰白色 `#FAFAF7`。	—

§2. 字体排版——强制要求

英语

展示／标题： Anton。始终使用大写。默认字母间距为 0（正常）。 Anton 字体本身已经很窄——负字距会让字母相碰，这正是系统过去犯的错误。只有在超大主视觉字号（≥ 180px）时才能使用负字距，且不得小于 -0.015em。行高为 1.0–1.05。绝不使用小写或标题式大小写。
正文／UI： Inter，字重 400 / 500 / 600 / 700 / 900。正文行高为 1.5。
等宽字体（读数、引文、眉题）： JetBrains Mono。

希伯来语

展示： Rubik（字重最高可达 900）。
正文： Assistant。
希伯来语页面：<html lang="he" dir="rtl"> + CSS 逻辑属性（使用 margin-inline-start，而非 margin-left）。

双语规则（经过实战验证）

绝不要将英语和希伯来语并排或相邻放置。 在展示字号下，Anton + Rubik 的字形会在视觉上重叠（下伸部会侵入下一行的上伸部）。请改用语言切换功能，每次只显示一种语言。完整且经过强化的实现模式见 references/lessons-learned.md § Bilingual toggle。

一个 Google Fonts 链接——始终可以安全地加载全部四种字体

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;500&family=Rubik:wght@400;500;600;700;800;900&family=Assistant:wght@400;500;600;700&display=swap" rel="stylesheet">

将字体系列叠加在一个变量中，让浏览器根据字形选择字体：

:root {
  --yuv-font-display: 'Anton', 'Rubik', system-ui, sans-serif;
  --yuv-font-body:    'Inter', 'Assistant', system-ui, sans-serif;
  --yuv-font-mono:    '"JetBrains Mono"', '"SF Mono"', ui-monospace, Menlo, monospace;
}
h1, h2, h3, .display {
  font-family: var(--yuv-font-display);
  text-transform: uppercase;        /* Latin only — Hebrew unaffected */
  letter-spacing: 0;                /* Anton is condensed — DO NOT add negative tracking */
  line-height: 1.0;
}
/* Only at hero size (≥ 180px) and only when the headline visually demands it: */
.display-hero { letter-spacing: -0.01em; }   /* max — never tighter */

禁止使用的默认选项： 衬线字体、手写体字体、system-ui、Tailwind 默认字体栈。

§3. 品牌素材——打包在 `assets/` 中

此技能附带四个标准文件。当输出需要使用真实品牌标识而非占位符时，请使用这些文件。

资源获取——备用链（适用于任何机器）

需要品牌图片时，请按以下顺序使用此链：

在技能包中查找。 在正确安装的机器上，资源始终位于以下路径之一：~/.claude/skills/yuv-design-system/assets/、~/.copilot/skills/yuv-design-system/assets/ 或 ~/.agents/skills/yuv-design-system/assets/。使用运行环境提供的路径。
如果不知道技能的位置（无头环境、新建容器），请在常见位置扫描本地仓库克隆：~/Documents/ai-decks/yuv-design-system/、~/yuv-design-system/、~/Code/yuv-design-system/、~/dev/yuv-design-system/。如果找到，请使用其 assets/。
**如果本地没有任何资源，请克隆规范仓库。**该仓库为私有仓库，但机器上用户的 GitHub 身份验证可让 git clone 无需提示即可运行：
```
git clone https://github.com/hoodini/yuv-design-system.git ~/Documents/ai-decks/yuv-design-system
~/Documents/ai-decks/yuv-design-system/scripts/install-skill.sh
```
这会将资源放入 ~/.claude/skills/yuv-design-system/assets/，并创建 Copilot/Agent 符号链接。
沙盒会话中无法执行第 3 步时的最后备用方案（例如没有 Git 身份验证的 CI）：以内联 base64 data:image/png;base64,… 的形式嵌入。仅在最后不得已时使用——文件引用更小，也更便于编辑。

仓库地址为 https://github.com/hoodini/yuv-design-system，且为私有仓库。不要尝试使用 raw.githubusercontent.com URL——没有个人访问令牌时，这些 URL 会返回 404。请改用 git clone。

四个文件

文件	使用场景	备注
`assets/logo-square-transparent.png`	浅色或深色背景上的徽标——任何需要干净抠图的场景（网站图标、页眉、应用图标、自定义背景上的社交卡片）	凤凰标志，透明背景，正方形
`assets/logo-square-color.png`	主视觉徽章、社交资料图片、OG 图片，以及需要徽标自带彩色底板的场景	带品牌底板的凤凰标志，正方形
`assets/logo-rectangle-wordmark.png`	水印（幻灯片、视频、截图的右下角）、电子邮件签名、下三分之一叠加层、证书	“LET'S FLY HIGH · YUV.AI”字标
`assets/profile-yuval-studio.png`	关于版块、课程页面、播客图片、“认识你的讲师”版块、演讲者简介卡片	Yuval 在工作室中，背景为 YUV.AI 霓虹灯

快速路径——调用 `ensure-assets.sh`

如果你在支持 Shell 的会话中运行，并且只想获取一个可靠可用的资源路径，请运行：

ASSETS_DIR=$(/path/to/yuv-design-system/scripts/ensure-assets.sh)
echo "$ASSETS_DIR"

此脚本会遍历备用链（技能包 → 本地克隆 → git clone），并打印可用 assets/ 目录的绝对路径。如果未配置 GitHub 身份验证导致克隆失败，脚本会以非零状态退出，并显示明确的错误信息。

嵌入规则

**水印位置：**所有幻灯片／视频／可分享图片的右下角，边距约为画布宽度的 3%；在 1920×1080 尺寸下，宽度约为 120–180px。水印请使用 logo-rectangle-wordmark.png。切勿拉伸。
**深色背景上的主视觉徽标：**优先使用 logo-square-transparent.png，这样凤凰标志可置于任意背景上。
**浅色／灰色／骨白色背景上的主视觉徽标：**同样优先使用透明底正方形图像——标志本身的颜色足够丰富，可独立呈现。
**社交资料／OG 卡片：**使用 logo-square-color.png（自带底板，在信息流中更醒目）。
**简介／关于／联系页面的头像：**使用 profile-yuval-studio.png。根据展示区域裁剪为正方形或 4:5 竖版。

用于网页嵌入时，将资源复制到项目的 public/ 目录并引用；或者，对于无法添加文件的 HTML 产物，将其以内联 data:image/png;base64,… URI 的形式嵌入（仅在最后不得已时使用——优先使用文件引用）。在幻灯片中，请原生嵌入。

§4. 规范简介 + 链接集——自动包含

只要输出中包含页脚、联系版块、“在其他平台找到我”版块、个人资料卡、演讲者简介、鸣谢面板或视频结束画面，就自动包含此链接集。无需请 Yuval 提供。

资历（用于个人简介、关于版块、演讲者介绍、课程页面）

2× GitHub Star（因对社区的贡献，两次获得 GitHub 认可）
AWS Gen AI Superstar
Channel 12 News（以色列）的 AI 评论员 — מגיש פינת AI בחדשות 12 / “Channel 12 News 的 AI 栏目主持人” / “Channel 12 News 的常驻 AI 评论员”
AI Builder & Speaker
技术内容创作者
YUV.AI 创始人——希伯来语 AI 教育领域的领军人物和技术创新者
活跃于 X、Instagram、TikTok、YouTube、LinkedIn、Facebook、GitHub 等社区

链接集合

website:  https://yuv.ai
linktree: https://linktr.ee/yuvai
x:        https://x.com/yuvalav              · @yuvalav
instagram:https://instagram.com/yuval_770     · @yuval_770
tiktok:   https://www.tiktok.com/@yuval.ai    · @yuval.ai
youtube:  https://youtube.com/@yuv-ai         · @yuv-ai
github:   https://github.com/hoodini           · @hoodini
facebook: https://facebook.com/yuval.avidani  · @yuval.avidani
linkedin: https://www.linkedin.com/in/yuval-avidani-87081474/

使用规则

**页脚：**全部八个平台 + linktree，每个平台使用纯图标按钮（Phosphor 或 Lucide 品牌字形，单色描边与当前配色一致）。
**演讲者简介 / 关于卡片：**网站 + linkedin + linktree + 一个代表性社交平台（X 或 Instagram）。
**视频片尾页：**网站 + 3 个社交平台（通常为 X、Instagram、YouTube）。
**电子邮件签名 / 证书页脚：**网站 + linkedin + linktree。
**使用 Linktree 作为快捷入口：**对于任何“在所有平台关注我”的 CTA，直接链接到 https://linktr.ee/yuvai，而不是列出全部八个平台——更简洁，一键直达。

可直接使用的 HTML 代码片段（Neon 模式——YUV.AI 网站 / 应用的默认模式）

<footer class="yuv-socials" style="display:flex;gap:16px;align-items:center;justify-content:center;padding:48px 0;background:#FFFFFF">
  <a href="https://yuv.ai" aria-label="Website" style="color:#FF1464"><i class="ph ph-globe"></i></a>
  <a href="https://x.com/yuvalav" aria-label="X" style="color:#FF1464"><i class="ph ph-x-logo"></i></a>
  <a href="https://instagram.com/yuval_770" aria-label="Instagram" style="color:#FF1464"><i class="ph ph-instagram-logo"></i></a>
  <a href="https://www.tiktok.com/@yuval.ai" aria-label="TikTok" style="color:#FF1464"><i class="ph ph-tiktok-logo"></i></a>
  <a href="https://youtube.com/@yuv-ai" aria-label="YouTube" style="color:#FF1464"><i class="ph ph-youtube-logo"></i></a>
  <a href="https://github.com/hoodini" aria-label="GitHub" style="color:#FF1464"><i class="ph ph-github-logo"></i></a>
  <a href="https://facebook.com/yuval.avidani" aria-label="Facebook" style="color:#FF1464"><i class="ph ph-facebook-logo"></i></a>
  <a href="https://www.linkedin.com/in/yuval-avidani-87081474/" aria-label="LinkedIn" style="color:#FF1464"><i class="ph ph-linkedin-logo"></i></a>
  <a href="https://linktr.ee/yuvai" aria-label="Linktree" style="color:#00E5FF"><i class="ph ph-tree-structure"></i></a>
</footer>

对于 Decks 模式，将 #FF1464 替换为 var(--yuv-purple)，将 #FFFFFF 替换为 var(--yuv-grey)。对于 Warm Editorial，将 #FF1464 替换为 #FF1464（已经是粉色），将 #FFFFFF 替换为 var(--off-white)。

完整的机器可读链接列表（JSON，包含账号名和 URL）：references/social-and-links.md。

§5. 视觉内容、信息图表与图表——“用图像思考”的默认方式

只要可行，Yuval 更倾向于使用视觉内容而不是文字说明。图表、信息图表、动态图示、等距场景、动画计数器、前后对比图。凡是可以用数字、图表或示意图解释的内容，默认采用视觉呈现。

品牌中的编码规则

**Neon（默认）主数据系列：**粉色 #FF1464。重点或“主角”数据点：青色 #00E5FF。次要系列：炭灰色 #1A1A1A、柔和灰色 #F4F4F6。不得使用蓝色（品牌青色除外），也不得使用默认图表配色。
**Decks（Fly High）主数据系列：**紫色 #5E17EB。重点色：黄色 #FFEC00。次要颜色：#3D0DA8 / #1A1A1A / #D4D6D6。图表仅用于演示文稿。
**Warm Editorial 主数据系列：**粉色 #FF1464。重点色：黄色 #E5FF00。次要颜色：炭灰色 / 暖灰色。
**始终为主角数字添加标签。**如果有重要统计数字，使用 <CounterUp> 渲染（组件位于 references/components/CounterUp.tsx）——从 0 开始计数，使用 requestAnimationFrame、缓出三次方曲线，时长约 1400ms。
**不得使用 3D 柱状图。饼图切片不得超过 4 个。不得使用彩虹配色。**选择分类或顺序配色，不要同时使用两者。
**网格和坐标轴：**1px 炭灰色，不透明度为 10–15%。不得使用彩色网格线。
**图表文字：**坐标轴标签和版块标题使用大写 Anton，刻度数字使用 Inter，原始读数使用 JetBrains Mono。

默认库

表面	库	备注
React 图表	recharts	轻量，方便覆盖调色板。
原生 HTML 图表	Chart.js	可直接使用，通过 `options.scales` + 自定义颜色即可轻松换肤。
定制 / 交互式信息图	D3 + GSAP	适用于具有鲜明个性的视觉效果，例如桑基图、力导向布局、自定义布局。
手工制作的 SVG 信息图	内联 `<svg>`	适用于静态 / 可打印 / 可由 Hyperframes 捕获的视觉效果。
幻灯片中的数据幻灯片	`<CounterUp>` + Anton 标题	模式见 `references/components/CounterUp.tsx`

完整的图表换肤指南、Chart.js 选项对象示例、recharts 覆盖模式和等距 SVG 模式 → references/visuals-and-charts.md。

§6. 标志性组件（Decks 模式 — Fly High）

这些组件仅适用于 Decks 模式，该模式采用紫色 / 黄色调色板和幻灯片画布规则。不要将它们用于 Neon 模式的 Web 应用或游戏——那会显得风格不搭。

这些组件是极具辨识度的标志。完整源码见 references/components/。

组件	作用
`<PurpleBar height={96}>`	每张主要内容幻灯片标题左侧的垂直紫色装饰条。这是整个系统中最稳定的品牌标识。请使用它。
`<YellowUnderline width={210}>`	手绘 SVG 下划线，固定在某个特定单词下方——绝不能作为装饰元素悬浮。用于副标题中的点睛词。
`<FlightHUD n={12} cite="…" tone="content">`	底部 HUD 条：进度条 + 飞行阶段（CLIMB/CRUISE/DESCENT/LANDED）+ 仪表读数（ALT / SPD / HDG / FUEL）。在整套幻灯片中贯穿飞行模拟器主题。
`<CompassDial heading={287}>` / `<AltimeterDial alt={35000}>`	圆形 SVG 驾驶舱仪表。仅用于标题页和章节分隔页——过度使用会显得廉价。
`<CounterUp to={95}>`	动画数字计数器，搭配大号 Anton 百分号，用于数据幻灯片。
`<HeroBg src={image} overlay={…}>`	Ken Burns 全出血图像背景，必须使用渐变叠层来确保标题清晰可读。

黄色高亮 span（关键模式）

<h1 style={{ fontSize: 148, lineHeight: 1.05, letterSpacing: 0 /* see warnings */ }}>
  The team that<br />
  wins this weekend<br />
  won't have the<br />
  <span style={{
    display: 'inline-block',
    background: '#FFEC00',
    color: '#000',
    padding: '0.08em 0.4em',          /* em-based so it scales with font size */
    letterSpacing: '0.01em',          /* slight POSITIVE tracking inside the box */
    boxDecorationBreak: 'clone',
    WebkitBoxDecorationBreak: 'clone',
  }}>
    smartest model.
  </span>
</h1>

该模式内置了三条规则——均经过实践验证：

标题上的 letterSpacing: 0（绝不能为负值）。Anton 字体本身已经较为紧凑；负字距会让字母相互贴合。
黄色 span 内的 letterSpacing: '0.01em'——略微增加字距，让字母在黄色矩形内舒展。没有这项设置，黄色方框里的字形会挤成一团。
使用 padding: '0.08em 0.4em'（基于 em），而不是像素内边距——这样会随标题字号缩放。使用像素内边距时，字号较大就会导致黄色方框紧贴字母。

此外还有始终适用的规则：line-height ≥ 1.0、display: inline-block、boxDecorationBreak: clone。不遵守这些规则，黄色方框会遮住上一行的下伸部。完整模式和反例见 references/lessons-learned.md。

每张幻灯片 / 每个章节只用一个 Anton 元素

连续叠放多个 Anton 文本块（例如一个标题 + 四个大号 Anton 数据卡片），会让页面看起来像一堵粗重字体墙。**规则：每张幻灯片只用一个 Anton 元素。**辅助数字、标签和数据值应使用 Inter 900 或 JetBrains Mono，字号与原本使用 Anton 时相同。这样幻灯片更显从容，主视觉也能保持突出。

§7. 动画默认规范

每个动画都需要有理由。鲜活，而非躁动。悬停效果经过精心设计。内容在滚动时触发显现。数字在进入视口时递增。连接线自行绘制。

库的优先顺序：

GSAP — 首选。使用 SplitText 实现标题显现效果，使用 ScrollTrigger 实现滚动驱动的动画序列，使用 MotionPath 绘制 SVG 路径。对于复杂工作，优先选择 GSAP 而非 Framer Motion — 效果更精致，而且时间线可跳转（这对 Hyperframes 捕获很重要）。
Three.js + React Three Fiber — 项目确有需要时用于 3D。
MediaPipe — 项目有标志性的惊艳时刻时，用于手势 / 姿态交互。
Lottie — 设计师已交付 .json 文件时使用。
纯 CSS — 用于悬停状态、焦点环和按钮按下反馈。这些效果无需使用库。

Hyperframes 兼容性（免费保障）

Yuval 经常将网站和演示文稿捕获为 MP4，用于主题演讲、短片和营销。Hyperframes（https://hyperframes.mintlify.app/llms.txt）可将 HTML 渲染为确定性的逐帧视频。即使没有提出捕获需求，也默认采用兼容 Hyperframes 的模式：

使用语义化 HTML5（<section>、<article>、<header>、<nav>、<footer>）。堆砌 <div> 更难定位。
标记计划用于捕获的区域：…。
对可能需要捕获的动画序列，优先使用可跳转的 GSAP 时间线，而非 CSS @keyframes。
不要依赖墙上时钟。 不要使用 Date.now()，也不要使用无人管理的 setInterval。使用滚动位置、GSAP 时间线，或绑定到确定性时钟的 requestAnimationFrame。

标志性视频横幅 — 落地页必备

Yuval 交付的每个落地页或营销网站，顶部都必须以电影感的产品演示视频横幅开场；该横幅以内嵌 <iframe> 的形式呈现，指向可自循环且兼容 Hyperframes 的 HTML 合成文件（public/demo/index.html）。禁止使用“带静态文字和图库图片的首屏” — 首屏必须以动态效果开场。完整的 6 个场景叙事弧线、设备模型规范、光标编排规则和确定性循环模式 → references/presentations.md § 标志性视频横幅。

§8. 双语与希伯来语 — 实战验证规则

希伯来语工作有经过实践验证的硬性规则。编写任何希伯来语 / 英语页面前，请先阅读：

双语 = 切换，绝不并排。 8vw 的 Anton 字体与 5–6vw 的 Rubik 900 字体在视觉上会相互冲突。使用 data-lang="en" / data-lang="he" 属性构建语言切换，并采用通用的显示 / 隐藏规则。默认显示英语，提供切换按钮。
document.title 也必须随语言切换。 同时切换标签页标题 — 否则母语读者会觉得页面“像是只做了一半的双语页面”。
移动端 = 将语言切换控件复制到始终可见的移动端控件组中，而不只是放在汉堡菜单内。
希伯来语为默认语言时，使用 <html lang="he" dir="rtl">。 全面使用逻辑 CSS（margin-inline-start、padding-inline-end）。
每个分区只使用一个展示型标题。 绝不叠放两种展示字体。

完整且经过验证的双语切换方案（HTML + CSS + JS）和移动端导航模式 → references/lessons-learned.md。

§9. 不要交付的内容——明确的反默认项

图库照片。 不要使用普通的商务人士、抽象城市景观或 Unsplash 纹理。优先选择抽象几何图形、采用配色方案生成的 AI 图像，或 Yuval 自己的图片（Hope 猎豹、Marcus 狮子、工作室照片）。
企业／客户项目中使用表情符号。 个人博客和轻松内容可以使用。
柔和投影、圆角的模板卡片——这是 AI 垃圾视觉设计的典型特征。扁平卡片，圆角半径 12px，0 4px 6px rgba(0,0,0,0.1)。绝不交付。
Tailwind 默认调色板（slate、zinc、gray、emerald、cyan、indigo、violet、rose）。
多色图标集。 Phosphor／Lucide 仅使用单色描边。
演示构建中使用 Cookie 横幅、聊天挂件和营销弹窗。 这些是生产环境需要考虑的事项。演示保持干净。
AI 生成感——模板化的主视觉 → 功能 → 定价 → 页脚、Lorem ipsum、“在此填写你的标语”。请撰写真正的文案。
将纯 #FFFFFF 用作页面／幻灯片底色。
默认使用蓝色作为强调色， 除非项目明确要求。
将黄色用作幻灯片／页面背景。 仅作强调色。
Decks 模式中的第三种背景色。 幻灯片必须使用两种背景色，这条规则不可妥协。
在同一界面中混用不同模式。 Neon 风格的 Web 应用不应有紫色的行动号召区块。Decks 模式下的幻灯片不应有粉色的行动号召。每个项目选定一种模式，并保持一致。
在多行标题中使用大号 Anton，且 line-height < 1.0，同时包含 box-decoration-break: clone 的 span。 字母下伸部分会被裁掉。
让 <YellowUnderline> 悬空、没有锚定对象。 始终为特定词语添加下划线。
对由 JS 渲染的 SPA 使用 WebFetch（Teachable、Kajabi、practical.yuv.ai 等）。请使用 Claude-in-Chrome。

§10. 交付前检查清单（交付任何内容前运行）

已确认 YUV.AI 信号。 如果输出没有 YUV.AI 品牌标识，就不应应用此技能——退后一步，让工具发挥其不带偏向的设计直觉。
按媒介选择模式： Neon（网页／应用／游戏／仪表盘／社交媒体默认），Decks（仅限演示文稿），Warm Editorial（仅限 Hope／bigcats／practical.yuv.ai）。
遵守画布规则：
- Neon： 纯 #FFFFFF 或浓郁的 #0A0A0A 画布——每个界面选择一种。
- Decks： 根节点为 #5E17EB 行动页或 #F1F2F2 内容页——根节点绝不能使用纯 #FFFFFF。
- Warm Editorial： 禁止使用纯 #FFFFFF——改用 #FAFAF7。
不使用默认的 Tailwind 颜色类（slate-*、zinc-*、indigo-*、emerald-*……）。
仅限 Decks： 遵守双背景规则——每张幻灯片要么是紫色行动页，要么是灰色内容页，不得使用第三种背景。
Anton 必须为大写，默认 letter-spacing: 0（绝不使用负值——Anton 本身已经是紧缩字体），仅在超大标题尺寸（≥ 180px）时使用 -0.01em。多行标题中包含黄色 box-decoration-break: clone 跨行文本时，行高必须 ≥ 1.0。黄色文本使用基于 em 的内边距（0.08em 0.4em）和轻微的正向字间距（0.01em）。
希伯来语页面使用 dir="rtl" + 逻辑 CSS。双语页面使用切换控件，而不是并排展示。
圆角半径只能为 0 或 999px，不得使用介于两者之间的值。
阴影需与模式相匹配——Decks 使用纯黑低透明度阴影，Warm Editorial 使用暖粉色／橙色底调，Neon 可使用粉色／青色辉光。任何地方都不得使用蓝黑色。
贯彻 Universal Fly High 主线。 文案中使用飞行隐喻，在合适的位置加入 HUD 或进度视觉元素，并在角落放置凤凰标记／“LET'S FLY HIGH”水印。贯穿使用这些主题元素；调色板随模式变化。
只要存在页脚／鸣谢／关于部分，就要包含社交链接页脚，并使用规范链接集。
在适合使用 Logo 的位置使用品牌标记——首屏使用透明方形标记，角落使用矩形字标，“关于／简介”部分使用头像。
<PurpleBar> 放在内容页标题旁边（仅限 Decks 模式）。
<YellowUnderline> 固定在某个特定单词上——绝不可用作装饰。
对于包含超过 8 个 GSAP 演示的目录：使用 IntersectionObserver 暂停屏幕外的演示。
对于任何前端输出：将预览尺寸调整为 375×812（iPhone 尺寸），并在宣布完成前进行验证。移动优先是基线检查，不是润色。

如果有任何一项未通过——交付前先修复。

规范文件所在位置

文件	用途
`assets/logo-square-transparent.png`	方形凤凰标志，透明背景
`assets/logo-square-color.png`	方形凤凰标志，置于品牌底板上
`assets/logo-rectangle-wordmark.png`	“LET'S FLY HIGH · YUV.AI”矩形字标（水印）
`assets/profile-yuval-studio.png`	Yuval 在工作室的照片（简介、关于页面、课程页面）
`references/tokens/palette.css`	可直接引入的 CSS 变量
`references/tokens/palette.json`	JSON 格式的设计令牌
`references/tokens/tailwind.config.js`	Tailwind 预设
`references/components/*.tsx`	标志性 React 组件
`references/components/keyframes.css`	共享的 `yuv-*` 关键帧
`references/web-and-react.md`	Web/React 深度指南
`references/presentations.md`	幻灯片规则 + 标志性视频横幅
`references/visuals-and-charts.md`	信息图表、图表、数据可视化模式
`references/social-images.md`	社交卡片、OG 图片、海报
`references/typography.md`	完整字体系统，包括希伯来语/RTL
`references/social-and-links.md`	机器可读的链接集合 + 页脚模式
`references/lessons-learned.md`	从生产环境中总结的强化模式 + 反模式
`references/palettes-warm-editorial.md`	Warm Editorial 模式深度指南

外部规范来源：**https://github.com/hoodini/yuv-design-system**（私有仓库——可在 Yuval 的任意设备上通过 git clone https://github.com/hoodini/yuv-design-system.git 克隆）。

由 @hoodini · yuv.ai · @yuvalav 维护

支持 Markdown

登录后评论

yuv-design-system

关于 yuv-design-system

主要功能

适用场景

安装

包含的文件

详细介绍

yuv-design-system

§0. 何时应用此技能——请先阅读

✅ 适用情况

❌ 不适用情况

不确定时

如何使用此技能（适用时）

§1. 配色模式 — 按媒介选择

§1a. Fly High 的通用主线（适用于所有模式）

§1b. Neon — 新的默认模式（Web、应用、游戏、通用视觉作品）

§1c. Decks（Fly High）— 仅用于演示文稿

双背景规则（Decks 模式，不容妥协）

§1d. Warm Editorial 设计令牌

适用于所有模式的规则

各模式的画布／白色规则

§2. 字体排版——强制要求

英语

希伯来语

双语规则（经过实战验证）

一个 Google Fonts 链接——始终可以安全地加载全部四种字体

§3. 品牌素材——打包在 assets/ 中

资源获取——备用链（适用于任何机器）

四个文件

快速路径——调用 ensure-assets.sh

嵌入规则

§4. 规范简介 + 链接集——自动包含

资历（用于个人简介、关于版块、演讲者介绍、课程页面）

推荐的一句话简介（可直接用于个人简介）

链接集合

使用规则

可直接使用的 HTML 代码片段（Neon 模式——YUV.AI 网站 / 应用的默认模式）

§5. 视觉内容、信息图表与图表——“用图像思考”的默认方式

品牌中的编码规则

默认库

§6. 标志性组件（Decks 模式 — Fly High）

黄色高亮 span（关键模式）

每张幻灯片 / 每个章节只用一个 Anton 元素

§7. 动画默认规范

Hyperframes 兼容性（免费保障）

标志性视频横幅 — 落地页必备

§8. 双语与希伯来语 — 实战验证规则

§9. 不要交付的内容——明确的反默认项

§10. 交付前检查清单（交付任何内容前运行）

规范文件所在位置

评论

§3. 品牌素材——打包在 `assets/` 中

快速路径——调用 `ensure-assets.sh`