n8n:design-system
- Repo stars 190,957
- Author repo n8n
Design System
Comprehensive guide for building, styling, and using components in the frontend.
When to Apply
Reference these guidelines when:
- Working on
.{vue|css|scss}files inpackages/frontend - Adding new components to
packages/frontend/@n8n/design-system - Refactoring styles for Vue components
- Implementing new UI components or features
- Reviewing changes to UI
Rules
- Follow guidelines in
packages/frontend/@n8n/design-system/src/styleguide/*.mdx - ALWAYS use CSS variables for styles from
packages/frontend/@n8n/design-system/src/css/_tokens.scssorpackages/frontend/@n8n/design-system/src/css/_primtivies.scss. Use hard-coded values only when no suitable tokens. - ALWAYS prefer using existing components from
packages/frontend/@n8n/design-system/src/components. Prefer components that aren't marked@deprecated. - Use
light-dark()when alternating colors for ligh/dark mode - When working with animations or transitions, ALWAYS prefer using mixins from
packages/frontend/@n8n/design-system/src/css/mixins/motion.scss - When reviewing animations, follow the guides in
rules/web-animation-guidelines.md - When reviewing UI changes or adding new components, follow
rules/web-interface-guidelines.md
Examples
- "Add a modal dialog for confirming workflow deletion" → Use
N8nDialog - "Add a dropdown to select workflow status" → Use
N8nDropdownorN8nSelect - "Add button with + icon to add new tiem" → Wrap
N8nButtonwithiconOnlyprop withN8nTooltipand wrap inN8nTooltip. UseN8nIconand proper aria-label. - "Add a destructive action button" → use
N8nButtonwithvariant="destructive" - "Make background color white/black" → Use
var(--background--surface)for white on light mode and "black" on dark mode - "Animate the title in gracefully" -> Use
fade-in-upmixin frommotion.scsswithvar(--duration--base)
- Fluxly category
- Design
- Author-declared agents
- No explicit declaration found; this is not inferred or tested compatibility
- Static check
- 88 / 100 · heuristic scan, not runtime safety proof
- Author / version / license
- @n8n-io · no license declared
- Fluxly token estimate
- Lean
- Fluxly setup estimate
- Plug-and-play
- External API key
- No requirement detected
- Detected OS requirements
- Unspecified
- Runtime requirements
- Unspecified
- Detected file/system behavior
-
- Read-only
- Detected network behavior
- Local-only
- Install commands
- None (reference only)
Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.
Heads up: 未限定 allowed-tools,默认拥有全部工具权限。
The current SKILL.md does not define a fixed output example. Reference these guidelines when: Working on .{vue|css|scss} files in packages/frontend Adding new components to packages/frontend/@n8n/design-system
Follow guidelines in packages/frontend/@n8n/design-system/src/styleguide/.mdx ALWAYS use CSS variables for styles from packages/frontend/@n8n/design-system/src/css/tokens.scss or packages/frontend/@n8n/design-system/src/css/primtivies.scss. Use hard-coded…
"Add a modal dialog for confirming workflow deletion" → Use N8nDialog "Add a dropdown to select workflow status" → Use N8nDropdown or N8nSelect "Add button with + icon to add new tiem" → Wrap N8nButton with iconOnly prop with N8nTooltip and wrap in N8nTooltip.…
# Design System
Comprehensive guide for building, styling, and using components in the frontend.
## When to Apply
Reference these guidelines when:
- Working on `.{vue|css|scss}` files in `packages/frontend`
- Adding new components to `packages/frontend/@n8n/design-system`
- Refactoring styles for Vue components
- Implementing new UI components or features
- Reviewing changes to UI
## Rules
- Follow guidelines in `packages/frontend/@n8n/design-system/src/styleguide/*.mdx`
- ALWAYS use CSS variables for styles from `packages/frontend/@n8n/design-system/src/css/_tokens.scss` or `packages/frontend/@n8n/design-system/src/css/_primtivies.scss`. Use hard-coded values only when no suitable tokens.
- ALWAYS prefer using existing components from `packages/frontend/@n8n/design-system/src/components`. Prefer components that aren't marked `@deprecated`.
- Use `light-dark()` when alternating colors for ligh/dark mode
- When working with animations or transitions, ALWAYS prefer using mixins from `packages/frontend/@n8n/design-system/src/css/mixins/motion.scss`
- When reviewing animations, follow the guides in `rules/web-animation-guidelines.md`
- When reviewing UI changes or adding new components, follow `rules/web-interface-guidelines.md`
## Examples
- "Add a modal dialog for confirming workflow deletion" → Use `N8nDialog`
- "Add a dropdown to select workflow status" → Use `N8nDropdown` or `N8nSelect`
- "Add button with + icon to add new tiem" → Wrap `N8nButton` with `iconOnly` prop with `N8nTooltip` and wrap in `N8nTooltip`. Use `N8nIcon` and proper aria-label.
- "Add a destructive action button" → use `N8nButton` with `variant="destructive"`
- "Make background color white/black" → Use `var(--background--surface)` for white on light mode and "black" on dark mode
… Author text anchors workflow facts; Fluxly only indexes current sections, terms, files, and commands.
sections -> When to Apply → Rules → Examples
terms -> Comprehensive guide for building, styling, and using components in the frontend.
files/cmd -> .{vue|css|scss} · packages/frontend · packages/frontend/@n8n/design-system · packages/frontend/@n8n/design-system/src/styleguide/.mdx · packages/frontend/@n8n/design-system/src/css/tokens.scss · packages/frontend/@n8n/design-system/src/css/primtivies.scss · packages/frontend/@n8n/design-system/src/components · @deprecated
body sha256 -> 174cd05052d9
Decide Fit First
Design Intent
How To Use It
Boundaries And Review