用途:这是一套面向 AI 智能体的、带有明确约束的 Craft 风格界面设计规范,适用于构建浅色模式界面、Craft 风格设计系统,以及使用 Inter 字体和 4px 网格的 UI。
主要能力:提供颜色、语义令牌、排版、间距、边框、布局、组件、交互状态、动画和性能方面的具体规则。颜色上要求页面背景使用 #F3EFEC,主操作与焦点状态使用 #D0E8F4,文字对比度至少 4.5:1。语义令牌包括 surface-base、surface-raised、surface-overlay、text-primary、text-secondary、text-tertiary、border-default、warning、destructive、success、accent 等,并给出对应 HEX 与 RGB 值。排版要求以 Inter 为主字体,主标题 75px/700,正文 12px/400,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,不随意修改字距。间距必须使用 4px 网格,默认元素间距 4px。圆角使用 3px、9px、10px、13px、15px、16px、18px、19px、21px、22px 等刻度,默认 18px,胶囊元素用 21px 以上。布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素需考虑 safe-area-inset。交互上,焦点必须使用 2px 强调色轮廓并保留偏移,禁用态用 opacity 0.5 与 not-allowed,破坏性操作使用 AlertDialog,图标按钮需加 aria-label,加载用骨架屏,错误就近显示,不得阻止粘贴。动画仅在明确要求时添加,只动 transform 与 opacity,入场用 ease-out,交互反馈不超过 200ms,并尊重 prefers-reduced-motion。性能上避免动画大范围 blur 或 backdrop-filter,不在动画外使用 will-change,不用 useEffect 表达可用渲染逻辑完成的事。
使用方式:在构建符合 Craft 美学的界面时引用这些规则作为约束。
限制:资料未提供安装命令、代码示例、收费或平台信息,暂未提供。