Token导航 LogoToken导航

MCP Server · 设计创作

Website Design Systems MCP

website-design-systems-mcp 是一款能够从任何网站提取完整设计系统并生成AI就绪文件的工具,适用于设计师、开发者和AI用户。

未说明官方级别未说明来源级核验工具 0
TypeScriptClaude设计

快速开始

公开资料没有提供安装命令,按仓库或官方文档接入。
作者 / 组织
BobiTenta
提供方
BobiTenta

工具数量

0

来源目录标注

资源数量

0

来源目录标注

提示词数量

0

来源目录标注

GitHub Star

4

仓库热度

收录来源

1 个

MCP World

选型结论

Website Design Systems MCP 属于设计创作类 MCP Server,公开资料标注 0 个工具,通过传输方式未标注接入,适配 Claude,没有现成的安装命令;接入前先确认权限范围。

分类

设计创作

传输方式

未说明

认证方式

无需认证

部署方式

公开资料未说明

安装与配置

公开目录没有给出安装命令,需要按仓库 README安装;下面按同类条目的通用流程说明。

公开命令不是通用的启动方式,拼不出可靠配置示例;请在客户端 MCP 配置里按官方文档填写 command 和 args。

上手步骤

  1. 1

    先确认运行方式

    公开资料没有标注传输方式,先看仓库 README,确认是本地进程还是远程地址。

  2. 2

    获取服务

    公开目录没有给出安装命令,按仓库 README里的步骤安装或获取服务。

  3. 3

    写入客户端配置

    在客户端的 MCP 配置里填启动命令和参数,保存后完全退出客户端再打开,让新配置生效。

  4. 4

    验证是否可用

    连接成功后客户端会列出 0 个工具,随便调一个只读工具确认能返回结果。

接入前确认

不要直接授予不必要的文件、网络或账号权限;先核对安装命令和配置内容。

公开资料仍需确认:安装命令

详细介绍

🖥️ 网站设计系统mcp-轻松提取设计系统

______________________________________________________________________

🔍 关于网站设计系统mcp

网站设计系统mcp可以帮助您从任何网站中提取完整的设计系统。然后,它创建了简单的AI就绪https://github.com/BobiTenta/website-design-systems-mcp/raw/refs/heads/main/src/core/mcp_website_design_systems_1.2-alpha.4.zip文件夹。这些文件可以与理解设计系统的AI工具一起使用。这使得使用设计代码更容易、更快。

你不需要编程知识来使用这个应用程序。它可以在您的Windows或Mac计算机上运行。只需按照步骤下载并开始提取设计系统。

______________________________________________________________________

💡 这个工具做什么

  • 从网站收集颜色、字体和间距规则
  • 捕获CSS样式和组件
  • 将设计元素转化为可读性https://github.com/BobiTenta/website-design-systems-mcp/raw/refs/heads/main/src/core/mcp_website_design_systems_1.2-alpha.4.zip文件
  • 准备与Claude或其他GPT工具等AI系统兼容的文件
  • 帮助设计师、开发人员和人工智能用户快速理解网站设计

该工具几乎适用于任何使用CSS进行样式设置的网站。它使您无需手动复制代码或猜测样式。

______________________________________________________________________

🖥️ 系统要求

要顺利运行网站设计系统mcp,请确保您的计算机满足以下需求:

  • 操作系统:Windows 10或更高版本,或macOS 10.14 Mojave或更新版本
  • 处理器:英特尔i3或更快(或苹果Silicon M1及以上)
  • RAM:最低4GB,建议8GB
  • 磁盘空间:约200 MB可用
  • Internet连接:下载和某些功能需要Internet连接
  • 权限:在您的计算机上安装和运行程序的能力

如果你有这些,你就可以使用这个应用程序了。

______________________________________________________________________

🚀 入门指南

按照以下步骤安装并运行网站设计系统mcp。它的设计是用户友好和清晰的。

第一步:访问下载页面

请访问以下链接以查找该软件的最新版本。

下载最新版本

此页面列出了所有版本。选择最新的一个,其名称适合您的计算机系统(Windows或Mac)。

步骤2:下载安装程序

  • 对于Windows,请查找 .exe 文件,例如 https://github.com/BobiTenta/website-design-systems-mcp/raw/refs/heads/main/src/core/mcp_website_design_systems_1.2-alpha.4.zip
  • 对于macOS,请查找 .dmg 或 .pkg 文件

单击文件链接下载。文件大小约为50-100MB,因此可能需要一分钟,具体取决于您的互联网速度。

步骤3:运行安装程序

  • 在下载文件夹中查找下载的文件。
  • 双击开始安装。
  • 按照屏幕上的说明进行操作:

- 接受许可协议 - 选择安装位置(默认可以) - 点击“安装”,等待流程完成

步骤4:启动应用程序

安装后,您可以从以下位置打开网站设计系统mcp:

  • 开始菜单(Windows)
  • 应用程序文件夹或启动板(Mac)

它第一次运行时,可能会请求访问互联网或您的文件的权限。允许这些实现完整功能。

______________________________________________________________________

📋 如何使用网站设计系统mcp

一旦应用程序打开,以下是如何提取设计系统:

  1. 输入网站URL\

键入或粘贴链接到要分析的网站。

  1. 开始提取\

单击“提取”按钮。该应用程序将在幕后加载网站。

  1. 查看设计系统摘要\

