内容
设计智能中心：设计到代码工作流的AI赋能自动化
[](montygraphix.github.io-mcp-harmony与Claude Code兼容](https://img.shields.io/badge/_Code-Ready-blue?style=flat-square&logo=anthropic)](https://claude.ai)
[](https://cursor.sh)
[](https://cloud.google.com/gemini)
[](https://opens/licenses/MIT)
[](https://pencil.dev)
## 概述：设计与代码之间的认知桥梁
想象你的 `.pen` 设计文件直接向AI编码助手传递结构秘密。这正是**设计智能中心**所实现的目标。这不仅仅是一个插件；它视觉设计意图转换为读上下文的突触翻译器，用于AI代码。
在设计驱动的系统中，大多数工具将设计文件视为静态图像。该项目了这一范式。通过利用 MCP（模型上下文协议）服务器，我们在设计画布和AI代理（如Claude Code、Cursor、Codex和Gemini CLI）之间建立了实时的神经通路。结果是，代码具有与原始设计相同的美魂，无需手动转## 为什么存在：设计度悖论
设计师和开发人员通常生活在世界中。设计师的像素间距、细渐变和和谐的。开发人员看到的是div、CSS弹性盒和React属性。这种差距创造了我们所说的保真度悖论**：开发人员越是设计，花费在非功能性美学上的时间就越多。
该存储库通过将设计智能直接嵌入编码循环来解决把它看作是UI**双语翻译**。你的 `.pen` 文件不仅被导出为图像；它被提炼为结构化、AI元数据，你的编码代理可以热情地消费它。
##流程：从设计到代码
```mermaid
graph TD
A[Pencil .pen 设计文件] --> B[Pencil MCP 服务器]
C{设计智能引擎 C --> D[组件层次解析器]
C --> E令牌提取器]
--> F[布局网格分析器]
D --> G下文构建器]
E --> G
G
G --> H[Claude Code]
I[Cursor IDE]
G --> J[Codex API G --> K[Gem H --> L[生成的 UI 代码库]
L
J --> L
K --> L
--> M[React/V 组件]
L[CSS/SCSS/T 样式]
L[响应式断点```
## 重新定义开发的关键功能
### 1. **语义组件
系统不仅看到矩它识别UI模式。带有标题和按钮的带边变成卡片组件。项目列表变成导航菜单。这是模式识别提升到架构理解。
### 2. **多代理兼容性架构**
与单一供应商解决方案不同，该插件支持多种AI编码伙伴的语言。无论您更喜欢：
- **Claude Code** 用于细致的架构决策
- **Cursor** 用于实时内联建议
- **Codex** 用于快速原型设计
- **Gemini CLI** 用于终端中心工作流
每个都从同一个 `.pen` 源接收优化的上下文，确保在所有输出中保持设计### 3.式UI智能**
现代应用程序存在于各种尺寸的。设计智能自动从Pencil布局中提取响应式，并将其作为媒体查询建议注入。您的AI默认生成的代码，基于您在不同视口大小下排列元素### 4. **多语言UI生成**
设计是与语言无关的。插件附加从设计标签和文本元素派生的I18n元数据。生成的代码包括的占位符结构，准备好与`react-i`或`vue-i18n`等本地化框架### 5. **24/7 设计可访问性MCP服务器充当持久的设计神谕。即使睡觉时，您的CI/CD管道也可以查询服务器以设计规范。这使得设计夜间自动触发代码重新部署场景成为可能。
6. **OpenAI 和 Claude API集成**
在底层，设计智能引擎为以下插件接口：
- **OpenAI API**：用于广泛的模式识别和自然语言设计描述
- **Claude API用于细致的组件推理和复杂的布局逻辑
您可以API处理特定任务系统根据每个设计元素的复杂性自动选择。
## 示例配置文件
配置您的 `design` 以个性化AI如何解释您的设计文件：
```json
{
"project": {
"name": "saas-dashboard-v3",
"framework": "react",
"styling": "tailwind",
"i18n": },
"ai {
"claude {
"enabled": true,
"preferencearchitectural",
"tokenLimit": 4096
},
"openai": {
"model": "gpt-4-turbo",
"endpoint": "https://api.openai.com/v1",
"fallback": true
},
"gemini": {
"enabled": false,
"task": "responsive-breakpoints },
"design": {
"sourceDir": "./designs",
"autoWatch": true,
"outputDir": "./generated",
"componentStyle": "functional-components",
"typescript": true,
"responsiveBreakpoints": {
375,
"tablet": 768,
"desktop": 128 }
},
"extraction": {
"colors": "generate-design-tokens",
"typography": "clamp-values",
"spacing": "tailwind-scale }
}
```
## 示例控制台调用
直接从终端运行代码的管道。。无需摩擦。只需的生产力：
```bash
# 解析 .pen并生成带有 Tailwind 的 React 组件
pencil-s ./designs/login --framework=react --=tailwind --output=./src/components
# 目录中的更改并在保存时自动生成
pkill watch ./designs=claude-code
# 预览从复杂布局中提取的所有设计令牌
pencil-skill analyze .//dashboard.pen --okens --format=json
# 使用特定的 AI 客户端首选项pencil-skill generate --source=./designboarding.pen --clientini --framework=vue
```
控制台界面将每个 `.pen` 文件视为**设计**，您选择的AI读取、理解并可生产的代码。
## 操作系统兼容性
| | 版本支持 | 兼容性状态 | 备注 |
|---|---|| Windows | 11, 服务器2 | ✅ 原生 | 通过 WSL2 支持完整的 |
| macOS | Ventura, Sonoma, Se ✅ 原生 | M 系列优化二进制文件 |
| Linux | Ubuntu 22. Fedora 38+, Debian+ | ✅ 完整 | 需要 Node.js 18+ |
OS | 202 (Linux 容器 ⚠️ 部分 | 无硬件 GPU 加速 |
| Free 13.2+ | 🧪 实验 社区维护的端口 |
## 搜索引擎优化关键词该存储库自然地集成了用于设计到代码自动化的高价值搜索术语：
- **AI 设计到代码 - 将视觉界面转换为工作代码
- **Pencil MCP 服务器插件** - 使用 MCP 协议扩展设计工具连接性
- **自动 UI 代码生成** - 通过 AI 驱动的解析减少手动编码
- **Claude Code 设计集成** - 将 Anthropic 的 AI 连接到您的设计工作流
- **React 组件生成器** - 从设计层次结构生成组件树
- **响应式布局提取** - 从设计文件中自动确定断点
- **设计令牌管道** - 将颜色、排版和间距提取为结构化数据
- **多 AI 开发工作流** - 在设计源的情况下在 AI之间切换
- **无头设计到代码**完全通过 CLI 运行转换界面开销
详细的功能列表
### 核心解析器引擎
解析 `.pen` 文件并保留完整的层次结构
- ✅组件嵌套、 层和可见性状态
- ✅ 识别可重用的设计模式并建议组件抽象
- ✅ 检测动画时间线和缓动曲线以实现微交互
- ✅ 导出到中间表示（JSON/YAML）以实现自定义管道
### AI 上下文生成
- ✅ Code 的扩展上下文窗口构建结构化提示
-特定于角色的指令（前端、后端、全栈 ✅ 包括设计原理决策背后的用户- ✅ 添加可访问性提示（对比度比率顺序、ARIA 角色 ✅ 注释复杂拖放、多步骤表单、模态）
###
- ✅ 输出框架、Vue 3velte、Angular、Astro
- ✅ 样式系统：Tailwind CSS、Styled Components、CSS Modules、Vanilla CSS
- ✅ TypeScript-first，带有严格的类型生成 ✅ 为每个组件自动创建 Storybook 故事
- ✅ 基于组件交互区域的测试Jest、Vitest）
### 管道自动化
- ✅ 通过 GitHub Actions、GitLab CI、Jenkins 进行 CI/CD 集成 ✅ 当连接的存储 `.pen` 文件更改时触发 Webhook
- ✅ 检测到设计漂移时发送 Slack/Teams - ✅ 设计迭代和之间的版本跟踪
- ✅ 差异报告显示设计版本之间的更改
## 免责声明
**重要的法律和运营通知**
设计智能中心作为一个开源工具在MIT许可证下提供。虽然它旨在显著减少手动编码工作，但它不保证在未经人工审查的情况下直接用于生产的代码。生成的代码应始终经过审计以检查：
1. **安全漏洞** - AI 生成的代码中可能包含被忽视的注入点或配置错误的身份验证流
2. **颈** - 为设计保真度优化的组件结构可能不适合运行时性能
3. **可访问性合规性** - 虽然我们注释了可访问性，但最终的WCAG合规性需要手动验证
4. **法律所有权** - 您解析的设计仍然是您的知识产权；但是，生成的代码模式可能与现有的开源组件相似
开发者不对未经修改的AI生成代码的生产事件承担任何责任。请将此工具用作生产力加速器，而不是专业软件工程判断的替代品。
## 许可证
该项目在 **MIT 许可证** 下获得许可 - 一个允许商业使用、修改、分发和私人使用的宽容开源许可证。您可以将此您的设计到代码管道中，无论是用于个人项目、企业系统还是商业产品。
[
许可证的全文可在 [LICENSE](opensource.org/licenses) 文件中找到。总之对该代码做任何事情，但我们不提供，也不承担任何责任。令人惊叹的东西[](https://montygraphix.github.io/pencil-mcp-harmony/)
**版本 2.0.0 | 发布于 2026 | 由社区维护**
*将每个设计文件变成与AI的对话。设计到未来不在于导出图像导出理解。*
