Editable design tokens with calculated contrast ratios and CSS export — working example

编辑颜色变量,计算真实对比度,并导出一致的 CSS 与 JSON 设计令牌。 可选 PopNow 素材增强,先报价再批准 API USD 支出。对比度检查不等于完整无障碍审计;仍需检查字体、焦点和交互。

用 PopNow 生成
图片
需要
Node.js

技能免费。可选的 AI 图片、视频和声音在生成前会先报价,等你确认。API 密钥调用扣独立的美元(USD)API 余额;通过 OAuth/MCP 连接 ChatGPT 或 Claude 后发起的生成扣网站积分。

v1.0.1 · 更新于 2026年10月24日 · 40 KB · 可用于个人和客户项目;请勿转售或分享技能包。

你会得到

  1. 编辑颜色变量,计算真实对比度,并导出一致的 CSS 与 JSON 设计令牌。

  2. 独立 HTML 成品与可编辑的数据、源码

  3. 本地输入校验、代表性样例和可运行检查

  4. 可选 PopNow 素材增强,先报价再批准 API USD 支出

适合

  • 品牌配色评审、组件样式与设计令牌交付
  • 需要可离线检查、导出和交接的团队

不适合

  • 对比度检查不等于完整无障碍审计;仍需检查字体、焦点和交互。
  • 需要实时服务器、账号体系或多人同步的场景

怎么用

你说

  • 用 PopNow 的技能「设计系统展示台」(design-system-showcase)帮我做这件事:用我的真实资料制作「设计系统展示台」,保留可核对的结果和可编辑文件。

接着试试

  • 检查数据中的边界情况,并说明被拒绝的字段。

  • 按我们的品牌调整版式,先报价再添加 PopNow 素材。

需要准备

  • 六位十六进制颜色、圆角和间距;包含背景、表面、正文、弱化文字与按钮色。
  • 目标受众、最终标签和发布位置
  • 自有素材,以及公开声明的可靠依据

类似技能

查看全部 →

评分

还没有评分。安装过了?来打第一个分吧。

为这个技能评分

常见问题

需要准备什么输入?

六位十六进制颜色、圆角和间距;包含背景、表面、正文、弱化文字与按钮色。

哪些事情不在它的范围内?

对比度检查不等于完整无障碍审计;仍需检查字体、焦点和交互。

没有 API key 也能用吗?

可以。本地模板、校验和导出不需要 key。只有可选的 PopNow 素材生成需要先报价并获得 API USD 预算批准。

怎样保存修改?

关闭页面前导出当前 JSON。成品是本地文件,不会自动同步到服务器。