Will "Try it Free" work for this skill?

No. Agensi's free trial runs on its own servers, which have neither your machine nor a Figma connection. Buy the skill and run it on your own machine; the example session above shows what a real run produces.

Do I need figma-workflow as well?

No. A copy of figma-workflow is included and used for the implementation phases. If you already have figma-workflow installed, that copy is used instead, because it may be newer.

What does it download?

The starter for the stack you choose, cloned from the author's public GitHub repositories, and the dependencies from the package registry. It clones the latest version of the starter.

Can I use it in a project I already have?

Yes. If the current directory already has a package.json, it asks whether to use that project. It then skips the starter, asks for the page file to write, and asks before writing tokens into your theme or regenerating an existing DESIGN.md.

Which stacks does it support?

Astro 7, React 19 with TanStack Router, and plain HTML with Vite and TypeScript, all with Tailwind CSS v4.

Do I need figma-audit?

No. It is optional. If it is installed, the skill offers a quality check before building; if not, that step is skipped without a message.

Does it work with agents other than Claude Code?

It was written for and tested on Claude Code only. It is plain Markdown, so you can ask your own agent to adapt it: the Agent and Skill tools, the skill lookup paths and the Figma MCP tool names.

Works with the AI tools you already use

+22 more

+18 agents

Figma Pipeline — From Figma URL to a Running Page

Give it a Figma URL and it builds the project for you: clones an Astro, React or plain-HTML starter, moves your Figma variables into Tailwind, implements and reviews the design in phases, and starts the dev server.

$19

Secure checkout via Stripe

30-day refund guarantee

Converts to your local currency at checkout

Security scanned

Figma Pipeline — From Figma URL to a Running Page

Example session with this skill installed

/figma-pipeline https://www.figma.com/design/QZhp5dSdNjU2fdjCiKkqyA/figma-enhance?node-id=10-2 skills-demo/figma-pipeline-demo

Read your context and instructions
Compiled the figma pipeline
Generated the app files

The starting point was an empty folder and a Figma frame: a 1440 × 3365 landing page for a private-villa resort (header, hero, villa spaces, location, reservation, footer) that had already been tidied and componentized in Figma. In one run the skill checked the frame, created an Astro project, moved the Figma variables into Tailwind, generated a DESIGN.md, implemented the page in four phases, and started the dev server.

1. Quality check

figma-audit scored the frame 16 / 20 (layer naming 4, auto layout 4, variables 4, components 4), above the 13-point threshold, so the run continued. Its suggestions: give the villa card's inner layers neutral names, turn the corner radius and opacity values into variables, and make the three section labels one component.

2. Project setup

Cloned the Astro 7 + Tailwind 4 starter, installed the dependencies with pnpm, added sharp for image optimization, and made the first git commit. The starter already carries a CLAUDE.md, AGENTS.md and the helper skills used in the next steps.

3. Figma variables into Tailwind

Read 3 variable collections (34 variables) and 23 text styles from the Figma file and wrote them to @theme in src/styles/global.css.

Group	Tokens
Colors	11
Spacing	16, renamed to `--spacing-fig-N`
Font sizes	7
Font families	3
Font weight, line height, letter spacing (from text styles)	23 + 23 + 6

Two name collisions with Tailwind's own scale were caught before writing: every spacing/N would have overridden Tailwind's default --spacing-N for the whole project, so all 16 were renamed; neutral/100 matched Tailwind's default neutral palette and became --color-neutral-fig-100.

4. DESIGN.md

Generated from the Figma file (colors, typography, shapes, components, do's and don'ts) and checked with the design.md linter: 0 errors, 0 warnings.

5. Implementation (figma-workflow, four phases)

Phase 1, implementation: replaced the starter page with the full landing page. 4 components (SiteHeader, SiteFooter, VillaCard, CtaButton), 5 images saved locally as webp and used through Astro's <Image />, no Figma asset URL left in the code. It reused the tokens from step 3 and added none.
Phase 2, review: compared the result with the Figma screenshot of the same node and found nothing to fix. Page height is 3364px against 3365px in Figma.
Phase 3, optimization: the three section labels became one SectionEyebrow component, and repeated corner-radius and touch-target values moved into 3 new @theme tokens.
Phase 4, Tailwind review: pixel values that divide cleanly by 4 became scale classes (h-[760px] became h-190), and duplicate width and height classes were removed.

Final state

Check	Result
`astro check`	0 errors, 0 warnings, 0 hints
Biome `check`	no fixes needed
`build`	succeeds, 1 page
`data-node-id` in the built HTML	110, all unique
Figma asset URLs left in code	0
Dev server	running at `http://localhost:4321`

What was not checked

