SuperAPI AI 工具集

mercury-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

用途:该技能为 AI 智能体提供一套有明确立场的 Mercury 风格界面设计约束,适用于构建浅色模式界面、创建 Mercury 风格设计系统,以及实现使用 Inter 字体和 4px 网格的 UI。

主要能力与规则: 颜色方面,主表面应使用浅色背景,页面背景 MUST 使用 #000000,主操作与聚焦状态 MUST 使用 #8B9CEC,文本对比度 MUST 至少 4.5:1。提供语义令牌,如 surface-base、surface-raised、surface-overlay、text-primary、text-secondary、text-tertiary、border-default、accent。 排版 MUST 使用 Inter 为主字体家族,主标题 MUST 为 69px / 700,正文 MUST 为 16px / 700;标题使用 text-balance,正文使用 text-pretty,数值数据使用 tabular-nums,且未明确要求时不得修改 letter-spacing。 间距 MUST 使用 4px 网格,默认元素间距为 5px,禁止任意间距值。圆角 MUST 使用给定刻度(3px、4px、10px、13px、16px、18px、21px),默认 13px,胶囊元素用 21px 及以上;边框宽度限制为 1px、2px、5px、7px。 布局 MUST 以 1920px 为基准视口宽度,禁止使用 h-screen 而改用 h-dvh,固定元素须尊重 safe-area-inset,方形元素使用 size-*。交互上,聚焦 MUST 使用 2px 描边与 accent 色及 2px offset,禁止移除聚焦指示;禁用态 MUST 使用 opacity: 0.5 和 cursor: not-allowed;破坏性操作 MUST 使用 AlertDialog;错误须显示在操作发生处;禁止阻止输入框粘贴;图标按钮 MUST 加 aria-label。动画方面,除非明确要求否则不得添加动画,只可动画 transform 与 opacity,交互反馈不超过 200ms,并尊重 prefers-reduced-motion。

使用方式:该技能与 awesome-design-md 中对应的 DESIGN.md 搭配,链接为 https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/mercury。DESIGN.md(锁定时间内获取)提供视觉氛围与额外颜色令牌,本 SKILL.md 提供 MUST/SHOULD/NEVER 强制规则,漂移扫描器读取两个文件动态提取令牌,不使用硬编码值。

限制:资料未提供安装命令、收费或价格、平台支持范围及具体使用步骤;输入字段高度标为 0px 等部分规则需结合原文理解。