devsigner (Hamjinoo)

devsigner

The complete design toolkit MCP server for developers who can't design.

33 tools. Analyze, generate, fix, iterate. From first pixel to Figma handoff.

Quick Start • Tools • Session Flow • Figma • Accessibility • How It Works • Contributing

______________________________________________________________________

问题

你是一名开发者。你可以建造任何东西。但是你的UI看起来像这样：

┌──────────────────────────────────────────────────┐
│  padding: 13px (why?)                            │
│  margin: 7px  (why not 8?)                       │
│                                                  │
│  ██████ #000000 text on #333333 bg               │
│  (can you even read this?)                       │
│                                                  │
│  font-size: 13px, 14px, 15px, 17px               │
│  (pick a scale, any scale)                       │
│                                                  │
│  z-index: 99999 (the classic)                    │
│                                                  │
│  "I'll just eyeball the spacing"                 │
│  (narrator: they should not have eyeballed it)   │
│                                                  │
│  Opens Figma → stares → closes Figma             │
└──────────────────────────────────────────────────┘
               Score: 23/100

你不需要设计学位。你需要 开发者 --33个MCP工具，用于审查用户界面、生成生产就绪代码、自动修复问题，甚至直接从Figma中提取设计规范。

______________________________________________________________________

快速开始

选项1:npx（推荐）

无需安装。只需在MCP客户端配置中添加：

克劳德桌面 (claude_desktop_config.json):

{
  "mcpServers": {
    "devsigner": {
      "command": "npx",
      "args": ["-y", "devsigner"]
    }
  }
}

克劳德代码：

claude mcp add devsigner -- npx -y devsigner

光标/风帆：

{
  "mcpServers": {
    "devsigner": {
      "command": "npx",
      "args": ["-y", "devsigner"]
    }
  }
}

选项2：全局安装

npm install -g devsigner

然后添加到MCP配置中：

{
  "mcpServers": {
    "devsigner": {
      "command": "devsigner"
    }
  }
}

选项3：来源

git clone https://github.com/hamjinoo/devsigner.git
cd devsigner
npm install
npm run build

{
  "mcpServers": {
    "devsigner": {
      "command": "node",
      "args": ["/path/to/devsigner/dist/index.js"]
    }
  }
}

______________________________________________________________________

全部33个工具

分析

生成

修复

视觉的

知识

Figma

会话和上下文

配置：可以在中定义项目特定的设置 .devsignerrc.json.

编排

______________________________________________________________________

设计评审在行动中

┌─────────────────────────────────────────────────────┐
│  Design Review Report                               │
│                                                     │
│  Framework: React          Score: ██████░░░░ 62/100 │
│                                                     │
│  ERRORS (must fix)                                  │
│  |-- [color] Contrast 1.66:1 -- needs 4.5:1 for AA │
│  |   -> Lighten text or darken background           │
│  |                                                  │
│  WARNINGS (should fix)                              │
│  |-- [spacing] padding: 13px not on 4px grid        │
│  |   -> Use 12px or 16px                            │
│  |-- [typography] line-height 1.1 too tight          │
│  |   -> Use 1.4-1.8 for body text                   │
│  |-- [layout] z-index: 999 is excessive              │
│  |   -> Use scale: 1, 10, 20, 30, 40, 50            │
│  |                                                  │
│  SUGGESTIONS (nice to have)                         │
│  |-- [color] Avoid pure #000000                     │
│  |   -> Try #1a1a1a for softer dark                 │
│  +-- [typography] 13px is unusual                   │
│      -> Use even sizes: 12px or 14px                │
└─────────────────────────────────────────────────────┘

______________________________________________________________________

设计会话流程

devsigner的真正力量是 迭代设计循环。开发人员可以不断改进您的UI，而不是进行一次审查：

┌─────────────────────────────────────────────────────────────┐
│                    Iterative Design Loop                     │
│                                                             │
│   1. START SESSION                                          │
│      design_session("start")                                │
│      |                                                      │
│      v                                                      │
│   2. ESTABLISH IDENTITY                                     │
│      design_identity("fintech, trustworthy")                │
│      |                                                      │
│      v                                                      │
│   3. GENERATE                                               │
│      generate_page("dashboard") or component_suggest(...)   │
│      |                                                      │
│      v                                                      │
│   4. RENDER + REVIEW          = 85? ----NO----------+                         │
│      |                                                      │
│      YES                                                    │
│      |                                                      │
│      v                                                      │
│   7. SAVE + LOG                                             │
│      save_identity() + log_review() + log_decision()        │
│      |                                                      │
│      v                                                      │
│   DONE -- Score: 91/100                                     │
│                                                             │
│   Or skip all that and use:                                 │
│      design_iterate(code, target: 85)                       │
│      (does steps 4-6 automatically)                         │
└─────────────────────────────────────────────────────────────┘

