GIGA UI：沉静、精准、生动
此技能将一行 UI 请求转化为精美、可投入生产的高质量界面。视觉语言灵感来源于 @marcelkargul（Kargul Studio）的公开设计作品：沉静、近单色的产品 UI，非常注重排版，用柔和的层叠阴影替代粗边框，使用一种自信的强调色，并采用快速、物理感强且不为装饰而动的动效。
它适用于任何编码模型和技术栈。示例使用 React + Tailwind + Motion (motion/react)，每个示例也提供纯 CSS 版本。
下方使用的出处标记： [seen] 直接在他的帖子/图片中观察到或在他的说明中标明。 [inferred] 基于观察到的内容的合理推断（从截图中测量，或暗示得出）。 [expert] 来自 Motion 文档、Emil Kowalski、Apple HIG 的通用动效/UX 最佳实践。并非来自他的帖子。
1. 设计理念
- 如果可以移除，就移除它。 [seen, caption: "every screen. every component. every frame. if it doesn't need to be there, it shouldn't be. simple is always hard, but simple always wins."]
- 排版承担重任。 [seen: "just master typography and you can make anything look good."] 使用一种字体族（Web 端默认用 Inter，可选 Geist；iOS 风格的移动端用 SF Pro Rounded）且最多两种字重 [seen: "sf pro rounded, maximum 2 font weights, keep it simple"]。
- 白色、黑色和阴影。 [seen: "No animations, no gradients, no fancy effects. Just FFFFFF, 000000, and some shadows. This is design at its peak."] 大多数调色板为中性灰色。颜色用于表达含义，例如状态、类别或主要操作。
- 深度来自柔和的层叠阴影和细线，而非粗边框。 [seen: "this button only requires 3 shadows!" 以及 §3 中的次要按钮配方]
- 动效是产品的一部分，而非装饰。 [seen: "micro-interactions throughout", "subtle loading animation. not overdone, just perfect", "every website needs this level of animation", "idea → design → animation"] 只为了解释变化、确认操作或引导注意力而添加动画 [expert]。
- 最后的 10% 手工打磨。 [seen: 他的流程是 "design in figma, build with the help of claude, spend hours fixing small details manually and improving code quality"]。§9 中的 QA 检查清单就是这最后的 10%。
- 干净胜过聪明。 他的说明中反复出现“干净”、“沉静”和“简单”这些词（例如，“Every task in one calm list”）。即使有大量数据，界面也应保持沉静。
2. 观察到的风格（他的作品实际看起来的样子）
2.1 排版
- 字体族： Inter（此技能默认）和 Geist（可选备选）。[seen: "After using 100s of different fonts, I realized nothing beats Inter and Geist."; 搞笑帖子：初级和高级设计师都用 "Inter, Geist"]。移动应用使用 SF Pro Rounded [seen, 多篇帖子]。他还推荐 Google Sans Rounded 作为 SF Pro Rounded 的跨平台替代品 [seen, 回复]。等宽字体（类似 Geist Mono）用于大数字、滚动条和代码 [seen: 加密货币应用余额、Statsnap KPI 卡片、侧边栏导航变体]。品牌和营销作品有时使用衬线展示字体（编辑过渡性衬线，轻量）[seen: 金融科技落地页 "Every payment protected…"，VC 落地页]。
- 字距（他的精确数值，用 Geist 演示；同样适用于 Inter，他在 Inter 上也演示了 −6%） [seen]：
- 16px → 0%
- 36px → −3%
- 100px+ → −5% 到 −6%
- "永不取负值规则适用于正文。在 100px+ 时，默认间距看起来松散。"
- SF Pro Rounded：+1% 字母间距 [seen, 字体样本]。
- 字重： 常规 (400) 和中等 (500) 承担几乎所有产品 UI。半粗 (600) 用于标题和数字。粗体/特粗仅用于大型展示标题 [inferred from screenshots]。
- 产品 UI 中的字号 [inferred, measured from screenshots at 1×]：正文和表格文本 13–14px，次要/元信息 12–13px，区域标签 11–12px 大写或小型大写灰色（例如 "WORKSPACE", "PINNED TOOLS"），页面标题 18–24px 中等，KPI 数字 24–32px，主视觉标题 48–72px 带负字距。按钮为 14px 中等 [seen: "Geist/14/Medium"]。
- 文本颜色： 主要文本近黑色 (#171717–#1F1F1F)，次要文本中灰色 (#6B6B6B–#737373)，三级/占位符 (#A3A3A3)。标签使用浅色底上的深色文本，而不是深色底上的白色文本 [seen: "Do / Don't" post: "Dark text improves overall readability greatly."]。
2.2 颜色
从截图中取样（近似值）[seen/inferred]：
| 角色 | 浅色 | 深色 |
|---|---|---|
| 画布 / 页面 | #FFFFFF | #0D0D0D–#121212 |
| 微妙表面（侧边栏、面板、移动端背景） | #F7F7F7 / #F4F4F4 / #FAFAFA | #1A1A1A–#1E1E1E |
| 模型背后展示背景 | #E5E5E5–#EDEDED, 中灰 #8A8A8A | #1F1F1F–#262626 |
| 细线边框 | #ECECEC / #EBEBEB | rgba(255,255,255,0.08) |
| 主要文本 | #171717 | #FAFAFA |
| 次要文本 | #737373 | #A1A1A1 |
强调色（每个产品用一种，决不同时使用多种）[seen]：
- 紫罗兰
#7B3AEC（Underlay 注册，引导流程），也有靛蓝#5B5BF0变体 - 蓝色
#255CD1/ iOS 蓝色#2F7BF6（计算器，日历，Statsnap） - 橙色
#FF5A1F/#F97316（Plunio，Nexora） - 青绿色
#0F766E左右（AI 流程，AIData） - 石灰绿
#B4F05A配近黑色（代码编辑器 "Start" 按钮，Soma 品牌） - 珊瑚红/红
#F2435A（睡眠应用） - 纯黑
#0A0A0A作为中性应用中的主要按钮颜色（睡眠应用，计算器 "="，"Deploy v13"，"New event"）[seen]
语义色调 [seen]：绿色 #16A34A 文本衬 #ECFDF3 底；红色 #DC2626 衬 #FEF2F2 底；琥珀色/橙色衬 #FFF4E5 底；蓝色衬 #EEF4FF 底。头像首字母位于浅色圆圈上，使用更深的同色文本（"SW", "AJ", "MP"）。
渐变： 很少使用，但用得恰到好处 [seen: "the art of using gradients"]。按钮使用微妙的从上到下渐变（次要按钮为 #FFFFFF → #F7F7F7；主要按钮顶部略亮）。主视觉图使用模糊的多色斑点搭配 Plus-Darker 混合模式，并加上噪点/颗粒覆盖层 [seen: 主视觉插图系列]。
2.3 形状、间距、深度
- 圆角 [seen and inferred]：小型控件和按钮 8–10px [seen: "30px height, 10px radius"]；输入框 10–12px；卡片 12–16px；弹窗和命令面板 20–24px；移动端菜单和手机卡片 24–32px；药丸和筹码完全圆角。移动端按钮通常为完整药丸形状 [seen]。
- 间距： 4px 基础网格。常见间距为 4/8/12/16/24/32/48px [inferred]。内容周围大量留白；密集表格仍保持约 40–48px 行高 [inferred]。
- 控件高度 [seen/inferred]：紧凑桌面按钮 30–32px，标准 36–40px，移动端主要号召性用语按钮 48–56px。
- 边框： 1px 细线，浅灰色。通常边框由 0 模糊 1px 扩展阴影构成，而不是使用
border[seen: 次要按钮配方]。 - 阴影 [seen]：次要按钮 =
0 1px 2px rgba(40,40,40,.08), 0 0 0 1px #ECECEC。浮动表面（弹出层、面板、工具提示）使用大范围、非常柔和的全局阴影加上细线。深色工具提示位于浅色 UI 之上 [seen: Statsnap 图表工具提示，"Task completed · Undo" toast 提示]。 - 移动端： 画板 430×932 [seen]，顶部栏中圆角 40–44px 的图标按钮，在灰色画布上对 "inset" 列表进行分组，浮动药丸状标签栏 [seen]。
2.4 布局模式 [seen]
- SaaS 应用外壳： 左侧边栏（220–260px）位于微妙灰色背景上，分组的导航带小型大写灰色标签，活动项 = 白色药丸带柔和阴影（浅色）或
#1E1E1E填充（深色）；主要内容区在白色背景上，带一个薄顶栏（面包屑导航Home > Transaction，带/提示的搜索框，图标按钮）。有时会用一条窄图标栏（48–56px）替代。 - 表格上方的筛选条件行：
Range Last 30 days ▾，Scope All tools ▾。标签为灰色，值为深色。 - 表格： 无斑马条纹，细线行分隔线，小灰色标题文本，色调状态药丸，头像 + 姓名 + 邮件堆叠，右对齐数字，表格数字。
- KPI 卡片： 标签，大数字（通常为等宽字体），增量药丸（
▲ +14.7% vs last year）。 - 认证/引导流程： 分屏卡片。左侧是表单（圆形软背景内的 logo，标题，副标题，Google 按钮，“或”分隔线，输入框，主要操作），右侧是灰色面板中的产品预览，带轮播点 [seen: "just designed the perfect signup page"]。
- 命令面板： 24px 圆角，带
ESC键帽的搜索行，过滤条件药丸，分组结果，键盘图例页脚 [seen]。 - 移动端引导流程： 分段进度条 + "1/5"，居中加粗问题，可选择选项行带圆形复选框，粘性药丸号召性用语按钮 [seen]。
- 落地页主视觉： 浮动药丸导航栏，带有 "Backed with X" 的小徽章，简短有力的标题（有时为全大写怪异字体，有时为衬线字体），深色主要 + 白色次要按钮，下方为大插图 [seen]。
2.5 图标和插图 [seen]
- 图标：细描边轮廓图标（类似 Lucide/Phosphor，~1.5px 描边，UI 中 16–18px），默认灰色，激活时更暗。
- 用于功能卡片和类别的小型彩色应用图标方块（带渐变和图形的圆角方形）。
- 插图风格：(a) 等距线图在虚线网格上，单色；(b) 生动的渐变条/流在颗粒感柔和的背景上，带等距网格和浮动五彩纸屑；(c) 面向消费者和移动应用的友好扁平着色情景插图和 3D 风格表情符号图标；(d) 拟物化触感（一个缝制的皮革钱包里放着一张卡）。
- 他的动画流程："在 Figma 中绘制插图 → 在 AE/Rive 中制作动画 → 如果使用 AE 则导出为 Lottie → 在网站上实现"。在一个项目中，他使用了 "Figma… Rive 用于动画，Next.js + Sanity"。主视觉区域通常需要"设计 + 插图 + 动画"[seen]。
2.6 深色与浅色 [seen]
他两者都用，并交付匹配的集合（"浅色/深色模式"，"figma tokens are so useful!"）。浅色是生产力 SaaS 的默认设置。深色用于加密货币/交易、代码编辑器、侧边栏和营销横幅。深色表面以约 6–10 亮度增量逐步提升（#0D0D0D → #121212 → #1A1A1A → #222），并非到处都是纯黑。
3. 设计令牌（CSS 变量）
将此内容粘贴到全局样式表中。Tailwind 用户可以在 @theme (v4) 或 theme.extend (v3) 中映射这些变量。
:root {
/* 排版 */
--font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: ui-monospace, "Geist Mono", "SF Mono", Menlo, monospace;
--font-rounded: "SF Pro Rounded", ui-rounded, "Google Sans Rounded", var(--font-sans);
--text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 16px;
--text-lg: 18px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 48px;
--text-4xl: 64px; --text-5xl: 96px;
--tracking-body: 0; /* <= 16px */
--tracking-tight: -0.01em;/* 18–24px */
--tracking-title: -0.03em;/* ~36px (他的规则) */
--tracking-display: -0.055em; /* 100px+ (他的规则: -5% 到 -6%) */
--weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
/* 中性色 (浅色) */
--bg: #ffffff;
--bg-subtle: #f7f7f7;
--bg-muted: #f0f0f0;
--bg-backdrop: #e8e8e8;
--border: #ececec;
--border-strong: #e0e0e0;
--fg: #171717;
--fg-secondary: #737373;
--fg-tertiary: #a3a3a3;
--fg-inverse: #ffffff;
/* 强调色: 每个产品选一个 */
--accent: #7b3aec; /* 紫罗兰; 替代品: #255cd1 蓝色, #ff5a1f 橙色, #0a0a0a 黑色 */
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-soft: color-mix(in oklab, var(--accent), white 90%);
--accent-fg: #ffffff;
--ring: color-mix(in oklab, var(--accent), transparent 65%);
/* 语义色 (浅色底上深色文本) */
--success: #16a34a; --success-soft: #ecfdf3;
--danger: #dc2626; --danger-soft: #fef2f2;
--warning: #d97706; --warning-soft: #fff7e6;
--info: #2563eb; --info-soft: #eef4ff;
/* 间距 (4px 网格) */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
--space-12: 48px; --space-16: 64px; --space-24: 96px;
/* 圆角 */
--radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px;
--radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-full: 9999px;
/* 高度 */
--h-control-sm: 30px; --h-control: 36px; --h-control-lg: 44px; --h-cta-mobile: 52px;
/* 阴影 (分层, 柔和; 细线通过扩展实现) */
--hairline: 0 0 0 1px var(--border);
--shadow-xs: 0 1px 2px rgb(40 40 40 / 0.08);
--shadow-btn: 0 1px 2px rgb(40 40 40 / 0.08), 0 0 0 1px #ececec; /* 他的次要按钮 */
--shadow-btn-primary: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 1px 2px rgb(0 0 0 / 0.16), 0 0 0 1px color-mix(in oklab, var(--accent), black 12%);
--shadow-card: 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 1px var(--border);
--shadow-pop: 0 0 0 1px rgb(0 0 0 / 0.06), 0 8px 24px -4px rgb(0 0 0 / 0.10), 0 2px 6px rgb(0 0 0 / 0.04);
--shadow-modal: 0 0 0 1px rgb(0 0 0 / 0.06), 0 24px 64px -12px rgb(0 0 0 / 0.18);
--shadow-focus: 0 0 0 3px var(--ring);
/* 动效 (参见 §5) */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* 强缓出 (Emil Kowalski) */
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* 用于屏幕上移动 */
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* 类似 iOS 的菜单 (Vaul) */
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--dur-instant: 100ms; --dur-fast: 150ms; --dur-base: 200ms;
--dur-moderate: 250ms; --dur-slow: 350ms; --dur-page: 500ms;
}
[data-theme="dark"], .dark {
--bg: #0d0d0d;
--bg-subtle: #141414;
--bg-muted: #1c1c1c;
--bg-backdrop: #0a0a0a;
--border: rgb(255 255 255 / 0.08);
--border-strong: rgb(255 255 255 / 0.14);
--fg: #fafafa;
--fg-secondary: #a1a1a1;
--fg-tertiary: #6b6b6b;
--shadow-btn: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255
…
[翻译内容已截断]