Beauty MCP

美容MCP

基于Figma设计构建的React.js美容产品网站。

入门指南

安装

安装依赖项：

npm install

发展

启动开发服务器：

npm run dev

该应用程序将在 http://localhost:5173

构建

生产建设：

npm run build

预览

预览生产版本：

npm run preview

项目结构

Beauty-MCP/
├── src/
│   ├── components/
│   │   ├── Button.jsx
│   │   ├── Button.css
│   │   ├── Badge.jsx
│   │   └── Badge.css
│   ├── theme/
│   │   ├── index.js
│   │   └── tokens.css
│   ├── App.jsx
│   ├── App.css
│   └── main.jsx
├── env.example
├── index.html
├── package.json
├── vite.config.js
└── README.md

特性

• 响应式导航栏
• 英雄部分，呼吁行动
• “为什么选择我们？”部分有功能卡
• 展示畅销商品的产品转盘
• 带有链接和社交媒体图标的页脚
• 支持亮/暗主题的集中式设计代币

技术

• React.js
• 层叠样式表
• 维特

设计代币和主题

• 全球代币在 src/theme/tokens.css。它们暴露了排版、间距、运动、立面和颜色图元，以及亮/暗主题别名。导入此文件（在中完成 src/main.jsx)使代币在任何地方都可用。
• 运行时助手 src/theme/index.js (initializeTheme, toggleTheme, applyTheme)设置 data-theme 属性on ` 并坚持选择 localStorage.致电 toggleTheme() 从任何组件切换 light 和 dark`.
• 样式文件(App.css, components/Button.css, components/Badge.css)已被重构以通过以下方式使用共享令牌 var(--token-name)。当您需要新的间距、半径或颜色值时，请将其添加到 tokens.css 而不是硬编码。
• 要在应用程序启动时覆盖默认主题，请传递一个值('light' 或 'dark')to initializeTheme() 在 src/main.jsx，或设置 data-theme 在React渲染之前手动添加属性。