원클릭으로
1k-implementing-figma-designs
Implements Figma designs 1:1 using OneKey component library (还原设计稿).
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Implements Figma designs 1:1 using OneKey component library (还原设计稿).
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Create or regenerate a patch-package patch in this monorepo. Use when you edit anything under node_modules/ and need a persisted .patch, or when `npx patch-package <pkg>` fails with "Couldn't find any versions for ... matches ^x@x". Keywords: patch-package, patch a package, regenerate patch, resolutions error.
App-side OneKey Trade/Swap/Market guide for Swap core, Swap Pro, Market speed-swap, K-line/chart, token selectors, cold-start frame-by-frame validation, quote/build/send flows, history/status, provider channels, PrivateSend-like channels, stock-trading channels, limit/order flows, fees, slippage, ETA, and cross-module funding handoffs.
Creates a Pull Request from current changes for OneKey app-monorepo. Use when user wants to create PR, submit changes, or merge feature branch. Handles branch creation, commit, push, and PR creation with conversation context extraction for code review AI.
AI-agent-driven UI verification for OneKey. Use to actually drive the running app and confirm a visual/interactive change works — Electron desktop via Chrome DevTools Protocol (CDP) on port 9222 with playwright-core, and React Native (iOS/Android) via callstack agent-device. Triggers on "verify the UI", "drive the app", "screenshot the change", "check it on desktop/simulator", "CDP 9222", "agent-device", "UI 验证", "跑一下看看", "截图确认".
App-side OneKey DeFi guide for Earn, Borrow, Staking, vaults, lending, protocol integrations, ABI-backed operations, native/provider-backed operations, pending transactions, history, route handoffs, risk display, and DeFi regression review.
Use only for explicit OneKey Perps/Hyperliquid (`views/Perp`, ServiceHyperLiquid, perpetuals, 永续/合约, Perps trading). Covers orderbook/L2/BBO, TWAP, scale/TIF/trigger/reduce-only, Perps TradingView/K-line, Perps Relay deposit, token selector, positions/account state/PnL/funding/margin/liquidation. Exclude generic Swap/Market/TradingView; Swap Relay quote/status/pending/requestId alone is not enough unless Perps deposit/Hyperliquid/`views/Perp`/`usePerpDeposit`/`fetchPerpDeposit*`/`perpsDepositOrderAtom` is explicit.
| name | 1k-implementing-figma-designs |
| description | Implements Figma designs 1:1 using OneKey component library (还原设计稿). |
| allowed-tools | Read, Grep, Glob, Bash, Write, Edit |
This skill helps you implement Figma designs 1:1 using the OneKey component library.
When implementing Figma designs, prioritize pixel-perfect UI over data integration:
intl.formatMessageWhen you need to use a component, look up its source and demo:
packages/components/src/{category}/{ComponentName}/
Categories:
primitives/ - Button, Icon, Image, Skeleton, Spinner, Stack, Heading, SizeableTextforms/ - Input, TextArea, Select, Checkbox, Radio, Switch, Slider, Form, OTPInputactions/ - IconButton, ActionList, Alert, Toast, Popover, SegmentControl, Pagination, Tooltipcomposite/ - Dialog, Tabs, Banner, Carousel, Table, Steppercontent/ - Badge, Progress, Empty, Divider, QRCode, Markdown, LottieView, LinearGradient, BlurViewlayouts/ - Page, ScrollView, ListView, SectionList, Accordion, Swiper, SearchBarpackages/kit/src/views/Developer/pages/Gallery/Components/stories/{ComponentName}.tsx
Note: Some demos have different names (e.g., AccordionGallery.tsx, NewTabsGallery.tsx)
Read the source to understand props and structure:
Read: packages/components/src/{category}/{ComponentName}/index.tsx
Read the demo for usage examples:
Glob: packages/kit/src/views/Developer/pages/Gallery/Components/stories/*{ComponentName}*.tsx
@onekeyhq/componentsimport { 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, $iconDisabledHeadings (large to small):
$headingXxl, $headingXl, $headingLg, $headingMd, $headingSm, $headingXsBody text (large to small):
$bodyLg, $bodyMd, $bodySm, $bodyXsWith medium weight (append Medium):
$bodyLgMedium, $bodyMdMedium, $bodySmMedium, $bodyXsMediumUsage with SizableText:
<SizableText size="$bodyMd">Regular text</SizableText>
<SizableText size="$bodyMdMedium">Medium weight text</SizableText>
<SizableText size="$headingSm">Small heading</SizableText>
Layout with Stack:
<YStack gap="$4"> {/* Vertical */}
<XStack gap="$4"> {/* Horizontal */}
<Stack gap="$4"> {/* Default vertical */}
Mock Data:
const mockItems = [
{ name: 'Bitcoin', symbol: 'BTC', value: '$21,432.50' },
{ name: 'Ethereum', symbol: 'ETH', value: '$5,892.30' },
];
Button Actions:
<Button onPress={() => console.log('clicked')}>Action</Button>