design-range – 设计风格滚轮

Design Range – 设计风格滚轮

默认情况下，Claude 为每个产品设计的方式都一样：Inter 或 Geist 字体、靛蓝/紫色渐变、居中英雄区配两个按钮、三个带图标和淡色圆圈的特色卡片、全部 rounded-2xl、柔和的灰色阴影。看起来还行，但和所有其他 AI 制作的网站如出一辙。这个技能就是为了刻意打破这种模式而存在的。

核心操作很简单：不要自己挑选风格，用滚轮决定。 让模型去“选择一种风格”时，它每次都会落在相同的少数几个选项上，所以我们将选择权交给一个脚本，它从一系列连贯的方向库中采样，并避开这个项目近期使用过的任何风格。你的任务就是完全承诺这个方向，并用工艺将它执行到位。

工作流

1. 了解情况

• 正在构建什么？ 将其映射到一种产品类型：marketing（着陆页、网站、作品集，如果你更愿意算在这里的话）、saas（人们工作的应用界面）、dashboard（分析、管理、监控）、ecommerce（商店、产品和分类页面）、mobile（原生或移动优先的应用界面）、portfolio。
• 是否有现有品牌或设计系统？ 如果项目已有确立的设计令牌、design-direction.md，或者用户是在现有应用中要求添加功能，则保持其设计方向。多样性适用于新项目、重新设计以及用户要求不同风格的时候。一个产品内部的一致性是个好特性；而所有产品之间的雷同才是问题。
• 用户是否提到了某种氛围？ （例如“奢华”、“俏皮”、“黑暗科技风”）。将其转换为过滤器（--energy、--mode）或特定的 --show <id>，但仍然展示备选方案，除非他们特别指定了。
• 品味文件。 如果 references/taste.md 中有内容，请阅读它。它记录了用户个人的喜好和厌恶，并在有冲突时覆盖库中的内容。其中的 exclude: 和 favor: 行由滚轮脚本自动应用；其余内容（喜爱的字体、颜色、他们喜欢的操作）则由你负责在构建所选方向时体现出来。

2. 滚出方向

python3 <skill-dir>/scripts/roll.py --product <type> [--count 3] [--mode light|dark] [--energy quiet|medium|loud]

从项目根目录运行。它会读取两种历史记录：项目的 .design-history.json 和覆盖所有项目的共享文件 ~/.claude/design-range-history.json，并避开这两者，所以下一个产品不会得到和上一个相同的外观。它还会分散强调色：每个选项的调色板都经过选择，确保其强调色相与其他选项以及近期使用过的强调色相相距甚远，这防止了“多样性”最终只沦为不同字体下的同一色系。它会打印出 3 个对比鲜明的选项，每个都是一个完整的简要说明：氛围、带有可用 CSS URL 的字体、命名调色板、布局原型、造型语言、动效、签名动作、要避免的事项，以及一个 Tailwind v4 的 @theme 块。

其他命令：--list（列出所有方向）、--show <id> --product <type>（完整显示一个方向，可选 --font N --palette N --layout <id>）。

3. 让用户选择（当他们在场时）

简洁地展示选项，每个选项一个简短的模块：名称、一行的氛围描述、字体对、调色板（十六进制值）、布局思路。询问用户选择哪一个，并提及他们可以混合搭配（“选项 2 的字体配上选项 3 的调色板”）或重新滚。

如果用户说“直接构建”，或者你在没有人类参与的情况下运行，那么就替他们选择，并且要根据契合度来选择。随机性是为了打破你的习惯，而不是把夜店美学强加给一个晚餐计划应用。对每个选项问自己：这个品牌的客户能在其中看到自己吗？氛围是否适合产品的用途（健康类和金融类应沉稳，运动和夜生活应充满活力，数据类应精确，美食和家居类应温暖）？选择最契合的选项。如果都不合适，则重新滚一次（--count 4，或使用 --energy/--mode 过滤）并从新集合中选择。一个令人惊讶的选择是可以的，前提是你能用一句话说明它为什么适合该产品；在报告你使用哪个方向时附上这句话。不要因为等待一个没人会做的决定而停滞构建。

4. 记录它并编写方向文件

python3 <skill-dir>/scripts/roll.py --record <id> --font N --palette N --layout <layout-id> --product <type>

这会同时写入项目历史记录和共享历史记录。然后将所选简要说明保存为项目根目录下的 design-direction.md。未来的会话（以及一小时后你自己）通过阅读它来保持此产品内部的一致性，而共享历史则确保下一个产品不会得到相同的外观。

5. 构建它

在构建之前，阅读匹配的平台参考，因为每种产品类型都有自己的工艺规则：

产品类型	阅读文档
marketing, portfolio	references/marketing.md
saas	references/saas.md
dashboard	references/dashboard.md
ecommerce	references/ecommerce.md
mobile	references/mobile.md

技术栈：默认使用 React + Tailwind（参见下面的“技术栈设置”）。然后：

• 首先连接设计令牌。 加载字体，粘贴 @theme 块，并使用语义化名称（bg-bg、bg-surface、text-text、text-muted、border-border、bg-accent、font-display）进行样式设计。脚本已经检查过对比度：当强调色文本位于背景或表面之上时，使用 text-accent-ink（如果强调色本身已经可读，则它等于强调色）；对于强调色填充按钮和徽章上的标签，使用 text-on-accent。如果简要说明中有 Contrast 行，它会告诉你做了哪些调整。像 indigo-500 或 slate-100 这样的原始 Tailwind 调色板类会让默认外观渗透回来，所以请将它们排除在组件之外。

