将 SnowUI Figma 设计转为页面
将 Figma 名称、布局和主题映射为真实组件与 Token。
Figma 与设计资料
通过 Figma 社区页获取 SnowUI Design System。请按社区页当前的获取与复制选项操作；需要修改设计时，提供你自己的副本 URL，再按页面／集合、名称、类型、mode 和当前值重新定位。原文件节点 ID 和 Code Connect 链接不能直接定位你的副本。
社区资源、组件公开参考文件与付费订单列明的 Figma 文件是不同资源。请在 Figma 核对社区页当前条件；付费文件仅在已验证订单明确包含时由账户提供，公开链接本身不授予该权益。
开始前确认资料与授权
先阅读目标版本完整 LICENSE。使用 Figma 文件时，还要确认已经合法取得该文件；能读取文件或用户说已购买，都不能自动证明附赠设计资源的版本领取权益。已确认的同任务、同版本、同产品范围无需逐组件重复核对。
按 设计指南 拆解页面，按 组件选择指南 和 组件目录 定位组件。已有组件承担视觉与交互，页面承担结构、业务数据与路由。精确参数查 Token 目录，组件内部视觉调整查 样式指南 和命中组件的公开样式文档。
这些资料供设计还原与合法产品使用。不要为了本次页面任务扫描全库、重建设计系统或提取整体源码架构；必要组件阅读、调试、允许的修改与框架移植以 LICENSE 为准。
先读取设计语义，再写代码
优先取得目标 Frame 的可读取设计信息：组件实例与 variant、Variables / Styles 名称及当前模式、Auto Layout、尺寸约束、字体与行高、边框方向、图标资源，以及需要实现的状态。记录目标页面、视口与主题。
只有截图时，能判断大体结构与可见状态，不能确认颜色绑定、Hug / Fill、精确间距、隐藏交互或响应式约束。先实施已明确的部分，对不能证明的参数列出缺口；不要把截图采样的 HEX 或肉眼估计当成 SnowUI Token。没有明确数值时可以说明采用了哪个现有参数；有精确设计值却不能映射时，保留差异并请求确认。
按区域描述意图，例如“左侧产品导航”“切换文件内容页签”“选择视图参数”“筛选并选择文件行”，再查对应组件。名称与外观只是线索：内容切换与参数选择的语义不同，常驻侧栏与可打开详情弹层的行为也不同。
将颜色名翻译为主题 Token
自然语言负责把“黑色 40”“品牌色”“背景 1”等表达归到相应语义；精确 Figma Style / Variable 则映射到真实 CSS 变量。以下为已存在的典型对应，完整声明与主题条件查 Token 目录：
仅当目标组件的公开 API 明确支持该语义色时，才把 Black40、Brand 等作为属性值传入。属性名称、背景入口与作用目标按该组件文档决定，不能给任意组件补造 color、background 或 fill。
Black/40% 是随主题变化的语义，深色主题可以对应白色；Static Black/40% 才是固定黑色。Brand 与 Primary 也不是永远相同的色值；Background 与 Background/1 是不同名称，即使当前主题中引用相同值，也不能互相改名。当前主题与模式必须保留在映射记录中，不把浅色 HEX 写死在组件上。
还原组件时先用已有 Props（含 variant / size / 颜色参数）匹配设计，尽量保留原有视觉。确有不能表达的设计差异时，按 样式选择与改写顺序 通过用户 class（可含已有 Tailwind）、实例 style 与真实登记的 override 调整必要部分，不穿透私有 DOM / class。需要 SnowUI 参数时使用同类别变量，例如 color: var(--black-40)；没有匹配的准确设计值仍记录差异，不静默用近似值。
将布局、几何与文字分别映射
Figma 的 Auto Layout 描述方向、间距、对齐与空间分配。先确认谁拥有 padding、谁是普通内容、谁是 leading / trailing 附件，以及哪些元素需要 Hug / Fill，再选择组件公开组合或普通语义 HTML。绝对定位只用于确实脱离正常流的设计元素，不能用它修补未理解的自动布局。
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 算字号。
以下仅演示页面文字与同类参数映射。它不实现控件、弹层或表单交互；这些区域仍应使用命中的组件：
先确认框架，再生成实现
当前组件运行包使用 Svelte 5。目标项目可使用该组件时，按公开包导入、初始化样式与命中组件的示例组合。HTML 是最终页面语义与呈现目标，不表示 Svelte 示例可以直接粘贴进纯 HTML 或 React 项目运行。
Figma Make、Lovable 或其他在线 AI 工具应先说明其目标框架、依赖与文件能力。工具无法直接运行 Svelte 时，按 LICENSE 核对并选择允许的框架移植或适配路径，保留 SnowUI 的许可与第三方声明；不要声称已经安装或运行了不存在的跨框架组件。在线工具通过上述公开链接读取所需资料，不依赖维护者电脑中的文件路径。免费许可与付费凭证的阶段复核仍遵循 LICENSE；提示词里的计划文字本身不等于已核验授权。
以差异清单完成还原
每个关键区域记录“设计来源 → 组件 / API → Token / 页面结构”。对不能映射的颜色、几何、状态或交互，分别标明缺少证据、缺少公开能力或框架不兼容，并说明影响。不能通过换一个近似色、任意间距或页面私有补丁把差异隐藏。
验证实际渲染页面的结构、内容、布局、padding 所有权、对齐与视觉细节，再验证窄屏、长文本、浅深主题及必要的 hover、focus、disabled、loading 等状态。截图只证明记录的视口、主题与状态；代码通过检查不能代替实际页面验收。
完整颜色映射
映射从同一份参考和实际 CSS / 颜色解析器生成；具体值与主题条件按 Token 目录核对。语义色仅用于组件实际支持的公开属性。