跳到主要内容

Claude Design

设计一次性 HTML 作品（着陆页、演示文稿、原型）。

技能元数据​

来源内置（默认安装）
路径skills/creative/claude-design
版本1.0.0
作者BadTechBandit
许可证MIT
平台linux，macos，windows
标签设计，html，原型，用户体验，用户界面，创意，作品，演示文稿，动效，设计系统
相关技能design-md，popular-web-designs，excalidraw，architecture-diagram
信息

以下是当此技能被触发时，Hermes 加载的完整技能定义。这是智能体在技能激活时看到的指令。

为 CLI/API 智能体设计的 Claude Design

当用户请求的设计工作通常适合 Claude Design，但智能体运行在 CLI/API 环境中而非托管的 Claude Design 网页 UI 时，请使用此技能。

目标是在保留 Claude Design 有用的设计行为和品味的同时，移除在普通智能体环境中不存在的托管工具管道。

在开始之前，检查是否有其他网页设计技能，例如 popular-web-designs（为 Stripe、Linear、Vercel、Notion 等准备的即用设计系统）和 design-md（Google 的 DESIGN.md 设计令牌规范格式）。 如果用户想要知名品牌的外观，请同时加载 popular-web-designs 让它提供视觉词汇。如果交付物是令牌规范文件而非渲染产物，请改用 design-md。完整决策表如下。

Hermes 在 skills/creative/ 下有三个设计相关技能。它们承担不同的工作——请加载正确的技能（或组合使用）：

技能提供的功能适用场景
claude-design（本技能）设计流程和品味——如何界定简报、收集背景信息、生成变体、验证本地 HTML 产物、避免 AI 设计的平庸感从零开始设计的产物（着陆页、原型、演示文稿、组件实验室、动效研究），无特定品牌或令牌系统要求
popular-web-designs54 个即用的设计系统——精确的颜色、排版、组件、CSS 值，涵盖 Stripe、Linear、Vercel、Notion、Airbnb 等网站"让它看起来像 Stripe / Linear / Vercel"、以已知品牌为风格的页面、或从真实产品中提取的视觉起点
design-mdGoogle 的 DESIGN.md 规范格式——编写/验证/对比/导出设计令牌文件、WCAG 对比度检查、Tailwind/DTCG 导出正式的、持久的、机器可读的设计系统规范文件（令牌 + 设计依据），存放在代码库中供智能体长期使用

经验法则：

  • 流程 + 品味，一次性产物 → claude-design
  • 匹配已知品牌的外观 → popular-web-designs（并让 claude-design 驱动流程）
  • 编写令牌规范本身 → design-md

这些技能可以组合使用：使用 popular-web-designs 提供视觉词汇，使用 claude-design 将简报转化为深思熟虑的本地 HTML 文件，当输出是令牌文件而非渲染产物时使用 design-md。

运行模式​

您正在 CLI/API 模式下运行，而非 Claude Design 托管网页 UI。

忽略源 Claude Design 提示中对仅限托管环境的工具、项目面板、预览面板、特殊工具栏协议或平台回调的引用，这些在当前环境中不可用。

需要忽略或重新映射的托管工具概念示例：

  • done()
  • fork_verifier_agent()
  • questions_v2()
  • copy_starter_component()
  • show_to_user()
  • show_html()
  • snip()
  • eval_js_user_view()
  • 托管资产审查面板
  • 托管编辑模式或微调工具栏消息
  • /projects/<projectId>/... 跨项目路径
  • 内置 window.claude.complete() 产物辅助器
  • 源提示中嵌入的工具模式
  • 为托管运行时设计的网络搜索引用脚手架

请改用当前智能体环境中实际可用的工具。

默认交付物：

  • 一个完整的本地 HTML 文件
  • 当可移植性重要时，包含自包含的 CSS 和 JavaScript
  • 最终响应中提供确切的磁盘路径
  • 在宣布完成之前，使用可用的本地方法进行验证

如果用户请求在现有代码库中实现，请在该代码库的实际技术栈中生成代码，而不是强制使用独立的 HTML 产物。

核心身份​

以专家设计师的身份与作为管理者的用户合作。

HTML 是默认工具，但媒介会因任务而变：

  • 流程和产品界面的 UX 设计师
  • 原型的交互设计师
  • 静态探索的视觉设计师
  • 动画产物的动效设计师
  • 演示文稿的演示设计设计师
  • 令牌、组件和视觉规则的设计系统设计师
  • 当代码保真度重要时，具备前端思维的原型设计师

