SuperAPI AI 工具集

posthog-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

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

主要能力与约束: 颜色方面,主表面必须使用深色背景(亮度小于 20),页面背景必须为 #000000(surface-base),色板应限制在 5 种颜色内,文字对比度至少 4.5:1。语义令牌包括 surface-base #000000、surface-raised #E38B20、text-primary #52290C、text-secondary #55554A、border-default #C17C25、destructive #52290C、warning #C17C25。 排版方面,主字体必须为 Inter,建议单一字体族;主标题必须为 14px/400,字重仅限 regular 与 light;标题用 text-balance,正文用 text-pretty,数字数据建议用 tabular-nums,不得擅自修改字距。文本样式含 heading-1 至 heading-3、caption、label 等,字号范围 10px 至 14px。 间距与边框方面,必须使用 4px 网格,建议取值 3px、4px、9px、10px,默认元素间距 4px,不得使用任意间距值;圆角必须取自 3px 尺度,边框宽度统一 1px。 布局方面,必须按 1920px 基准视口设计,全屏高度不得用 h-screen 而应用 h-dvh,固定元素需尊重 safe-area-inset,方形元素建议用 size-*。 交互方面,破坏性或不可逆操作必须使用 AlertDialog,加载状态建议用结构骨架,错误须显示在操作发生处,不得阻止输入框粘贴,纯图标按钮必须加 aria-label。焦点必须使用 2px 强调色 #5E6AD2 轮廓与 2px outline-offset,不得移除焦点指示。禁用态必须 opacity 0.5 且 cursor: not-allowed。 动画方面,除非明确要求否则不得添加动画;只能动画 transform 与 opacity 等合成属性,不得动画布局属性;入场建议 ease-out,交互反馈不超过 200ms,需尊重 prefers-reduced-motion。 性能方面,不得动画大面积 blur() 或 backdrop-filter 表面,不得在非活动动画外使用 will-change,不得用 useEffect 表达可用渲染逻辑实现的内容。

使用方式与限制:资料未提供安装命令、代码示例或具体接入步骤,暂未提供。以上为设计约束参考,实际落地需结合具体项目。