Design System

本站的组件库与 Web UI 设计规范参考。包含颜色、排版、组件、图标和视觉效果的完整规范。

颜色

品牌色 — Amber

50

100

200

300

400

500

600

700

800

900

亮色模式用 amber-500，暗色模式用 amber-400

中性色 — Zinc

50

100

200

300

400

500

600

700

800

900

950

black

语义映射

品牌主色 · 链接 / CTA
主按钮背景
次按钮 / 悬停背景
表面背景
默认边框 / 分隔线
暗色模式页面背景

排版

字号阶梯

text-5xl · 48px · Display

AI-Native Builder

text-4xl · 32px · H1

页面主标题

text-xl · 20px · H2

章节标题

text-base · 16px · Body

正文内容，行高 1.75，为中文长篇阅读而优化。

text-sm · 14px · Small

卡片描述、辅助文本

text-xs · 13px · Caption

时间戳、标签

字重

利器君

Bold · 700

页面主标题

利器君

Semibold · 600

卡片标题、链接

利器君

Medium · 500

导航、按钮

利器君

Regular · 400

正文、描述

文本颜色层级

页面主标题、卡片标题、Section 标题

zinc-800 / zinc-100 — 标题

Panel.Header、局部强调标题

zinc-900 / zinc-100 — 强调型小标题

Prose 中的 h2 / h3

zinc-900 / zinc-200 — MDX 标题

段落文本、描述内容

zinc-600 / zinc-400 — 正文

次要说明文字

zinc-500 / zinc-400 — 辅助

时间戳、标签、占位符

zinc-400 / zinc-500 — 弱化

组件

Button

支持 primary / secondary 变体，有 href 时渲染为 Link，否则渲染为 button

Link Button →

import { Button } from '@/components/Button'

Badge

支持 default / amber 变体，用于标签和状态标识

DefaultAmber开发新功能

import { Badge } from '@/components/Badge'

Input

forwardRef 实现，完整亮/暗模式、focus ring、placeholder 样式

import { Input } from '@/components/Input'

Divider

分隔线，支持 soft 变体（更浅的透明度）

Default

Soft

import { Divider } from '@/components/Divider'

IconContainer

圆形图标容器，支持 sm / md / lg 尺寸。提取自首页、工具页、产品页中重复的圆形 icon 包裹

sm

md

lg

🦞

lg + emoji

import { IconContainer } from '@/components/IconContainer'

Panel

带边框面板，复合组件。Panel.Header 支持 icon + title + 可选 href 箭头链接。支持 as 多态（可渲染为 form 等）

基础面板

无链接的面板，仅展示标题和图标。

带链接面板

→

标题右侧带箭头链接。

import { Panel } from '@/components/Panel'

Card

多态卡片，支持 Card.Title, Card.Eyebrow, Card.Description, Card.Cta, Card.Link 子组件。通过 as 可渲染为 article、li 等

从产品经理到独立开发者

9 年产品经理转型 AI builder 的心路历程，以及为什么我选择一个人做一个团队。

import { Card } from '@/components/Card'

SocialLink

双模式：无 children 为纯图标模式（首页），有 children 为图标+文字列表项模式（关于页）

图标模式（无 children）

列表项模式（有 children）

import { SocialLink } from '@/components/SocialLink'

Prose

MDX 内容排版容器，自动应用 typography 插件样式和暗色模式反转

章节标题（h2）

正文段落，行高 1.75，为中文长篇阅读而优化。这是一段示例文本，用于展示 Prose 容器的排版效果。链接样式如 这个链接 所示。

小节标题（h3）

  • 列表项一：无序列表样式
  • 列表项二：间距和缩进

内联代码如 npm run dev，以及引用段落：

过去需要一个团队才能搞定的事，现在一个人就能拿下。

import { Prose } from '@/components/Prose'

Section

左侧竖线分隔的区块，标题 1 列 + 内容 3 列网格布局。内部使用 useId 生成 aria-labelledby

区块标题

这是 Section 组件的内容区域，在桌面端会显示为标题 1 列 + 内容 3 列的网格布局，左侧有竖线装饰。

import { Section } from '@/components/Section'

布局组件

结构性组件，用于页面骨架搭建

Container

页面内容容器，外层 max-w-7xl，内层 max-w-5xl

@/components/Container

SimpleLayout

静态页面通用布局，统一标题 + 副标题 + 内容区

@/components/SimpleLayout

ArticleLayout

MDX 文章页布局，带返回按钮和 Prose 排版

@/components/ArticleLayout

Layout

全局 Layout，背景层 + Header + main + Footer

@/components/Layout

Header

固定导航栏，含 Avatar、DesktopNav、ThemeToggle

@/components/Header

Footer

页脚，导航链接 + 版权信息

@/components/Footer

图标

UI 图标 — lucide-react

Mail

Wrench

Briefcase

PenLine

ArrowLeft

ChevronRight

Sun

Moon

品牌图标 — @lobehub/icons

Claude

Claude

Figma

Figma

Github

GitHub

社交图标 — SocialIcons

统一从 @/components/SocialIcons 导出，源自 lucide-react 和 react-icons/fa6

XIcon

GitHubIcon

RedditIcon

自定义 SVG — CustomIcons

GoogleAdsIcon

GoogleAnalyticsIcon

图标尺寸规范

16px · 内联

20px · 标准/社交

24px · 品牌/自定义

视觉效果

圆角

full · 头像

3xl · 代码块

2xl · 卡片

xl · 工具图标

lg · 内联代码

md · 按钮

阴影 + Ring

shadow-md + ring-1（IconContainer / Input）

shadow-lg + ring-1（Avatar / 导航）

border（Panel）

间距参考

2 (8px) — 紧凑元素

4 (16px) — 标准元素

6 (24px) — 卡片组

16 (64px) — 区块间

20 (80px) — 页面顶部(移动)

32 (128px) — 页面顶部(桌面)