使用说明
GathSession-人工智能生成的登录页面
此存储库包含一个名为“GathSession”的虚构产品的响应式登录页面的源代码。整个网站包含在一个 index.html 文件。
➡️ 现场演示： https://florianschepp.github.io/figma-to-code-mcp-server-demo/
关于项目
该项目是现代人工智能驱动的开发工作流程的实际演示。登录页面是在一个交互式会话中使用 gemini-cli 命令行工具。
AI被提示与Figma设计的链接，并利用了 模型上下文协议（MCP） 连接到外部工具进行文档查找和基于浏览器的实时调试。此存储库包含该进程的未经编辑的原始HTML输出。
致谢
这个项目是一个漂亮的Figma设计的代码实现，由 丹尼斯·恩佐基非常感谢他与社区分享他的工作。
AI实现的关键功能
- 响应式设计： 桌面、平板电脑和移动设备的完全响应式布局，采用Tailwind CSS构建。
- Vue.js组件： UI使用Vue 3构建为逻辑组件。
- 交互式移动菜单： 适用于较小屏幕的汉堡菜单中的功能幻灯片。
- 滚动触发动画： 页面元素上微妙的淡入和滑入动画，由Anime.js和Intersection Observer API提供支持。
技术栈
该项目采用现代前端技术构建，为简单起见，所有这些技术都通过CDN包含在内：
