AI coding

Expanding AI Coding Skills: Practical Frontend MCP Tips

Honghao Wang

— 3 min read
Expanding AI Coding Skills: Practical Frontend MCP Tips

Preface

MCP has been gaining traction for quite some time — many developers have begun writing books, creating tutorials, and building various MCP resource collections.

Today, I want to shift the perspective and share practical MCPs that I actually use in daily front-end development.

These tools are tested in real projects and aim to directly improve development efficiency.

Hopefully, they’ll inspire new ideas for your own workflow.

We’ll walk through several typical front-end work scenarios and look at the MCPs best suited for each.

---

image

Figma MCP

Problem

A common front-end task is reproducing design drafts. Traditionally, we’d open Figma on one side, IDE on the other, and manually copy the code from Figma’s Dev Mode — often finding the generated code was incomplete or hard to use.

Evolution

D2C (Design-to-Code) tools were tried, but with LLM + MCP, our IDEs can now connect directly to Figma’s design data.

With simple configuration — as described in my Juejin article _"Front-end development just got happier: Cursor + Figma MCP for fast design reproduction"_ — you can rebuild layouts much more quickly.

I recommend using TailwindCSS for styles, as it works well with AI-assisted code generation.

Benefits

  • AI output is more maintainable than typical D2C code, which was often full of hard-coded `relative`/`absolute` positioning.
  • While still not a perfect 1:1 visual match, AI-generated layouts are easier to refine.
  • Full precision in AI code generation is likely only 1–2 years away.

Tip: Figma now offers an official MCP version:

https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server

I currently use a community-maintained version from GitHub with excellent results.

---

Apifox MCP

Previous API Workflow

Before Apifox MCP, I would:

  • Generate API code via OpenAPI tools.
  • Let AI adapt it to business logic.
  • Optimize with Cursor.

This was already faster — but Apifox MCP takes it directly to the final code in one step.

Setup

Follow the official docs:

https://docs.apifox.com/apifox-mcp-server

Then instruct AI:

> “Use Apifox MCP to access APIs under `/xxx` prefix, generate related code, and refer to the interface template file `@xxx.ts`.”

Pro Tip

Create an `api-example.ts` file containing:

  • TypeScript types
  • Sample requests for your APIs

AI will use this file to match your coding style.

import request from '@/utils/request.ts';

export type ApiResponse = {
  status: number;
  msg: string;
  code: number;
  data?: TData;
  failedReason?: string;
};

---

Additional Example

export type PageResponse = {
  records: T[];
  total: number;
  page: number;
  pageSize: number;
};

export const getUserList = () => {
  return request.get>>('/users');
};

export const createUser = (data: CreateUserRequest) => {
  return request.post>('/users', data);
};

---

Note: If your company isn’t using Apifox, try Swagger MCP for API integration.

---

Context7 MCP

Purpose

Helps AI read third-party library documentation accurately, avoiding outdated or incorrect assumptions.

Why Use It

  • AI may hallucinate when working with uncommon npm packages or new releases.
  • Context7 MCP fetches fresh API docs so your AI-generated code matches current APIs.

Example:

With Arco Design (less common than Ant Design), AI might misuse props.

I instruct AI to fetch Arco docs via Context7 MCP first — accuracy improves significantly.

Docs: https://github.com/upstash/context7/blob/master/docs/README.zh-CN.md

---

Chrome DevTools MCP

Capability

Lets AI read data directly from the browser console.

Usage

  • Debug locally in Chrome.
  • Log into your project in that Chrome instance.
  • AI can analyze logs, troubleshoot issues, and perform performance checks.

Docs: https://developer.chrome.com/blog/chrome-devtools-mcp?hl=zh-cn

Example:

When debugging React re-render loops, I previously had to add many `console.log`s and copy-paste them into AI.

Now, with DevTools MCP, AI reads logs directly — analysis is faster and more precise.

---

Closing Thoughts

The MCPs above — Figma, Apifox, Context7, Chrome DevTools — are practical, battle-tested tools that:

  • Save developer time
  • Reduce repetitive work
  • Strengthen AI-assisted coding reliability

Future Outlook

As AI matures, expect a seamless workflow merging design, API, and code generation via MCP.

---

Bonus: Scaling AI Beyond Code

If you want to leverage AI for more than coding — e.g., creating technical documentation, tutorials, or multi-platform dev logs — open-source tools like AiToEarn are worth exploring.

AiToEarn connects:

  • AI content creation
  • Cross-platform publishing
  • Analytics & model ranking

It supports simultaneous publishing to platforms such as:

Douyin, Kwai, WeChat, Bilibili, Rednote, Facebook, Instagram, LinkedIn, Threads, YouTube, Pinterest, and X (Twitter).

Learn more:

---

image

Click "Read Original" to dive deeper:

Read Original

Read more