用途:该技能为 AI 智能体提供一组带有明确偏好与强制约束的设计规范,用于构建 Lemonsqueezy 风格的界面,尤其是浅色模式、Inter 字体和 4px 网格的场景。
主要能力:提供颜色、语义令牌、字体、间距、边框圆角、布局、组件状态与动画等约束。颜色方面要求主表面使用浅色背景,页面背景必须为 #FEFEFE,主操作与焦点状态必须用 #9368E3,文字对比度至少 4.5:1。语义令牌包括 surface-base、surface-raised、text-primary、text-2、text-secondary、border-default、accent、warning,并给出对应 HEX 与用途。字体必须使用 Inter 主字体,主标题 74px/700,正文 31px/semi_bold。间距必须使用 4px 网格,默认间隙 4px。边框圆角限定 17px、21px、29px,默认 29px。布局以 1920px 为基准视口,禁止使用 h-screen,改用 h-dvh,固定元素需尊重 safe-area-inset。交互方面焦点必须 2px 轮廓加 2px offset,禁用态 opacity 0.5 与 cursor: not-allowed,图标按钮需 aria-label,破坏性操作使用 AlertDialog。动画仅在明确要求时添加,且只动画 transform 与 opacity。
使用方式:资料未提供具体安装命令、调用方式或代码示例;需将这些规则作为 AI 生成界面时的参考约束使用。
适用场景:构建 Lemonsqueezy 风格的浅色界面或设计系统,以及需要统一颜色、字体与网格规范的前端开发。
限制:该技能只描述设计约束,未提供组件实现或安装说明;部分规则使用 SHOULD、MUST 分级,具体要求需按原文执行;未提及收费、平台或效果保证。