@templmf/temp-solf-lmf 0.0.160 → 0.0.161

package/SKILL.md

@@ -0,0 +1,93 @@
+---
+name: figma-to-css
+description: 将 Figma 节点数据（通过 Figma MCP 获取）转换为 CSS/HTML 时应遵循的规则。当用户提供 Figma 节点 JSON（fills、size、padding、cornerRadius、effects、layoutMode 等字段），要求还原为网页样式、生成 HTML/CSS 代码、或将设计稿转换为前端代码时触发此技能。
+---
+
+# Figma 节点 → CSS 转换规则
+
+本技能定义了将 Figma MCP 返回的节点数据字段，映射为 CSS 样式的标准规则。转换代码或手动还原样式时，严格按以下规则执行，不要引入未在规则中说明的默认值或推测行为。
+
+## 1. 填充 Fill（`fills` 字段）
+
+- **非文本节点**：`fills` 代表背景，可能是 image、gradient 或纯色（color）
+  - 转换为对应的 `background` / `background-image` / `background-color`
+  - 若 `fills` 为空数组，**不要**设置任何背景色，不能自动补默认背景
+  - 若填充类型为 image，额外设置 `background-size: contain`
+- **文本节点**：`fills` 代表文字颜色，转换为 `color`
+
+## 2. 盒模型（Box Model）
+
+- 严格遵守 `size` 字段还原元素的 `width` / `height`
+- 严格遵守 `paddingLeft`、`paddingRight`、`paddingTop`、`paddingBottom`，一一对应转换为 CSS 的 `padding-left` / `padding-right` / `padding-top` / `padding-bottom`
+- 不要用简写 `padding` 合并四个方向导致精度丢失，除非四个值恰好相等
+
+## 3. 圆角（Corner Radius）
+
+- `cornerRadius`（单一数值）→ `border-radius`（统一四角）
+- `rectangleCornerRadii`（数组，顺序为 `[topLeft, topRight, bottomRight, bottomLeft]`）→ 按位顺序直接映射：
+  ```css
+  border-radius: {topLeft} {topRight} {bottomRight} {bottomLeft};
+  ```
+  该数组顺序与 CSS `border-radius` 简写的顺时针顺序一致，无需重新排序
+
+## 4. 阴影（Shadow）
+
+- 遍历 `effects` 字段，取其中 `type === 'DROP_SHADOW'` 的项
+- 转换为 CSS `box-shadow`，映射关系：
+  - `offset.x` → `box-shadow` 第一个长度值
+  - `offset.y` → `box-shadow` 第二个长度值
+  - `radius` → 模糊半径（第三个值）
+  - `spread`（若存在）→ 扩散半径（第四个值）
+  - `color`（含透明度）→ 阴影颜色
+- 若存在多个 `DROP_SHADOW`，用逗号拼接为多重阴影
+
+## 5. 布局方式（优先级从高到低）
+
+### 5.1 绝对定位优先
+- 若节点 `layoutPositioning === 'ABSOLUTE'`：
+  - 该节点使用 `position: absolute`
+  - 其父节点必须设置 `position: relative`（作为定位上下文）
+
+### 5.2 无 `layoutMode`：自然布局
+- 节点不存在 `layoutMode` 字段时，使用自然文档流：
+  - 若内部元素为**横向排列**：子元素使用 `display: inline-block` + `vertical-align`（对齐方式），元素间距使用 `margin`（如 `margin-right`）模拟，不使用 `gap`
+  - 若内部元素为**纵向排列**：使用默认块级文档流（块级元素天然纵向堆叠），无需额外设置 display
+
+### 5.3 存在 `layoutMode`：Flex 布局
+- 节点存在 `layoutMode` 字段时，使用 `display: flex`：
+  - `layoutMode: HORIZONTAL` → `flex-direction: row`
+  - `layoutMode: VERTICAL` → `flex-direction: column`
+  - `itemSpacing` → `gap`
+  - `primaryAxisAlignItems` → `justify-content`（主轴对齐）：
+    | Figma 值 | CSS 值 |
+    |---|---|
+    | MIN | flex-start |
+    | CENTER | center |
+    | MAX | flex-end |
+    | SPACE_BETWEEN | space-between |
+  - `counterAxisAlignItems` → `align-items`（交叉轴对齐）：
+    | Figma 值 | CSS 值 |
+    |---|---|
+    | MIN | flex-start |
+    | CENTER | center |
+    | MAX | flex-end |
+    | BASELINE | baseline |
+
+## 6. 特殊节点类型
+
+- `type === 'VECTOR'` 的节点，不做 SVG 内联转换，统一转换为图片引用方式：
+  ```html
+  <img src="xxx.svg" />
+  ```
+
+## 转换检查清单
+
+处理每个节点时，按以下顺序检查并应用规则：
+
+1. 是否 `layoutPositioning === ABSOLUTE`？→ 定位方式
+2. 节点类型是否为 `VECTOR`？→ 转 `<img>` 引用
+3. 是否有 `fills`？→ 区分文本/非文本节点，转背景或颜色
+4. `size` / `paddingLeft` / `paddingRight` / `paddingTop` / `paddingBottom` → 盒模型
+5. `cornerRadius` / `rectangleCornerRadii` → 圆角
+6. `effects` 中的 `DROP_SHADOW` → 阴影
+7. 是否有 `layoutMode`？→ 决定用 flex 还是自然布局，并处理对齐与间距

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@templmf/temp-solf-lmf",
-  "version": "0.0.160",
+  "version": "0.0.161",
   "description": "",
   "main": "index.js",
   "scripts": {