SuperAPI AI 工具集

anthropic-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

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

主要能力与规范要点: 颜色方面,主表面应使用浅色背景,页面背景必须使用 #ECE9E0(surface-base),调色板应限制在 8 种颜色内,文本对比度至少保持 4.5:1。语义令牌包括 surface-base #ECE9E0、surface-raised #DBD1C0、surface-overlay #0F0F10、text-primary #625F59、text-secondary #9F9F9C、text-tertiary #454036。 排版方面,主字体必须使用 Inter,建议单一字体族;主标题必须使用 68px / 700,正文必须使用 33px / semi_bold;标题使用 text-balance,正文使用 text-pretty;数字数据建议使用 tabular-nums;除非明确要求,不得修改字距。 间距必须使用 4px 网格,建议使用 3px、4px、5px、6px 的刻度,默认元素间距为 5px,不得使用任意间距值。边框圆角必须使用 3px、15px 刻度,默认 3px,分隔建议使用 1px 细边框。 布局必须以 1920px 为基准视口宽度,建议元素宽度为 10px、18px、146px、579px;不得使用 h-screen,全视口高度使用 h-dvh;固定元素需尊重 safe-area-inset;方形元素建议使用 size-*。 组件方面,输入框高度必须为 0px;Ghost 按钮背景透明、文字 #9F9F9C、无边框。交互状态方面,焦点必须使用 2px 强调色 #5E6AD2 轮廓并带 2px outline-offset,不得移除焦点指示;禁用状态必须使用 opacity: 0.5 与 cursor: not-allowed;破坏性操作必须使用 AlertDialog;加载状态建议使用结构骨架屏;错误需显示在操作发生处;不得阻止输入框粘贴;仅图标按钮必须添加 aria-label。 动画方面,除非明确要求不得添加动画;仅动画 transform 与 opacity;不得动画布局属性;入场建议 ease-out;交互反馈不超过 200ms;尊重 prefers-reduced-motion。性能方面,不得动画大范围 blur() 或 backdrop-filter 表面;不得在非活动动画外使用 will-change;不得用 useEffect 表达可用渲染逻辑实现的内容。

使用方式与限制:资料未提供具体安装命令、代码示例或集成步骤,暂未提供。该技能以约束规则形式供 AI 智能体在生成界面时遵循。