SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场vue-design-system

vue-design-system

前端与建站

查看项目

更新于 10-23 07:35

技能介绍

用途

vue-design-system 是 Vue 与 CLI 的构建路由器。它不发明第二套视觉风格，而是决定由哪个配套技能和包来构建界面，然后再加载对应技能并按其指引执行。通用设计技能负责美学方向，设计记录技能将其写入 .heyeddi/design.md。

当提示涉及屏幕、外壳、仪表盘、表单、菜单、主题、动效或终端 UI 时，应在编写界面代码之前加载本技能。

路由规则

  • 视觉 UI（GUI）：
    • 应用外壳 / 原生布局（导航、抽屉、标签页、移动/桌面外壳）→ quasar-foundation，辅以 aura-design-tokens。
    • 数据密集 / 表单 UI（表格、树、选择器、SaaS 仪表盘）→ primevue-aura，辅以 motion-physics。
    • 之后加载 motion-physics，再加载 visual-verification。
  • 终端 / CLI → cli-interface-design，使用 @clack/prompts、consola、picocolors，然后运行脚本并读取 ANSI stdout。
  • 微交互与过渡 → motion-physics，辅以 aura-design-tokens。
  • 主题与颜色 → aura-design-tokens，辅以 quasar-foundation。
  • 实时页面视觉 QA → visual-verification，配合 Playwright MCP。
  • 设计师画板、演示导出 → taste-penpot，辅以 aura-design-tokens。

主要包：应用框架使用 quasar、@quasar/extras；复杂表格、表单、浮层使用 primevue、@primevue/themes；微交互使用 @vueuse/motion；视觉 QA 使用 @playwright/mcp；终端使用 @clack/prompts、consola、picocolors；主题使用 CSS 自定义属性。

使用方式

  1. 先分类提示：视觉 UI 还是终端。既有 GUI 界面又有 CLI 时视为两个技能，按该顺序处理。
  2. 在选择组件前，先阅读主技能的 SKILL.md 及其组件表。
  3. 阅读辅助技能。GUI 工作还需依次阅读 motion-physics、aura-design-tokens，然后 visual-verification。
  4. 应用引导（Vite 插件顺序、main.js 加载顺序）位于 primevue-aura。Quasar CSS 最先加载，PrimeVue Aura 第二，动效第三。
  5. 颜色通过 aura-design-tokens 映射，不在组件中写原始十六进制颜色。
  6. 设计师视觉与 Penpot 演示使用 Penpot API MCP（penpot-api），不使用插件 MCP（@penpot/mcp、execute_code、连接的浏览器插件）。

架构约定

  • 框架为 Vue 3（Composition API 与 <script setup>）。
  • 禁止引入或建议 React、Tailwind CSS、Bootstrap。
  • 布局与数据分离：Quasar（<q-layout>、<q-drawer>、<q-header>）负责应用框架与跨平台原生构建；PrimeVue（Aura 预设）负责数据表格、表单字段、徽章与上下文菜单；@vueuse/motion 负责动画。

视觉自检（GUI）

生成或大幅重构视觉组件时：确认本地开发服务器运行在 http://localhost:5173；使用 Playwright MCP 的 browser_navigate、browser_resize、browser_take_screenshot 捕获路由；检查图像中的视觉重叠、flex 换行断裂、内边距错位或未样式化的原始字体；在声明任务完成前修正这些缺陷。桌面尺寸为 1440×900，移动尺寸为 390×844，细节见 visual-verification。

终端与 CLI

构建 CLI 工具或终端视图时，不写浏览器 HTML/CSS。交互式问答树与输入使用 @clack/prompts；徽章、状态报告与结构化日志显示使用 consola；输出格式保持在 16 色 ANSI 调色板内，使用 picocolors。在终端运行脚本并检查 stdout 以验证对齐，不对 CLI 截图。

样式与令牌

不在组件中输出原始十六进制颜色（如 #1a2b3c）或内联样式坐标，改为引用 CSS 自定义属性：表面层 var(--app-bg)、var(--app-surface-card)；边框 1px solid var(--app-border)；文本色调 var(--app-text-main)、var(--app-text-muted)。

动效

所有动画使用弹簧物理：交互元素 { type: 'spring', stiffness: 350, damping: 25 }；对话框与浮层 { type: 'spring', stiffness: 280, damping: 22 }。避免线性过渡、无动机的连续弹跳、超过 40ms 的错峰延迟。当 motion-physics 的命名预设契合场景时优先使用。

MCP 服务器

PrimeVue 与 Quasar 通过 stdio 离线运行。Penpot 设计师访问使用 API MCP（HTTP），而非 @penpot/mcp。参考配置：

{ "mcpServers": { "primevue": { "command": "npx", "args": ["-y", "@primevue/mcp"] }, "quasar": { "command": "npx", "args": ["-y", "--fetch-retries=0", "@quasar/mcp@latest"] }, "playwright": { "command": "npx", "args": ["-y", "@playwright/mcp@latest"] }, "penpot-api": { "type": "http", "url": "http://127.0.0.1:3051/mcp" } } }

仅在涉及设计师视觉或演示导出时启动 Penpot API MCP，绝不打印 PENPOT_ACCESS_TOKEN。@primevue-openprops-architect 是兼容名称，若加载则遵循本技能；除非项目已依赖 open-props，否则不添加 OpenProps。

完成提示

完成任务后运行：python .agents/skills/heyeddi/scripts/suggest_next_skill.py --current-skill vue-design-system --project-root .，并在最终回复中包含脚本输出的 ### Next step 块。

限制

该技能是路由与约定层，具体组件与实现细节依赖各配套技能。其约束仅面向 Vue 3 技术栈，不适用于 React、Tailwind 或 Bootstrap 项目。官方收费、许可与支持信息暂未提供。