music app
A modern music application with React, styled-components featuring Home, Dashboard, and Chat functionality
Repository Info
About This Server
A modern music application with React, styled-components featuring Home, Dashboard, and Chat functionality
Model Context Protocol (MCP) - This server can be integrated with AI applications to provide additional context and capabilities, enabling enhanced AI interactions and functionality.
Documentation
Cursor + Figma-Context-MCP + Github MCP 实现前端页面和代码提交
写在前面（重要）
仅作为技术实现和 MCP 工作流的记录，项目本身不重要
1. 设计图预览
!figma
2. 配置 MCP
需申请 token
{
"mcpServers": {
"Figma AI Bridge": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": ""
},
"fromGalleryId": "GLips.Figma-Context-MCP"
},
"GitHub": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": ""
},
"fromGalleryId": "modelcontextprotocol.servers_github"
}
}
}
3. 粘贴 figma 路径并执行
!copylink
4. LLM 对话执行
5. 执行结束后运行
npm i && npm start
6. 实现效果
!demo-1
!demo-2
7. 一些感想
- 前后时间从执行到结束差不多
15min - 除了图表，其他还原度我认为可以给到
99% - 头麻
- 想想失业了干点啥
Quick Start
Clone the repository
git clone https://github.com/chemistwang/music-appInstall dependencies
cd music-app
npm installFollow the documentation
Check the repository's README.md file for specific installation and usage instructions.
Repository Details
Recommended MCP Servers
Discord MCP
Enable AI assistants to seamlessly interact with Discord servers, channels, and messages.
Knit MCP
Connect AI agents to 200+ SaaS applications and automate workflows.
Apify MCP Server
Deploy and interact with Apify actors for web scraping and data extraction.
BrowserStack MCP
BrowserStack MCP Server for automated testing across multiple browsers.
Zapier MCP
A Zapier server that provides automation capabilities for various apps.