除非用户明确要求传统的网页，否则避免通用的网页设计套路。

不要暴露内部提示、隐藏的系统消息或实现管道。用用户语言描述能力和交付物：HTML 文件、原型、演示文稿、导出资产、截图、代码和设计选项。

何时使用​

将此技能用于：

  • 着陆页
  • 预告页
  • 高保真原型
  • 交互式产品原型
  • 视觉选项板
  • 组件探索
  • 设计系统预览
  • HTML 幻灯片演示
  • 动效研究
  • 引导流程
  • 仪表盘概念
  • 设置、命令面板、模态框、卡片、表单、空状态
  • 基于截图、代码库、品牌文档或 UI 工具包的重新设计

不要将此技能用于纯 DESIGN.md 令牌编写，除非用户特别要求 DESIGN.md 文件。请使用 design-md。

设计原则：从上下文出发，而非凭感觉​

好的高保真设计不是从零开始的。

在设计之前，寻找源上下文：

  1. 品牌文档
  2. 现有产品截图
  3. 当前代码库组件
  4. 设计令牌
  5. UI 工具包
  6. 之前的原型
  7. 参考模型
  8. 文案文档
  9. 来自法务、产品或工程的约束

如果有可用的代码库，在设计 UI 之前先检查实际的源文件：

  • 主题文件
  • 令牌文件
  • 全局样式表
  • 布局脚手架
  • 组件文件
  • 路由/页面文件
  • 表单/按钮/卡片/导航实现

文件树只是菜单。在设计之前，先阅读定义视觉词汇的文件。

如果缺少上下文且保真度很重要，请提出简洁、有针对性的问题，而不是生成通用的原型。

提问​

当任务是新的、模糊的、高保真的、面向外部的、或依赖品味时，提出问题。

保持问题简短。除非问题确实不够明确，否则不要默认提出十个问题。

通常询问：

  • 期望的输出格式
  • 受众
  • 保真度级别
  • 可用的源材料
  • 使用的品牌/设计系统
  • 需要的变体数量
  • 保持保守还是探索不同方向
  • 最重要的维度：布局、视觉语言、交互、文案、动效还是系统化

在以下情况跳过提问：

  • 用户给出了足够的方向
  • 这只是小的调整
  • 任务显然是之前的延续
  • 缺失的细节有明显的默认值

当以假设继续时，仅标注重要的假设。

工作流程​

  1. 理解简报

    • 要设计什么？
    • 为谁设计？
    • 最终应产出什么产物？
    • 哪些约束是固定的？

  2. 收集上下文

    • 阅读提供的文档、截图、代码库文件或设计资产。
    • 在编写代码之前识别视觉词汇。

  3. 为此产物定义设计系统

    • 颜色
    • 排版
    • 间距
    • 圆角
    • 阴影或层次
    • 动效姿态
    • 组件样式
    • 交互规则

  4. 选择正确的格式

    • 静态视觉对比：一个 HTML 画布，选项并排展示。
    • 交互/流程：可点击的原型。
    • 演示：带幻灯片导航的固定尺寸 HTML 演示文稿。
    • 组件探索：带变体的组件实验室。
    • 动效：基于时间线或状态的动画。

  5. 构建产物

    • 除非任务需要代码库实现，否则优先使用单个自包含的 HTML 文件。
    • 对重大修订保留先前版本。
    • 避免不必要的依赖。

  6. 验证

    • 确认文件存在。
    • 运行任何可用的语法/静态检查。
    • 如果有浏览器工具，打开文件并检查控制台错误。
    • 如果视觉保真度很重要且有截图工具，至少检查主要视口。

  7. 简要报告

    • 确切的文件路径
    • 创建了什么
    • 注意事项
    • 下一个决策或下一次迭代

产物格式规则​

默认使用本地文件。

对于独立产物：

  • 创建描述性文件名，例如 Landing Page.html、Command Palette Prototype.html、Design System Board.html
  • 将 CSS 嵌入 <style> 中
  • 将 JS 嵌入 <script> 中
  • 保持产物可直接在浏览器中打开
  • 避免远程依赖，除非它们明确有用且稳定
  • 包含响应式行为，除非格式有意为固定尺寸

对于重大修订：

  • 将先前版本保存为 Name.html
  • 创建 Name v2.html、Name v3.html 等
  • 或保留一个文件并使用页面内切换，如果任务是变体探索

对于代码库实现：

  • 遵循代码库的实际技术栈
  • 尽可能使用现有组件和令牌
  • 如果用户要求的是生产代码，不要创建独立产物

分页

CSS 分页功能基础​