The Figma file only has a 1440px frame, so the page is desktop-only; at a 500px viewport it scrolls horizontally, and the skill does not invent responsive behavior the design does not specify. Color contrast and keyboard navigation were reviewed by reading the code, not measured. The language and footer links are placeholders, because the design has no destinations for them.

figma-pipeline-from-figma-url-to-a-runni-app.zip

ZIP · project files

Generated

Example file from a real run - the skill writes it into your workspace.

Connects securely to your tools. The creator never sees your data.

What you get

Turn a Figma frame into a running Astro, React or plain-HTML project with one URL.Move a Figma file's variables and text styles into Tailwind's theme without overriding Tailwind's own defaults.Start every new design from a clean project instead of reusing an old one.Get a DESIGN.md generated from the Figma file and checked with the design.md linter.Keep data-node-id on every element so a later Figma change can be traced to the exact element.

About this skill

Going from a Figma frame to a working site usually means a dozen separate steps: set up a project, pull the tokens out of Figma, write the page, check it against the design, tidy the code. This skill runs them in order and hands each step to the right helper, so you give it one URL and get a project you can open in the browser.

Who it is for

People who want to start from nothing: no project yet, or a fresh one for every design. It creates the environment for you. If you already have a project with a guidelines file (CLAUDE.md or AGENTS.md), it can work inside it, and the figma-workflow skill on its own may be all you need.

Results depend on your Figma file

The skill can only build what the design gives it. Without variables it falls back to arbitrary values, and without components the code is not split into components. Before you run it, check the frame with figma-audit (free): it scores layer naming, auto layout, variables and components, and tells you what to fix first. If figma-audit is installed, this skill offers to run it before building.

What it does

Optionally checks the quality of the Figma frame first (needs the figma-audit skill; skipped silently when it is not installed)
Creates a new project by cloning a starter for Astro 7, React 19 with TanStack Router, or plain HTML with Vite and TypeScript, all with Tailwind CSS v4, then installs the dependencies and makes the first git commit (when git is installed)
Reads the Figma file's variables and text styles and writes them into Tailwind's @theme, and renames any name that would silently override one of Tailwind's own defaults
Generates a DESIGN.md for the project and validates it with the design.md linter
Implements the design in four phases, each in its own sub-agent: implementation, review against the Figma screenshot, component and token cleanup, and Tailwind review. This is figma-workflow, included in the package
Keeps Figma's data-node-id on the matching elements, so a later design change can be traced to the exact element
Optionally writes the tokens added in code back to Figma as variables, then starts the dev server and shows the preview URL

How it works

You give it a Figma frame URL and, optionally, a project name
It checks whether the current directory already holds a project and lets you choose between using it and creating a new one next to it
It asks for the tech stack, the project name and the page file to build, because the implementation phases run as sub-agents that cannot ask questions
It runs the steps in order and ends with a short report and the local preview URL

What it downloads

The starters are public GitHub repositories of the author (astro7-tailwind4-starter, react19-tailwind4-starter and vanilla-tailwind4-starter). The skill clones their latest version with npx tiged and installs the dependencies with your package manager. Each starter already contains a CLAUDE.md, the Tailwind setup and the helper skills used along the way, so nothing else needs to be installed.

What it is not

The Figma file decides the layout. If it only has a 1440px desktop frame, the page is desktop-only: the skill does not invent responsive behavior the design does not specify. Very tall pages are better split into section frames, one run per section.

Requirements

An agent connected to the official Figma MCP server, Node.js (the Astro starter needs 22.12 or newer), a package manager (pnpm, bun, yarn or npm), and internet access for GitHub and the package registry. Optional: the figma-audit skill for the quality check.

Other agents

Written for and tested on Claude Code. It is plain Markdown, so you can ask your own agent to adapt it: swap the Agent and Skill tools used to launch sub-agents and helper skills, the skill lookup paths, and the Figma MCP tool names. Other agents have not been tested.

Try it free first

Try it Free on Agensi does not apply to this skill: the free trial runs on Agensi's own servers, which have neither your machine nor a Figma connection. Use the example session above to see what a real run looks like.

More from KMRVID

The full Claude Code skill bundle for Figma, Tailwind and Astro workflows is available on Gumroad: https://gaspanik.gumroad.com/l/kmrvid-claudeskills

How to install

Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

~30 seconds

1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.

Skills folder by agent

Click the path to copy it. Create the folder if it does not exist yet.

Reviews

No reviews yet

Be one of the first to try it. Every listed skill passes our trust checks below.

Security scanned

Passed our 8-point scan before listing

Fresh listing

Recently published to Agensi

30-day refund

Not a fit? Get your money back

Trust & safety

Security scanned

Verified clean today

Passed all security checks, Safe to install

Needs access to

Figma

Github

Npmjs

Listed3 days ago

Updatedtoday

Figma Pipeline — From Figma URL to a Running Page