词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

Codex Material Design 3 前端设计｜检查明暗主题按钮与图标标签

English

Codex 安装步骤

  1. 打开 GitHub 固定提交的 `.agents/skills/frontend-material-ui/SKILL.md`，核对内容与使用条件。
  2. 在自己的项目中创建 `.agents/skills/frontend-material-ui/`，把核对后的文件保存为 `.agents/skills/frontend-material-ui/SKILL.md`。
  3. 在该项目根目录启动 Codex，输入 `$frontend-material-ui` 并选择同名技能。

中文摘要

按 Cubby 的 Material Design 3 指南为按钮分配语义色，并检查浅色、深色主题和图标名称。

SKILL.md 中文导读

可复现示例

评估一个使用图标的辅助按钮。
{"action":"Open filters","role":"secondary","iconOnly":true,"themes":["light","dark"]}

工作步骤

  1. 按操作的重要性选择主色、辅助色或错误色语义。
  2. 对图标按钮给出可读标签。
  3. 分别检查浅色和深色主题的对比度与交互状态。

验收方法

令图标按钮可访问名称为 `Open filters`，并用 `secondary/on-secondary`。分别验证两种主题的焦点样式和对比度。

GitHub 原文 · 更新日期

适用环境

在 Codex 中提供要调整的按钮和项目当前的明暗主题样式。示例沿用 Cubby 的语义令牌和 Lucide 图标约定。

常见问题

成功或错误可以只靠颜色表达吗？

搭配文字或图标表达状态，让用户在无法区分颜色时也能理解。

相关指南