你的点数不足以运行本工具（9 点）。 购买点数 →
📐 设计交付说明
描述一个界面或组件,生成工程师可直接照做的交付说明——布局间距、字体、颜色、各种状态、交互、响应式、无障碍与开发注意点。
- 状态全覆盖。 默认 / 悬停 / 聚焦 / 按下 / 禁用 / 加载 / 错误 / 空态全写到——工程师不用再追问"那这种情况呢?"
- 给的是确切值。 8pt 间距体系、WCAG-AA 对比度、精确 px 与 token——凡是替你假设的都标注"(建议值)"。
- 尊重你的体系。 给它品牌色、栅格或字体,它会在此基础上延展,而非另造一套冲突的值。
先看产出质量 —— 真实示例
示例 · 不消耗点数输入 —— 界面 / 组件
"登录卡片,宽 360px,内边距 16px。邮箱 + 密码输入框、一个主『登录』按钮,以及『忘记密码?』链接。"
上下文:8pt 栅格,品牌主色 #5E6AD2,Inter 字体。
输出 —— 交付说明
布局与间距
- 卡片最大宽 360px,内边距 16px,圆角 12px
- 纵向节奏:标题→输入区 24px,标签→输入框 8px,字段之间 16px
字体
- 标题 Inter 600 / 20px / 28px · 标签 500 / 13px · 输入 400 / 14px
按钮状态与 token
--btn-bg: #5E6AD2; /* 默认 */ --btn-bg-hover: #4F5ABF; /* 亮度 -8% */ --btn-bg-active: #454FAD; --btn-fg: #FFFFFF; /* AA 8.6:1 */ --btn-disabled: #5E6AD2 @ 40% 不透明度; height: 40px; radius: 8px; focus: 2px 描边环 #5E6AD2 @ 60%
无障碍
- 输入框需 <label for>;错误文案用 aria-describedby 关联
- 所有控件有可见聚焦环;Tab 顺序自上而下