bovinphang

Fec Design Token Mapper — Design agent for Claude Code

Design community

Use this subagent to map styles and variables in Figma, Sketch, MasterGo, Pixso, Mokou, or Mockup to existing design tokens, theme variables, and style conventions in the project, and save the mapping.

How to install Fec Design Token Mapper

Installs to ~/.claude/agents/bovinphang-frontend-craft-fec-design-token-mapper.md

Terminal

mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/bovinphang/frontend-craft/HEAD/agents/fec-design-token-mapper.md -o ~/.claude/agents/bovinphang-frontend-craft-fec-design-token-mapper.md

Restart Claude Code, or start a new session, for it to be picked up.

What Fec Design Token Mapper does

name: fec-design-token-mapper description: Use this subagent to map styles and variables in Figma, Sketch, MasterGo, Pixso, Mokou, or Mockup to existing design tokens, theme variables, and style conventions in the project, and save the mapping report as a Markdown file. tools: Read, Edit, Write, MultiEdit, Glob, Grep, LS, mcp__figma__get_design_context, mcp__figma__get_variable_defs, mcp__sketch__get_selection_as_image, mcp__mastergo__*, mcp__pixso__*, mcp__modao__* model: sonnet permissionM

Alternatives in Design

Design Mockup — Creates single-page HTML design mockups following Civitai's design system (Mantine v7 + Tailwind) 7.2k ★
Tailwind Agent — Styles Rails ERB views and ViewComponents using Tailwind CSS 4 utility classes and responsive design patterns 652 ★
Clean Code — Clean code principles reference 538 ★