______________________________________________________________________

Figma集成

弥合设计和规范之间的差距。不再有来自Figma模型的眼球像素。

┌──────────────────────────────────────────────────────┐
│  Figma Workflow                                      │
│                                                      │
│  figma_inspect(file_url)                             │
│  |                                                   │
│  v                                                   │
│  ┌──────────────────────────┐                        │
│  │  Extracted Design System  │                       │
│  │  - 5 colors              │                        │
│  │  - 3 font families       │                        │
│  │  - 8px spacing grid      │                        │
│  │  - 12 components found   │                        │
│  └──────────────┬───────────┘                        │
│                 |                                     │
│                 v                                     │
│  figma_to_code(frame, "react")                       │
│  |                                                   │
│  v                                                   │
│  ┌──────────────────────────┐                        │
│  │  Generated React Code     │                       │
│  │  - Pixel-accurate         │                       │
│  │  - Uses design tokens     │                       │
│  │  - Responsive             │                       │
│  └──────────────────────────┘                        │
│                                                      │
│  Then run design_review on the output to validate.   │
└──────────────────────────────────────────────────────┘

______________________________________________________________________

无障碍

a11y_audit 对代码或渲染页面运行完整的WCAG 2.1合规性检查。

┌─────────────────────────────────────────────────────┐
│  Accessibility Audit Report          Level: AA      │
│                                                     │
│  PASS  12 checks passed                             │
│  FAIL   4 issues found                              │
│                                                     │
│  [1.4.3] Contrast (Minimum)              FAIL       │
│  Text "#777" on "#fff" = 4.48:1                     │
│  -> Darken to "#757575" for 4.6:1                   │
│                                                     │
│  [2.4.7] Focus Visible                   FAIL       │
│  Button has outline: none with no replacement       │
│  -> Add :focus-visible with visible ring            │
│                                                     │
│  [1.3.1] Info and Relationships          FAIL       │
│  Form inputs missing associated              │
│  -> Add  or aria-label             │
│                                                     │
│  [4.1.2] Name, Role, Value              FAIL        │
│  Icon button has no accessible name                 │
│  -> Add aria-label="Close" to icon button           │
└─────────────────────────────────────────────────────┘

支持 A级, AA级，以及 AAA级 审计。

______________________________________________________________________

MCP资源

devsigner还将设计系统知识作为MCP资源公开，您的AI客户端可以直接读取：

______________________________________________________________________

例子

检查你杂乱的代码

你： “检查此组件的设计问题” ```jsx

Title

```

开发者 捕捉：

• padding: 13px --不在4px网格上，建议使用12px或16px
• color: #333 on #000 --对比度为1.66:1，不符合WCAG AA标准
• fontSize: 15px --奇数值，建议14px或16px

生成完整页面

你： “为我的SaaS产品生成一个具有现代感的定价页面”

开发者 生成一个完整的定价页面，其中包含适当的网格布局、排版层次、颜色编码层和响应断点。

自动修复

你： “修复此组件中的所有设计问题，中等模式”

开发者 返回已纠正的代码，解决了每个间距、颜色和排版问题，同时保持组件逻辑不变。

从Figma拉

你： “检查此Figma文件并为仪表板框架生成React组件”

开发者 从Figma中提取设计系统，将指定的框架转换为React代码，并根据原始设计规范验证输出。

运行可访问性审核

你： “在WCAG AA级别对此表格进行一年一次的审核”

开发者 检查每个表单元素的标签、对比度、焦点管理、键盘导航和ARIA属性是否正确。

______________________________________________________________________

运作原理

