Bean-Scene---Landing-Page

Web项目-Figma+TailWindCSS集成

导言

为了开发这个项目，我选择了 Figma 创建人 穆罕默德·贾维德 作为初步设计的基础。 原始文件可在以下链接中查阅：

豆场景咖啡着陆页

根据这个模板，我实现了 MCP de Figma 我进行了各种更改和调整，以使设计适应开发过程并赋予其自己的身份。

______________________________________________________________________

项目组织（简化）

通过整合文件夹中的最终文件，简化了项目结构，以方便部署和维护 public.

Carpeta public

包含生产部署（NetLify）所需的所有文件：

• index.html：带有尾风类的主结构。
• css/output.css：生成并缩小样式表。
• img/：优化图形资源。

Carpeta src

包含样式的源文件：

• input.css：tailwind和指令的基本配置 @theme.

对于相互作用，使用 JavaScript香草 专门用于实现效果 视差，使项目保持轻量级和优化。

______________________________________________________________________

发展中的挑战

使用时出现的主要挑战之一 FNM（快速节点管理器） 作为Node.js的版本管理器。由于版本管理，在将命令正确链接到IDE时出现了不便，因为它们没有被识别：

• fnm
• node
• npx

解决方案包括 显式定义执行路径 并添加 FIGMA API令牌，从而使MCP能够正常运行。

以下是用于配置MCP的结构：

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "fnm",
      "args": [
        "exec",
        "--using=default",
        "--",
        "npx",
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=TU_FIGMA_API_KEY_AQUI"
      ]
    }
  }
}

______________________________________________________________________

开发流程

下图说明了浏览器中的最终开发、编译和呈现过程：

graph TD
    subgraph "Desarrollo (Source)"
        HTML["public/index.html
(HTML con clases Tailwind)"]
        CSS_SRC["src/input.css
(Configuración @theme y @import)"]
    end

    subgraph "Compilación (Automático)"
        CLI["Tailwind CLI v4
(npm run dev / build)"]
    end

    subgraph "Producción (Public)"
        CSS_OUT["public/css/output.css
(CSS generado)"]
        BROWSER["Navegador Web
(Renderiza desde 'public')"]
    end

    HTML --> CLI
    CSS_SRC --> CLI
    CLI -- "Escanea y genera" --> CSS_OUT
    HTML -- "Enlaza" --> CSS_OUT
    CSS_OUT --> BROWSER
    HTML --> BROWSER

______________________________________________________________________

使用的技术

• HTML5：语义结构。
• CSS3：基本和自定义样式。
• 台湾：快速响应设计的实用程序框架。
• JavaScript（香草）：视觉效果逻辑（视差）。
• Figma：设计和原型（MCP集成）。
• Node.js：执行环境。
• Netlify：持续部署平台。

先决条件

建议使用 fnm （快速节点管理器）来管理Node.js的版本。

1. 不稳定fnm:

- 视窗: winget install Schniz.fnm - Mac/Linux: curl -fsSL https://fnm.vercel.app/install | bash

1. 配置器Node.js:

   fnm install --lts
   fnm use lts

安装

1. 安装项目依赖项：

   npm install

如何运行项目

1. 编译CSS（开发模式）:

在终端上，执行以下命令实时编译tailwind：

   npm run dev

1. 启动本地服务器:

恩 其他终端，执行此命令以在 http://localhost:3000:

   npm start

建筑（生产）

要生成优化和小型化的CSS以进行部署：

npm run build