DS Figma MCP
使用Vue 3和Material Design 3构建的设计系统文档web应用程序。这可作为设计令牌和组件的参考，并计划通过MCP（模型上下文协议）集成到Figma库中。
非常适合设计师、工程师、项目经理和营销团队在一个地方访问设计系统原语和组件文档。
快速开始
先决条件
- Node.js:
^20.19.0或>=22.12.0(下载) - npm：随Node.js一起提供
设置（5分钟）
# 1. Clone the repository
git clone
cd DS-Figma-MCP
# 2. Navigate to the web app directory (IMPORTANT!)
cd apps/web
# 3. Install dependencies
npm install
# 4. Start the development server
npm run dev打开浏览器 http://localhost:5173 您应该可以实时查看设计系统文档！
⚠️ 重要提示： 所有npm命令都必须从 apps/web/ 目录，而不是根目录。可用命令
所有命令都从运行 apps/web/ 目录：
# Development
npm run dev # Start dev server with hot reload
npm run preview # Preview production build locally
# Building & Deployment
npm run build # Type-check and build for production
npm run build-only # Build without type-checking
# Code Quality
npm run lint # Run ESLint (auto-fixes issues)
npm run format # Format code with Prettier
npm run type-check # Check TypeScript types only
# Testing
npm run test:unit # Run all unit tests
npm run test:unit -- src/components/__tests__/Button.spec.ts # Run specific test
# Tokens (Figma Integration)
npm run tokens:generate # Generate design token files manually项目结构
DS-Figma-MCP/
├── apps/web/ # Main Vue 3 SPA application
│ ├── src/
│ │ ├── components/ # Reusable Vue components
│ │ ├── views/ # Page-level components
│ │ ├── stores/ # Pinia state management
│ │ ├── router/ # Vue Router configuration
│ │ ├── assets/ # CSS and design tokens
│ │ ├── App.vue # Root component with navigation
│ │ └── main.ts # Application entry point
│ ├── public/ # Static assets (served as-is)
│ ├── vite.config.ts # Vite build configuration
│ ├── tsconfig.app.json # TypeScript configuration
│ └── package.json # Dependencies and scripts
├── CLAUDE.md # Guidance for Claude Code
├── FIGMA_SETUP.md # Figma integration guide
└── README.md # This file路线
该应用程序有四个主要部分：
/--主视图与设计系统概述/tokens--设计标记库（颜色、排版、间距等）/components--组件示例和模式/about--项目信息和技术栈
技术栈
| 工具 | 版本 | 目的 |
|---|---|---|
| Vue | 3.5+ | UI框架 |
| TypeScript | 5.9+ | 类型安全 |
| 维特 | 7+ | 构建工具和开发服务器 |
| Vuetify | 3.11+ | 材料设计3个组件 |
| 精确定位 | 3+ | 状态管理 |
| Vitest | 4+ | 单元测试 |
| ESLint | 9+ | 代码过滤 |
| 更漂亮 | 3.6+ | 代码格式 |
开发流程
运行开发服务器
npm run dev- 启用热模块更换（HMR）--更改立即保存
- 开发服务器在上运行 http://localhost:5173
- 打开
src/components/开始建造
创建新组件
interface Props {
label: string
disabled?: boolean
}
defineProps
()
{{ label }}
button {
padding: 8px 16px;
}
组件使用Vue 3的Composition API `` 语法。Vuetify组件是自动导入的（不需要显式导入）。
编写测试
在组件旁边创建测试文件：
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import MyComponent from '../MyComponent.vue'
describe('MyComponent', () => {
it('renders label prop', () => {
const wrapper = mount(MyComponent, {
props: { label: 'Click me' }
})
expect(wrapper.text()).toContain('Click me')
})
})使用以下工具运行测试：
npm run test:unit代码风格
该项目使用Prettier和ESLint进行一致的格式设置：
# Format all files
npm run format
# Check and auto-fix linting issues
npm run lint
# Check types (before committing)
npm run type-check生产大楼
在部署之前，运行完整版本：
npm run build这将：
- 生成设计令牌文件
- 运行TypeScript类型检查
- 构建优化的生产包
输出为 dist/ 并准备部署。
在本地预览生产版本：
npm run preview设计代币
设计标记（颜色、排版、间距等）是集中管理和自动生成的，可用于web应用程序和Figma。
生成令牌
令牌在以下期间自动生成 npm run build，但您可以手动生成它们：
npm run tokens:generate这将创建：
public/tokens/tokens.json--令牌工作室格式（适用于Figma）public/tokens/figma-tokens.json--Figma变量格式
访问组件中的令牌
CSS自定义属性在所有样式中自动可用：
.button {
background-color: var(--primary);
color: var(--on-primary);
border-radius: var(--rounded-md);
}
Figma集成
该项目旨在在您的代码库和Figma设计之间同步设计令牌。看 FIGMA_SETUP.md 用于：
- 设置Figma API凭据
- 将代币导入Figma
- 使用Tokens Studio插件
- 设置代码连接以进行组件链接
故障排除
端口5173已在使用中
# Kill the process using the port
lsof -ti:5173 | xargs kill -9
# Or use a different port
npm run dev -- --port 3000IDE中未显示TypeScript错误
确保你的IDE启用了TypeScript支持。如果使用VS Code，请安装 Volar扩展.
构建失败，出现“找不到文件”错误
清除缓存并重新安装：
rm -rf node_modules package-lock.json
npm install
npm run build测试超时
增加超时时间或运行特定测试：
npm run test:unit -- --testTimeout=10000
npm run test:unit -- src/components/__tests__/specific.spec.ts常见任务
添加新页面
- 在中创建一个新的Vue文件
src/views/MyPage.vue - 在中添加路线
src/router/index.ts - 在中添加导航链接
src/App.vue
更新设计令牌
- 在中编辑令牌定义
apps/web/scripts/generate-figma-tokens.js - 跑
npm run tokens:generate - 提交更改
部署到生产环境
npm run build # Creates dist/ folder
# Upload dist/ to your hosting serviceIDE设置
VS Code推荐插件：
性能提示
- 使用路径别名：
@/components/Button.vue而不是../../../components/Button.vue - 利用Vue 3反应式API：
ref(),computed(),watch() - 需要时延迟加载路由（请参见
src/router/index.ts) - 跑
npm run preview测试生产包大小
贡献
- 创建要素分支：
git checkout -b feature/my-feature - 进行更改和测试：
npm run test:unit - 格式和lint：
npm run format && npm run lint - 检查类型：
npm run type-check - 承诺并推动：
git commit -m "feat: add my feature"
资源
获取帮助
- 检查现有文件：
- CLAUDE.md --人工智能辅助开发指南 - FIGMA_SETUP.md --Figma集成详细信息
- 查看中的组件示例
src/components/ - 检查中的测试文件
src/components/__tests__/ - 在存储库上打开问题
______________________________________________________________________
快乐建筑！ 🚀