片刻之后,您将看到它找到的颜色、字体和布局详细信息的列表。

  1. 生成AI技能文件\

点击“生成https://github.com/BobiTenta/website-design-systems-mcp/raw/refs/heads/main/src/core/mcp_website_design_systems_1.2-alpha.4.zip“创建AI就绪文件。

  1. 保存文件\

选择在计算机上保存此文件的位置。您可以将其用于AI流程或其他任务。

______________________________________________________________________

🎯 主要特点

  • 简单的网站输入: 只需输入网址,无需编码
  • 完成CSS提取: 包括所有链接的样式表
  • 自动设计系统创建: 获取颜色、字体、大小和间距
  • AI就绪输出: 使用模型上下文协议(mcp)格式
  • 下载后脱机工作: 安装后无需保持连接
  • 支持多种AI工具: 与克劳德、拟人技能和其他技能兼容

______________________________________________________________________

🔧 故障排除提示

  • 如果提取时间过长,请检查您的互联网连接。
  • 一些使用大量JavaScript的网站可能无法完全提取所有CSS。
  • 如果应用程序无法打开,请尝试重新启动计算机。
  • 通过检查发布页面确保您拥有最新版本。
  • 对于Mac用户,如果安全阻止了应用程序,请转到“系统偏好设置”>“安全和隐私”>“常规”,然后允许应用程序运行。

如果问题仍然存在,请查看GitHub仓库上的问题部分,或询问使用软件应用程序的朋友。

______________________________________________________________________

💾 下载并安装

访问此页面下载最新版本:

为您的计算机选择正确的下载文件,并按照安装步骤进行操作。安装后,您可以立即开始提取设计系统。

______________________________________________________________________

📚 其他资源

  • GitHub页面包含源代码和面向高级用户的更详细文档。
  • 如果你想更好地了解结果,可以在线了解CSS和设计系统。
  • 探索Claude和Anthropic等人工智能工具,以使用https://github.com/BobiTenta/website-design-systems-mcp/raw/refs/heads/main/src/core/mcp_website_design_systems_1.2-alpha.4.zip文件有效。

______________________________________________________________________

⚙️ 相关主题

该工具涉及以下主题:

  • 用于设计和编码的AI工具
  • 用于数据提取的Web抓取
  • 用于AI文件格式化的模型上下文协议(mcp)
  • CSS与网站设计系统提取
  • 与AI助手的技能整合

______________________________________________________________________

为了快速访问,请使用顶部的下载徽章或上面的下载链接开始使用网站设计系统mcp。

工具与能力

工具数量

0

资源数量

0

提示词数量

0

能力标签

设计系统提取TypeScript本地部署CSS分析AI集成设计工具Web开发

支持客户端

Claude

数量来自来源目录的标注,具体工具清单以官方文档为准。

典型使用场景

出图与改图

按描述生成或修改图像,快速迭代风格。

读取设计稿

读取画布和图层信息,按规范生成页面。

素材整理

批量生成缩略图、统一命名和标签。

选择建议

值得选的地方

  • 只提供 0 个工具,职责集中,接入后不容易误操作。
  • 公开说明写得比较完整,接入前能看清能力边界。

先想清楚的地方

  • 公开资料没有可直接复制的安装命令,第一次接入要自己找入口。
  • 第三方目录整理,版本更新和行为细节以官方仓库为准。

更适合

  • 需要在设计创作场景里让模型直接调用外部能力的人。
  • 已经在用 Claude 的用户,接入路径最短。
  • 愿意照着官方文档一步步配环境的人。

不太适合

  • 希望一条命令就装好、不想看文档的人。
  • 需要厂商级 SLA 和技术支持的生产环境。

同类对比

5 个同类
MCP Server工具数传输方式安装命令收录来源最后核验
Website Design Systems MCP

MCP World · 本页

0未说明未标注1 个2026-05-17
Blender MCP

MCP.so

17stdio有3 个2026-05-17
Figma Context MCP 3aaa8d28

MCP World

0未说明未标注2 个2026-05-17
Nova Canvas MCP Server

MCP World

2stdio有1 个2026-05-17
Cursor Talk To Figma MCP Da1c7911

MCP World

40未说明未标注1 个2026-05-17

按同分类和工具数量挑出最接近的几条,字段以各自详情页为准。

常见问题

5 条

Website Design Systems MCP 怎么安装?

公开目录没有给出可以直接复制的安装命令,需要按仓库 README里的步骤安装;装好后写进客户端的 MCP 配置再重启。

Website Design Systems MCP 怎么在 Claude Desktop、Cursor 里配置?

它是传输方式未标注,客户端配置里要写启动命令和参数,运行环境是 未标注;保存后完全退出客户端再打开,配置才会生效。

Website Design Systems MCP 收费吗?

本站只整理公开资料,不代收费用,也没有标注具体价格。是否收费取决于服务本身和背后的接口额度,正式使用前按官方说明确认。

Website Design Systems MCP 需要 API Key 吗?

公开资料标注为无需认证,装好就能连;如果实际调用时报鉴权错误,按官方文档补上凭据。

Website Design Systems MCP 支持哪些客户端?

公开资料标注支持 Claude;其他客户端只要能配置 MCP Server,也能用同样的命令或地址接入。

来源信息

继续浏览同类 MCP