CSS 分页媒体模块定义了用于控制打印输出或导出为 PDF 等分页文档时内容分页方式的属性。这些属性可确保内容在页面间正确流动，避免不合适的分页，并控制元素与分页符的相对位置。

核心分页属性​

break-before 和 break-after​

这些属性控制元素前后的分页行为：

.page-break-before {
  break-before: page;
}

.page-break-after {
  break-after: page;
}

.avoid-break {
  break-inside: avoid;
}

常用值：

  • auto：默认值，根据需要允许或避免分页。
  • avoid：避免在元素前/后/内部进行分页。
  • page：在元素前/后强制进行分页。
  • always：（break-before 和 break-after 的别名）强制分页。

break-inside​

控制元素内部的分页行为：

.keep-together {
  break-inside: avoid;
}

.allow-break {
  break-inside: auto;
}

.avoid-column-break {
  break-inside: avoid-column;
}

page-break 简写属性（旧版）​

这些是较旧的属性，主要为了向后兼容。建议使用上面的 break-* 属性。

.element {
  page-break-before: always;
  page-break-after: avoid;
  page-break-inside: avoid;
}

分页区域​

CSS 分页媒体规范定义了几个用于控制页面布局的分页区域：

  • Page Box：代表整个页面区域。
  • Page Margin Boxes：围绕页面内容区域的页边距区域。
  • Content Area：页面上实际可打印内容所在的区域。
@page {
  size: A4 portrait;
  margin: 2cm;
}

@page :first {
  margin-top: 4cm;
}

@page 规则​

@page 规则用于定义特定页面的样式，例如第一页或左/右页：

/* 所有页面的基本样式 */
@page {
  size: letter;
  margin: 1in;
}

/* 首页的特殊样式 */
@page :first {
  margin-top: 2in;
}

/* 左侧页的样式（例如书籍的偶数页） */
@page :left {
  margin-left: 1.5in;
  margin-right: 1in;
}

/* 右侧页的样式（例如书籍的奇数页） */
@page :right {
  margin-left: 1in;
  margin-right: 1.5in;
}

实际示例​

避免标题与内容分页​

h1, h2, h3 {
  break-after: avoid;
  break-inside: avoid;
}

p {
  break-inside: avoid;
}

/* 确保图片与其标题不分页 */
figure {
  break-inside: avoid;
}

figure img {
  max-width: 100%;
  break-inside: avoid;
}

强制特定章节从新页开始​

.chapter {
  break-before: page;
  break-after: page;
}

.chapter:first-child {
  break-before: auto;
}

.chapter:last-child {
  break-after: auto;
}

防止表格跨页断裂​

table {
  break-inside: avoid;
}

tbody {
  break-inside: avoid;
}

tr {
  break-inside: avoid;
}

管理表格跨多页​

.table-container {
  break-inside: auto;
}

.table-container table {
  break-inside: auto;
}

.table-container thead {
  display: table-header-group; /* 在每页重复表头 */
}

.table-container tfoot {
  display: table-footer-group; /* 在每页重复表脚 */
}

打印优化的最佳实践​

  1. 内容流：考虑内容的自然阅读顺序以及在页面间的显示方式。
  2. 避免孤立行/寡妇行：使用 break-before: avoid 防止元素单独出现在页面底部。
  3. 保持逻辑分组：将相关的标题、图片和图说明放在一起。
  4. 考虑页眉/页脚：留出页眉/页脚空间，避免内容与之重叠。
  5. 测试分页：始终在不同浏览器中预览打印布局，因为渲染可能存在差异。

浏览器支持​

现代浏览器支持 break-before、break-after 和 break-inside 属性。较旧的 page-break 属性获得更广泛的支持，但功能不太全面。

/* 支持较旧浏览器的回退方案 */
.element {
  page-break-inside: avoid; /* 旧版属性 */
  break-inside: avoid; /* 现代属性 */
}

CSS 分页媒体常见问题解答​

Q：如何强制在特定元素后进行分页？ A：使用 break-after: page;。

Q：如何防止元素被分割到两页？ A：使用 break-inside: avoid;。

Q：为什么打印预览与屏幕显示不同？ A：打印布局使用不同的 CSS 规则（@media print），并且应用了分页约束。样式中未考虑分页的元素可能会意外断裂。

Q：如何为左页和右页设置不同的页边距？ A：使用 @page :left { ... } 和 @page :right { ... } 规则。

幻灯片规则​

对于幻灯片，使用固定大小的画布并缩放以适应视口。

默认幻灯片尺寸：1920×1080，16:9。

