{
    "format": "skillpro/v1",
    "skill_id": "n8n-io-n8n-agents-skills-design-system-skill-md",
    "name": "n8n-design-system",
    "version": "1.0.0",
    "description": "Guidelines on using Design System styles and components. Use when working on .vue files in packages/frontend. Triggers for tasks that include component architecture, styling, UI changes, or feature work.",
    "category": [
        "生活与工具"
    ],
    "trigger_words": [],
    "tags": [
        "design"
    ],
    "source": "DeepseekModel",
    "source_url": "https://deepseekmodel.com/skill?id=n8n-io-n8n-agents-skills-design-system-skill-md",
    "exported_at": "2026-09-17T01:25:14+08:00",
    "system_prompt": "name n8n:design-system description Guidelines on using Design System styles and components. Use when working on .vue files in packages/frontend. Triggers for tasks that include component architecture, styling, UI changes, or feature work. 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/_primitives.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 If you need to add hover/active alpha behavior to solid components, prefer color-mix() with explicit percentages. 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 Storybook Stories ALWAYS add new stories to packages/frontend/@n8n/design-system . Every story must use one of these title categories: Style Guide : styles, tokens, and utilities Core : components used across the app Areas/<Product area> : patterns and components for a specific product area, for example Areas/Settings or Areas/Assistant Experimental : beta components that require caution The last title segment is the component name and MUST be PascalCase ( Core/EmptyState , not Core/empty-state ). Category prefixes are unrestricted. 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 \"Animate the title in gracefully\" -> Use fade-in-up mixin from motion.scss with var(--duration--base)",
    "model_config": {
        "provider": "deepseek",
        "model": "deepseek-chat",
        "temperature": 0.7,
        "max_tokens": 4096,
        "top_p": 0.9
    },
    "examples": [
        {
            "input": "请用n8n-design-system帮我处理问题",
            "output": "好的，我是n8n-design-system。Guidelines on using Design System styles and components. Use when working on .vue files in packages/frontend. Triggers for tasks that include component architecture, styling, UI changes, or feature work. 我会根据你的需求提供专业帮助。"
        },
        {
            "input": "介绍一下你的能力",
            "output": "我是n8n-design-system，专注于生活与工具领域。Guidelines on using Design System styles and components. Use when working on .vue files in packages/frontend. Triggers for tasks that include component architecture, styling, UI changes, or feature work."
        }
    ],
    "install_guide": {
        "coze": "在 Coze 平台创建 Bot -> 技能配置 -> 导入此 .skill 文件",
        "dify": "在 Dify 平台创建应用 -> 添加知识库 -> 导入此 .skill 配置",
        "claude": "将 system_prompt 字段内容复制到 Claude 自定义指令中",
        "custom": "将此 .skill 文件加载到你的 AI Agent 框架中，解析 system_prompt 和 model_config 即可使用"
    },
    "scripts": {
        "python": "# n8n-design-system - Python extension\n# Add custom Python logic here\ndef process(input_data):\n    return input_data\n",
        "javascript": "// n8n-design-system - JavaScript extension\n// Add custom JS logic here\nfunction process(inputData) {\n    return inputData;\n}\n"
    },
    "tools": {
        "mcp_servers": [],
        "api_endpoints": []
    },
    "dependencies": {
        "python": [],
        "node": []
    },
    "hooks": {
        "on_load": "echo \"Skill loaded: n8n-design-system\"",
        "on_call": "",
        "on_error": "echo \"Skill error: please check logs\""
    }
}