skills.rest
tmcfarlane
tmcfarlaneCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

implementing-figma-designs

Implement Figma designs pixel-perfectly using OneKey components with mock data.

105|12|Updated Feb 7, 2026
Search Tags:#figma#pixel-perfect#mock-data#ui-implementation#component-library#design-workflow
One-click install
npx skills add https://github.com/tmcfarlane/oh-my-cursor --skill implementing-figma-designs-tmcfarlane
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: implementing-figma-designs
Source: https://github.com/tmcfarlane/oh-my-cursor/tree/main/skills/implementing-figma-designs
Command: npx skills add https://github.com/tmcfarlane/oh-my-cursor --skill implementing-figma-designs-tmcfarlane

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reproduce Figma designs 1:1 by leveraging the OneKey component library to deliver pixel-perfect UI implementations that preserve design intent.

Core Features & Use Cases

  • Pixel-perfect UI recreation from Figma designs using OneKey components.
  • Guiding principles for UI-first development, using mock data and avoiding API calls during prototyping.
  • Use Case: A designer provides a Figma spec and developers reproduce the UI with exact spacing, typography, and colors.

Quick Start

Replicate a provided Figma design pixel-for-pixel using the OneKey component library, and hardcode mock data for UI elements to validate layout.

Frequently Asked Questions about implementing-figma-designs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement pixel-perfect UI from Figma designs?▼

To implement pixel-perfect UI from Figma designs, use the OneKey component library to recreate exact spacing, typography, and colors. This workflow ensures 1:1 design reproduction while preserving the original design intent without manual CSS guesswork.

Do I need a specific component library to reproduce Figma designs accurately?▼

Yes, pixel-perfect UI recreation requires the OneKey component library. It provides the exact components needed to match Figma design specifications precisely, ensuring that layout, spacing, and visual properties translate accurately into code.

Should I connect real APIs when prototyping UI from Figma?▼

No, you should not connect real APIs during UI prototyping. The workflow uses hardcoded mock data exclusively to validate layout and visual elements, ensuring the UI implementation remains isolated and true to the Figma design spec.

What is the best way to validate layout when translating a Figma spec to code?▼

The best way to validate layout is by hardcoding mock data for UI elements within the OneKey component library. This approach allows you to test visual fidelity and precise spacing against the Figma design without backend integration dependencies.

Can I use this UI-first development workflow for exact spacing and typography recreation?▼

Yes, this UI-first development workflow is designed specifically for exact spacing and typography recreation. By leveraging the OneKey component library, developers can match Figma specifications pixel-for-pixel while using mock data to confirm visual accuracy.

Related Skills

Explore More Design & Creative Skills→
niallr12niallr12

review-design

Audit a component's CSS properties and resolved design tokens against its Figma source via MCP server.

Community
Advanced
wanghaishengwanghaisheng

implementing-figma-designs

Translate Figma designs into React UIs using the OneKey component library.

Community
Intermediate
umbracoumbraco
26

umbraco-mocked-backoffice

Mock Umbraco backoffice API calls with MSW for visual testing.

Official
Intermediate
easingthemeseasingthemes
6

dx-figma-prototype

Generate a standalone HTML/CSS prototype from Figma extraction data.

Community
Advanced