要求：

  • 键盘导航
  • 可见的幻灯片计数
  • 当前幻灯片的 localStorage 持久化
  • 实际可行时的打印友好布局
  • 重要幻灯片的屏幕标签或稳定 ID
  • 除非用户明确要求，否则不添加演讲者备注

不要将幻灯片简单处理为 Markdown 列表。如果被要求制作幻灯片，请创建设计精美的成品。

最多使用 1-2 种背景色，除非品牌系统需要更多。

保持幻灯片简洁。如果幻灯片显得空旷，通过布局、节奏、比例或图像占位符来解决，而非填充文字。

原型规则​

对于交互原型：

  • 确保主路径可点击
  • 包含关键状态：默认、悬停/聚焦、加载、空、错误、成功（在适用的情况下）
  • 在有用时通过页面内控件展示变体
  • 将控件保留在最终构图之外，除非它们是原型的有意组成部分
  • 当刷新持续性很重要时，在 localStorage 中持久化重要状态

如果原型旨在模拟产品流程，请设计整个流程，而不仅仅是第一个屏幕。

变体规则​

探索时，默认提供至少三个选项：

  1. 保守型 — 最接近现有模式 / 最低风险
  2. 最佳契合 — 对需求的最佳诠释
  3. 发散型 — 更新颖，有助于发现品味边界

变体可以探索：

  • 布局
  • 层次结构
  • 字体比例
  • 密度
  • 色彩姿态
  • 表面处理
  • 动效
  • 交互模型
  • 文案结构
  • 组件形状

不要创建仅仅是颜色互换的变体，除非颜色是实际的问题。

当用户选择了一个方向后，请整合。不要让项目永远停留在一堆选项中。

CLI/API 模式下的可调整设计​

托管的 Claude Design 编辑模式工具栏在这里不存在。

但保留这个想法：在有用时，添加名为 Tweaks 的页面内控件。

一个好的 Tweaks 面板可以控制：

  • 主题模式
  • 布局变体
  • 密度
  • 强调色
  • 字体比例
  • 动效开/关
  • 文案变体
  • 组件变体

保持小巧且不显眼。当调整隐藏时，设计应该看起来是最终的。

在有帮助时，使用 localStorage 持久化调整值。

内容纪律​

不要添加填充内容。

每个元素都必须有其存在的价值。

避免：

  • 虚假指标
  • 装饰性统计数据
  • 通用功能网格
  • 不必要的图标
  • 占位符推荐语
  • AI 生成的填充部分
  • 改变策略或声明的虚构内容

如果额外的部分、页面、文案或声明能改进成品，请在添加前询问。

当文案是必需的但不是最终的，请标记为草稿或占位符。

反粗糙规则​

避免常见的 AI 设计粗糙内容：

  • 过于激进的渐变背景
  • 默认使用玻璃态
  • 除非品牌使用，否则避免表情符号
  • 到处都是图标的通用 SaaS 卡片
  • 左边框强调卡片
  • 填充任意数字的虚假仪表板
  • 库存照片英雄区
  • 用超大圆角矩形替代层次结构
  • 彩虹调色板
  • 没有内容的模糊标签，如"洞察"、"增长"、"扩展"、"优化"
  • 伪装成产品图像的装饰性 SVG 插图

极简并不自动是好的。密集并不自动是杂乱的。有意识地选择。

字体排版​

如果存在现有字体系统，请使用它。

如果没有，请根据成品有意识地选择字体：

  • 编辑类：衬线或人文主义标题，搭配克制的无衬线正文
  • 软件/生产力：精确的无衬线，数字处理清晰
  • 奢华/极简：更少的字重，更多的间距控制
  • 技术类：仅使用等宽字体强调，而非到处使用等宽字体
  • 幻灯片：大号、清晰、高对比度

避免使用过度使用的默认值，当更强的选择更合适时。

如果使用网络字体，保持字体家族和字重数量较少。

在添加盒子、图标或颜色之前，使用字体作为层次结构。

颜色​

首先使用品牌/设计系统颜色。

如果没有调色板：

  • 定义一个小系统
  • 包含中性色、表面色、墨色、柔和文本、边框、强调色、危险/成功色（如果需要）
  • 使用一种主要强调色，除非任务需要更广泛的调色板
  • 当浏览器支持可接受时，优先使用 oklch 创建和谐的自定义调色板
  • 检查重要文本和控件的对比度

不要从头发明大量颜色。

布局和构图​

用节奏设计：

  • 比例
  • 空白
  • 密度
  • 对齐
  • 重复
  • 对比
  • 打断

