DEV Community: Aniket Dhakane

So I built a Figma Design Agent for an Agentic AI Hackathon #kiro #figma #agents #geminicli

Aniket Dhakane — Mon, 11 May 2026 16:10:37 +0000

Design-to-code handoffs are one of the biggest time sinks in frontend teams

I have been working as a UI developer lately at an organization where we are developing multiple MFEs (Micro Frontends) which are interlinked with a main Dashboard (Can't go into too much details).

All our products follow a same design library which is written in a separate NX repo, which is then imported as a package. This helps us keep a common Design System which boosts our development speed and reduce the feature development time.

Till now the process of maintaining this Design System Repo was manual, a UX developer would build the design in Figma, then the developer would recreate it manually with the help of AI, but there was no one step agent to just paste the figma link and get a whole live storybook preview of built component with agent hooks to directly raise PRs using the ADO (Azure Devops) MCP.

In this article I am going to show you how you can create your own design agent using gemini CLI (or claude code), Figma MCP and Vercel's web-design-guidelines skills. (It won't contain the PR & ADO part)

Here's how I set it up, and how you can too

Pre-Requisites

Gemini CLI (or Claude Code)
Figma MCP Extension
web-design-guidelines SKILL.md

You can get gemini CLI using npm install -g @google/gemini-cli, and steps to install the Figma MCP extension is given here & you can get the SKILL.md here

Setup

First start up your gemini cli in the directory which you want to work on and prompt it to generate you an agent in global level

~/.gemini/agents/.md

and paste the following Markdown file along with the prompt

---
name: figma-design-agent
description: "A specialist in translating Figma designs into production-ready code with pixel-perfect accuracy, high accessibility, and following web interface guidelines."
tools: ["*"]
model: gemini-3-flash-preview
---

# Figma Design Agent

You are a senior software engineer and UI/UX specialist. Your primary goal is to help users bridge the gap between Figma designs and production code.

## Core Expertise

- **Design Translation:** Implementing UI components and pages from Figma URLs with 1:1 visual fidelity.
- **Accessibility & UX:** Ensuring all code follows the Vercel Web Interface Guidelines, prioritizing semantic HTML, focus states, and keyboard navigation.
- **Design Systems:** Building and maintaining design systems, tokens, and reusable component libraries.
- **Code Connect:** Mapping Figma components to source code for seamless developer handoffs.

## Preferred Workflow

1. **Research:** Use `mcp_figma_get_design_context` and `mcp_figma_get_screenshot` to gather context.
2. **Strategy:** Plan the component architecture and Tailwind/CSS strategy.
3. **Execution:** Implement surgical, high-quality code changes.
4. **Validation:** Use `web-design-guidelines` (via `web_fetch` from Vercel's guidelines URL) to audit the implementation.

## Mandates

- **Pixel Perfection:** Always match the design's spacing, typography, and color tokens exactly.
- **Accessibility First:** Never compromise on semantic HTML or ARIA labels.
- **Tailwind Native:** Use Tailwind CSS for styling unless the project dictates otherwise.
- **Clean Code:** Use modern React/TypeScript patterns, avoiding unused imports and ensuring type safety.

## References

- **Figma Skills:** `figma-implement-design`, `figma-use`, `figma-code-connect`, `figma-generate-design`.
- **UI Guidelines:** Vercel Web Interface Guidelines.

Once done you can then paste the SKILL.md inside the skills folder

~/.gemini/skills//SKILL.md

And you are done, type /agents reload followed with /agents list and you will see our newly created agent listed over the cli.

Now just get the figma link of the component or page you want to create and paste it in the cli

@figma-generate-design <FIGMA_DESIGN_LINK>

Wait for the model to generate the site and you are all set, now just iterate over the generated components or keep them as it is if satisfactory.

Below is my experiment with gemini cli (for office we have access to claude opus and the generation from that along with custom steering files is a whole lot better)

// Detect dark theme var iframe = document.getElementById('tweet-2050976596094505335-592'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2050976596094505335&theme=dark" }

Alright then people, keep building and keep experimenting with AI models, we are living in an era where you can build almost anything, all you need is alot of tokens xD

Running local LLM (Ollama) in your nodejs project.

Aniket Dhakane — Thu, 28 Nov 2024 08:37:26 +0000

We all love AI, and since recent years the boom in Artificial Intelligence has changed the world and is taking it into a new era. For any use problem there is a use case of AI, being it asking Gemini about a cooking recipe, Chatgpt for assignments, Claude for programming, V0 for frontend design, devs and students are so much dependent on AI these days which leads to almost every new day a startup emerging featuring AI.

This leads to aspiring developers like me question on how can I make something like this? The answer is in the picture above only. API call to these models. But, they are not cheap and an unemployed student like me has no means to purchase the subscription. This lead to the idea of running the AI locally and then serving it on port for api calls. This article would give you a step by step guide on how you can setup Ollama and access the LLMs through your nodejs code.

Installing Ollama

This step is for windows users. If you are on other operating systems then follow this guide.

Head over to Ollama, and download their installer.

Once done, fire up the setup and Install the application.

This will then install the client on your machine, and now you can head over to the library section of ollama's official website to pick the model you want to use.

Here, I'll be using codellama:7b for my machine.
Open your CMD or Powershell and run the command ollama run <model-name>, this will download the model on your machine if it already does not exist and then would run it.

Serving LLM on Port

Now you have Ollama on your system and also have the required LLM, so the next step would be to serve it on your machine's port for your node app to access it.
Before proceeding, close the Ollama from background and check if the default port assigned to ollama is empty or not by using this command ollama serve, if this throws an error then it means the port is occupied.
You'll need to clear that port before proceeding, the default port for Ollama is 11434
Use the following command to check what process is running on that port netstat -ano | findstr :11434
Note down the PID from the above result and use this command to clear the port. taskkill /PID <PID> /F
Once done open new cmd terminal and run the following command ollama serve
Now you'll see something like this which means your LLMs are now accessible through API calls.

Using ollama npm package to for req response handling

Start your node project by following the commands

npm init -y
npm i typescript ollama
npx tsc --init

this will create a repo for you to start working, first head over to tsconfig.json file, uncomment and set these values

"rootDir": "./src",
"outDir": "./dist",

Create a src folder and inside the folder create the index.js file.

import ollama from 'ollama';

async function main() {
    const response = await ollama.chat({
        model: 'codellama:7b',
        messages: [
            {
                role: 'user', 
                content: 'What color is the sky?'
            }
        ],
    })
    console.log(response.message.content)

}

main()

Now before running the code, edit the scripts in package.json

"scripts": {
    "dev": "tsc -b && node dist/index.js"
  },

This would build the ts code into js code for running.
Run the application by using the command npm run dev inside the terminal.

There you are. Finally being able to access your local LLM with nodejs.
You can read more about the node package ollama here.

Thank you for reading, Hope this article could help you in any case and if it did then feel free to connect on my socials!

Linkedin | Github