figma-implement-design SKILL.md skillA

figma-implement-design from seaworld008/commonly-used-high-value-skills is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.

Install it, pinned
mdr add seaworld008/commonly-used-high-value-skills/figma-implement-design@v1.0.1

Pins v1.0.1 in mdr.lock. Pin the fingerprint instead.

Audit grade
A, 17 of 17 checks passed
Kind
SKILL.md skill
Repository
seaworld008/commonly-used-high-value-skills
Path
openclaw-skills/figma-implement-design/SKILL.md
Versions recorded
5
Latest version
v1.0.1, committed Sep 6, 2026
First version recorded
Mar 27, 2026
Size
11,933 bytes
Repository stars
73
License
MIT

Implement UI from Figma URLs or node IDs with visual fidelity, project conventions, and design assets. Requires an available Figma MCP connection.

Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.

What the file says

# Implement Design

## When to Use

Use this skill when the user wants to:

- implement a Figma frame or component in code
- translate a Figma node into production-ready UI
- match an existing design with high visual fidelity
- bridge design tokens and project conventions during implementation

## Usage

Recommended flow:

```text
identify target node
-> fetch design context and screenshot
-> gather assets
-> translate into project conventions
-> validate against Figma
```

## Overview

This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.

## Prerequisites

- Figma MCP server must be connected and accessible
- User must provide a Figma URL in the format: `https://figma.com/design/:fileKey/:fileName?node-id=1-2`
  - `:fileKey` is the file key
  - `1-2` is the node ID (the specific component or frame to implement)
- **OR** when using `figma-desktop` MCP: User can select a node directly in the Figma desktop app (no URL required)
…

Read the whole file at its exact version.

How to install

The exact contents, by fingerprint
mdr add seaworld008/commonly-used-high-value-skills/figma-implement-design@sha256:63066764bb4d239d

The line at the top of this page pins the label v1.0.1, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.

Badge

mdr badge

