Claude Design · 4 个能力演示

用 hermes-agent 的 claude-design skill 做的 4 个独立 HTML。每页聚焦一个能力点。

01

Design System Board

Color tokens · Typography scale · Spacing · Components · 3 layout variants · Tweaks 面板(localStorage)

02

Command Palette

交互原型 · ⌘K 唤起 · 键盘 ↑↓ 导航 · Enter 执行 · 模糊搜索 · 状态过渡

03

HTML Slide Deck

1920×1080 固定画布 · 键盘 ← → 翻页 · 进度条 · localStorage 记忆页码 · 自适应缩放

04

Motion Study

动效纪律 · 状态过渡 · 加载序列 · 4 种悬停反馈 · 数字滚动 · prefers-reduced-motion 尊重