Figma MCP Poc

figma mcp poc

React+TypeScript+Vite概念验证，重现了Apple Intelligence风格的登录页面和Apple Pay按钮展示。作为MCP/Figma驱动的UI工作的轻量级演示而构建。

里面是什么

• React 19与React Router用于两条路由(/ 和 /component)
• 量身定制的苹果风格布局 src/App.tsx 带有英雄、操作系统部分和页脚
• 从中的预设呈现的Apple Pay按钮变体 src/components/ApplePayButton.tsx
• 使用TypeScript和ESLint 9的Vite工具链

快速启动

1. 安装依赖项\

npm install

1. 运行开发服务器（Vite）\

npm run dev

1. 打开应用程序\

访问终端中打印的URL（默认http://localhost:5173).\ 路线：

• / --Apple Intelligence登陆体验
• /component --Apple Pay按钮预设网格

脚本

• npm run dev --在开发模式下启动Vite
• npm run build --类型检查，然后构建 dist
• npm run preview --预览生产版本
• npm run lint --运行ESLint

备注

• 全球风格生活 src/App.css 和 src/index.css；组件展示添加 src/pages/ComponentShowcase.css.