重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
tdesign-miniprogram by joneqian/claude-skills-suite
npx skills add https://github.com/joneqian/claude-skills-suite --skill tdesign-miniprogramTDesign 微信小程序组件库,腾讯出品的企业级设计系统。提供 60+ 高质量组件,支持暗黑模式、主题定制等功能。
此技能应在以下场景触发:
npm i tdesign-miniprogram -S --production
移除 app.json 中的 "style": "v2" 以避免样式冲突。
在 project.config.json 的 setting 部分添加以下内容:
{
"setting": {
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
]
}
}
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
{
"paths": {
"tdesign-miniprogram/*": [
"./miniprogram/miniprogram_npm/tdesign-miniprogram/*"
]
}
}
修改 project.config.json 后,在微信开发者工具中构建 npm:
工具 -> 构建 npm
构建成功后,勾选
将 JS 编译成 ES5
在页面或组件的 JSON 文件中引入:
{
"usingComponents": {
"t-button": "tdesign-miniprogram/button/button"
}
}
在 WXML 中使用:
<t-button theme="primary">按钮</t-button>
| 组件 | 描述 | 引入路径 |
|---|---|---|
| Button | 按钮 | tdesign-miniprogram/button/button |
| Divider | 分割线 | tdesign-miniprogram/divider/divider |
| Fab | 悬浮按钮 | tdesign-miniprogram/fab/fab |
| Icon | 图标 | tdesign-miniprogram/icon/icon |
| Layout | 布局 | tdesign-miniprogram/row/row |
| Link | 链接 | tdesign-miniprogram/link/link |
| 组件 | 描述 | 引入路径 |
|---|---|---|
| BackTop | 返回顶部 | tdesign-miniprogram/back-top/back-top |
| Drawer | 抽屉 | tdesign-miniprogram/drawer/drawer |
| Indexes | 索引列表 | tdesign-miniprogram/indexes/indexes |
| Navbar | 导航栏 | tdesign-miniprogram/navbar/navbar |
| SideBar | 侧边导航 | tdesign-miniprogram/side-bar/side-bar |
| Steps | 步骤条 | tdesign-miniprogram/steps/steps |
| TabBar | 底部标签栏 | tdesign-miniprogram/tab-bar/tab-bar |
| Tabs | 标签页 | tdesign-miniprogram/tabs/tabs |
| 组件 | 描述 | 引入路径 |
|---|---|---|
| Calendar | 日历 | tdesign-miniprogram/calendar/calendar |
| Cascader | 级联选择器 | tdesign-miniprogram/cascader/cascader |
| CheckBox | 复选框 | tdesign-miniprogram/checkbox/checkbox |
| DateTimePicker | 日期时间选择器 | tdesign-miniprogram/date-time-picker/date-time-picker |
| Input | 输入框 | tdesign-miniprogram/input/input |
| Picker | 选择器 | tdesign-miniprogram/picker/picker |
| Radio | 单选框 | tdesign-miniprogram/radio/radio |
| Rate | 评分 | tdesign-miniprogram/rate/rate |
| Search | 搜索框 | tdesign-miniprogram/search/search |
| Slider | 滑块 | tdesign-miniprogram/slider/slider |
| Stepper | 步进器 | tdesign-miniprogram/stepper/stepper |
| Switch | 开关 | tdesign-miniprogram/switch/switch |
| Textarea | 多行文本框 | tdesign-miniprogram/textarea/textarea |
| TreeSelect | 树形选择器 | tdesign-miniprogram/tree-select/tree-select |
| Upload | 上传 | tdesign-miniprogram/upload/upload |
| Form | 表单 | tdesign-miniprogram/form/form |
| 组件 | 描述 | 引入路径 |
|---|---|---|
| Avatar | 头像 | tdesign-miniprogram/avatar/avatar |
| Badge | 徽标 | tdesign-miniprogram/badge/badge |
| Cell | 单元格 | tdesign-miniprogram/cell/cell |
| Collapse | 折叠面板 | tdesign-miniprogram/collapse/collapse |
| CountDown | 倒计时 | tdesign-miniprogram/count-down/count-down |
| Empty | 空状态 | tdesign-miniprogram/empty/empty |
| Footer | 页脚 | tdesign-miniprogram/footer/footer |
| Grid | 宫格 | tdesign-miniprogram/grid/grid |
| Image | 图片 | tdesign-miniprogram/image/image |
| ImageViewer | 图片预览 | tdesign-miniprogram/image-viewer/image-viewer |
| Progress | 进度条 | tdesign-miniprogram/progress/progress |
| Result | 结果 | tdesign-miniprogram/result/result |
| Skeleton | 骨架屏 | tdesign-miniprogram/skeleton/skeleton |
| Sticky | 吸顶容器 | tdesign-miniprogram/sticky/sticky |
| Swiper | 轮播图 | tdesign-miniprogram/swiper/swiper |
| Table | 表格 | tdesign-miniprogram/table/table |
| Tag | 标签 | tdesign-miniprogram/tag/tag |
| List | 列表 | tdesign-miniprogram/list/list |
| 组件 | 描述 | 引入路径 |
|---|---|---|
| ActionSheet | 动作面板 | tdesign-miniprogram/action-sheet/action-sheet |
| Dialog | 对话框 | tdesign-miniprogram/dialog/dialog |
| DropdownMenu | 下拉菜单 | tdesign-miniprogram/dropdown-menu/dropdown-menu |
| Guide | 引导 | tdesign-miniprogram/guide/guide |
| Loading | 加载 | tdesign-miniprogram/loading/loading |
| Message | 消息通知 | tdesign-miniprogram/message/message |
| NoticeBar | 公告栏 | tdesign-miniprogram/notice-bar/notice-bar |
| Overlay | 遮罩层 | tdesign-miniprogram/overlay/overlay |
| Popup | 弹出层 | tdesign-miniprogram/popup/popup |
| PullDownRefresh | 下拉刷新 | tdesign-miniprogram/pull-down-refresh/pull-down-refresh |
| SwipeCell | 滑动单元格 | tdesign-miniprogram/swipe-cell/swipe-cell |
| Toast | 轻提示 | tdesign-miniprogram/toast/toast |
| 组件 | 描述 | 引入路径 |
|---|---|---|
| ChatList | 聊天列表 | tdesign-miniprogram/chat-list/chat-list |
| ChatMessage | 聊天消息 | tdesign-miniprogram/chat-message/chat-message |
| ChatSender | 聊天发送器 | tdesign-miniprogram/chat-sender/chat-sender |
| ChatContent | 聊天内容 | tdesign-miniprogram/chat-content/chat-content |
| ChatActionbar | 聊天操作栏 | tdesign-miniprogram/chat-actionbar/chat-actionbar |
| ChatLoading | 聊天加载 | tdesign-miniprogram/chat-loading/chat-loading |
| ChatMarkdown | 聊天 Markdown | tdesign-miniprogram/chat-markdown/chat-markdown |
| ChatThinking | 聊天思考中 | tdesign-miniprogram/chat-thinking/chat-thinking |
| Attachments | 附件 | tdesign-miniprogram/attachments/attachments |
<!-- 基础按钮 -->
<t-button theme="primary" size="large">主要按钮</t-button>
<t-button theme="light" size="large">浅色按钮</t-button>
<t-button size="large">默认按钮</t-button>
<!-- 描边和文字按钮 -->
<t-button theme="primary" size="large" variant="outline"
>描边按钮</t-button
>
<t-button theme="primary" size="large" variant="text">文字按钮</t-button>
<!-- 图标按钮 -->
<t-button
theme="primary"
icon="app"
content="图标按钮"
size="large"
></t-button>
<!-- 加载状态 -->
<t-button theme="primary" size="large" loading>加载中</t-button>
<!-- 禁用状态 -->
<t-button theme="primary" size="large" disabled>禁用</t-button>
<!-- 块级按钮 -->
<t-button theme="primary" size="large" block>块级按钮</t-button>
<!-- 幽灵按钮(透明背景) -->
<t-button theme="primary" ghost size="large">幽灵按钮</t-button>
{
"usingComponents": {
"t-input": "tdesign-miniprogram/input/input"
}
}
<t-input
label="标签"
placeholder="请输入"
value="{{value}}"
bind:change="onChange"
/>
{
"usingComponents": {
"t-dialog": "tdesign-miniprogram/dialog/dialog"
}
}
<t-dialog
visible="{{visible}}"
title="对话框标题"
content="对话框内容"
confirm-btn="确认"
cancel-btn="取消"
bind:confirm="onConfirm"
bind:cancel="onCancel"
/>
import Toast from 'tdesign-miniprogram/toast/index';
Toast({
context: this,
selector: '#t-toast',
message: '轻提示消息',
});
{
"usingComponents": {
"t-chat-list": "tdesign-miniprogram/chat-list/chat-list",
"t-chat-message": "tdesign-miniprogram/chat-message/chat-message",
"t-chat-sender": "tdesign-miniprogram/chat-sender/chat-sender"
}
}
<t-chat-list layout="single">
<t-chat-message
avatar="{{item.avatar}}"
name="{{item.name}}"
content="{{item.content}}"
role="{{item.role}}"
/>
<view slot="footer">
<t-chat-sender bind:send="onSend" />
</view>
</t-chat-list>
Component({
data: {
messages: [
{
role: 'user',
content: [{ type: 'text', data: '你好' }],
},
{
role: 'assistant',
content: [{ type: 'text', data: '你好!有什么可以帮你的吗?' }],
},
],
},
methods: {
onSend(e) {
const { value } = e.detail;
// 处理发送消息
},
},
});
<t-button style="color: red">自定义样式</t-button>
<t-button custom-style="color: red">自定义样式</t-button>
在页面中直接覆盖样式:
.t-button--primary {
background-color: navy;
}
在自定义组件中,启用 styleIsolation:
Component({
options: {
styleIsolation: 'shared',
},
});
<t-button t-class="my-button-class">按钮</t-button>
.my-button-class {
background-color: navy !important;
}
TDesign 提供了丰富的 CSS 变量用于主题定制:
page {
--td-button-primary-bg-color: #0052d9;
--td-button-border-radius: 8rpx;
}
{
"darkmode": true
}
在 app.wxss 中:
@import 'miniprogram_npm/tdesign-miniprogram/common/style/theme/_index.wxss';
.text {
color: var(--td-text-color-secondary);
}
对于包裹在 custom-tab-bar 或 root-portal 中的组件,添加 .page 类:
<view class="page">
<t-tab-bar />
</view>
此技能包含 references/ 目录下的完整文档:
当需要详细的 API 信息时,请使用 Read 工具访问特定的参考文件。
^2.12.0app.json 中的 "style": "v2"每周安装
63
仓库
GitHub 星标
7
首次出现
2026年2月7日
安全审计
安装于
codex61
gemini-cli60
opencode60
github-copilot59
amp58
kimi-cli58
TDesign WeChat Mini Program component library, an enterprise-level design system by Tencent. Provides 60+ high-quality components with dark mode support, theme customization, and more.
This skill should be triggered when:
npm i tdesign-miniprogram -S --production
Remove "style": "v2" from app.json to avoid style conflicts.
Add the following to the setting section of project.config.json:
{
"setting": {
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
]
}
}
{
"paths": {
"tdesign-miniprogram/*": [
"./miniprogram/miniprogram_npm/tdesign-miniprogram/*"
]
}
}
After modifying project.config.json, build npm in WeChat DevTools:
Tools - Build npm
After successful build, check
Compile JS to ES5
Import in page or component JSON file:
{
"usingComponents": {
"t-button": "tdesign-miniprogram/button/button"
}
}
Use in WXML:
<t-button theme="primary">Button</t-button>
| Component | Description | Import Path |
|---|---|---|
| Button | Button | tdesign-miniprogram/button/button |
| Divider | Divider | tdesign-miniprogram/divider/divider |
| Fab | Floating Action Button | tdesign-miniprogram/fab/fab |
| Icon | Icon | tdesign-miniprogram/icon/icon |
| Layout | Layout | tdesign-miniprogram/row/row |
| Component | Description | Import Path |
|---|---|---|
| BackTop | Back to Top | tdesign-miniprogram/back-top/back-top |
| Drawer | Drawer | tdesign-miniprogram/drawer/drawer |
| Indexes | Index List | tdesign-miniprogram/indexes/indexes |
| Navbar | Navigation Bar | tdesign-miniprogram/navbar/navbar |
| SideBar | Side Navigation | tdesign-miniprogram/side-bar/side-bar |
| Component | Description | Import Path |
|---|---|---|
| Calendar | Calendar | tdesign-miniprogram/calendar/calendar |
| Cascader | Cascader | tdesign-miniprogram/cascader/cascader |
| CheckBox | Checkbox | tdesign-miniprogram/checkbox/checkbox |
| DateTimePicker | Date Time Picker | tdesign-miniprogram/date-time-picker/date-time-picker |
| Input | Input | tdesign-miniprogram/input/input |
| Component | Description | Import Path |
|---|---|---|
| Avatar | Avatar | tdesign-miniprogram/avatar/avatar |
| Badge | Badge | tdesign-miniprogram/badge/badge |
| Cell | Cell | tdesign-miniprogram/cell/cell |
| Collapse | Collapse | tdesign-miniprogram/collapse/collapse |
| CountDown | Countdown | tdesign-miniprogram/count-down/count-down |
| Component | Description | Import Path |
|---|---|---|
| ActionSheet | Action Sheet | tdesign-miniprogram/action-sheet/action-sheet |
| Dialog | Dialog | tdesign-miniprogram/dialog/dialog |
| DropdownMenu | Dropdown Menu | tdesign-miniprogram/dropdown-menu/dropdown-menu |
| Guide | Guide | tdesign-miniprogram/guide/guide |
| Loading | Loading | tdesign-miniprogram/loading/loading |
| Component | Description | Import Path |
|---|---|---|
| ChatList | Chat List | tdesign-miniprogram/chat-list/chat-list |
| ChatMessage | Chat Message | tdesign-miniprogram/chat-message/chat-message |
| ChatSender | Chat Sender | tdesign-miniprogram/chat-sender/chat-sender |
| ChatContent | Chat Content | tdesign-miniprogram/chat-content/chat-content |
| ChatActionbar | Chat Action Bar |
<!-- Basic Buttons -->
<t-button theme="primary" size="large">Primary Button</t-button>
<t-button theme="light" size="large">Light Button</t-button>
<t-button size="large">Default Button</t-button>
<!-- Outline and Text Buttons -->
<t-button theme="primary" size="large" variant="outline"
>Outline Button</t-button
>
<t-button theme="primary" size="large" variant="text">Text Button</t-button>
<!-- Icon Button -->
<t-button
theme="primary"
icon="app"
content="Icon Button"
size="large"
></t-button>
<!-- Loading State -->
<t-button theme="primary" size="large" loading>Loading</t-button>
<!-- Disabled State -->
<t-button theme="primary" size="large" disabled>Disabled</t-button>
<!-- Block Button -->
<t-button theme="primary" size="large" block>Block Button</t-button>
<!-- Ghost Button (transparent background) -->
<t-button theme="primary" ghost size="large">Ghost Button</t-button>
{
"usingComponents": {
"t-input": "tdesign-miniprogram/input/input"
}
}
<t-input
label="Label"
placeholder="Please enter"
value="{{value}}"
bind:change="onChange"
/>
{
"usingComponents": {
"t-dialog": "tdesign-miniprogram/dialog/dialog"
}
}
<t-dialog
visible="{{visible}}"
title="Dialog Title"
content="Dialog content"
confirm-btn="Confirm"
cancel-btn="Cancel"
bind:confirm="onConfirm"
bind:cancel="onCancel"
/>
import Toast from 'tdesign-miniprogram/toast/index';
Toast({
context: this,
selector: '#t-toast',
message: 'Toast message',
});
{
"usingComponents": {
"t-chat-list": "tdesign-miniprogram/chat-list/chat-list",
"t-chat-message": "tdesign-miniprogram/chat-message/chat-message",
"t-chat-sender": "tdesign-miniprogram/chat-sender/chat-sender"
}
}
<t-chat-list layout="single">
<t-chat-message
avatar="{{item.avatar}}"
name="{{item.name}}"
content="{{item.content}}"
role="{{item.role}}"
/>
<view slot="footer">
<t-chat-sender bind:send="onSend" />
</view>
</t-chat-list>
Component({
data: {
messages: [
{
role: 'user',
content: [{ type: 'text', data: 'Hello' }],
},
{
role: 'assistant',
content: [{ type: 'text', data: 'Hello! How can I help you?' }],
},
],
},
methods: {
onSend(e) {
const { value } = e.detail;
// Handle send message
},
},
});
<t-button style="color: red">Custom Style</t-button>
<t-button custom-style="color: red">Custom Style</t-button>
Override styles directly in page:
.t-button--primary {
background-color: navy;
}
In custom components, enable styleIsolation:
Component({
options: {
styleIsolation: 'shared',
},
});
<t-button t-class="my-button-class">Button</t-button>
.my-button-class {
background-color: navy !important;
}
TDesign provides rich CSS variables for theme customization:
page {
--td-button-primary-bg-color: #0052d9;
--td-button-border-radius: 8rpx;
}
{
"darkmode": true
}
In app.wxss:
@import 'miniprogram_npm/tdesign-miniprogram/common/style/theme/_index.wxss';
.text {
color: var(--td-text-color-secondary);
}
For components wrapped in custom-tab-bar or root-portal, add .page class:
<view class="page">
<t-tab-bar />
</view>
This skill includes comprehensive documentation in references/:
Use Read tool to access specific reference files when detailed API information is needed.
^2.12.0"style": "v2" from app.jsonWeekly Installs
63
Repository
GitHub Stars
7
First Seen
Feb 7, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
codex61
gemini-cli60
opencode60
github-copilot59
amp58
kimi-cli58
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
123,700 周安装
| Link | Link | tdesign-miniprogram/link/link |
| Steps | Steps | tdesign-miniprogram/steps/steps |
| TabBar | Bottom Tab Bar | tdesign-miniprogram/tab-bar/tab-bar |
| Tabs | Tabs | tdesign-miniprogram/tabs/tabs |
| Picker | Picker | tdesign-miniprogram/picker/picker |
| Radio | Radio | tdesign-miniprogram/radio/radio |
| Rate | Rate | tdesign-miniprogram/rate/rate |
| Search | Search | tdesign-miniprogram/search/search |
| Slider | Slider | tdesign-miniprogram/slider/slider |
| Stepper | Stepper | tdesign-miniprogram/stepper/stepper |
| Switch | Switch | tdesign-miniprogram/switch/switch |
| Textarea | Textarea | tdesign-miniprogram/textarea/textarea |
| TreeSelect | Tree Select | tdesign-miniprogram/tree-select/tree-select |
| Upload | Upload | tdesign-miniprogram/upload/upload |
| Form | Form | tdesign-miniprogram/form/form |
| Empty | Empty State | tdesign-miniprogram/empty/empty |
| Footer | Footer | tdesign-miniprogram/footer/footer |
| Grid | Grid | tdesign-miniprogram/grid/grid |
| Image | Image | tdesign-miniprogram/image/image |
| ImageViewer | Image Viewer | tdesign-miniprogram/image-viewer/image-viewer |
| Progress | Progress | tdesign-miniprogram/progress/progress |
| Result | Result | tdesign-miniprogram/result/result |
| Skeleton | Skeleton | tdesign-miniprogram/skeleton/skeleton |
| Sticky | Sticky | tdesign-miniprogram/sticky/sticky |
| Swiper | Swiper | tdesign-miniprogram/swiper/swiper |
| Table | Table | tdesign-miniprogram/table/table |
| Tag | Tag | tdesign-miniprogram/tag/tag |
| List | List | tdesign-miniprogram/list/list |
| Message | Message | tdesign-miniprogram/message/message |
| NoticeBar | Notice Bar | tdesign-miniprogram/notice-bar/notice-bar |
| Overlay | Overlay | tdesign-miniprogram/overlay/overlay |
| Popup | Popup | tdesign-miniprogram/popup/popup |
| PullDownRefresh | Pull Down Refresh | tdesign-miniprogram/pull-down-refresh/pull-down-refresh |
| SwipeCell | Swipe Cell | tdesign-miniprogram/swipe-cell/swipe-cell |
| Toast | Toast | tdesign-miniprogram/toast/toast |
tdesign-miniprogram/chat-actionbar/chat-actionbar| ChatLoading | Chat Loading | tdesign-miniprogram/chat-loading/chat-loading |
| ChatMarkdown | Chat Markdown | tdesign-miniprogram/chat-markdown/chat-markdown |
| ChatThinking | Chat Thinking | tdesign-miniprogram/chat-thinking/chat-thinking |
| Attachments | Attachments | tdesign-miniprogram/attachments/attachments |