Openpencil Skill

打开密码技能

English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский

LLM设计技能 OpenPencil --教AI代理使用 op CLI、批处理设计DSL、MCP工具和设计最佳实践。

跟随 agentskills.io 网站 规范。

先决条件

安装 op 在使用此技能之前：

npm install -g @zseven-w/openpencil

确保正在运行的OpenPencil实例（桌面应用程序或web服务器） op 连接到。

安装

注： 安装因平台而异。Claude Code和Cursor有内置的插件系统。Codex和OpenCode需要手动设置。

克劳德代码（插件市场）

注册市场，然后安装插件：

/plugin marketplace add zseven-w/openpencil-skill
/plugin install openpencil-skill@openpencil-skill

光标

在Cursor Agent聊天中：

/add-plugin openpencil-skill

或者在插件市场中搜索“openpencil”。

法典

告诉Codex：

Fetch and follow instructions from https://raw.githubusercontent.com/zseven-w/openpencil-skill/main/.codex/INSTALL.md

开源代码

告诉OpenCode：

Fetch and follow instructions from https://raw.githubusercontent.com/zseven-w/openpencil-skill/main/.opencode/INSTALL.md

Gemini CLI

gemini extensions install https://github.com/zseven-w/openpencil-skill

要更新，请执行以下操作：

gemini extensions update openpencil-skill

验证安装

开始一个新的会话，并要求使用OpenPencil设计一些东西（例如，“使用op CLI设计登录页面”）。代理应自动使用该技能通过以下方式生成PenNode JSON op CLI或MCP工具。

包含什么

• op CLI命令参考（应用程序控制、文档操作、节点、导入、布局、页面、变量、代码生成器）
• Batch Design DSL语法及完整登录页示例
• PenNode模式--所有节点类型（框架、矩形、椭圆、多边形、文本、路径、图像、icon_font、ref、线、组）、属性、填充
• 40多个语义角色，具有智能默认值
• 设计原则——排版、颜色、间距、阴影
• 布局引擎规则和尺寸决定
• 分层MCP工作流（骨架→ 内容→ 精炼）
• Codegen管道（平面图→ 提交→ 组装→ 清洁）
• 导入支持（SVG、Figma.fig文件）
• 常见模式——导航栏、英雄、卡片、表格、页脚
• 常见错误表

许可证

麻省理工学院