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个工具

分析

工具	说明
`design_review`	基于代码的设计分析和评分。粘贴你的UI代码，得到一份满分100分的详细报告。检查间距、颜色、排版和布局。
`screenshot_review`	对现有屏幕截图进行视觉审查。将其指向屏幕截图，并获得用户实际看到的设计反馈。
`scan_project`	自动检测项目的技术栈和设计模式。了解React、Vue、Svelte、Tailwind、CSS模块等。
`a11y_audit`	在A、AA或AAA级别进行全面的WCAG 2.1可访问性合规审计。捕捉对比失败、标签缺失、焦点陷阱等。
`batch_review`	扫描整个项目，查看所有UI文件，汇总分数+文件排名。

生成

工具	说明
`color_palette`	根据描述生成完整的颜色系统。包括语义颜色、暗模式、对比度验证，以及作为CSS变量、Tailwind配置或设计标记的输出。
`component_suggest`	20+精心设计的组件模板。定价卡、登录表单、导航栏、英雄部分、仪表板等。基于令牌和框架就绪。
`generate_page`	生成完整页面。登录页面、仪表板、定价页面、登录屏幕、设置面板和404页面——完整且可投入生产。
`design_identity`	产品设计个性系统。从6种原型中进行选择，以生成一致的视觉识别：排版、颜色、间距和色调。
`scaffold_project`	使用令牌、组件和页面生成完整的项目结构。
`export_tokens`	将设计令牌导出为CSS、Tailwind、SCSS、JSON、Figma令牌。
`generate_style_guide`	从身份自动生成视觉HTML样式指南。
`screenshot_to_code`	通过主机LLM Vision生成代码的屏幕截图。

修复

工具	说明
`design_fix`	自动纠正代码中的设计问题。三种模式：安全的（仅不断裂），适度（视觉改善），激进的（完全重新设计）。
`design_iterate`	自动渲染、查看、修复、重新渲染循环。在分数达到目标之前，不要进行迭代改进。
`suggest_animations`	检测静态UI并建议与代码的微交互。
`design_compare`	与分数差异比较前后的视觉效果

视觉的

工具	说明
`render_and_review`	在真实的Chrome浏览器中渲染代码，捕获屏幕截图，并获得实际渲染结果的视觉反馈。
`screenshot_review`	在不需要源代码的情况下，分析现有的屏幕截图或模型以解决设计问题。
`live_preview`	具有自动刷新功能的实时本地预览服务器。
`responsive_preview`	在移动设备/平板电脑/台式机上同时渲染。

知识

工具	说明
`design_guide`	查询材质设计3、苹果HIG、shadcn和蚂蚁设计指南。获得有关间距、排版、颜色和组件模式的权威答案。
`design_reference`	7个行业的15种以上真实产品设计模式。看看Stripe、Linear、Notion和其他工具是如何解决您面临的相同UI问题的。

Figma

工具	说明
`figma_inspect`	阅读Figma文件并提取完整的设计系统：颜色、排版、间距、组件和布局结构。
`figma_to_code`	将Figma帧直接转换为代码。支持React、Vue、Svelte和纯HTML/CSS输出。

会话和上下文

工具	说明
`design_session`	启动或恢复持久设计会话。在对话中跟踪项目的设计状态。
`save_identity`	将生成的设计标识保存到项目中，以便一致重用。
`log_review`	跟踪一段时间内的复习分数。查看您在各个会话中的设计质量趋势。
`log_decision`	用推理记录设计决策。为您的团队构建一个可搜索的决策日志。
`design_feedback`	教开发者什么有效，拒绝什么无效。系统会在会话中学习你的偏好。

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

编排

工具	说明
`design_wizard`	交互式分步编排器，将工具链接到有指导的设计工作流程中。

______________________________________________________________________

设计评审在行动中

┌─────────────────────────────────────────────────────┐
│  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客户端可以直接读取：

资源URI	描述
`devsigner://design-system/material3`	材料设计3指南
`devsigner://design-system/apple-hig`	苹果人机界面指南
`devsigner://design-system/shadcn`	shadcn/ui约定和模式
`devsigner://design-system/ant-design`	Ant设计系统规范

______________________________________________________________________

例子

检查你杂乱的代码

你： “检查此组件的设计问题” ```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

规则	严重性	描述
4px网格	警告	所有间距值都应该是4px的倍数
8px首选项	信息	主要间距应首选8px倍数
一致性	警告	标志>一个组件中有6个不同的间距值

Color Rules

规则	严重性	描述
WCAG AA对比度	错误	文本/背景对比度必须>=4.5:1（正常）或>=3:1（大）
WCAG AAA对比度	错误	文本/背景对比度必须>=7:1（正常）或>=4.5:1（大）
纯黑色	信息	建议使用更柔软的替代品 `#000000`
纯白色	信息	建议使用更柔软的替代品 `#ffffff`
颜色计数	警告	标志>6种不同的颜色

Typography Rules

规则	严重性	描述
字体大小计数	警告	标志>6种不同的字体大小
奇数字体大小	信息	建议偶数替代品（13px->12/14px）
类型比例	信息	相邻尺寸应相差>=1.2倍
字体权重计数	警告	标志>3个不同的权重
行高	警告	正文行高应为1.4-1.8

Layout Rules

规则	严重性	描述
z-index	警告	标志值>100
最大宽度	信息	为了可读性，文本容器应具有最大宽度
文本对齐	警告	标志>一个组件中有两种对齐样式

Accessibility Rules (WCAG 2.1)

规则	级别	描述
1.1.1非文本内容	A	图像必须包含alt文本
1.3.1信息和关系	A	表单输入需要关联标签
1.4.3对比度（最小值）	AA	4.5:1适用于普通文本，3:1适用于大文本
1.4.6对比度（增强）	AAA	7:1用于普通文本，4.5:1用于大文本
2.1.1键盘	A	所有交互元素必须可通过键盘访问
2.4.7焦点可见	AA	焦点指示器必须可见
4.1.2名称、角色、值	A	交互元素需要可访问的名称

______________________________________________________________________

路线图

\[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

devsigner (Hamjinoo)

快速接入

详细介绍

问题

快速开始

选项1:npx（推荐）

选项2：全局安装

选项3：来源

全部33个工具

分析

生成

修复

视觉的

知识

Figma

会话和上下文

编排

设计评审在行动中

设计会话流程

Figma集成

无障碍

MCP资源

例子

检查你杂乱的代码

生成完整页面

自动修复

从Figma拉

运行可访问性审核

运作原理

设计规则参考

路线图

贡献

项目结构

添加新的组件模板

添加新的设计规则

许可证

目录标签

接入字段

权限和风险

来源信息

继续浏览同类 MCP