@tfdesign/c-end

体服平台 C 端 IM 设计规范 NPM 包：React 组件、Tailwind v4 theme.css、以及 Agent Skill「产品设计-体服平台C端IM-界面生成」。

安装

npm i react react-dom lucide-react @tfdesign/c-end

或一键初始化（推荐在业务项目根目录由 AI 执行）：

npx -y -p @tfdesign/c-end@latest tfds-c-im-setup

入口 CSS

@import "tailwindcss";
@import "@tfdesign/c-end/theme.css";
@source "./**/*.{js,jsx,ts,tsx}";
@source "../node_modules/@tfdesign/c-end/**/*.{js,jsx}";

使用 Skill

安装后 postinstall 会同步 Skill 到 .cursor/skills/产品设计-体服平台C端IM-界面生成/ 等目录。

在 Cursor 中输入：/产品设计-体服平台C端IM-界面生成

页面模板

• ImAiExploreFrame — 抖音 AI 咨询 IM 骨架
• Handleframe — 抖音办理场景 H5 模板

与 @tfdesign/c-voip-end 的区别

| 包 | 场景 | | --- | --- | | @tfdesign/c-end | C 端 IM 文字会话、办理 H5、猜你想问等 | | @tfdesign/c-voip-end | C 端 VoIP 语音通话页 |

请勿混用两套包的组件与 Skill。

AI Skill 索引（0.1.1+）

• components.summary.json — 组件/模板选型
• components.index.json — props / rules / examples 详情
• icons.summary.json — Icon 名称与可用尺寸目录

集成自检：

node node_modules/@tfdesign/c-end/scripts/check-tfds-integration.mjs

硬门禁：ESLint（@tfdesign/c-end/eslint）

C 端 IM 项目请使用 c-end preset（spacing 来自 c-end TOKEN_SPACING；锁定 ImAiExploreFrame · Handleframe）：

npm i -D eslint @eslint/js eslint-plugin-react eslint-plugin-react-hooks globals @tfdesign/c-end

eslint.config.js：

import tfds from '@tfdesign/c-end/eslint';
export default [...tfds];

CI 建议：

npx eslint .
node node_modules/@tfdesign/c-end/scripts/check-tfds-contract.mjs

| 工具 | 作用 | |------|------| | @tfdesign/c-end/eslint | spacing 白名单（含 gap-0.5 等移动端刻度）、禁止样式漂移、锁定页面模板 | | check-tfds-contract.mjs | Icon name 校验、禁混用 b-end/voip、禁手搓气泡/输入框等 |

规则事实源：scripts/eslint/（随包 eslint/ 子路径发布，与包版本对齐）。