用途:为受 Ghost 美学启发的界面提供一套带强制约束的 UI 设计规范,供 AI 代理在构建暗色模式界面、创建 Ghost 风格设计系统、实现 Inter 字体与 4px 网格 UI 时参考。
主要能力:给出颜色、语义令牌、排版、间距、边框、布局、组件状态、交互、动画与性能等方面的 MUST/SHOULD/NEVER 规则。颜色方面要求主表面使用浅度低于 20 的暗色背景,页面背景用 #FFFFFF,文本对比度至少 4.5:1;列出 surface-base、surface-raised、surface-overlay、text-primary、text-secondary、text-tertiary、border-default、warning 等语义令牌及 HEX。排版要求以 Inter 为主字体,主标题 73px/700,正文 26px/500,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums。间距使用 4px 网格,默认元素间距 65px。边框圆角限定为 3px、4px、7px、13px、16px,默认 13px。布局按 1920px 基准视口设计,全高用 h-dvh 而非 h-screen,固定元素需考虑 safe-area-inset。交互上要求破坏性操作使用 AlertDialog,焦点用 2px 强调色描边和 2px offset,禁用态 opacity: 0.5,图标按钮加 aria-label,输入框不得阻止粘贴。动画默认不加,只动 transform/opacity,交互反馈不超过 200ms,尊重 prefers-reduced-motion。
使用方式:该技能与 awesome-design-md 中对应 Ghost 的 DESIGN.md 配套,DESIGN.md 提供视觉氛围与额外颜色令牌,本技能提供强制规则,漂移扫描器同时读取两个文件动态提取令牌,无需硬编码值。
限制:资料未提供安装命令、收费方式或具体代码示例;上述数值与规则均来自资料原文,未经验证的效果与平台支持信息暂未提供。