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

Claude Code PyConZA 品牌 CSS：用语义颜色和焦点变量

English

Claude Code 安装步骤

  1. 打开 GitHub 固定提交的 `.claude/skills/brand-css-tokens/SKILL.md`，核对内容与使用条件。
  2. 在自己的项目中创建 `.claude/skills/brand-css-tokens/`，把核对后的文件保存为 `.claude/skills/brand-css-tokens/SKILL.md`。
  3. 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/brand-css-tokens`。

中文摘要

在 PyConZA 2026 网站用统一的颜色、字号、间距和焦点变量，保持不同页面的品牌样式一致。

SKILL.md 中文导读

可复现示例

设计评审输入 {component: 'SessionCard', surface: 'light', input: 'keyboard'}。需要规定卡片背景和按钮键盘焦点。

工作步骤

  1. 按卡片的语义角色选择背景、正文和交互变量。
  2. 结合站点焦点样式验证键盘访问。

验收方法

样式检查输出 {background: '--color-bg-surface', outline: '--focus-ring-on-light', offset: 2}。它使用浅色焦点变量和 2px 轮廓偏移。

GitHub 原文 · 更新日期

适用环境

在 Claude Code 打开 PyConZA 2026 项目并读取固定版本的 CSS 变量块。练习只检查一处浅色卡片的 CSS，不要求启动网站。

常见问题

为何优先使用语义颜色变量？

语义变量说明当前颜色用于表面、正文还是强调。原始调色板变化时，可以集中维护对应值。

相关指南