SuperAPI AI 工具集

shortcut-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

用途:为 AI 智能体提供 Shortcut 风格的界面设计约束,适用于构建浅色模式界面、参考 Shortcut 视觉的设计系统,以及使用 Inter 字体与 4px 网格的 UI。

主要能力与规范: 颜色方面,主表面使用浅色背景,页面背景(surface-base)为 #FFFFFF,主操作与焦点状态(accent)为 #3831BF,文本对比度至少 4.5:1。语义令牌包括 surface-raised #EBECF0(卡片、弹窗)、surface-overlay #D7EAF5(浮层、提示)、text-primary #949494、text-2 #545454、text-secondary #A0A1A6、border-default #E3E0D5、warning #523F1D。 排版必须使用 Inter 为主字体,主标题 50px/700,正文 21px/400,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,未经要求不得改字距。 间距必须基于 4px 网格,默认元素间隙 2px,不得使用任意值。 边框圆角取自 1px、2px、3px、4px、6px、7px、21px,默认 3px,胶囊元素用 21px 以上,边框宽度限 1px、2px、3px。 布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素需尊重 safe-area-inset。 交互状态:焦点用 2px accent 外框并偏移 2px,禁止移除焦点指示;禁用态 opacity 0.5 且 cursor: not-allowed;破坏性操作须用 AlertDialog;加载用结构骨架;错误就近展示;图标按钮须有 aria-label;不得阻止粘贴。动画仅在明确要求时添加,只动 transform/opacity,时长不超过 200ms,尊重 prefers-reduced-motion。

使用方式:作为参考指南在让 AI 智能体生成 Shortcut 风格界面时套用上述约束。

限制:资料未提供安装命令、代码示例、收费信息或具体平台支持细节,暂未提供。