UI 设计规范生成器是毫秒助手的配色工具，输入主色后自动生成完整色阶、语义色与组件样式规范，输出可直接给前端或写进设计文档的数值。
定一个主色容易，把它扩展成一套能用的规范难：hover 用哪个色、禁用态灰多少、文字在深色底上对比度够不够。凭感觉调出来，上线后总有几个地方看着别扭。
输入主色，工具按色彩关系生成色阶与语义色，并给出按钮、输入框、标签等常用组件的样式参数。数值直接可用。
能做什么
- 输入主色自动生成 50–900 的完整色阶
- 生成成功、警告、危险、信息等语义色
- 输出按钮、输入框、卡片、标签等组件的配色与圆角参数
- 给出文字与背景的对比度提示，便于满足可读性要求
- 结果可复制为十六进制或设计工具的变量格式
什么时候用得上
- 新项目起步：还没有设计系统，先定一套可执行的配色
- 临时改版：品牌换了主色，需要快速生成配套颜色
- 开发自查：前端拿到设计稿，核对各状态的色值是否合理
- 小程序与 H5：移动端组件不多，一套规范足够覆盖
怎么用
- 进入 UI 设计规范生成器
- 输入或选取品牌主色
- 查看生成的色阶与语义色，微调明暗
- 复制色值与组件参数，粘贴到设计稿或代码中
常见问题
生成的色阶科学吗？
按 HSL 明度与饱和度规律推导，适合作为起点。实际使用中仍需按品牌调性微调，尤其是品牌色饱和度很高时。
会检查无障碍对比度吗？
会给出文字与背景的对比度提示，4.5:1 以上适合正文。提示不替代专业审计，正式项目建议用无障碍检测工具复核。
能导出成 CSS 变量吗？
可以复制色值后自行组织为 CSS 变量或 Tailwind 配置。工具负责给出数值，不生成完整代码文件。