关于 n8n:design-system
面向 n8n 前端贡献者的设计系统指南，涵盖 UI 组件和样式规范。它规定设计令牌、复用组件、动效及 Storybook 故事的使用方式。
主要功能
- 01使用设计令牌编写样式
- 02优先采用现有且未弃用的组件
- 03规定浅色和深色模式的配色
- 04指导动效与界面审查
- 05设定 Storybook 故事命名规则
适用场景
- 01在 packages/frontend 开发组件
- 02重构 Vue 组件样式
- 03审查界面改动和动效
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/n8n:design-system确认已加载。
附带文件rules/web-animation-guidelines.mdrules/web-interface-guidelines.md
详细介绍
设计系统
关于在前端构建、设置样式和使用组件的综合指南。
适用场景
在以下情况下参考这些指南：
- 处理
packages/frontend中的.{vue|css|scss}文件 - 向
packages/frontend/@n8n/design-system添加新组件 - 重构 Vue 组件的样式
- 实现新的 UI 组件或功能
- 审查 UI 变更
规则
- 遵循
packages/frontend/@n8n/design-system/src/styleguide/*.mdx中的指南 - 始终使用
packages/frontend/@n8n/design-system/src/css/_tokens.scss或packages/frontend/@n8n/design-system/src/css/_primitives.scss中的 CSS 变量设置样式。仅在没有合适的令牌时使用硬编码值。 - 始终优先使用
packages/frontend/@n8n/design-system/src/components中已有的组件。优先选择未标记为@deprecated的组件。 - 在浅色／深色模式下切换颜色时使用
light-dark() - 如果需要为纯色组件添加悬停／激活状态的透明度行为，优先使用带有明确百分比的
color-mix()。 - 处理动画或过渡效果时，始终优先使用
packages/frontend/@n8n/design-system/src/css/mixins/motion.scss中的 mixin - 审查动画时，遵循
rules/web-animation-guidelines.md中的指南 - 审查 UI 变更或添加新组件时，遵循
rules/web-interface-guidelines.md中的指南
Storybook 故事
- 始终在
packages/frontend/@n8n/design-system中添加新故事。 - 每个故事的标题都必须使用以下类别之一：
Style Guide：样式、令牌和实用工具Core：在整个应用中使用的组件Areas/<Product area>：特定产品领域的模式和组件，例如Areas/Settings或Areas/AssistantExperimental：需谨慎使用的 Beta 组件
- 最后的
title部分是组件名称，必须使用 PascalCase（Core/EmptyState，而不是Core/empty-state）。类别前缀不限。
示例
- “添加一个用于确认删除工作流的模态对话框” → 使用
N8nDialog - “添加一个用于选择工作流状态的下拉菜单” → 使用
N8nDropdown或N8nSelect - “添加一个带 + 图标的按钮以添加新项” → 使用
iconOnly属性包装N8nButton，再用N8nTooltip包装。使用N8nIcon并设置适当的 aria-label。 - “添加一个破坏性操作按钮” → 使用
variant="destructive"的N8nButton - “将背景色设为白色／黑色” → 浅色模式下使用白色的
var(--background--surface)，深色模式下使用 “black” - “让标题优雅地淡入” -> 使用
motion.scss中的fade-in-upmixin 和var(--duration--base)
评论
支持 Markdown