frontend-brand

他山前端品牌设计系统（frontend-brand）

关系类型：validates frontend-brand-guard.mdc / extends role-前端开发 / extends role-UI设计师

本 Skill 是可复用知识层，回答「怎么写才对」。 配套 Rule frontend-brand-guard.mdc 是约束层，回答「哪些绝对不能写」。 真相来源：所有代码以 frontend/src/index.css 和 frontend/tailwind.config.js 为准。

---

激活后立即执行

Step 1  明确当前场景（产品内页 or 官网/主页）
         → 不确定时默认：产品内页（黑白极简）

Step 2  定位具体需求（组件类型 / 页面类型 / 样式修改）
         → 查阅本 Skill 对应章节，直接使用规范类名和代码模板

Step 3  输出代码 / 设计方案
         → 输出前对照第十章「禁止清单」自检

Step 4  遇到本 Skill 未覆盖的细节时，按优先级查阅：
         1. frontend/src/index.css（CSS 变量/动画定义的唯一真相）
         2. frontend/tailwind.config.js（Tailwind 映射的唯一真相）
         3. 项目群/Tashan-TopicLab/docs/design/frontend-design-guide.md（语义说明）

---

⚠️ 已知文档内部不一致（必须知晓）

shape-system.md 表格中写 rounded-lg = Default = 12px，但实际代码 tailwind.config.js 将 rounded-lg 映射到 var(--radius-lg) = 16px，frontend-design-guide.md 中卡片/按钮/模态框也均使用 rounded-lg。以代码为准：rounded-lg = 16px，是标准通用圆角。

---

一、技术框架

技术	版本	用途
React	18.x	UI 框架
TypeScript	5.x	类型系统
Vite	5.x	构建工具
Tailwind CSS	3.x	样式（utility-first，不用 CSS-in-JS）
react-router-dom	6.x	路由
react-markdown + remark-gfm	latest	Markdown 渲染
KaTeX + remark-math + rehype-katex	latest	数学公式
Vitest + @testing-library/react	latest	测试

样式分层：Tailwind utility → @layer components → @layer utilities（动画/工具）→ @layer base（html/body）

文件结构（实际项目）：

frontend/src/
├── api/           # axios 封装
├── components/    # 可复用组件
├── hooks/         # 自定义 hooks
├── modules/       # 功能模块
├── pages/         # 页面组件
├── utils/         # 工具函数
├── App.tsx
├── main.tsx
└── index.css      # CSS 变量 / @layer base / 动画 / markdown 样式

---

二、设计令牌（完整以代码为准）

2.1 字体

// tailwind.config.js
fontFamily: {
  serif: ['Noto Serif SC', 'STSong', 'SimSun', 'serif'],
  sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
}

<!-- index.html — 字体加载 -->
<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=Noto+Serif+SC:wght@400;500;600;700&display=swap" rel="stylesheet">