mcpField
I
implementing-figma-designs

implementing-figma-designs

github.com/onekeyhq设计与 UI2.5k77 次安装今天更新
代码仓库

关于 implementing-figma-designs

Implementing Figma Designs 是使用 OneKey 组件库按像素精度实现 Figma 界面的技能，强调先用模拟数据匹配布局和样式，再处理 API 或本地化。

主要功能

  1. 01使用 OneKey 组件实现 Figma 设计
  2. 02优先保证视觉准确而非数据集成
  3. 03使用模拟数据和硬编码文本
  4. 04查阅组件源码与演示
  5. 05应用间距、颜色和字体令牌

适用场景

  1. 01根据 Figma 设计构建界面
  2. 02使组件样式符合设计稿
  3. 03在 API 集成前制作界面原型

MCP 相关

工作流先通过 Figma MCP 分析设计，再识别并查阅所需组件。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/onekeyhq/app-monorepo --skill implementing-figma-designs

安装后在 Claude Code 中输入/implementing-figma-designs确认已加载。

详细介绍

实现 Figma 设计

此技能可帮助你使用 OneKey 组件库 1:1 实现 Figma 设计。

核心原则

先关注 UI，再处理数据

实现 Figma 设计时，优先保证 像素级精确的 UI，而不是集成数据：

  1. 使用模拟数据 - 硬编码与设计完全一致的数据
  2. 跳过 i18n - 直接使用设计中的纯文本，不使用 intl.formatMessage
  3. 跳过 API 调用 - 当前阶段无需获取真实数据
  4. 匹配设计 - 专注于视觉精确度、间距、颜色和布局
不要做的事
  • 不必考虑数据来源
  • 不要添加翻译键（ETranslations）
  • 不要创建 API 集成或用于获取数据的钩子
  • 不要添加复杂的状态管理
要做的事
  • 按照 Figma 中显示的内容精确硬编码文本
  • 创建与设计相匹配的模拟数据数组/对象
  • 专注于组件结构和样式
  • 匹配设计中的间距、颜色和字体排版

组件查找（按需）

需要使用组件时，查找其源代码和演示：

源代码位置格式
packages/components/src/{category}/{ComponentName}/

分类：

  • primitives/ - Button、Icon、Image、Skeleton、Spinner、Stack、Heading、SizeableText
  • forms/ - Input、TextArea、Select、Checkbox、Radio、Switch、Slider、Form、OTPInput
  • actions/ - IconButton、ActionList、Alert、Toast、Popover、SegmentControl、Pagination、Tooltip
  • composite/ - Dialog、Tabs、Banner、Carousel、Table、Stepper
  • content/ - Badge、Progress、Empty、Divider、QRCode、Markdown、LottieView、LinearGradient、BlurView
  • layouts/ - Page、ScrollView、ListView、SectionList、Accordion、Swiper、SearchBar
演示位置格式
packages/kit/src/views/Developer/pages/Gallery/Components/stories/{ComponentName}.tsx

注意：有些演示使用了不同的名称（例如 AccordionGallery.tsx、NewTabsGallery.tsx）

如何查找组件

  1. 阅读源代码以了解属性和结构：

    Read: packages/components/src/{category}/{ComponentName}/index.tsx

  2. 阅读演示以查看使用示例：

    Glob: packages/kit/src/views/Developer/pages/Gallery/Components/stories/*{ComponentName}*.tsx

快速参考

所有导入均来自 @onekeyhq/components
import { Button, Stack, XStack, YStack, Icon, ... } from '@onekeyhq/components';
间距令牌
  • $1 = 4px，$2 = 8px，$3 = 12px，$4 = 16px
  • $5 = 20px，$6 = 24px，$8 = 32px，$10 = 40px
颜色令牌
  • 文本：$text、$textSubdued、$textDisabled
  • 背景：$bg、$bgSubdued、$bgHover、$bgActive
  • 边框：$border、$borderSubdued、$borderActive
  • 图标：$icon、$iconSubdued、$iconDisabled
字体大小令牌

标题（从大到小）：

  • $headingXxl、$headingXl、$headingLg、$headingMd、$headingSm、$headingXs

正文文本（从大到小）：

  • $bodyLg、$bodyMd、$bodySm、$bodyXs

中等字重（追加 Medium）：

  • $bodyLgMedium、$bodyMdMedium、$bodySmMedium、$bodyXsMedium

与 SizableText 搭配使用：

<SizableText size="$bodyMd">Regular text</SizableText>
<SizableText size="$bodyMdMedium">Medium weight text</SizableText>
<SizableText size="$headingSm">Small heading</SizableText>
常见模式

使用 Stack 布局：

<YStack gap="$4">        {/* Vertical */}
<XStack gap="$4">        {/* Horizontal */}
<Stack gap="$4">         {/* Default vertical */}

模拟数据：

const mockItems = [
  { name: 'Bitcoin', symbol: 'BTC', value: '$21,432.50' },
  { name: 'Ethereum', symbol: 'ETH', value: '$5,892.30' },
];

按钮操作：

<Button onPress={() => console.log('clicked')}>Action</Button>

工作流

  1. 使用 Figma MCP 分析 Figma 设计
  2. 确定所需组件
  3. 查找每个组件 - 按需阅读源代码和演示
  4. 创建与设计相匹配的模拟数据
  5. 使用硬编码值实现 UI

评论

支持 Markdown