SuperAPI AI 工具集

kb-bank-styles

通用与其它

查看项目

更新于 10-15 21:37

技能介绍

用途:该技能用于按 KB 金融集团/KB 国民银行/KB 星银行的视觉语言快速搭建韩国型网上银行界面,可响应「KB 风格」「国民银行风格」「韩国银行 UI」「韩国金融界 UI」等请求。

主要能力:提供设计令牌(颜色、字体、间距、圆角、阴影)、组件片段,以及首页/转账/交易明细页面模板。提供移动 App 与网页两套预设:含「App/移动/星银行」关键词时用移动预设,含「网页/网上银行/首页」时用网页预设,未指定默认移动。颜色令牌定义在 @theme 中,如 --color-kb-yellow: #FFBC00、--color-kb-dark: #60584C、--color-bg: #F7F8FA、--color-ink: #191F28 等;字体以 KBFG Display/KBFG Text 为主并设系统回退。附带组件示例包括 Button、AccountCard、TransactionItem、QuickMenuGrid、HomePage、AmountInput、NumericKeypad、PINInput、BottomSheet、TransferConfirmSheet、ReceiptCard、VirtualCard、SpendingBar、CategoryDonut、Feedback、TermsAccordion 等,均为最小依赖,导入 examples/tokens.css 即可运行。

使用方式:调用时先判断上下文(移动/网页),再把 examples/tokens.css 合并进项目主 CSS,已有 @theme 则只追加不冲突的键;组件按需复制到 src/components/kb/ 等路径,遇同名文件不覆盖而是报告冲突;最后输出所加令牌/组件摘要和许可提示。

限制与注意:以 KB 金融集团内部使用为前提;须注意 KB CI 使用限制与字体许可。写 UI 时强调色仅 KB 黄一种,黄底文字用黑色而非白色;支出交易不用红色而用正文灰;金额用千分位逗号加「원」后缀及 tabular-nums;正文用 KBFG Text;卡片圆角 16–20px,阴影极淡;采用亲切敬语。具体品牌色以 KB CI 指南为准,资料所列为公开近似值。