TOSS小程序设计要求
一、UI/UX 指南
Mini App 品牌指南
Mini App 品牌指南 “Toss” 服务能够传达出与 “Toss” 区别开来的品牌体验，特制定以下品牌要素说明。这些要素是防止用户混淆 “Toss” 与 “AppInToss” 的重要标准，请务必仔细阅读并严格遵守
1. 品牌标志 / 品牌名称 / 品牌颜色
请在 Toss 与 AppInToss 页面中展示品牌标志、品牌名称及品牌颜色，以便用户能够清晰识别品牌.
品牌标志
合作伙伴的品牌标志将显示在以下位置,请务必使用我们附带的图片或插画文件来制作品牌标志，禁止自行修改或重新绘制。 总览页,优惠页,推送通知,系统消息,导航栏,Bridge 页面（跳转页）
下载请至原文
- 请以 600×600px 的方形图像 进行制作，不允许使用圆角或圆形样式。
- Logo 背后必须添加背景，并请使用在 亮色 / 暗色模式 下都能清晰显示的背景颜色。
- 若 Logo 本身已自带背景，请将图像在 600×600px 画布中 完全铺满。
- 请将 Logo 文件上传至 AppInToss 控制台，并在
granite.config.mts文件顶部的appsInToss函数 中，将该 Logo 链接填写到brand.icon属性 中。
品牌名称
品牌名称会出现在“全部”选项卡、“福利”选项卡、“推送”、“通知”、“导航”和“桥接”中。
除非有特殊原因，否则请用韩语输入。（例如：토스 (O) / Toss (X)）
请在 Appintos 控制台中输入品牌名称，并granite.config.mts在文件顶部的appsInToss函数属性brand.displayName中输入相同的品牌名称。
品牌颜色 (Brand color)
品牌颜色会显示在 Toss 内的入口、桥接页面、按钮（使用 TDS 时）等位置。
如果品牌已有指定颜色，请直接使用该颜色。
如果品牌没有指定颜色，请使用标志（Logo）中使用最多的颜色。
如果难以选择，请在取色网站中上传 Logo 图片，并使用系统提取的主色。
若品牌色未达到颜色对比标准，系统会在尽量保持原色的情况下自动进行校正。
*请在 granite.config.mts 文件顶部的 appsInToss 函数中，为 brand.primaryColor 属性填写带 # 的六位十六进制色码。例如：#3182F6
2. 导航栏（Navigation Bar）
固定在页面顶部的区域，Toss 小程序提供了专用的导航组件。 请根据入驻服务的类型，参考以下指南来设置导航栏(Navigation Bar)。
3. 桥接页（Bridge）
当用户从 Toss 进入 Toss 小程序时，桥接页起到提示“正在跳转至小程序”的过渡作用。 请根据入驻服务的类型，参考以下指南来设置桥接页。
4. 标签栏（Tab Bar）
标签栏不是必需组件，但如有需要，请务必使用 Toss 提供的悬浮式（Floating）标签栏进行实现。 （即使使用自定义 UI，也请按照提供的标签栏样式进行实现。） 这是为了避免与 Toss 主页面底部的默认标签栏样式重叠，从而让用户混淆当前所在的位置。 标签栏的标签数量可设置为最少 2 个、最多 5 个。
url: 'https://developers-apps-in-toss.toss.im/design/consumer-ux-guide.md' description: >- 앱인토스 다크패턴 방지 정책입니다. 고객의 예상을 벗어난 설계를 피하고 일관되고 신뢰할 수 있는 사용자 경험을 제공하기 위한 필수 가이드를
확인하세요.
反暗黑模式政策（Dark Pattern Prevention Policy）
本指南旨在避免给用户带来不必要的困惑或损失的“暗黑模式”设计。请务必仔细阅读以下内容。
任何超出用户预期的设计，都无法作为 Toss 小程序服务上线。
Toss 用户在任何时间、任何场景下，都期望获得一致且值得信赖的体验。 如果各服务按照不同标准设计界面，用户将感到困惑，这可能会导致他们对服务的信任度下降。 UX 指南的目的并非限制创意，而是为了确保用户能够获得可预期且便捷的体验。 遵守这些标准，不仅能提升用户满意度，也能共同强化服务的表现与竞争力。 遵守这些准则，就是在提升用户满意度的同时，加强服务的成果与竞争力。
任何超出用户预期的设计，都不能作为 Toss 小程序服务上线
包括 Toss 小程序在内的 Toss 应用，必须让所有用户都能直观、轻松地使用。 为此，我们制定了必须遵守的最低限度的用户体验标准。
这里所说的“最低标准”，是指那些会导致用户无法正常使用产品的严重可用性错误。 以下列出的通用规则，都是违背用户预期的设计案例。
采用以下设计的应用，将无法上线
- 用户一进入服务页面就弹出底部弹出窗（Bottom Sheet）的情况 指的是阻挡整个界面、以广告形式出现的底部弹出窗的案例。（包括用于获取通知权限的底部弹出窗）用户进入服务的瞬间，期望能够立即执行自己预期的操作。如果出现意外的打断，可能会打断用户的沉浸感，增加用户流失的可能性。
- 用户点击返回按钮时，弹出阻挡前一页面的底部弹出窗（Bottom Sheet）的情况 指的是当用户想返回上一页面以探索其他服务时，意外弹出用于获取服务通知权限的底部弹出窗的案例。 为了防止用户流失而设计的这种额外弹窗，可能会被用户感受到对自主性的侵犯。
- 无法退出的情况 指的是除了点击供应方引导的 CTA（行动号召按钮）外，没有其他可选择的操作的案例。无法拒绝的结构会让用户感到被强制，可能导致对服务产生反感和不信任。
- 在意外时刻弹出广告的情况 指的是用户在服务中点击菜单以领取道具时，意外出现全屏广告的案例。 在使用流程中出现意外广告，会打断用户的沉浸感，并可能引起对品牌的不悦。
- 用户无法通过 CTA 按钮预期应执行的操作 指的是在按钮上重复说明屏幕中已呈现的内容，导致用户点击按钮时完全无法预期接下来会出现的页面的案例。 CTA 是用于明确引导用户行动的工具。如果按钮标签含糊不清，或者仅包含重复说明，用户将无法预期结果，可能会感到不安，从而犹豫点击，进而影响转化率。此外，在 CTA 上方添加夸张或重复的辅助说明，也可能给用户带来混淆。
UX 文案（UX Writing）
UX 文案 本指南旨在帮助在文案中应用 Toss 的语气风格。请遵循以下指南。
1. 使用“해요体”（礼貌陈述体）
产品中的所有文案都应使用“해요字体”。
为了打造一致的用户体验，请在所有场景和上下文中统一使用“해요字体”
2. 使用主动语态
在产品中尽量使用主动句。
됐어요 → 했어요
不要不必要地在动词结尾使用“됐어요”
“去掉 ‘~었’
去掉动词中的 ‘-었’，句子可以变得更短。
动词替换使用
通过更换动词使用，可以让意思表达得更明确。
被动语态 → 主动语态，修改后若显生硬
当机械地将被动句改为主动句时，有时会导致句子显得生硬或信息传达更困难。 这种情况下，可以尝试从头重新组织句子，让表达更自然流畅。
::: details 밸류 강조하기
- Don't 28개 금융사에서 대출이 승인됐어요.
- Do 28개의 금융사에서 대출받을 수 있어요.
- '대출'을 주어로 써서 사용자가 얻는 가치가 모소하게 느껴져요. 사용자를 주어로 표현하면 사용자가 얻는 가치가 더 뚜렷해져요. :::
::: details 행동 강조하기
- Don't 비밀번호를 바꾸면 토스인증서가 삭제돼요.
- Do 비밀번호를 바꾸면 토스인증서를 다시 받아야 해요.
- 인증서를 삭제했을 때 사용자가 해야 하는 행동을 더 명확하게 설명할 수 있어요. :::
被动语态可使用的情况
在某些情况下，被动句能让表达更清晰、简洁，提升沟通效果。 下面给出几个使用被动语态更优的示例。
::: details ⚠️ 서비스 종료, 기간 만료
- Do 자산 조회 기간이 곧 만료돼요.
- 주어(종료 서비스, 기간 등)를 강조할 수 있어요.
- ‘종료, 만료’ 를 한국어로 풀어썼을 때 뉘앙스를 정확히 전달하지 못해요. (끝나요 vs. 만료돼요.) :::
:::details ⚠️ 사용자에게 미치는 영향을 알려줄 때
- Do 토스뱅크 대출로 갈아타면 원래 대출이 해지돼요.
- 인과 관계를 명확하게 설명해요. ‘사용자의 행동에 의해 따라오는 결과’라는 점을 알려줄 수 있어요.
- 주요 동사 : 연체, 해지, 적용 등 :::
:::details ⚠️ 사용자 안심
- Do 이제부터 김토스님의 개인정보 이용 내역이 기록돼요.
- '정보 수집 안내’ 등의 민감한 상황에서 사용자를 안심하게 할 수 있어요. :::
:::details ⚠️ 되어요 (X) → 돼요 (O)
- 모바일 화면의 좁은 공간을 고려, ‘되어요’는 모두 ‘돼요’로 통일해서 써주세요. :::
3. 积极表达
在产品中尽量减少负面沟通，使用肯定句。
없어요 → 있어요
‘할 수 없다’보다는 어떻게 해야 ‘할 수 있는지’ 알려주세요.
에러 메시지
사용자가 스스로 해결할 수 있는 에러라면 부정형 문장을 쓰지 않아요. 사용자가 기능을 쓸 수 있는 방법을 안내해주세요.
혜택을 받을 수 없을 때
혜택을 받을 수 없을 때, 부정형 문장을 쓰면 사용자의 감정을 상하게 할 수 있어요.
혜택 대상 안내
비스는 쓸 수 있지만, 특정 혜택은 받을 수 없을 때 → 긍정형 문장. 사용자는 스킴하기 때문에 제품 전체를 쓸 수 없다고 이해하기 쉬워요.
부정형 문장을 써도 되는 경우
사용자에게 명확하게 부정적인 내용을 알려줘야 할 때는 부정형 문장을 써도 좋아요.
:::details ⚠️ 서비스를 정책 상 쓸 수 없을 때
- Do 지금은 가입할 수 없어요. 청소년을 위한 서비스는 아직 준비 중이에요.
- Do 공무원은 후원금을 보낼 수 없어요. 구각공무원법에 따라, 특정 정당이나 정치인을 후원하는 것은 금지돼요.
- 사용자에게 상황을 명확하게 인지시킬 수 있어요. 쓸 수 없는 이유를 함께 안내해주세요. :::
:::details ⚠️ 일부 기능만 쓸 수 없을 때
- Do 한 번 바꾸면 주식캐시백은 다시 받을 수 없어요.
- 사용자가 어떤 기능을 쓸 수 없는지 명확하게 인지 할 수 있어요.
- 사용자 선택의 결과를 명확하게 안내할 수 있어요. :::
:::details ⚠️ 사용자 안심
- Do 상담이 끝나면 보험 전문가도 김토스님의 정보를 볼 수 없어요.
- ‘정보 수집 안내’ 등의 민감한 상황에서 사용자를 안심하게 할 수 있어요. :::
4. 캐주얼한 경어
제품 안에서 ‘~시겠어요?’, ‘시나요?’, ‘~께’ 같은 과도한 경어를 쓰지 않아요. 최대한 캐주얼하고 친근한 말투를 쓰는 게 좋아요.
동사에서 ‘~시’ 빼기
‘계시다' → ‘있다’
‘여쭈다’ → ‘확인하다, 묻다’
‘께’ → ‘에게’
경어를 뺐을 때 어색한 경우
사용자의 정보를 받는 질문에서 기계적으로 ‘~시’를 뺐을 때 문장이 어색할 수 있어요. 파악하고 싶은 정보를 ‘주어’로 써서 문장을 새롭게 써보세요.
경어를 써도 되는 경우
:::details ⚠️ 사용자의 맥락을 활용해서 질문할 때 ‘시나요?’, ‘셨나요?’ 형태의 경어를 활용해서 사용자의 당황스러움을 줄일 수 있어요.
:::details ⚠️ 사용자의 상황을 추정할 때 토스에 명확한 정보가 없어서 사용자에게 직접 판단하게 해야 할 때 ‘경어’로 정중하게 질문할 수 있어요.
:::details ⚠️ 사용자의 선의가 필요할 때 설문조사처럼 사용자의 선의를 기대해야 할 때 경어로 정중하게 질문해요.
5. ‘{명사} + {명사}’ 쓰지 않기
한자어 풀어쓰기
한자어 명사를 풀어서 동사 형태로 쓸 수 있어요.
한자어를 풀어쓰기 어려울 경우
’{명사}가 {명사}해서’ 형태로만 풀어줘도 더 캐주얼하게 쓸 수 있어요.
기능 이름 + 동명사
토스 제품의 네이밍은 대부분 ‘~하기’ 형태로 끝나요. ’~하기’가 어색하게 반복되지 않게 기능 이름은 빼고 ‘동사’만 쓰거나, 기능 이름을 문장으로 풀어서 쓰면 좋아요.
더 알아보기
译注，由于文字的翻译由我方完成，具体文字用法暂时先不改为md格式了，真的有需要请参考下面翻译doc文 3) UX 文案（UX Writing）
UX 文案 本指南旨在帮助在文案中应用 Toss 的语气风格。请遵循以下指南。 使用“해요体”（礼貌陈述体） 产品中的所有文案都应使用“해요字体”。 为了打造一致的用户体验，请在所有场景和上下文中统一使用“해요字体”。
使用主动语态
在产品中尽量使用主动句。
例如：
•
“됐어요” → “했어요”
不要不必要地在动词结尾使用“됐어요”
“去掉 ‘~었’ 去掉动词中的 ‘-었’，句子可以变得更短。”
动词替换使用 通过更换动词使用，可以让意思表达得更明确。
被动语态 → 主动语态，修改后若显生硬 当机械地将被动句改为主动句时，有时会导致句子显得生硬或信息传达更困难。 这种情况下，可以尝试从头重新组织句子，让表达更自然流畅。
被动语态可使用的情况 在某些情况下，被动句能让表达更清晰、简洁，提升沟通效果。 下面给出几个使用被动语态更优的示例。
3.积极表达 在产品中尽量减少负面沟通，使用肯定句。 例如： “없어요” → “있어요” 与其说“无法做”，不如告诉用户“如何可以做到”。
错误信息 如果错误是用户可以自行解决的，不使用否定句。请引导用户如何使用该功能。
无法享受优惠时 当用户无法享受某项优惠时，使用否定句可能会伤害用户的情绪。
优惠对象说明 当某些功能可以使用，但特定优惠无法享受时 → 使用肯定句。 因为用户会进行“扫描/梳理”，肯定句更容易让用户理解并非整个产品都无法使用。
使用否定句的情况 当需要明确告知用户负面信息时，可以使用否定句。
- 休闲型敬语 在产品中避免使用过于正式的敬语，如“~시겠어요?”、“시나요?”、“~께”等。 尽量使用轻松、亲切的语气表达。 动词去掉‘~시’
‘계시다' → ‘있다’
‘여쭈다’ → ‘확인하다, 묻다’
‘께’ → ‘에게’
去掉敬语后显得生硬的情况 在收集用户信息的提问中，机械地去掉“~시”可能会让句子显得不自然。 可以将需要获取的信息作为“主语”，重新组织句子，使表达更顺畅。
可以使用敬语的情况
- 避免使用‘{名词} + {名词}’ 汉字词拆解 可以将汉字词名词拆开，改写为动词形式使用。
汉字词难以拆解时 即使只用“{名词}가 {名词}해서”这种形式，也能让表达更轻松随意。
功能名称 + 动名词 Toss 产品的命名大多以“~하기”（进行…）结尾。 为了避免“~하기”重复显得生硬，可以只使用动词，或者将功能名称展开为完整句子来表达。
了解更多 Toss 的 8 条文案原则 制作优秀错误提示信息的 6 条原则
3) UX 文案禁用示例（Don't） 本规则旨在帮助避免使用不符合 Toss 语气的表达方式。请遵守以下指引。 事前检查清单 是否仅发送给必须接收的细分群体？ 是否未对敏感情况下定论？ 是否未制造焦虑感？ 是否可以预测落地页内容？ 是否说明了外部品牌优惠如何与 Toss / Appintoss 关联？ 是否未在无上下文的情况下显示他人信息？ *是否未使用死亡、犯罪等刺激性素材？
禁止规则 1.只发送给必须接收的人 如果细分标准不明确，请重新考虑发送对象，或使用中性的表达方式。
不对敏感情况下定论 我们无法知道用户此刻是否紧急或有负担。请不要根据情绪状态或私人情况做出假设或引导
不制造焦虑感 避免使用“错过会后悔”或过度让用户感到不安的词语。请仅平静地传达情况。
4.请让用户能够预期到目标页面 如果用户不知道将跳转到哪里，可能会感到困惑。
- 请说明外部品牌的优惠与 Toss / Toss 小程序的关联 请提供上下文和条件，让用户能够理解 Toss / Toss 小程序是否会发送外部品牌的推送通知。
6.不要在没有上下文的情况下展示他人的信息。
7.避免使用死亡、犯罪等刺激性题材。
4.图像（Graphics）
图像 本部分介绍 Toss 提供的图像资源及正确的使用方法。 图像版权说明 Toss 的所有图像资产以及通过 Toss 生成的图像，均为㈜Viva Republica 的知识产权，受《著作权法》及相关法律保护。 提供的图像仅可在 Toss 小程序合作环境内用于服务运营及宣传目的，禁止在其他服务或媒体中进行复制、修改、分发、传输或公开播放等使用行为。
Toss 提供的图像资源
- 图标 & 表情符号 提供约 7,000 个以上的 Toss 图标与表情符号套件。 如需自行制作，请参考以下制作指南
Toss 小程序图标制作指南
[使用注意事项]
请在屏幕上以 24~40px 的尺寸使用。 尽量避免将两个或以上图标并排组合使用，每次仅使用一个图标。
- smartphone mockup file
smartphone mockup file
在使用smartphone mockup制作素材时，请使用我们提供的文件。 已按不同尺寸提供，请勿自行裁剪、调色或变形。
3.Toast（AI 图像生成工具） 可基于第 1 项中的图标与表情符号生成 3D 图像。 生成的图像需经过 Toss 图像设计团队的使用审批（1 日内完成），方可正式用于实际页面。
4.其他 3D、动画等类型的图像，仅可使用我们提供的模块中所包含的内容。 今后我们将逐步扩大可提供的范围。 1.图像的正确使用方法 请使用符合语境的图像。 图像的作用不是装饰，而是为了帮助用户更好地理解内容。
2.请根据内容密度选择合适的尺寸使用 简洁的图像请使用较小尺寸，细节较多的图像请使用较大尺寸。
3.请勿使用过多的图像元素 在同一页面中放置过多、尺寸相近的图像会导致视觉分散。 请仅保留最核心的一张图像，其余位置可使用辅助性图像（例如图标）。
4.请合理布局，避免遮挡实质内容 请调整图像的大小和位置，确保重要信息不会被推到下方而产生不必要的滚动。
5.注意避免负面或哀求性的情感表达 向用户传达不快、乞求或哀求等负面情绪的表达属于暗黑模式，应尽量避免。
6.请勿使用装饰性效果或特效 无意义的描绘、粒子效果、渐变等过度装饰元素，可能会使界面显得复杂。
7.请使用能够准确传达情境的图像 在非错误情况下使用感叹号图标，或在无需等待时使用加载动画等行为，可能会引起用户误解。
合作方在制作图像时的注意事项
- 请保持 Toss 风格的一致性 Toss 追求简洁明了、干净的数字图像风格。 手绘风格、抒情画风、漫画式表现等可能会显得格格不入。 ✅ Toss 图像风格示例
- 请制作高画质图像 请制作干净、清晰的高画质图像。请注意，图像如果出现模糊或带有粒子等细小效果，可能会显得质量较低
2.确保在暗黑模式 / 浅色模式下的可见性 用于 Toss 应用的图像必须同时适配暗黑模式和浅色模式。 请制作中等亮度的图像，避免因过亮或过暗导致在某种模式下无法清晰显示。 2.请使用与界面相协调的颜色和布局 请确保图像与屏幕上的文本、CTA 按钮等其他元素保持平衡。
2.请营造积极且整洁的印象 图像在塑造服务的稳定性和可信度方面起到重要作用。 请避免图像过多单色调或显得模糊、暗淡，确保设计清晰明亮
二、设计准备
1）Figma
建议使用提供的库中 TDS 组件 进行设计。 这样可以无需额外关注 UI 样式开发，直接根据开发文档中的代码快速进行开发。
- 请先申请 Figma 使用权限 通过 Channel Talk 申请 Figma 权限后，即可在被邀请的项目中使用 TDS 库。 可通过 Figma 左侧的 Recents（最近项目） 菜单进入相应项目。
2.可以搜索并使用 TDS 组件 TDS Components for AppsInToss：包含各种组件的库 TDS Foundation for AppsInToss：字体、颜色、图标库
请在左侧 Assets（资源）面板 中或使用快捷键 Option + 2 查找所需组件。 蓝色圆点：开发文档中已提供代码的 TDS 组件。 紫色圆点：可在 Figma 使用，但尚未提供代码的 TDS 组件，需要单独编写代码。 红色圆点：不可自定义设计的 TDS 组件。 彩虹圆点：无开发文档，需要单独编写代码。
- 如何使用资源与图像 可以搜索提供的图标并替换为其他图标。 可将自行制作的图标制作成组件并替换现有图标。若自行制作，请参考图标制作指南。 *可 Cmd + 点击空白图像 并上传所需图像。
请注意以下事项 1.所有页面顶部都必须放置 Mobile_Navigation 组件。建议直接使用已包含必要组件的 🌈 Screen 模板，会更方便。 2.当只需要输入文字时，请使用 Mobile_Text 组件，而不是 Figma 自带的文本工具。该组件会自动适配各平台的“大号文字模式（Large Text）”，还能保持统一的字体大小与间距，无需手动调整字距或行距。
3.尽量只在右侧面板中调整属性。如果直接在画布上修改组件，可能会添加代码中不存在的属性，从而导致开发阶段难以实现或耗时增加。
4.建议以 375px 的宽度（iPhone 13 mini 尺寸）进行设计。虽然也可以使用其他尺寸，但部分组件（如 🔵 Mobile_Keypad）不支持响应式，会影响使用体验。’
5.页面顶部建议放置 Mobile_Top 组件，其下方使用 Mobile_ListRow 组件，即可轻松构建大多数页面。
6.大部分 TDS 组件自带上下左右的内边距（Padding），可直接无间距（gap）排列使用。例如 Mobile_ListRow 内置了「窄」「普通」「宽」「非常宽」四种上下内边距选项。其他一些组件也具有类似特性。
若需要额外留白，可使用 自动布局（Auto Layout）中的 gap，或使用 Padding・Margin 组件 来添加预设的外边距值。
2）App Builder
- “App Builder” 介绍 App Builder 是为 Appintoss 合作方提供的 UI 设计工具。 无需额外安装，即可快速完成遵循 Toss UI 风格指南的页面设计。 App Builder 的优势 内置所需组件，无需单独导入设计库。 可在右侧属性面板轻松调整颜色、文本、间距等。 无需安装，可直接在网页上使用。 在控制台选择 Mini App 并点击设计菜单即可使用。
参考信息 开发者模式可通过右侧面板顶部开关 ON 启用。 当前仅提供基础 UI 设计功能。
注意事项 目前为测试版，部分功能可能缺失或存在错误。 尚未正式发布，请勿通过截图或录屏向外部分享。
- 创建与删除项目 在 App Builder 中开始设计前，需先创建项目。接下来，通过视频了解 如何创建和删除项目。
创建项目 在主页右上角点击 “+ 新建” 按钮即可创建新项目。 删除项目 项目无法被永久删除，可根据需要放入或移出存档区。 项目收藏 将鼠标悬停在项目上，点击显示的 “星形按钮” 可将项目添加或移出收藏夹。 被收藏的项目会固定在页面顶部。 项目文件夹 可通过左侧面板的 “+” 按钮 创建
- 开始设计 打开新项目并设置品牌样式后，即可直接使用提供的指南和模板。 通过视频一起了解 品牌样式设置方法 以及 预先准备好的指南与模板。
品牌样式设置 打开新项目时，可在 “开始” 弹窗中选择服务名称和按钮颜色。 服务名称：仅可选择在 Appintoss 控制台注册的名称。 按钮颜色：服务的主色（primary color），适用于大部分资源。部分颜色可能会为保证网页可访问性而进行调整。
页面（Page） 页面功能允许在同一项目中为不同画布设计内容。可在左侧面板顶部的 页面（Page） 区域创建或删除页面。 准备页面：可查看 App Builder 基本使用方法。 模板页面：提供可直接复制使用的 UI 套件。
设计方式 在 App Builder 中，可通过两种方式进行设计： 1.Quickstart（快速开始）：直接调用 Toss 使用的 UI 页面进行设计。 2.Custom（自定义）：通过组合设计资源完成 UI 设计。
- 使用 Quickstart 进行设计 Quickstart 是调用 Toss App 中使用的 UI，并可修改部分选项的功能。不仅提供单个页面，还提供多个页面组合的流程（Flow）。接下来，通过视频了解 Quickstart 功能的使用方法。
Quickstart 修改方法 选择 Quickstart 后，可在右侧面板修改文本或部分设置。 内部元素可通过 Ctrl（Cmd）+ 点击 进行选择。但 不支持修改右侧面板未提供的其他元素或删除元素。 请仅用于简单修改所需内容后使用。
- 使用 Custom 进行设计 Custom 是通过组合 Toss 提供的设计资源来制作 UI 的方法。 当没有合适的 Quickstart 时，可添加基础页面并组合资源，自行完成 UI 设计。 接下来，通过视频了解 Custom 功能的使用方法。
添加基础页面
页面尺寸以 iPhone 13 mini（375x812） 为标准，设计资源也按照此宽度制作。 不建议随意调整页面宽度，否则部分元素可能会显得不协调。
文本 在 App Builder 中，可以使用 “Text” 资源 快速为文本应用 TDS 样式。 添加 “Text” 资源 后，可在右侧面板进行相应设置。接下来，通过视频了解 如何添加和编辑文本。 选择类型 一般型：常规段落文本格式 帖子型：适合用作标题的加粗字体 文本 可在 “文本”输入框 中编辑内容 换行请使用 Shift + Enter
图标与图像 仅可使用 Toss 团队提供的图像元素 通过视频了解如何 添加和编辑图像 添加图像的方法如下：
1.点击顶部控制栏的 资源，选择所需图像，或在右侧面板的 自定义（Custom） 中添加 “Asset” → 点击 更改→ 选择所需图像。 App Builder 测试版暂未提供 3D 图像。 但可以选择 2D 图像并将其转换为 3D。 接下来，通过视频了解 如何生成 3D 图像。
制作完成的 3D 图像，点击 保存后，经 Toss 团队审核通过即可自由使用。 Toss 当前使用的 3D 图像暂不支持在 App Builder 中使用，正在评估提供可能性，敬请谅解。 *无法单独使用 Quickstart 提供的 3D 图像。
- 布局 在 App Builder 中，可通过 排列功能快速构建布局。接下来，通过视频了解 排列功能的使用方法
选中多个资源后，可 Shift + 点击，在右侧工具栏中通过 水平/垂直/叠加排列 将其分组。 也可以通过 解除组合 拆分分组。 *分组后，可在右侧面板调整 间距、背景色、圆角 等属性。 接下来，通过视频了解 排列功能的使用 以及 样式编辑方法。
布局属性（Layout） Fit：根据内容调整长度 Fill：填满屏幕调整长度 Fixed：使用者指定的固定长度 Distribute：排列起点 Gap：元素间距 Padding：边角内边距
样式属性（Style） Visible：显示 / 隐藏 Opacity：透明度（1 为 100%。若想设置 10% 透明度，可输入 0.1） Fill：背景色 Border：边框颜色 Radius：圆角 Shadow：阴影效果
9.原型（Prototype） 可通过右上角的 播放按钮 预览原型（移动设备分辨率预览）。 接下来，我们通过视频了解如何使用原型功能。
在顶部控制栏中选择 手机图标，即可使用 设备预览（Device Preview） 功能。 通过设备预览功能，可以查看不同设备的分辨率效果。 将屏幕内所有资源的宽度设置为 Fill，即可创建响应式设计。 通过 原型分享按钮 复制链接，就能在实际移动设备上直接查看 UI。 接下来，通过视频了解如何生成原型链接。
8.App Builder 教学视频 这是一个使用上方介绍的功能，通过 App Builder 制作搜索 UI 的教学视频。 *观看视频
三、TOSS设计系统（TDS）
TDS 是在开发 Toss 产品时通用使用的 设计系统（Design System）。 它由数百个组件和模板构成，不仅仅停留在设计工具中，而是与开发紧密结合，像一种语言一样用于构建 Toss 产品。
TDS 的目标
始终保证产品的最低质量 使用 TDS 可以保持 Toss 的一致 UI 风格。
提升生产效率，专注于问题解决 通过可复用的美观设计系统，使产品 UI 开发流程更加高效。
提供一致的交互、动画、插图和设计模板 将产品完成度提升至行业领先水平。
Toss 设计系统（TDS） TDS 是 Toss Design System 的缩写，是 Toss 社区使用的设计系统。 TDS 不仅构成了 Toss 产品，也是跨职能协作的设计语言，同时也是开发者的工具。 使用 TDS 可以在为用户提供一致的产品体验的同时，让设计师专注于解决问题。开发效率也比自定义 UI 快 3~5 倍。 Toss 应用的大部分页面均由 TDS 构成，Appintoss 服务所需的页面也可以使用 TDS 制作。
组件列表 介绍 12 个最常用的组件。 点击组件可查看详细信息。
组件详细请参考原文 ，点击对应组件会跳转到api文档，也可直接查阅本文对应组件api部分
TDS 使用注意事项 为安全、正确地使用 TDS，请务必确认以下内容。 1.知识产权 通过 Toss 的「Appintoss」服务提供的所有资料（包括但不限于知识产权）均归 Toss 所有。 合作方仅可在 Appintoss 服务使用范围内 使用这些资料。 2.使用权限 Toss 授予 TDS 的使用权限仅为 提供 Appintoss 服务的有限使用权。 因此，合作方无法在此范围之外获取任何成果物或权利。
3.遵守义务及违规处理 合作方必须遵守本条款及相关法律法规。 如合作方违反规定，Toss 可中止 Appintoss 服务提供或采取其他必要措施。
开始使用 TDS Mobile
由于原格式缺失，代码示例部分请参考原文
使用 TDS Mobile 包可以在移动环境中轻松应用各种 UI 组件。 本指南介绍如何在项目中安装并使用 TDS Mobile。
- 安装必需的包 首先，使用 TDS Mobile 前，需要安装相关的依赖包。
- 设置 Provider 要使用 TDS Mobile，需要将项目的最顶层组件用 TDSMobileAITProvider 包裹。 该组件确保 TDS Mobile 的各个组件能够正确运行。
- 使用组件 完成包安装和 Provider 设置后，即可在项目中引入组件使用。 例如，使用 Button 组件，可以像下面这样编写代码：
基础（Foundation） Colors Toss 的颜色系统帮助开发者和设计师使用统一的颜色命名。 利用该系统，可以轻松实现与设计指南一致的 UI。 基本用法 使用 Toss 颜色系统，需要先安装 @toss/tds-colors 包。
安装完成后，可以通过 colors 对象获取并使用所需颜色 .
颜色部分为实际展示，请查看原文
基本颜色
背景颜色
Typography Typography 是设计系统的核心元素，它确保文本可读性、保持一致性方向，并传递品牌识别。通过字体大小、行高等参数明确信息层级，并在不同设备和环境中提供一致的视觉效果。.
我们的设计系统旨在提供跨平台一致的用户体验。 不仅适用于 Android 和 iOS，也确保网页端的文本样式与原生环境一致，不产生差异。特别是支持原生环境的 更大文本模式（Accessibility Options），字体大小和文本样式会根据设置动态调整。
规则说明
Token Typography Token 具有层级结构。使用方法请参考下表。 对于 Typography 的使用者，不需要记忆具体的字体大小或行高，也不需要手动计算。系统已将层级化的 Token 进行了抽象化处理，用户只需直接使用
注意：不建议直接硬编码表中列出的数值。 该表假设未启用“大号文本模式”的基本情况。如果硬编码数值，当启用大号文本模式导致系统字体大小变化时，将难以灵活适配。
大号文本（Larger Text） 大号文本是 iOS 和 Android 提供的无障碍设置功能，允许用户调整文本大小以提高可读性。此设置不仅适用于原生环境，也应在应用内网页中同步生效。 如果原生环境中文本比例被放大，而网页正文未相应调整，可能导致相对过小，影响可读性。
为了避免此类问题，我们整理了在用户启用大号文本模式并调整比例时的实际字体大小。参考此表可以减少原生与网页间的文本比例差异，确保所有环境下提供一致的用户体验。
重要：请勿将表中数值硬编码为固定值，硬编码将影响大号文本模式下的灵活适配。
iOS OS 提供有限数量的大号文本等级，例如 xLarge、xxLarge、xxxLarge。 我们将这些等级抽象为比例，以确保 Android、iOS 和 Web 之间的规则一致。 下表显示了在原生环境中各设置对应的 Web 显示值。
Android 与 iOS 不同，Android 支持超过 100% 的任意比例，无法用有限等级表示。 因此，我们制定了如下规则。表中显示的 NN% 表示比例。 例如，如果用户将文本比例设置为 110%，并使用 Typography 1 Token，则该 Token 的实际字体大小按照公式计算： .
排版部分为实际展示，请查看原文