skills.rest
rnny66
rnny66COMMUNITY
Explore all skills by this author →
GitHub

ocp-figma-to-code

Translate Figma designs into OPC-compliant HTML and CSS with token mapping.

Updated Aug 23, 2026
Search Tags:#html#responsive design#design system#css#figma#tokens#ui development
One-click install
npx skills add https://github.com/rnny66/OPC --skill ocp-figma-to-code
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ocp-figma-to-code
Source: https://github.com/rnny66/OPC/tree/main/.claude/skills/ocp-figma-to-code
Command: npx skills add https://github.com/rnny66/OPC --skill ocp-figma-to-code

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of converting visual designs from Figma into functional HTML and CSS code that adheres to the OPC project's established design system and tokenization.

Core Features & Use Cases

  • Design-to-Code Translation: Converts Figma designs into semantic HTML and BEM-patterned CSS.
  • Token Mapping: Ensures all colors, radii, and spacing align with the OPC project's CSS custom properties.
  • Component Identification: Prioritizes the use of existing reusable components to maintain consistency.
  • Animation & Responsiveness: Implements scroll animations and responsive design adjustments as per the design specifications.
  • Use Case: When a designer provides a Figma link for a new feature page, this Skill can be used to generate the initial HTML and CSS structure, ensuring it matches the design precisely and uses the correct project tokens.

Quick Start

Use the ocp-figma-to-code skill to translate the Figma design at https://www.figma.com/design/example into HTML and CSS for the OPC project.

Frequently Asked Questions about ocp-figma-to-code

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

FAQPage Schema
How do I convert Figma designs to HTML and CSS using existing design tokens?▼

This Skill translates Figma designs into semantic HTML and BEM CSS by mapping visual elements to existing CSS custom properties for colors, radii, and spacing.

Can I generate responsive UI code from a Figma screenshot?▼

Yes, you can generate responsive UI code from a Figma screenshot. The Skill processes visual specifications to implement responsive design adaptations and scroll animations.

Does the generated CSS follow the BEM methodology?▼

Yes, the generated CSS follows the BEM methodology. The Skill outputs BEM-patterned CSS to ensure structured styling alongside semantic HTML for UI development.

How to ensure Figma to code translation reuses existing UI components?▼

To ensure Figma to code translation reuses existing components, the Skill identifies and prioritizes existing reusable components during the design-to-code mapping process to maintain consistency.

What is the best way to map Figma colors and spacing to a design system?▼

The best way to map Figma colors and spacing to a design system is using token mapping, which aligns all visual design properties with established CSS custom properties.

Related Skills

Explore More Design & Creative Skills→
MatheusrlrMatheusrlr
1

figma-implement-design

Translate Figma designs into production-ready code with visual fidelity.

Community
Advanced
angelriera-devangelriera-dev

web-design-methodology

Standardize production-grade HTML/CSS with BEM naming, semantic tokens, and responsive breakpoints.

Community
Advanced
p-o-ke-naep-o-ke-nae

design-system-patterns

Build design system foundations with tokens, theming, and component architecture.

Community
Advanced
tdiminotdimino
41

figma-mcp

Convert Figma designs into HTML, CSS, React, or Vue code.

Community
Advanced