AI导哈

Figma转HTML/CSS/JS静态页面工具

将Figma设计转换为响应式、可访问的静态网站，使用语义化HTML、现代CSS和最小化JS。

  • by Manmohan2526
  • HTML
  • 本地部署
  • 更新于
在 GitHub 查看 Manmohan2526/cursor-mcp

使用说明

Cursor MCP：Figma → HTML/CSS/JS 登陆页

概述

这个项目将一个Figma设计（着陆页样本-03）转换成一个响应式、无障碍的静态网站，使用了语义化的HTML、现代CSS以及极简的JavaScript。

我们所实施的

  • 项目设置和公共GitHub仓库
  • 与Figma框架和令牌对齐的语义HTML结构
  • 全局设计令牌（颜色、间距、半径）和响应式网格
  • 带有横幅、导航（移动切换）和行动号召按钮的页眉
  • 英雄板块，包含图片和数据卡片（200+、10k+、16+）
  • 特性网格（4张卡片）匹配间距/排版
  • 特色房源卡片（图片、标签、价格行）
  • 客户评价（3张卡片，头像，星星遮罩）
  • 包含可访问性功能的常见问题解答（FAQ）部分 <details>/<summary>
  • 带有下拉选择、单选按钮、消息输入和同意选项的联系表单（完整Figma布局）
  • 带有订阅字段、链接栏和社交图标页脚
  • 资产管道：从Figma下载图片和SVG图标
  • 动画效果：轻量级滚动显示和悬停/行动号召（CTA）微交互

关键文件

  • index.html – 页面结构和部分（或章节）
  • styles.css – 令牌（或代币）、布局系统、响应式样式、动画
  • script.js – 导航切换，表单处理程序，滚动显示效果
  • assets/ – 导出的图像和 assets/icons/ SVG图标集

挑战及我们如何解决它们

  • Figma资源导出命名规则：必填 .png/.svg 以及安全的文件名。已通过导出时使用验证过的名称（例如。， property_1.png）。
  • 远程推送被拒绝（GitHub上已初始化README）：已通过以下方式解决 git pull --rebase origin main 然后推送。
  • 将复杂的Figma布局映射到语义化的HTML：创建可重用的实用布局（例如。， .layout_RBRLUI（网格）和特定部分的类。
  • 令牌一致性与深色背景对比：定义CSS变量用于调色板和边框，以匹配Grey/08、Grey/15等颜色。
  • 移动导航：为小视口添加了紧凑的切换按钮，并设置了绝对定位的下拉菜单。
  • 性能/用户体验：避免了大量JavaScript使用；采用IntersectionObserver实现元素显示效果，使用CSS遮罩实现星星效果。
  • SVG中的跨平台换行符：注意到Git警告（LF→CRLF），但对网页使用无影响。

如何在本地运行

  1. 克隆仓库
  2. 开放 index.html 在浏览器中（或使用一个简单的静态服务器）
# optional
npx serve .

下一步

  • 部署：设置GitHub Pages或Vercel以进行实时预览
  • 资产优化：图像压缩，响应式设计 srcset 为英雄和卡牌（准备/设计/等，具体语境需补充）
  • 无障碍通行证：标签顺序、交互元素的ARIA标签、色彩对比度审核
  • 测试覆盖率：使用Playwright进行基本的端到端（e2e）检查，包括导航、表单和锚点
  • 内容整合：用生产文本和真实链接替换占位符文案
  • 主题设计：将颜色/间距提取到设计令牌JSON文件中，以便未来实现自动化
  • 自动化：使用持续集成（CI）验证链接、运行Lighthouse并检查格式

致谢/功劳/积分（根据上下文，"Credits" 可能有多种翻译，这里提供了几种可能的译法）

  • 设计来源：上述链接的Figma文件
  • 实施：使用Cursor MCP助手生成并优化

相关 MCP