Read a Figma .fig export directly, with no Figma app, account or API, and convert the frames you name into responsive vanilla HTML/CSS/JS. Extracts structure, text, tokens, images, vector artwork and the designer's annotations; checks the result against 1:1 PNG exports; writes the same handoff package as sp-site-design-harness (DESIGN.md, decisions.md, views.md and a source/ folder), with a log of every annotation beside it, which html-to-block-theme builds from.
6 on GitHubby Automattic Special Projectsv0.4.0MITupdated todaydevelopment-tools
/
Plugin fig-to-html from marketplace a8cteam51-claude-code-plugins in a8cteam51/claude-code-plugins. Commands read from the repo's manifest — today.
What it installs
Skills (1)
fig-to-html
This skill should be used when the user asks to "convert this .fig to HTML", "build HTML from this Figma file", "turn these Figma frames into a page", "read this .fig", "make the handoff from the Figma export", or otherwise supplies a Figma `.fig` export (or a folder it was unzipped into) and wants
Three-phase Research → Design → Dev Handoff pipeline for WordPress block-theme site design — takes raw brand material to a developer-ready design system (DESIGN.md + decisions.md); does not build the theme itself, but /iterate can apply feedback to a built theme after handoff.
Convert a set of static HTML/CSS/JS design files (a handoff from sp-site-design-harness or fig-to-html, or Claude Design files), or the pages of an existing site, into a standards-driven WordPress block theme on a local Studio site, using theme.json, block styles, editable page content, and blocks from the A8C Special Projects blocks monorepo, refined to match in the browser via Claude in Chrome. Builds into A8C Special Projects project-template repositories under their conventions and CI gates. A second skill holds later changes to a theme it built to the same standards, and ends each with the standards audit.
Back a local WordPress Studio site with a GitHub repo. Scaffold a brand-new site whose wp-content is a fresh clone, convert an existing site's wp-content into a clone while preserving uploads and the SQLite database, or mirror a hosted Pressable/WPCOM site locally — plugins, database, and media fallback — via the team51 CLI.
Design a WordPress page with Claude on your own computer as a single full-width Custom HTML block, with a local preview, checks, and undo, then move it to the site through your logged-in Chrome: no password or connection setup, a choice of AI Canvas page templates (with the site's header and footer, or the page alone) created on first use, and a draft to review before it goes live.
Extract images and design context from the current Figma selection over Figma desktop's local Dev Mode MCP connection. Downloads referenced assets (PNG/JPG/GIF/WEBP/SVG), a screenshot, and the design context to a local folder.
Run the Poseidon plan and implement agents locally in your Claude Code session on the model you choose, instead of via GitHub Actions. Fetches the live upstream instructions from a8cteam51/poseidon-actions each run (always up to date) and swaps the OpsOasis MCP gateway for your local team51 MCP.
Collection of example skills demonstrating various capabilities including skill creation, MCP building, visual design, algorithmic art, internal communications, web testing, artifact building, Slack GIFs, and theme styling
tasteskill 2.5.1: professional company websites at the figma.com and x.ai level, with one section per screen, real photographs, real product UI, effects kept for tech and gaming pages, and a real-browser checker and finish gate.
Build, preview, and test UI components with Storybook.
7 skills
storybookjs/storybook 91,552
Maintain fig-to-html?
This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.