用途:这是一套面向 AI 智能体的设计约束技能,用于构建受 Pinterest 美学启发的界面,适用于浅色模式界面、Pinterest 风格设计系统,以及使用 Inter 字体与 4px 网格的 UI 实现。
主要能力:提供颜色语义令牌(如 surface-base #FFFFFF、surface-raised #DC001A、surface-overlay #DDDED8、text-primary #3B3B3A、text-secondary #ED93A1、text-tertiary #EB5B3E、border-default #BC1C31、destructive #EB5B3E),要求文字对比度至少 4.5:1。排版上强制使用 Inter 字体,主标题 49px/700,正文 19px/400,字重仅限 bold、semi_bold、regular,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,不擅自修改字距。间距强制 4px 网格,默认元素间距 5px,禁止任意值。边框圆角仅用 13px、15px,默认 15px,边框宽度统一 1px。布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素需尊重 safe-area-inset,方形元素用 size-*。交互方面:焦点用 2px 轮廓与 2px offset,禁用态 opacity 0.5 与 cursor: not-allowed,破坏性操作使用 AlertDialog,加载用骨架屏,错误就近显示,图标按钮需 aria-label,禁止阻止粘贴。动画仅在明确要求时添加,只动 transform 与 opacity,入场用 ease-out,反馈不超过 200ms,尊重 prefers-reduced-motion。性能上禁止动画大面积 blur/backdrop-filter,禁止在非活动动画外使用 will-change,禁止用 useEffect 表达可用渲染逻辑实现的内容。
使用方式与限制:资料未提供安装命令或具体调用步骤,暂未提供。该技能为约束性指南,具体项目落地需结合实际情况;资料未说明收费、价格或平台支持信息。