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

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)

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