Toss-Style Design System
一套用于快速构建现代化、一致的用户界面的设计系统工具包。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Toss-Style Design System。 它的用途是：一套用于快速构建现代化、一致的用户界面的设计系统工具包。 详细介绍见：https://321skill.com/skills/toss-style-design-system/ 请根据该页面的说明完成安装。
使用示例
“我需要一个包含搜索框、筛选下拉菜单和数据表格的页面，风格要现代化且一致。”，它会引导你使用设计系统中的 SearchBar、Select 和 Table 组件，并确保它们遵循相同的间距、颜色和交互反馈规范。或者说：“我想把整个应用的主题从亮色切换到深色。”，它会指导你如何通过修改主题配置变量来一键切换。
介绍
Toss-Style Design System 旨在解决团队在开发现代 Web 应用时面临的界面设计不一致、开发效率低下和设计资产难以维护的问题。它提供了一套完整的、基于 React 的设计组件库、设计令牌（Design Tokens）和配套工具，帮助开发者快速搭建高质量的用户界面。
开发者可以通过 npm 或 yarn 安装此设计系统，直接导入并使用预设的 React 组件（如按钮、表单、导航栏等）来构建页面。系统内置了完整的主题、间距、颜色、字体等设计规范，确保应用在不同模块和页面间保持视觉和交互的一致性。
该设计系统特别适合前端开发、UI设计师和产品经理。前端开发者可以专注于业务逻辑，无需从零开始构建基础组件；UI设计师可以基于统一的设计语言进行创作；产品经理则能更快地验证产品原型，确保设计意图被准确实现。
建议在使用前，团队内部先就设计规范达成共识。虽然系统提供了丰富的默认配置，但在深度定制主题或覆盖底层样式时，需要一定的 CSS-in-JS（如 Emotion）或 React 相关知识。
核心特点
与许多通用组件库（如 Ant Design）不同，它深度集成了特定的设计哲学（如来自韩国金融科技公司 Toss 的交互模式），并提供了更精细的动画、状态管理和无障碍访问支持。其设计令牌系统允许开发者通过配置变量，一键切换整个应用的主题和品牌色，而无需修改组件代码。
注意事项
不适合需要高度定制化、与现有非 React 技术栈深度集成，或追求极简、无依赖 UI 库的项目。
常见问题
这个设计系统支持 Vue 或 Angular 吗？
目前仅提供 React 版本的组件库，不直接支持 Vue 或 Angular。
如何自定义主题颜色和字体？
通过覆盖或扩展系统提供的 Design Tokens（设计令牌）配置文件即可全局修改。