SuperAPI AI 工具集

tldraw-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

用途:这是一套面向 AI 智能体的 Tldraw 风格界面设计约束,适用于构建浅色模式界面、Tldraw 风格设计系统,以及使用 Inter 字体与 4px 网格的 UI。

主要能力:提供颜色、语义令牌、排版、间距、边框、布局、组件、交互状态、动画和性能方面的明确规则。颜色要求页面背景使用 #E7EBEE,主操作与焦点状态使用 #0E54F0,色板限制为 9 种颜色,文本对比度至少 4.5:1。语义令牌包括 surface-base、surface-raised、surface-overlay、text-primary、text-secondary、text-tertiary、border-default、accent 及其 HEX/RGB 与用途。排版要求主字体为 Inter,主标题 14px/500,正文 12px/400,字重仅限 regular 与 medium,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,不擅自修改字距。间距必须使用 4px 网格,默认元素间距 2px。边框圆角取自 0px、3px、4px、6px、7px、9px,默认 6px,边框宽度统一 1px。布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素需尊重 safe-area-inset。交互上焦点用 2px 强调色轮廓与 2px offset,禁用态用 opacity 0.5 与 cursor: not-allowed,破坏性操作使用 AlertDialog,图标按钮需 aria-label。动画仅在明确要求时添加,只动画 transform 与 opacity,交互反馈不超过 200ms,并尊重 prefers-reduced-motion。

使用方式:资料未提供具体安装命令或调用步骤,暂未提供。

适用场景:需要统一 Tldraw 视觉风格的浅色界面、设计系统与组件实现。

限制:资料未说明支持的平台、框架版本、收费方式或效果保证,暂未提供。