用途:这是一套面向 AI 智能体的 Mailchimp 风格界面设计约束,适用于构建浅色模式界面、仿 Mailchimp 设计系统,以及使用 Inter 字体与 4px 网格实现 UI。
主要能力:提供颜色、语义令牌、排版、文本样式、间距、边框、布局、组件、交互、动画与性能方面的具体规范。颜色方面要求页面背景使用 #000000(surface-base),主操作与聚焦状态使用 #2E114B(accent),文字对比度至少 4.5:1。语义令牌还包括 surface-raised #191610、surface-overlay #F2F2F2、text-primary #1A1A1A、text-secondary #A7A7A7、border-default #F7F7F7、warning #FDDB17、success #72DF58 等。排版要求以 Inter 为主字体,主标题用 53px/extra_bold,正文用 31px/semi_bold,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums。间距必须基于 4px 网格,默认元素间隙 2px。圆角取值来自 0px 至 25px 的既定刻度,胶囊元素建议 22px 以上。布局以 1920px 为基准视口,禁止使用 h-screen,应使用 h-dvh,并为固定元素保留 safe-area-inset。
使用方式:在使用 AI 智能体生成仿 Mailchimp 界面时引用这些规则作为约束,例如按语义令牌取色、按排版与间距刻度设置样式。交互上要求聚焦使用 2px accent 描边与 2px outline-offset,禁用态使用 opacity 0.5 与 cursor: not-allowed,破坏性操作使用 AlertDialog,图标按钮需加 aria-label。动画仅限明确要求时添加,只动 transform 与 opacity,交互反馈不超过 200ms,并尊重 prefers-reduced-motion。
限制:资料未提供安装命令、代码示例、平台或收费信息;具体要求均以该技能的约束规则为准,不应擅自扩展。