ai-design-expert
Generates Tailwind CSS-based HTML design code from design tokens and requirements, allowing rapid prototyping and design generation.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@ai-design-expertGenerate a design from project-req.md with reference design tokens."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
🎨 AI 设计专家 - Claude Code 技能
从需求��设计稿的自动化流水线 - 一个为 Claude Code 打造的设计专家 Skill
📖 简介
AI 设计专家 是一个 Claude Code 技能(Skill),通过 MCP (Model Context Protocol) 服务器提供强大的设计能力。
核心功能
功能 | 描述 |
需求解析 | 分析 Word/PDF/MD 文档,提取设计要求 |
视觉解码 | 从设计图提取 Design Tokens(颜色、间距、字体等) |
设计生成 | 根据需求和 Tokens 生成 HTML/Tailwind 代码 |
视觉审计 | 对比生成代码与参考图,提供改进建议 |
Related MCP server: Design MCP
🚀 快速开始
1. 安装依赖
npm install2. 构建项目
npm run build3. 配置 Claude Code
在项目根目录的 .claude.json 中添加:
{
"mcpServers": {
"ai-design-expert": {
"command": "node",
"args": ["dist/mcp/server.js"]
}
}
}或使用绝对路径:
{
"mcpServers": {
"ai-design-expert": {
"command": "node",
"args": ["/absolute/path/to/ai-design-expert/dist/mcp/server.js"]
}
}
}4. 重启 Claude Code
配置完成后,重启 Claude Code 使 MCP 服务器生效。
5. 验证安装
在 Claude Code 中测试:
用户: 请分析 docs/requirements/raw/example-landing-page.md 并生成设计稿💡 使用示例
示例 1: 从需求文档生成设计
用户: 请分析 docs/requirements/raw/example-landing-page.md 并生成设计稿AI 将执行:
调用
analyze_requirement解析需求文档使用默认 Design Tokens(或要求提供参考图)
调用
generate_design生成 HTML/Tailwind 代码返回完整的设计稿
示例 2: 从参考图提取设计风格
用户: 请分析 docs/references/design.png 并提取 Design TokensAI 将执行:
调用
extract_tokens分析图片使用 Claude Code 的视觉分析能力(4.5v MCP)
返回结构化的 Design Tokens JSON
示例 3: 完整工作流
用户: 根据 project-req.md 和 reference.png 生成设计稿,并进行视觉审计AI 将执行:
analyze_requirement("project-req.md")→ 需求分析extract_tokens("reference.png")→ 提取 Tokensgenerate_design({...}, {...}, "output/")→ 生成设计audit_visual({...}, "reference.png")→ 视觉审计
🛠 可用工具
analyze_requirement
解析需求文档,提取设计要素。
输入:
{
"filePath": "docs/requirements/raw/example.md"
}输出: 需求分析 JSON
extract_tokens
从设计图提取 Design Tokens。
输入:
{
"imagePath": "docs/references/design.png"
}输出: Design Tokens JSON
generate_design
生成 HTML/Tailwind 设计稿。
输入:
{
"requirement": {...},
"tokens": {...},
"outputPath": "output/"
}输出: 完整的 HTML 代码
audit_visual
视觉审计,对比代码与参考图。
输入:
{
"designCode": "<html>...</html>",
"referenceImagePath": "docs/references/design.png"
}输出: 审计报告(评分 + 问题列表)
📁 项目结构
ai-design-expert/
├── 📄 配置文件
│ ├── .claude.json # Claude Code 配置
�� ├── package.json # 项目依赖
│ ├── skill.json # Skill 定义
│ └── tsconfig.json # TypeScript 配置
│
├── 📚 文档
│ ├── CLAUDE.md # AI 行为指令
│ ├── README.md # 本文件
│ ├── INSTALL.md # 详细安装指南
│ └── PROGRESS.md # 进度追踪
│
├── 🔧 MCP 服务器 (src/mcp/)
│ ├── server.ts # 服务器入口
│ ├── tools/ # 4 个工具实现
│ │ ├── index.ts
│ │ ├── requirement-analyzer.ts
│ │ ├── token-extractor.ts
│ │ ├── design-generator.ts
│ │ └── visual-auditor.ts
│ └── utils/
│ └── vision-client.ts # 4.5v MCP 集成
│
├── 📦 工具库 (src/lib/)
│ ├── index.ts
│ ├── utils.ts # 通用工具函数
│ └── token-parser.ts # Token 解析器
│
├── 🎨 组件模板 (src/components/)
│ └── atoms/ # 原子组件参考
│ ├── Button.tsx
│ ├── Card.tsx
│ └── index.ts
│
├── 🎯 Design Tokens
│ └── src/theme/tokens.json # 默认设计变量
│
├── 📝 提示词模板 (prompts/)
│ ├── analyze-requirement.md
│ ├── extract-design-tokens.md
│ └── generate-design-spec.md
│
└── 📂 示例数据 (docs/requirements/)
└── raw/ # 需求文档
├── example-landing-page.md
└── example-dashboard.md🔄 工作流程示例
用户输入
↓
1. analyze_requirement("docs/project-brief.md")
→ 需求分析 JSON
↓
2. extract_tokens("docs/reference-design.png")
→ Design Tokens JSON
↓
3. generate_design({ requirement, tokens, outputPath: "output/" })
→ 生成 index.html + tailwind.config.js
↓
4. audit_visual({ designCode, referenceImagePath })
→ 审计报告 + 改进建议
↓
最终交付:完整的设计稿🧪 开发
# 开发模式(测试 MCP Server)
npm run dev
# 应该看到: ✅ AI 设计专家 MCP 服务器已启动
# 构建
npm run build
# 运行测试
npm test
# 代码检查
npm run lint
# 格式化代码
npm run format🔧 故障排除
MCP 服务器未启动
检查:
npm run dev
# 应该看到: ✅ AI 设计专家 MCP 服务器已启动找不到模块
解决:
rm -rf node_modules package-lock.json
npm install
npm run buildTypeScript 编译错误
解决:
npm run build
# 查看具体错误信息并修复Claude Code 无法识别工具
检查:
确认
.claude.json配置正确确认路径使用绝对路径或正确的相对路径
重启 Claude Code
📝 示例数据
项目包含两个示例需求文档:
1. SaaS 产品着陆页 (example-landing-page.md)
AI 写作助手产品 "WriteFlow"
包含 Hero、功能展示、社会证明、定价等模块
2. 电商数据分析仪表板 (example-dashboard.md)
实时销售数据监控
包含侧边栏导航、数据卡片、图表等
🎯 技术栈
技术 | 用途 |
TypeScript | 类型安全 |
MCP SDK | Model Context Protocol 集成 |
Tailwind CSS | 样式生成 |
4.5v MCP | 图片分析能力 |
📚 文档导航
文档 | 用途 |
| 项目介绍和功能说明(本文件) |
| 详细安装和配置指南 |
| AI 行为规范和工作流程 |
| 开发进度和待办事项 |
🔮 进阶功能
自定义 Design Tokens
编辑 src/theme/tokens.json:
{
"colors": {
"primary": "#3b82f6",
"secondary": "#6366f1",
...
}
}使用组件模板
src/components/ 目录包含 React 组件模板,可作为代码生成参考:
Button.tsx - 按钮组件(3 种样式,3 种尺寸)
Card.tsx - 卡片组件(含 Header, Title, Content)
index.ts - 统一导出
这些组件展示了 Design Tokens 的使用方式,可参考其实现生成类似组件。
扩展提示词模板
编辑 prompts/ 目录下的 .md 文件,自定义 AI 的分析行为。
添加新的页面类型
在 src/mcp/tools/design-generator.ts 中添加新的 generate* 函数。
🤝 贡献
欢迎提交 Issue 和 Pull Request!
贡献方式
Fork 项目
创建特性分支 (
git checkout -b feature/AmazingFeature)提交更改 (
git commit -m 'Add some AmazingFeature')推送到分支 (
git push origin feature/AmazingFeature)开启 Pull Request
📊 项目统计
总文件数: 28 个(精简后)
代码行数: ~1800
工具数量: 4 个 MCP 工具
示例文档: 2 个
TypeScript 覆盖率: 100%
文档文件: 5 个
🔄 更新日志
v1.0.0 (2025-01-29)
重大更新:
✅ 项目从 Next.js 重构为 Claude Code MCP Skill
✅ 实现完整的 MCP 服务器(4 个工具)
✅ 集成 4.5v MCP 图片分析能力
✅ 添加 2 个示例需求文档
✅ 完善文档(README, INSTALL, CLAUDE.md)
清理优化:
🗑️ 删除 setup.sh(已完成初始化)
🗑️ 删除 tailwind.config.ts(不再使用 Next.js)
🗑️ 删除 scripts/ 目录(旧脚本)
🗑️ 删除 PROGRESS_TASK.md(已有 PROGRESS.md)
📦 精简项目结构,保留 28 个核心文件
功能特性:
📋 需求文档解析(analyze_requirement)
🎨 视觉设计解码(extract_tokens)
💻 设计稿生成(generate_design)
🔍 视觉审计(audit_visual)
📝 许可证
ISC
📮 联系方式
如有问题或建议,请:
提交 GitHub Issue
查看
CLAUDE.md了解使用规范查看
INSTALL.md了解安装详情
由 AI 设计专家自动生成并维护
Available Tools
4 toolsanalyze_requirementC
解析需求文档(Word/PDF/MD),提取设计要求
| Name | Required | Description | Default |
|---|---|---|---|
| filePath | Yes | 需求文档的文件路径 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations exist, so the description carries the full behavioral burden. It names the accepted file formats, which is useful, but says nothing about required file existence/permissions, size limits, failure behavior, or what the extraction produces.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single compact clause with the action front-loaded and the format list appended. No filler, though it is arguably too terse given the missing behavioral detail.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema and no annotations, the description should describe the return shape (e.g. structured design requirements vs raw text) and error conditions. It covers the input formats but leaves the output and failure modes entirely unspecified.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% for the single filePath parameter, so the baseline is 3. The description adds supported formats, which is mildly relevant to what filePath may point at, but no path syntax or constraint detail beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb (解析/提取) and resource (需求文档), plus the accepted formats (Word/PDF/MD). An agent can grasp the tool's job without opening the schema, though it does not name or contrast the sibling tools it sits alongside.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No when-to-use guidance, no prerequisites, and no mention of alternatives such as generate_design or extract_tokens. The role as an input-parsing step is only implied by the description text.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
audit_visualB
对比生成的代码与参考图,进行视觉审计 - 支持多参考图对比
| Name | Required | Description | Default |
|---|---|---|---|
| options | No | ||
| designCode | Yes | 生成的 HTML/Tailwind 代码 | |
| referenceImagePaths | Yes | 参考设计图的文件路径数组(支持多张) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It mentions multi-image support, but says nothing about whether the audit is read-only, what it returns, how the diff/threshold behavior surfaces, or any auth/side-effect characteristics. For an audit tool with zero annotation coverage this is a notable gap.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single short sentence with the core action front-loaded and no filler. Efficient, though the dash-separated trailing clause is brief enough that it could have carried more useful context instead.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool has a nested options object, 3 parameters, and no output schema, yet the description never explains what the audit produces or how results are reported. With no annotations and no output schema, the description should do much more to be complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 67%, so most parameters are documented in the schema itself. The description adds only the 'multi reference image' hint, which loosely maps to referenceImagePaths being an array, but gives no meaning for designCode or the nested options. Baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb (对比/审计 = compare/audit) and resource (generated code vs reference images), so the core action is clear. It does not explicitly distinguish itself from siblings like generate_design or extract_tokens, so it falls short of a 5.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The phrase '对比生成的代码与参考图' implies the usage context (you have generated code and reference images to validate), but there is no explicit when-to-use, when-not-to-use, or reference to alternatives among the sibling tools. Usage is only implied.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
extract_tokensC
从参考设计图提取 Design Tokens(颜色、间距、圆角等)- 支持多图批量处理
| Name | Required | Description | Default |
|---|---|---|---|
| options | No | ||
| imagePaths | Yes | 参考设计图的文件路径数组(支持多张) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It discloses batch/multi-image support, which is useful context, but says nothing about caching behavior (which the schema exposes), concurrency limits, permissions, failure modes on unreadable images, or what the extraction returns. For an unannotated tool with a nested options object, this is a significant gap.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single compact sentence with the core verb-resource pairing front-loaded and the batch capability trailing as a qualifier. No wasted clauses, though it is thin rather than lean — brevity here partly reflects under-specification.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no annotations, no output schema, a nested options object, and only 50% schema coverage, the description should do more work. It never explains the shape of the extracted tokens, how caching or concurrency affect results, or how multi-image output is aggregated — all things an agent needs before invoking.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 50%, so the schema already documents imagePaths and the five nested options fields (useCache, extractColors, extractSpacing, extractTypography, maxConcurrency) with defaults. The description's mention of 颜色/间距/圆角 loosely maps to the extraction flags but adds no syntax, format, or default information beyond the schema. Baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb (提取/extract) and resource (Design Tokens) with concrete examples of what tokens are covered (颜色、间距、圆角) and the source (参考设计图). It goes beyond a tautology of the name. It does not, however, distinguish itself from siblings like analyze_requirement or audit_visual, which also operate on design inputs.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
There is no statement of when to use this tool versus analyze_requirement, generate_design, or audit_visual, and no prerequisites or exclusions are given. The 'batch processing' note describes a capability, not a usage condition. The agent must infer the routing from the name alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
generate_designC
根据需求和 Design Tokens 生成 HTML/Tailwind 设计稿
| Name | Required | Description | Default |
|---|---|---|---|
| tokens | Yes | Design Tokens(来自 extract_tokens) | |
| outputPath | No | 输出文件路径(可选) | |
| requirement | Yes | 需求分析结果(来自 analyze_requirement) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full behavioral burden. It does not say whether generating writes or overwrites a file at outputPath, what the default output behavior is, how long generation takes, or what the result contains. For a generation/write operation with zero annotation coverage this is a meaningful gap.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single front-loaded sentence with no filler or repetition. It is efficiently structured, though the extreme brevity is partly a symptom of missing content rather than disciplined compression.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Minimum viable for a 3-parameter generator whose schema is fully documented and which has no output schema. However, with nested object inputs, a file-writing outputPath, and sibling tools in a pipeline, the description leaves the agent guessing about ordering, side effects, and result shape.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so all three parameters including nested objects are already documented in the schema. The description names the two main inputs but adds no format, shape, or constraint detail beyond what the schema supplies, so the baseline of 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description names a concrete verb (生成/generate) and resource (HTML/Tailwind 设计稿), plus the two inputs it consumes (需求 and Design Tokens). It is clear what the tool produces, but it does not differentiate itself from siblings such as analyze_requirement or extract_tokens, which it actually depends on.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
There is no statement of when to use this tool versus the other three siblings, no prerequisite ordering (e.g. must run analyze_requirement and extract_tokens first), and no note on whether it supersedes or follows audit_visual. The '来自 extract_tokens' hints at an upstream dependency in the schema but the description itself gives no workflow guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
4 tool updates
v1.0.0- First observed
analyze_requirement - First observed
audit_visual - First observed
extract_tokens - First observed
generate_design
TDQS
Scored across 4 tools
Each tool targets a distinct stage of the design pipeline: requirement analysis, token extraction, design generation, and visual audit. Input types and outputs are clearly differentiated, leaving no ambiguity about which tool to use.
All four tools follow a consistent snake_case verb_noun pattern: analyze_requirement, extract_tokens, generate_design, audit_visual. The naming is predictable and uniform throughout.
Four tools map cleanly onto a coherent design workflow. The count sits well within the 3-15 sweet spot, and each tool has a clear, non-redundant role.
The surface covers the full end-to-end workflow: parse requirements, extract tokens, generate a design, and audit the visual result. A minor gap exists in that there is no explicit tool to refine or fix the design based on audit findings, though an agent could work around this by re-invoking generate_design.
Maintenance
Related MCP Connectors
Provides UX capabilities to enhance the design output and understanding of AI systems.
Design intelligence for coding agents: audits, design systems, and a taste profile agents consult.
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.
Related MCP Servers
- AlicenseAqualityBmaintenanceProvides deterministic, read-only design knowledge for AI coding agents to help them choose visual directions, plan UI states, and compose design tokens, all without network access.612 npm4MIT
- AlicenseNot gradedqualityBmaintenanceProvides source-backed design context, route card validation, contract generation, critique and verification reports, evidence packages, Penpot change plans, and anti-repeat checks for design workflows. Does not directly mutate Penpot, but consumes read-only Penpot snapshots.8 npmMIT
- AlicenseNot gradedqualityBmaintenanceProvides design systems, UI prompts, and layout variation guidance to AI coding tools for generating better user interfaces.221 npm1,921MIT
- AlicenseCqualityBmaintenanceEnforces design systems and vocabulary via ontology checks, candidate scanning, linting, and structural search across repositories.743Apache 2.0