┌───────────────────────────────────────────────────────────────────┐
│                       Your IDE / Terminal                         │
│                                                                   │
│   You: "Review my dashboard and fix it"                          │
│    |                                                              │
│    v                                                              │
│   ┌────────────────┐    stdio    ┌─────────────────────────────┐  │
│   │  Claude/Cursor  ||  devsigner MCP Server       |  │
│   │  (MCP Client)   |            |                             |  │
│   └────────────────┘            |  ┌────────┐  ┌───────────┐  |  │
│                                  |  |Parsers |  | Renderers |  |  │
│                                  |  |CSS     |  | Puppeteer |  |  │
│                                  |  |Tailwind|  | Chrome    |  |  │
│                                  |  |JSX     |  └─────┬─────┘  |  │
│                                  |  └───┬────┘        |        |  │
│                                  |      v             v        |  │
│                                  |  ┌─────────────────────┐    |  │
│                                  |  |    Rules Engine      |    |  │
│                                  |  |  Spacing  | Color    |    |  │
│                                  |  |  Typo     | Layout   |    |  │
│                                  |  |  A11y     | WCAG     |    |  │
│                                  |  └─────────┬───────────┘    |  │
│                                  |            v                |  │
│                                  |  ┌─────────────────────┐    |  │
│                                  |  |    Generators        |    |  │
│                                  |  |  Pages  | Components |    |  │
│                                  |  |  Colors | Identity   |    |  │
│                                  |  └─────────┬───────────┘    |  │
│                                  |            v                |  │
│                                  |  ┌─────────────────────┐    |  │
│                                  |  |    Integrations      |    |  │
│                                  |  |  Figma  | Sessions   |    |  │
│                                  |  |  Guides | References |    |  │
│                                  |  └─────────────────────┘    |  │
│                                  └─────────────────────────────┘  │
│                                                                   │
│   devsigner: "Score 62/100. Found 7 issues. Auto-fixing..."     │
│   devsigner: "Score 89/100. Ship it."                            │
└───────────────────────────────────────────────────────────────────┘

关键设计决策：

• 不需要API密钥 --所有分析都使用确定性规则引擎在本地运行。没有外部AI调用。
• 默认情况下为零配置 --开箱即用。可选配置为 .devsignerrc.json.
• 框架无关 --解析React、Vue、Svelte、纯HTML/CSS和Tailwind类。
• 可操作，不含糊 --每个问题都有一个特定的、可复制粘贴的修复程序。
• 按设计迭代 --工具组成循环。检查、修复、重新渲染、重复。
• Figma本地人 --读取真实的Figma文件，提取设计系统，生成代码。
• 可访问性优先 --WCAG 2.1合规性不是事后的想法。

______________________________________________________________________

设计规则参考

Spacing Rules

Color Rules

Typography Rules

Layout Rules

Accessibility Rules (WCAG 2.1)

______________________________________________________________________

路线图

• \[x\] ~~截图审核~~--上传截图，获取设计反馈
• \[x\] ~~ Figma集成~~--读取Figma文件并转换为代码
• \[x\] ~~自动修复模式~~--返回已纠正的代码，而不仅仅是建议
• \[x\] ~~可访问性审计~~——WCAG 2.1 A/AA/AAA合规性
• \[x\] ~~设计会话~~--跨对话的持久上下文
• \[x\] ~~整页生成~~--完整的页面，而不仅仅是组件
• \[x\] ~~设计身份系统~~——产品个性一致
• \[x\] ~~自定义规则~~-- .devsignerrc.json 针对特定项目的设计系统
• \[ \] 顺风v4 --原住民 @theme 块支撑
• \[ \] 故事书集成 --查看故事书中的组件
• \[x\] ~~设计差异~~--自动比较截图前后
• \[ \] 团队预设 --跨团队共享设计标识
• \[ \] VS代码扩展 --编辑器排水沟中的内联设计提示

______________________________________________________________________

贡献

欢迎投稿！无论是新规则、组件模板、Figma改进还是bug修复。

# Clone and install
git clone https://github.com/hamjinoo/devsigner.git
cd devsigner
npm install

# Development (auto-reload)
npm run dev

# Build
npm run build

# Test with MCP Inspector
npx @modelcontextprotocol/inspector node dist/index.js

项目结构

src/
  tools/            # All 33 tool implementations
  rules/            # Design rule modules (spacing, color, typography, layout)
  parsers/          # CSS, Tailwind, JSX, inline style parsers
  components/       # Component templates (20+ designs)
  palettes/         # Color palette presets and generation
  resources/        # MCP resource definitions (design system guides)
  context/          # Session and identity management
  preview/          # Live preview and responsive preview servers
  orchestration/    # Design wizard and workflow orchestration
  utils/            # Shared utilities (contrast calculation, etc.)
  server.ts         # MCP server setup and tool registration
  index.ts          # Entry point

添加新的组件模板

模板位于 src/components/。每个模板使用 {{token}} 被设计标记替换的占位符：

• {{borderRadius}} --变体的拐角半径
• {{shadow}} --变体的方框阴影
• {{spacing.sm}} / {{spacing.md}} / {{spacing.lg}} / {{spacing.xl}} --间距比例

添加新的设计规则

规则活在 src/rules/每个规则模块导出一个函数，该函数接受 StyleDeclaration[] 并返回 DesignIssue[].

______________________________________________________________________

许可证

麻省理工学院

______________________________________________________________________

Built for developers who code better than they design.

If that's you, give us a star on GitHub