• 完全承诺所选方向。 在可见的地方至少使用其两个签名动作，并将“避免”列表视为硬性约束。一个方向即使使用了正确的字体，但其他方面都是默认值，也会回退到通用外观。如果简要说明说圆角为 0，那么任何地方都不能使用圆角。如果它说硬偏移阴影，那么就不能有模糊阴影。

• 让布局原型塑造页面。 滚出来的布局（例如 sticky-scroll-story、three-pane、hub-and-sheet）就是为了打破居中英雄区加三个卡片的骨架。围绕它来构建。

• 扩展调色板，而不是替换它。 你需要悬停、激活和微妙的色调。从给定的颜色中派生它们（color-mix(in oklch, var(--color-accent) 85%, black)，或使用不透明度修饰符如 bg-accent/10），而不是去获取新的色相。

• 真实的内容。 为产品编写合理、具体的文案。Lorem ipsum 和“功能一”掩盖了设计是否实际可行。

• 让它动起来。 静态页面感觉像模板，而用户的品味文件要求在每次构建中都加入动效。每个构建都应获得以下全部四种动效，并以所选方向的自身 motion 个性来表现（粗野主义和运动风格为干脆，玩具箱风格为弹性，电影风格为缓慢且富有电影感，有机风格为柔和，复古操作系统风格为步进）：

  1. 加载时的入场编排：英雄区的各个部分以短小的错开序列（标题、文案、操作按钮各间隔 60-120 毫秒）依次出现，而不是同时出现或一次缓慢淡入。
  2. 所有可点击元素的悬停和按压反馈，以该方向的风格呈现：硬阴影按压、弹性缩放、下划线滑动、发光、摇摆。
  3. 一个从简要说明的 motion 或 signature 字段中提取的签名动画（闪烁、旋转字符、变形斑点、肯·伯恩斯效果、打字机效果、滚动字幕、旋转形状）。这是人们会记住的时刻，所以要给它一个显眼的位置。
  4. 滚动揭示：对于首屏以下适合的区域（使用 IntersectionObserver 或 CSS animation-timeline: view() 并带有降级方案）。

  对 transform 和 opacity 进行动画处理，而不是布局属性，以保持流畅；将 UI 反馈控制在约 300 毫秒以内；并将所有装饰性动效放在 @media (prefers-reduced-motion: no-preference) 后面（或在 reduce 下关闭它），这样关闭动效的用户就能看到一个平静、完整的页面。

6. 完成前的雷同检查

查看你构建的内容，并修复以下任何项，除非所选方向明确要求它们：

• 在可见显示字体中使用 Inter、Roboto、Arial 或 system-ui
• 任何地方的紫色/靛蓝/蓝色到紫色的渐变
• 居中的英雄区、标题 + 副标题 + 两个按钮，然后是 3 列带图标卡片网格
• 每个容器都是 rounded-xl/2xl 加 shadow-md/lg
• 图标放在淡色圆圈中
• 整个视觉概念仅为灰色-50 的页面加白色卡片
• 所有文本使用相同的少数几个字号；没有版式对比
• 标题上的渐变色文字（除非是 Y2K Chrome 或 Glass Aurora 风格）

然后进行一次快速工艺检查：文字对比度符合 WCAG AA 标准（正文 4.5:1，大号文字 3:1；如果某个调色板在其背景上失败，则调整 muted 值），每个交互元素都有悬停、focus-visible 和禁用状态，页面在 375px 宽度下正常显示，并且动画尊重 prefers-reduced-motion。

技术栈设置

Tailwind v4（默认）：将字体的 <link> 标签放在 index.html 中（或者使用 next/font / @import url(...) 放在 CSS 顶部），然后将滚出的 @theme 块放在主 CSS 文件中的 @import "tailwindcss"; 之后。像 bg-accent、font-display、text-muted 这些类会自动生效。

Tailwind v3：将相同的值放在 tailwind.config.js 中的 theme.extend.colors 和 theme.extend.fontFamily 下，使用相同的名称。

Next.js：对于 Google 字体，首选使用 next/font/google（使用相同的名称，空格用下划线代替），并将它们映射到 CSS 变量。Fontshare 字体通过 CSS URL 加载。

React Native / Expo（用于 mobile）：使用 NativeWind，将调色板放在 tailwind.config.js 中，并使用 @expo-google-fonts/<font-name> 或 expo-font 加载字体。Fontshare 字体需要将字体文件下载到 assets/fonts 中。如果用户只想要一个视觉效果模型，那么一个移动端尺寸的 React Web 页面（390x844 框架）就足够了，而且速度快得多；如果不确定，请询问用户。

单文件预览：如果还没有项目，用户只是想看看效果，那么可以使用一个带 Tailwind CDN（<script src="https://cdn.tailwindcss.com"></script> 用于 v3 配置，或 @tailwindcss/browser@4 配合内联 <style type="text/tailwindcss">@theme {...}</style>）以及通过 ESM 引入的 React 的单个 HTML 文件。

当用户想要更多变化时

• 重新滚：再次运行脚本；它已经避开了最近的选择。
• 混合搭配：取一个方向的类型配上另一个方向的调色板。检查结果是否仍然感觉协调（像素字体配上奢华调色板是个玩笑，只有如果这正是目的所在才没问题）。
• 新方向：如果用户描述了一种库中没有的外观，请将其以相同的格式添加到 assets/directions.json 中，以便它加入未来的滚轮。检查其字体是否存在于 Google Fonts 或 Fontshare 上。
• 品味：当用户说出他们喜欢或讨厌什么时（“永远不要用衬线字体”、“我热爱粗野主义”），主动提供将其添加到 references/taste.md 的选项，以便每次都应用。