> For the complete documentation index, see [llms.txt](https://developers-apps-in-toss.toss.im/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers-apps-in-toss.toss.im/landing-page/landing-page-zh/design/components.md).
# Toss设计系统 (TDS)
TDS是Toss Design System的缩写。它是在Toss社区中广泛使用的设计系统，是构成Toss产品的通用设计语言，也是开发者的工具。TDS帮助设计师、开发者、策划者等不同岗位的人都能以相同标准进行协作。
### TDS 的优点
* 可以为用户提供一致的产品体验。
* 设计师可以更专注于解决问题，而不是 UI 实现。
* 开发者可以比直接制作自定义 UI 时快 3\~5 倍地开发。
***
### 使用 TDS 时的注意事项
要安全且正确地使用 TDS，请先确认以下内容。
#### 许可说明
{% hint style="info" %}
使用此 UI Kit 时，其中包含的 [许可条件](https://developers-apps-in-toss.toss.im/design/prepare/figma-ui-license)视为您已同意。
{% endhint %}
1. **知识产权：** Toss 通过 Apps in Toss(Appintoss) 服务提供的所有资料的权利，包括知识产权在内，都归 Toss 所有。合作伙伴只能在使用 Apps in Toss 服务的范围内使用这些资料。
2. **使用权限范围：** Toss 允许使用 TDS 仅是为了提供 Apps in Toss 服务的有限权限。您无法获得超出此范围的成果物或额外权利。
3. **遵守义务及违反时的措施：** 合作伙伴必须遵守本指南及相关法律法规。若违反，Toss 可中止提供 Apps in Toss 服务或采取其他必要措施。
***
### 组件列表
介绍 Apps in Toss 中最常用的 11 个核心 TDS 组件。点击各组件，详细查看使用方法和应用示例。
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://developers-apps-in-toss.toss.im/landing-page/landing-page-zh/design/components.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
.webp?alt=media&token=a6d87c01-7360-42f8-9d8f-8402bba4ecc3){kind=link}