[![mdr](https://markdownregistry.com/badge/art_4tgmgirybtv2y6s3.svg)](https://markdownregistry.com/a/art_4tgmgirybtv2y6s3)

1 badge image fetches in 30 days. What the badge shows.

Versions

The registry has recorded 5 versions of this file, between Mar 27, 2026 and Sep 6, 2026, about one every 41 days.

versioncommittedcommitsizeaudit
v1.0.1 latest2026-09-06 e36bbe4 11,933 BA view · diff
v1.0.02026-06-29 f17e969 12,139 BA view · diff
v1.0.02026-04-18 4383c12 12,053 BA view · diff
v1.0.02026-04-13 dd6ab7d 12,186 BA view · diff
v1.0.02026-03-27 0b34652 11,727 BA view

Audit of the latest version

A  17 of 17 checks passed. Fixed automatic checks with no AI involved, so the same checks give the same answer every run.
  • pass: Frontmatter block present
  • pass: Frontmatter declares a name
  • pass: Frontmatter declares a description
  • pass: Size between 200 bytes and 200 KB (11933 bytes)
  • pass: No zero-width or bidi control characters
  • pass: No instruction hidden inside an HTML comment
  • pass: No link to an exfiltration or paste host
  • pass: No credential-shaped string
  • pass: No instruction to send local credentials anywhere
  • pass: No text hidden with inline styles
  • pass: No prompt-injection phrasing
  • pass: No curl or wget piped into a shell
  • pass: No recursive delete of root, home or parent
  • pass: No instruction to read or print local credentials
  • pass: No base64 blob over 200 characters
  • pass: No link to a raw IP address
  • pass: No script tag

Source

GitHub

seaworld008/commonly-used-high-value-skills · 73 stars · license MIT · pushed 2026-10-19 · branch main

API

GET https://markdownregistry.com/api/v1/artifacts/art_4tgmgirybtv2y6s3
GET https://markdownregistry.com/api/v1/resolve?ref=seaworld008/commonly-used-high-value-skills/figma-implement-design
GET https://markdownregistry.com/api/v1/blob/63066764bb4d239dae61110c55880f0ab7ac3d187f501bf8bde74eeb4eb908a7

Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.

Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.

More from seaworld008/commonly-used-high-value-skills

AGENTS.md AGENTS.md file
seaworld008/commonly-used-high-value-skills · AGENTS.md
git:20260907.7aad3b0 · audit A · 73 stars
CLAUDE.md CLAUDE.md file
seaworld008/commonly-used-high-value-skills · CLAUDE.md
git:20260907.7aad3b0 · audit A · 73 stars
agent-browser SKILL.md skill
seaworld008/commonly-used-high-value-skills · openclaw-skills/agent-browser/SKILL.md · Use when an agent needs real browser automation for semantic element targeting, form interaction, screenshots…
v1.0.0 · audit A · 73 stars
agent-designer SKILL.md skill
seaworld008/commonly-used-high-value-skills · openclaw-skills/agent-designer/SKILL.md · Design AI agent responsibilities, tools, memory, orchestration, and evaluation when defining an agent architecture or…
v1.0.2 · audit A · 73 stars
CLAUDE.md@openclaw-skills/agent-hub CLAUDE.md file
seaworld008/commonly-used-high-value-skills · openclaw-skills/agent-hub/CLAUDE.md
git:20260424.86f3732 · audit A · 73 stars
agent-hub SKILL.md skill
seaworld008/commonly-used-high-value-skills · openclaw-skills/agent-hub/SKILL.md · Compare independent solutions with agent-hub when parallel competition is requested; isolate Git worktrees, evaluate…
v1.0.11 · audit A · 73 stars
agent-workflow-designer SKILL.md skill
seaworld008/commonly-used-high-value-skills · openclaw-skills/agent-workflow-designer/SKILL.md · Design agent orchestration, handoffs, state, recovery, and evaluation when a workflow needs multiple coordinated agents…
v1.1.1 · audit A · 73 stars
agile-product-owner SKILL.md skill
seaworld008/commonly-used-high-value-skills · openclaw-skills/agile-product-owner/SKILL.md · Manage product backlogs and sprints: user stories, acceptance criteria, epic breakdown, prioritization, estimates, and…
v1.0.1 · audit A · 73 stars
algorithmic-art SKILL.md skill
seaworld008/commonly-used-high-value-skills · openclaw-skills/algorithmic-art/SKILL.md · Create original generative art with p5.js, seeded randomness, flow fields, particles, and interactive parameters when…
v1.0.1 · audit B · 73 stars
andrej-karpathy-skills SKILL.md skill
seaworld008/commonly-used-high-value-skills · openclaw-skills/andrej-karpathy-skills/SKILL.md · Karpathy-inspired coding discipline for AI agents: think before coding, keep changes simple, edit surgically, and…
v1.0.0 · audit A · 73 stars
api-and-interface-design SKILL.md skill
seaworld008/commonly-used-high-value-skills · openclaw-skills/api-and-interface-design/SKILL.md · Design REST/GraphQL APIs, module interfaces, and type contracts when creating endpoints or changing public boundaries.
v1.0.4 · audit A · 73 stars
api-design-reviewer SKILL.md skill
seaworld008/commonly-used-high-value-skills · openclaw-skills/api-design-reviewer/SKILL.md · Use when reviewing API designs for consistency, usability, versioning, error semantics, security, backward…
v1.0.0 · audit A · 73 stars

Every file in seaworld008/commonly-used-high-value-skills

Other files named figma-implement-design

figma-implement-design SKILL.md skill
foryourhealth111-pixel/vibe-skills · bundled/skills/figma-implement-design/SKILL.md · Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context…
git:20260430.7b44f5f · audit A · 3,758 stars
figma-implement-design SKILL.md skill
vodailocz/kilo-kit-mcp · skills/design/figma-implement-design/SKILL.md · Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context…
git:20260502.38d5305 · audit A · 28 stars
figma-implement-design SKILL.md skill
ulises-jeremias/agent-toolkit · plugins/agent-toolkit-complete/.github/skills/figma-implement-design/SKILL.md · Translates Figma designs into production-ready application code with 1:1 visual fidelity.
git:20260831.856ee57 · audit A · 19 stars
figma-implement-design SKILL.md skill
ulises-jeremias/agent-toolkit · plugins/agent-toolkit-complete/.opencode/skills/figma-implement-design/SKILL.md · Translates Figma designs into production-ready application code with 1:1 visual fidelity.
git:20260831.856ee57 · audit A · 19 stars
figma-implement-design SKILL.md skill
sutchan/agent-skills-hub · skills/figma-implement-design/SKILL.md · 将 Figma 设计稿转换为可交付的生产级应用代码,保持 1:1 视觉还原。当用户要做设计到代码的实现、提到「实现设计」「生成代码」「实现组件」、提供 Figma 链接或要求按 Figma 规范构建组件时触发;Figma 画布写操作请用…
git:20261007.ab00264 · audit A · 2 stars

Browse by kind, by grade A, or by owner.