# 将 SnowUI Figma 设计转为页面
来源指纹：312ca4e10770d538。
## 开始前确认资料与授权
先阅读目标版本完整 [LICENSE](https://snowui.dev/LICENSE)。使用 Figma 文件时，还要确认已经合法取得该文件；能读取文件或用户说已购买，都不能自动证明附赠设计资源的版本领取权益。已确认的同任务、同版本、同产品范围无需逐组件重复核对。
按 [设计指南](https://snowui.dev/llms/design-system.md) 拆解页面，按 [组件选择指南](https://snowui.dev/llms/component-selection.md) 和 [组件目录](https://snowui.dev/llms/components.md) 定位组件。已有组件承担视觉与交互，页面承担结构、业务数据与路由。精确参数查 [Token 目录](https://snowui.dev/llms/tokens.md)，组件内部视觉调整查 [样式指南](https://snowui.dev/llms/styling.md) 和命中组件的公开样式文档。
这些资料供设计还原与合法产品使用。不要为了本次页面任务扫描全库、重建设计系统或提取整体源码架构；必要组件阅读、调试、允许的修改与框架移植以 LICENSE 为准。
## 先读取设计语义，再写代码
优先取得目标 Frame 的可读取设计信息：组件实例与 variant、Variables / Styles 名称及当前模式、Auto Layout、尺寸约束、字体与行高、边框方向、图标资源，以及需要实现的状态。记录目标页面、视口与主题。
只有截图时，能判断大体结构与可见状态，不能确认颜色绑定、Hug / Fill、精确间距、隐藏交互或响应式约束。先实施已明确的部分，对不能证明的参数列出缺口；不要把截图采样的 HEX 或肉眼估计当成 SnowUI Token。没有明确数值时可以说明采用了哪个现有参数；有精确设计值却不能映射时，保留差异并请求确认。
按区域描述意图，例如“左侧产品导航”“切换文件内容页签”“选择视图参数”“筛选并选择文件行”，再查对应组件。名称与外观只是线索：内容切换与参数选择的语义不同，常驻侧栏与可打开详情弹层的行为也不同。
## 将颜色名翻译为主题 Token
自然语言负责把“黑色 40”“品牌色”“背景 1”等表达归到相应语义；精确 Figma Style / Variable 则映射到真实 CSS 变量。以下为已存在的典型对应，完整声明与主题条件查 Token 目录：
| Figma 名称或用户表达 | CSS 变量 | 支持共享语义色的公开 Prop 值 | 页面工具类示例 |
| --- | --- | --- | --- |
| Black/40%、Black-40%、黑色 40 | `--black-40` | `Black40` | `text-black-40`、`bg-black-40` |
| Brand、品牌色 | `--brand` | `Brand` | `text-brand`、`bg-brand` |
| Primary、主色 | `--primary` | `Primary` | `text-primary`、`bg-primary` |
| Background/1、Background-1、背景色 1 | `--background-1` | `Background1` | `bg-background-1` |
| Surface/1、Surface-1、表面色 1 | `--surface-1` | `Surface1` | `bg-surface-1` |
| Static Black/40%、固定黑 40 | `--static-black-40` | `StaticBlack40` | `text-static-black-40` |
仅当目标组件的公开 API 明确支持该语义色时，才把 `Black40`、`Brand` 等作为属性值传入。属性名称、背景入口与作用目标按该组件文档决定，不能给任意组件补造 `color`、`background` 或 `fill`。
`Black/40%` 是随主题变化的语义，深色主题可以对应白色；`Static Black/40%` 才是固定黑色。`Brand` 与 `Primary` 也不是永远相同的色值；`Background` 与 `Background/1` 是不同名称，即使当前主题中引用相同值，也不能互相改名。当前主题与模式必须保留在映射记录中，不把浅色 HEX 写死在组件上。
还原组件时先用已有 Props（含 variant / size / 颜色参数）匹配设计，尽量保留原有视觉。确有不能表达的设计差异时，按 [样式选择与改写顺序](https://snowui.dev/llms/styling.md#%E6%A0%B7%E5%BC%8F%E9%80%89%E6%8B%A9%E4%B8%8E%E6%94%B9%E5%86%99%E9%A1%BA%E5%BA%8F) 通过用户 class（可含已有 Tailwind）、实例 style 与真实登记的 override 调整必要部分，不穿透私有 DOM / class。需要 SnowUI 参数时使用同类别变量，例如 `color: var(--black-40)`；没有匹配的准确设计值仍记录差异，不静默用近似值。
## 将布局、几何与文字分别映射
Figma 的 Auto Layout 描述方向、间距、对齐与空间分配。先确认谁拥有 padding、谁是普通内容、谁是 leading / trailing 附件，以及哪些元素需要 Hug / Fill，再选择组件公开组合或普通语义 HTML。绝对定位只用于确实脱离正常流的设计元素，不能用它修补未理解的自动布局。
| 设计输入 | 代码映射原则 |
| --- | --- |
| Gap / 元素间距 | 查 `--gap-*`；页面工具类后缀表示名义值，不能与 Token 编号混用 |
| Padding / 内容到外壳的距离 | 查 `--padding-*`；由实际外壳或内容 owner 承担，避免父子重复 |
| 固定宽高、Hug、Fill | 先查组件尺寸 API；普通页面再用布局与尺寸 Token，不把 `size` 当万能宽高属性 |
| Stroke / Border | 记录颜色、宽度与 inside / outside 位置；组件内边框优先使用已有公开视觉入口 |
| Radius / 圆角 | 查 `--radius-*`；胶囊与全圆角遵循组件实际语义，不机械替换为固定半径 |
| Text style | 成对选择 `--text-*` 与 `--leading-*`，保留字重、字体和实际文字内容 |
| Effect / 焦点、阴影、模糊 | 先查组件已有效果与状态；表单 Focus 不在页面重新造一层焦点行为 |
Token 后缀不等于 px，也不保证各类别采用相同比例。例如名义 `Gap 8` 对应 `--gap-2`，名义 `Padding 16` 对应 `--padding-4`，名义 `Radius 12` 对应 `--radius-3`，而名义 `Border 0.5` 对应 `--border-1`。精确声明以 Token 目录为准。组件 `size` 的语义由其 API 定义，可能是 `sm` / `md` / `lg`，也可能是数值上下文；不要从这些几何例子推导 `size={3}` 一定等于宽高 12px。
几何参数以 rem 及类别系数表达名义尺寸，实际显示会受根字号与缩放影响。响应式改变需有设计或内容约束依据；不能因为视口变化就自动切换所有 Token 档位。字号与行高一起核对，不能用尺寸 Token 算字号。
以下仅演示页面文字与同类参数映射。它不实现控件、弹层或表单交互；这些区域仍应使用命中的组件：
```html
```
## 先确认框架，再生成实现
当前组件运行包使用 Svelte 5。目标项目可使用该组件时，按公开包导入、初始化样式与命中组件的示例组合。HTML 是最终页面语义与呈现目标，不表示 Svelte 示例可以直接粘贴进纯 HTML 或 React 项目运行。
Figma Make、Lovable 或其他在线 AI 工具应先说明其目标框架、依赖与文件能力。工具无法直接运行 Svelte 时，按 LICENSE 核对并选择允许的框架移植或适配路径，保留 SnowUI 的许可与第三方声明；不要声称已经安装或运行了不存在的跨框架组件。在线工具通过上述公开链接读取所需资料，不依赖维护者电脑中的文件路径。免费许可与付费凭证的阶段复核仍遵循 LICENSE；提示词里的计划文字本身不等于已核验授权。
## 以差异清单完成还原
每个关键区域记录“设计来源 → 组件 / API → Token / 页面结构”。对不能映射的颜色、几何、状态或交互，分别标明缺少证据、缺少公开能力或框架不兼容，并说明影响。不能通过换一个近似色、任意间距或页面私有补丁把差异隐藏。
验证实际渲染页面的结构、内容、布局、padding 所有权、对齐与视觉细节，再验证窄屏、长文本、浅深主题及必要的 hover、focus、disabled、loading 等状态。截图只证明记录的视口、主题与状态；代码通过检查不能代替实际页面验收。
## 完整颜色映射
[AI · 颜色映射 JSON](https://snowui.dev/llms/figma-colors.json) 包含 Figma 别名、当前 CSS 变量、可用语义色与各主题声明。值从现行 CSS 读取，不把浅色 HEX 当作唯一值。
## Figma 社区与设计资料
[SnowUI Design System 社区获取入口](https://www.figma.com/community/file/1388431032861751537)、[公开组件／变量对照](https://snowui.dev/llms/figma-map.md)及[设计系统资料关系](https://snowui.dev/llms/design-system-resources.md)分别按需读取。社区资源、组件公开参考文件与付费订单指定文件是独立入口；获取条件以社区页及已验证订单为准。用户修改自己的副本时提供副本 URL，按页面或集合、名称、类型、mode 与当前值重新定位；原文件 ID 不会自动沿用。