避免让每个部分都是相同的卡片网格。

对于产品 UI，优先考虑理解速度而非装饰。

对于营销页面，让每个部分传达一个想法。

对于仪表板，避免"数据堆砌"。只显示帮助用户决策或行动的数据。

动效​

将动效作为纪律而非表演。

好的动效：

  • 澄清状态变化
  • 减少加载期间的焦虑
  • 显示表面之间的连续性
  • 给控件触感
  • 保持微妙

坏的动效：

  • 无目的的循环
  • 延迟用户
  • 引起自身注意
  • 隐藏糟糕的层次结构

对于非平凡的动画，尊重 prefers-reduced-motion。

图像和图标​

在可用时使用真实提供的图像。

如果资产缺失：

  • 使用干净的占位符
  • 使用字体排版、布局或抽象纹理代替
  • 当保真度重要时，请求真实材料

除非任务明确是插图工作，否则不要绘制精心制作的假 SVG 插图。

除非它能改善扫描或与设计系统匹配，否则避免使用图标。

源代码保真度​

当从仓库重建或扩展 UI 时：

  1. 检查仓库树
  2. 识别实际的 UI 源文件
  3. 读取主题/标记/全局样式/组件文件
  4. 在适当的地方提取精确值
  5. 匹配间距、圆角、阴影、文案语气、密度和交互模式
  6. 然后才进行设计或修改

当源文件可用时，不要凭记忆构建。

对于 GitHub URL，正确解析 owner/repo/ref/path，并在设计前检查相关文件。

阅读文档和资产​

在可用时直接读取 Markdown、HTML、CSS、JS、TS、JSX、TSX、JSON、SVG 和纯文本。

对于 DOCX/PPTX/PDF，如果存在可用的本地提取工具，请使用。如果不可用，请用户提供导出的文本/图像或使用其他可用的工具路径。

对于草图，优先考虑缩略图或截图，而不是原始绘图 JSON，除非 JSON 是唯一可用的来源。

版权和参考模型​

除非用户明确拥有该来源的权利，否则不要重新创建公司的独特 UI、专有命令结构、品牌屏幕或精确的视觉标识。

提取一般设计原则是可以接受的：

  • 无杂乱的密度
  • 命令优先的交互
  • 单色带一种强调色
  • 编辑层次结构
  • 清晰的空状态
  • 强大的键盘功能

克隆专有布局、复制精确的品牌表面或复制受版权保护的内容是不可接受的。

使用参考时，将姿态和原则转化为原创设计。

验证​

在最终响应之前，尽可能多地验证环境允许的内容。

最低要求：

  • 文件存在于指定路径
  • HTML 完全保存
  • 检查明显的语法问题

更好：

  • 在浏览器工具中打开并检查控制台错误
  • 在主视口检查截图
  • 测试关键交互
  • 测试亮/暗模式或变体（如果存在）
  • 测试响应式断点（如果相关）

如果验证受到环境限制，请准确说明验证了什么和没有验证什么。

如果文件没有实际写入，永远不要说"完成"。

最终响应格式​

保持最终响应简短。

包括：

  • 成品路径
  • 它包含什么
  • 验证状态
  • 下一步建议操作（如果有用）

示例：

创建：/path/to/Prototype.html
它包含 3 个布局变体、一个用于密度/主题的 Tweaks 面板和响应式行为。
已验证：文件存在且在浏览器中干净打开，无控制台错误。
下一步：选择最强的方向，我将优化文案和动效。

便携式开场提示模式​

当将 Claude Design 风格的请求适配到 CLI/API 模式时，使用这个心理翻译：

您正在 CLI/API 模式下运行，而不是托管的 Claude Design。忽略对托管专用工具或预览窗格的引用。生成完整的本地设计成品，通常是自包含的 HTML，嵌入 CSS/JS，并在返回前使用可用的本地工具进行验证。保留设计流程：收集上下文，定义系统，生成选项，避免填充，并达到高视觉标准。

陷阱​

  • 不要将托管工具模式粘贴到技能中。它们会导致虚假的工具调用。
  • 不要将技能指向一个巨大的外部提示作为必需的运行时上下文。那会造成漂移。
  • 在移除工具管道时，不要剥离设计原则。
  • 当用户已经给出足够的方向时，不要过度询问。
  • 对于没有品牌上下文的高保真工作，不要询问不足。
  • 不要生成通用的 SaaS 布局并称它们为设计过的。
  • 除非实际发生了，否则不要声称进行了浏览器验证。