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

Claude Code design-language-system：统一作品集卡片的语义样式

English

Claude Code 安装步骤

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

中文摘要

按作品集的颜色变量、排版层级、间距和交互规则更新组件，使文章卡和项目卡在同一套样式下工作。

SKILL.md 中文导读

可复现示例

作品集样例 card-25 需要一张文章卡，输入 {title: 'Field notes', meta: 'June notes'}。标题、元信息和可点区域应有清楚层级。

工作步骤

  1. 核对卡片内容、状态和当前样式变量，确定标题与元数据角色。
  2. 使用已有主题并复核焦点、间距和减少动效时的显示。

验收方法

卡片沿用 {surface: 'card', titleRole: 'h3', metaRole: 'caption'}，默认间距用项目现有变量。在键盘和减少动效设置下检查可见表现。

GitHub 原文 · 更新日期

适用环境

在 Claude Code 中准备作品集的现有主题及组件。先核对实际 Tailwind 变量和目标界面的样式约定。

常见问题

一般交互过渡需要引入动画库吗？

来源建议简单过渡优先用 CSS。复杂序列、手势或滚动触发时再按项目需要评估现有动效能力。

相关指南