implementing-figma-designs

用途：本技能帮助开发者在 OneKey 组件库基础上，按 Figma 设计稿进行 1:1 还原（还原设计稿）。核心原则是“先 UI 后数据”，优先追求像素级还原，而非数据集成。实施时使用与设计一致的模拟数据（直接硬编码），跳过 i18n（直接用设计中的纯字符串，不用 intl.formatMessage），跳过 API 调用，专注视觉准确、间距、颜色与布局。不必关心数据来源、不添加翻译键（ETranslations）、不创建 API 集成或取数 hooks、不引入复杂状态管理。应做的：照 Figma 原文硬编码文本；创建与设计匹配的模拟数据数组或对象；关注组件结构与样式；匹配设计中的间距、颜色与排版。组件查找采用按需方式：源码位置模式为 packages/components/src/{category}/{ComponentName}/，分类包括 primitives、forms、actions、composite、content、layouts；示例位置模式为 packages/kit/src/views/Developer/pages/Gallery/Components/stories/{ComponentName}.tsx（部分示例名称不同，如 AccordionGallery.tsx、NewTabsGallery.tsx）。查组件时先读 index.tsx 了解 props 与结构，再用 glob 匹配示例。所有导入来自 @onekeyhq/components。可用间距、颜色、字号 token，如 $1=4px 至 $10=40px，文本色 $text/$textSubdued/$textDisabled，背景 $bg/$bgSubdued/$bgHover/$bgActive，边框与图标色 token，字号 $headingXxl 到 $bodyXs 及 Medium 变体，配合 SizableText 使用。常见模式：用 YStack/XStack/Stack 加 gap 布局，用 mockItems 等模拟数据，按钮用 onPress 占位动作。工作流：用 Figma MCP 分析设计、确定所需组件、按需读取源码与示例、创建匹配模拟数据、以硬编码值实现 UI。限制：资料未提供收费、价格、平台、效果或额外使用步骤，暂未提供。