SVELTE · REACT · VUE · TAILWIND CSS

Any TDF

一个共享产品语言、面向三种框架原生实现的移动 Web 组件系统。选择你熟悉的框架，获得一致的设计、主题与交互体验。

选择框架了解架构 GitHub

共享行为契约，不共享框架限制。

SYSTEM / ANY TDF MONOREPO

01 / SHARED CORE @any-tdf/common 状态派生 · 主题语义 · 公共类型

02ASTDFSvelte

02BRTDFReact

02CVTDFVue

03 / DELIVERY

npmDocsDemo

PRODUCT FAMILY

同一套设计语言，三种原生实现

每个组件库都基于 Tailwind CSS，并遵循一致的组件能力、主题语义和文档结构，同时保留对应框架最自然的开发方式。

01 / SVELTE

STDF

S: Simple简单
T: Tiny轻量
D: Design设计
F: Fast快速

面向 Svelte 的移动 Web 组件库，保持简洁的组件语法与轻量运行时体验。

框架: Svelte
样式基础: Tailwind CSS
npm 包: stdf

打开官网 npm

02 / REACT

RTDF

R: Ready即用
T: Tiny轻量
D: Design设计
F: Fast快速

面向 React 的移动 Web 组件库，以组件与 Hook 适配共享交互契约。

框架: React
样式基础: Tailwind CSS
npm 包: rtdf

打开官网 npm

03 / VUE

VTDF

V: Visual视觉
T: Tiny轻量
D: Design设计
F: Fast快速

面向 Vue 的移动 Web 组件库，以组件和组合式函数提供原生 Vue 体验。

框架: Vue
样式基础: Tailwind CSS
npm 包: vtdf

打开官网 npm

ARCHITECTURE

共享产品逻辑，保留框架原生渲染

Any TDF 共享状态推导、主题、语言、SVG 数据与公共类型，但不把 Svelte、React、Vue 强行合并为同一套渲染源码。

DEPENDENCY FLOW / TOP TO BOTTOM 依赖方向保持单向

01 共享层

@any-tdf/common 组件状态 · 主题语义 · 语言与类型 · SVG 数据

02 适配层

stdfSvelte 组件、事件与插槽

rtdfReact 组件、Props 与 Hook

vtdfVue 组件、事件与插槽

03 体验层

独立 npm 包独立官网框架 Demo 共享工具链

动效兼容

Svelte 原生，React 与 Vue 对齐

Svelte 直接使用框架内置的 easing、transition、animate 与 motion 能力；为了让另外两端保持一致的动效语义，Any TDF 分别实现了 React 和 Vue 版本。

REACT @any-tdf/react-motion 对齐 Svelte API 的动效函数、React 组件与 Hook。 VUE @any-tdf/vue-motion 对齐 Svelte API 的动效函数、Vue 组件与组合式函数。

DESIGN PRINCIPLES

统一但不抹平差异

架构围绕可维护的共享边界设计，让三端保持一致，也让每个框架仍然像它自己。

P / 01

框架原生

组件、事件、插槽和类型都遵循各自框架的习惯，不引入额外跨框架运行时。

P / 02

体验一致

组件范围、主题语义、文档结构和移动交互在三端保持可预测的一致性。

P / 03

Tailwind CSS 基础

三套组件库都基于 Tailwind CSS，共享清晰的主题变量和可组合样式语言。

P / 04

独立交付

每个组件库都可以单独安装、构建和使用，消费者不需要了解 Monorepo。

ECOSYSTEM DIRECTORY

组件之外，还有完整的开发工具链

除核心组件库与 Motion 实现外，Any TDF 还提供共享能力、脚手架、构建插件、视觉效果、AI Skill 与编辑器支持。

01 / REGISTRY

npm 包

NPM · REACT

@any-tdf/react-confetti

面向 React 的纯 HTML 与 CSS 彩纸动画，保持 svelte-confetti 的轻量实现和 SSR 兼容。

官网 react-confetti.any-tdf.dev

NPM · VUE

@any-tdf/vue-confetti

面向 Vue 的纯 HTML 与 CSS 彩纸动画，保持 svelte-confetti 的轻量实现和 SSR 兼容。

官网 vue-confetti.any-tdf.dev

NPM · CORE

@any-tdf/common

跨框架共享工具、主题、语言包、类型，以及由组件状态派生的公共能力。

npm npmjs.com

NPM · CLI

create-any-tdf

用于创建 STDF、RTDF 与 VTDF TypeScript 项目的命令行脚手架。

npm npmjs.com

NPM · VITE

@any-tdf/vite-plugin-md-ts

把 Markdown 文件转换为 JavaScript 模块的 Vite 与 Rollup 插件。

npm npmjs.com

NPM · VITE

@any-tdf/vite-plugin-svg-symbol

把多个 SVG 文件合并为 symbol sprite 的 Vite 与 Rollup 插件。

npm npmjs.com

02 / AI CONTEXT

AI Skill

SKILL · SVELTE

$stdf

面向 AI 代理的 STDF 离线资料，覆盖组件、主题、色彩、国际化、脚手架与图标方案。

源码 github.com/any-tdf

SKILL · REACT

$rtdf

面向 AI 代理的 RTDF 离线资料，覆盖组件、主题、色彩、国际化、脚手架与图标方案。

源码 github.com/any-tdf

SKILL · VUE

$vtdf

面向 AI 代理的 VTDF 离线资料，覆盖组件、主题、色彩、国际化、脚手架与图标方案。

源码 github.com/any-tdf

03 / EDITOR

VS Code 插件

VS CODE · EXTENSION

Any TDF for VS Code

为 STDF、RTDF 与 VTDF 提供组件 API 悬停文档、版本信息和框架原生代码补全。

VS Code Marketplace marketplace.visualstudio.com

START BUILDING

从你熟悉的框架开始

访问对应官网，查看指南、组件、主题生成器和在线 Demo。

STDFSvelte RTDFReact VTDFVue