tdesign-miniprogram

Provide TDesign UI components for WeChat Mini Program development.

4|Updated Jun 10, 2026
One-click install
npx skills add https://github.com/mymx2/foreman --skill tdesign-miniprogram-mymx2
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tdesign-miniprogram
Source: https://github.com/mymx2/foreman/tree/main/.qoder/skills.collected/skills/tdesign-miniprogram
Command: npx skills add https://github.com/mymx2/foreman --skill tdesign-miniprogram-mymx2

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the challenge of building consistent, high-quality WeChat Mini Program interfaces by providing a comprehensive, enterprise-ready component library that adheres to Tencent's TDesign system.

Core Features & Use Cases

  • Extensive Component Library: Access over 60+ components including complex inputs, navigation, and data display elements.
  • AI-Ready Interfaces: Includes specialized components for building modern AI chat experiences, such as message lists, senders, and markdown rendering.
  • Theme & Dark Mode Support: Easily implement custom themes and native dark mode adaptation using CSS variables and design tokens.

Quick Start

Install the tdesign-miniprogram package via npm and configure your project.config.json to enable npm builds before importing components into your page json files.

Frequently Asked Questions about tdesign-miniprogram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a WeChat Mini Program interface with enterprise UI components?

To build WeChat Mini Program interfaces with enterprise UI components, you can use the TDesign system which provides over 60 components for complex inputs, navigation, and data display. It facilitates creating professional-grade interfaces with built-in style isolation and design token management.

Can I implement dark mode and custom themes in a WeChat Mini Program?

Yes, you can implement dark mode and custom themes in a WeChat Mini Program using CSS variables and design tokens. The TDesign system supports native dark mode adaptation and allows efficient cross-page theme customization for professional-grade styling.

How do I create an AI chat interface for a WeChat Mini Program?

You create an AI chat interface for a WeChat Mini Program using specialized UI components for modern chat experiences. The TDesign library includes message lists, senders, and markdown rendering components designed specifically for building AI-ready chat modules.

What is the best way to manage style isolation across complex mini program pages?

The best way to manage style isolation across complex mini program pages is using an enterprise design system with built-in style isolation management. TDesign provides efficient cross-page design token usage and professional-grade component styling to maintain interface consistency.

Do I need npm to use TDesign UI components in my WeChat Mini Program?

Yes, you need npm to install the tdesign-miniprogram package and must configure your project.config.json to enable npm builds. After configuration, you can import the enterprise-grade UI components directly into your page json files.

Does TDesign provide components for complex form inputs and data display in mini programs?

Yes, TDesign provides over 60 UI components for WeChat Mini Programs including complex form inputs, navigation structures, and data display elements. These components adhere to an enterprise design system to ensure high-quality and consistent interface development.