使用说明
网站设计系统mcp
从任何网站提取完整的设计系统，并生成AI就绪的skill.md文件
概述
网站设计系统mcp 是一个模型上下文协议（MCP）服务器，可以从任何网站URL中提取全面的设计系统。它生成详细的、人工智能可读的 skill.md 这些文件使AI助手能够重新创建完全相同的设计。
特性
- 🎨 完成调色板提取 -具有语义命名的原色、次色和中性色
- 📝 排版分析 -字体系列、字体比例、粗细、线条高度
- 📏 间距系统检测 -令牌、基本单位、CSS变量
- 🔲 边框半径和阴影 -已捕获所有设计令牌
- 📐 布局分析 -容器宽度、断点、网格系统
- 🏷️ 品牌识别 -徽标、收藏夹图标、元信息
- 🚫 无需浏览器 -纯HTTP提取，无木偶/剧作家
- 🛡️ 防阻塞 -用户代理轮换，正确的标题
安装
npm install website-design-systems-mcp
或者直接与npx一起使用：
npx website-design-systems-mcp
使用Claude Desktop
添加到您的Claude Desktop配置(~/Library/Application Support/Claude/claude_desktop_config.json 在macOS上）：
{
"mcpServers": {
"website-design-systems": {
"command": "npx",
"args": ["-y", "website-design-systems-mcp"]
}
}
}
或者，如果在本地安装：
{
"mcpServers": {
"website-design-systems": {
"command": "node",
"args": ["/path/to/website-design-systems-mcp/dist/index.js"]
}
}
}
可用工具
extract_design_system
主要工具 -提取完整的设计系统并生成全面的 skill.md 文件。
Input: { "url": "https://stripe.com" }
Output: Complete skill.md with colors, typography, spacing, and more
validate_url
提取前快速检查URL是否可访问。
Input: { "url": "https://example.com" }
Output: { "accessible": true, "statusCode": 200, "contentType": "text/html" }
get_site_colors
仅提取调色板。
Input: { "url": "https://example.com" }
Output: JSON with primary, secondary, and neutral colors
get_site_typography
仅提取排版信息。
Input: { "url": "https://example.com" }
Output: JSON with fonts, type scale, and text styles
输出格式
生成的 skill.md 包括：
- YAML前端编辑器 -人工智能消费元数据
- 品牌识别 -标志、图标、标语
- 调色板 -按十六进制、RGB和CSS变量的使用情况组织
- 排版 -字体系列、字体比例、线条高度
- 间距系统 -从xs到4xl的令牌
- 圆角半径 -所有半径令牌
- 阴影 -方框阴影定义
- 布局 -容器宽度、断点、网格
- CSS变量 -所有自定义属性
发展
# Clone the repository
git clone https://github.com/Kargatharaakash/website-design-systems-mcp.git
cd website-design-systems-mcp
# Install dependencies
npm install
# Build
npm run build
# Run in development
npm run dev
运作原理
- HTTP获取 -使用类似浏览器的标题获取页面以避免阻塞
- HTML解析 -使用Cheerio解析HTML并提取样式源
- CSS提取 -收集内联样式，
<style>标签和外部样式表 - 代币分析 -分析CSS以提取颜色、排版和间距模式
- 技能生成 -将所有内容编译成结构化
skill.md文件
局限性
- JavaScript渲染内容 -可能无法从仅使用JS渲染的网站中捕获样式
- 攻击性机器人保护 -一些使用Cloudflare等的网站可能会阻止请求
- 登录所需内容 -无法访问经过身份验证的页面
对于大多数公共网站来说，提取效果非常好。
贡献
看 贡献.md 作为指导方针。
许可证
MIT许可证-请参阅 许可证 了解详情。
