Dom2figma banner
swrneko swrneko

Dom2figma

Design community
SOURCE https://github.com/swrneko/dom2figma

Description

Capture rendered web prototypes with headless Chrome and import them into Figma as editable layers. Whole prototype in one run: routes × app states, dedupe, fonts that match. Single Rust binary for Linux/macOS + Figma plugin + Claude Code skill.

Installation

This entry records only its repository, not the path inside it, so there is no exact command to give. Open the source below and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

README

🎨 dom2figma

![Rust](https://img.shields.io/badge/Rust-2021-000000?style=for-the-badge&logo=rust&logoColor=white) ![Chrome DevTools](https://img.shields.io/badge/Chrome-DevTools_Protocol-4285F4?style=for-the-badge&logo=googlechrome&logoColor=white) ![Figma](https://img.shields.io/badge/Figma-Plugin_API-F24E1E?style=for-the-badge&logo=figma&logoColor=white) ![Claude Code](https://img.shields.io/badge/Claude_Code-Plugin-D97757?style=for-the-badge&logo=anthropic&logoColor=white) ![Platforms](https://img.shields.io/badge/Linux_|_macOS-single_binary-333333?style=for-the-badge&logo=linux&logoColor=white) ![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)

[![CI](https://img.shields.io/github/actions/workflow/status/swrneko/dom2figma/ci.yml?style=for-the-badge&label=CI)](https://github.com/swrneko/dom2figma/actions/workflows/ci.yml) [![Release](https://img.shields.io/github/v/release/swrneko/dom2figma?style=for-the-badge&label=Release)](https://github.com/swrneko/dom2figma/releases)

**Turn any rendered web prototype into editable Figma layers. Dozens of screens, every app state, one command.** *Headless Chrome captures the DOM, a Figma plugin rebuilds it as frames, text and vectors.*

[English](README.md) · [Русский](docs/i18n/README.ru.md) · [简体中文](docs/i18n/README.zh-CN.md) · [日本語](docs/i18n/README.ja.md) · [한국어](docs/i18n/README.ko.md) · [Deutsch](docs/i18n/README.de.md) · [Español](docs/i18n/README.es.md) · [Français](docs/i18n/README.fr.md) · [Português](docs/i18n/README.pt-BR.md)

📖 About

**dom2figma** is a command-line tool that captures what the browser actually renders, not the HTML source, and moves it into Figma as real layers: frames with fills, strokes, radii and shadows, text layers with fonts and alignment, SVG icons as vectors.

Unlike plugins such as html.to.design, it is built for **whole prototypes**: it walks a list of routes, switches application states (personas, roles, themes)

Related Skills

Algorithmic Art preview

Algorithmic Art

Create generative art using p5.js with seeded randomness, flow fields, and particle systems

Anthropic Design
Brand Guidelines preview

Brand Guidelines

Apply Anthropic's official brand colors and typography to artifacts

Anthropic Design
Canvas Design preview

Canvas Design

Create beautiful visual art in PNG and PDF documents using design philosophy

Anthropic Design
Frontend Design preview

Frontend Design

Create distinctive, production-grade frontend interfaces with high design quality

Anthropic Design
Slack Gif Creator preview

Slack Gif Creator

Create animated GIFs optimized for Slack's size constraints

Anthropic Design
Theme Factory preview

Theme Factory

Style artifacts with professional themes including 10 pre-set color/font combinations

Anthropic Design

Related Agents

Codemod Runner

Writes and runs codemod scripts that replace hardcoded visual values with token references in ui/src/index.css

Design agent

Designguru

Expert Design Guidance & Analysis Specialist who provides professional UI/UX insights, design system guidance,

Design agent

Html Css

| Web standards for semantic markup, maintainable styling, and accessibility. | - | [wshobson/agents](https://

Design agent