SuperAPI AI 工具集

pencil-ui-design-system-element

设计与创作

查看项目

更新于 10-16 03:15

技能介绍

用途:在 Pencil 的 .pen 文件中初始化 Element Plus 设计令牌,并创建 Element Plus 组件总览框架。仅在用户明确同时提到“Pencil”和“Element”(或“Element Plus”),或由编排技能(pencil-ui-designer)路由 Element Plus 初始化请求时使用。

主要能力:注册 Element Plus 设计令牌,包括语义色(el-color-primary #409eff、success #67c23a、warning #e6a23c、danger #f56c6c、info #909399)、文本与边框(el-text-color-primary #303133、regular #606266、secondary #909399、el-border-color #dcdfe6、el-border-radius-base 4px)、字体(el-font-size-base 14px)。创建“Components Overview”框架,按基础、布局、表单、数据、导航、反馈等分组列出组件。

使用方式:技能输出 PENCIL_PLAN,Agent 依次调用 Pencil MCP 工具:open_document、set_variables、batch_design,可选 get_screenshot。用 mcp__pencil__set_variables 注册令牌,遵循 .pen 文件 schema;用 mcp__pencil__batch_design 创建组件总览框架,使用 Auto Layout,每次调用最多 25 个操作,超出时按类别拆分。

限制:仅在明确提及 Pencil 与 Element 时使用;令牌值需对照 Element Plus 主题文档核验;除非要求完全重置,set_variables 使用 replace: false。更多令牌可参考 Element Plus 主题文档。参考资料包括 references/contract.md、official.md、examples.md、components.md。