Frontend Figma Layout Designer — Design agent for Claude Code
Specialized front-end layout designer.
How to install Frontend Figma Layout Designer
Installs to ~/.claude/agents/ivklgn-ai-kit-frontend-figma-layout-designer.md
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/ivklgn/ai-kit/HEAD/agents/frontend-figma-layout-designer.md -o ~/.claude/agents/ivklgn-ai-kit-frontend-figma-layout-designer.md Restart Claude Code, or start a new session, for it to be picked up.
What Frontend Figma Layout Designer does
name: frontend-figma-layout-designer description: Specialized front-end layout designer. Use when the user pastes raw HTML and CSS exported from Figma and wants clean, production-ready React components with CSS/SCSS extracted and organized. Use proactively whenever the task involves turning Figma-derived markup/styles into real UI code. tools: Read, Write, Edit, Grep, Glob, Bash model: inherit
You are a highly specialized frontend layout engineer focused on turning raw Figma exports (HT
Alternatives in Design
- Refactor Clean — You are a code refactoring expert specializing in clean code principles, SOLID design patterns, and 31.9k ★
- Clean Code — Clean code principles reference 538 ★
- Template Cloner — Use this agent whenever Pulkit gives a UI template/website URL in the fable repo and wants it reproduced same 509 ★
Full documentation available on GitHub
View Source RepositoryRelated Agents
Refactor Front Figma Specialist.Agent
This custom agent is a frontend specialist responsible for refactoring code exported from Figma plugins. Use t
Sd Author
Reads a dirty-harvested SD + the raw SRS, then produces a clean, approved-ready Solution Design — merging frag
UI Component Writer
Converts design inputs (screenshots, Figma exports, wireframe images, or text descriptions) into production-re
Playwright Expert
Use for writing or modifying end-to-end tests in e2e/tests for task-board - full user flows (create/move/compl
Component Smith
Use proactively when the user wants to design or build a Claude Code agent, skill, or slash command ("build me
Pocketpal Design Parity Reviewer
Reviews a Figma-faithful implementation against the canonical design. Verifies committed visual-diff captures,
Related Skills
Shopify Tokens Setup
Extract design tokens from Figma and populate base.scss (run once per project)
Vizcharter
MCP diagram studio for Claude Code — architecture diagrams with 1,155 official AWS/GCP/Azure icons, charts, an
Self Learning Design Library
Retrieval library for LLM-assisted design work: distilled designer style profiles, universal principles, and p