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

Claude Code vaporwave-ui-color-designer：为作品集设计深浅主题色

English

Claude Code 安装步骤

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

中文摘要

整理作品集的页面背景、文字、强调和交互颜色，给出深色、浅色主题的语义变量及用法。

SKILL.md 中文导读

可复现示例

色板样例 palette-09 现有深色背景 #111827、浅色背景 #F8FAFC、品牌强调色 #C084FC。导航文字、正文和焦点都要有各自角色。

工作步骤

  1. 从已知品牌颜色确定背景和强调范围，为文字、边框和焦点分配语义变量。
  2. 为深浅两套主题分别给出色值、使用条件和需测量的文字组合。

验收方法

提供深浅两套变量和各自的使用说明。结构包含 {background: 'bg-primary', copy: 'text-primary', focus: 'focus'}。把荧光用途限制在强调区域，并复核每组的实际对比度。

GitHub 原文 · 更新日期

适用环境

在 Claude Code 中准备需要覆盖的页面和组件状态。若已有品牌色或背景限制，提供实际颜色值。

常见问题

只给作品集选一组霓虹色可以吗？

每个主题都要有背景、文字、强调与状态色。将强调色作为其中一部分，阅读与键盘操作由各自的语义颜色承担。

相关指南