下面这段提示词直接丢给别的 AI 就能用（React + Ant Design，参考页是纯 HTML/CSS 的 Tab，目标页是 antd 的 Tabs）。你把占位内容（链接/代码/截图描述）替换掉即可。
可复制 Prompt（React + Antd，模仿纯 HTML/CSS Tab 样式）
你是资深前端工程师。请把页面A（React + Ant Design）的 antd Tabs，改造成在视觉上尽可能一致地模仿页面B（纯 HTML/CSS Tab）的样式与交互表现。
目标
-
视觉一致：Tab 的高度、内边距、字体大小/字重、颜色、圆角、背景、边框、阴影、hover、active、disabled 状态尽量与页面B一致。
-
交互一致：切换动画/过渡、下划线/滑块/背景切换效果、Tab 间距、滚动/溢出处理（如有）与页面B对齐。
-
实现方式正确：在 React + antd 中实现，优先用 CSS 覆盖 antd 的类名（或 styled-components/less module），必要时使用 className、rootClassName（如果版本支持）、items 配置等方式注入样式。
-
避免破坏性修改：不要改动业务逻辑；只改 Tabs 相关结构与样式。不要全局污染（样式作用域要尽量限定在当前页面容器内）。
输入（我会提供）
页面A的 Tabs 代码（React + antd）：
// 在此粘贴页面A的 Tabs 相关代码
页面B（纯 HTML/CSS Tab）的参考信息（任选其一或多个）：
-
参考页的 HTML + CSS 代码片段
-
参考页截图（我会描述关键尺寸/颜色/状态）
-
参考页在线链接（如果你能根据描述推断也可以）
你的输出要求
-
给出完整可用的 React 代码改造方案（保持 antd Tabs，不要换成自研 Tabs）。
-
给出对应的 CSS/LESS/SCSS（推荐用 :where(.你的容器类) 或容器 class 做作用域隔离）。
-
明确列出你覆盖的关键 antd 选择器（例如 .ant-tabs-nav, .ant-tabs-tab, .ant-tabs-ink-bar 等），并解释每一块对应页面B的哪个视觉元素。
-
如果页面B的样式 antd 原生无法 100% 复刻，请给出最接近的替代方案，并说明差异点。
-
注意兼容：至少考虑 hover/active/disabled、长文本、响应式、深色背景（若页面B有）。
-
产出中不要出现“可能”“大概”这种模糊描述，要给具体数值/变量（如果我提供了颜色/尺寸就用我的；没提供就给可调整变量）。
约束
框架：React + Ant Design（说明你假设的 antd 版本，若不确定请写兼容写法）。
参考页：纯 HTML/CSS Tab（不使用 antd）。
只能通过样式覆盖 + 少量结构调整达成，不重写整个 Tabs 组件。
样式要尽量“可维护”：抽变量、注释清晰、避免过深嵌套。
参考页B的关键样式（我会填）
Tab 高度：{例如 40px}
Tab 字体：{例如 14px/500}
默认态：文字色 {#xxx} 背景 {#xxx} 边框 {1px solid #xxx}
Hover：{...}
Active：{...}（是否有下划线/滑块/背景块/加粗）
圆角：{例如 8px}
Tab 间距：{例如 12px}
容器底部线：{有/无，颜色/粗细}
动画：{例如 200ms ease}
开始工作：先对比页面A的 antd Tabs DOM 结构与页面B的 Tab DOM 结构，列出映射关系，然后给出代码与样式覆盖实现。
如果你愿意，我也可以顺手把“antd Tabs 常用覆盖点”给你一份小抄（你贴上页面B的 CSS 或截图描述后，我还能把颜色/尺寸变量直接填好）。