You Only Need 3 Commands to Build Custom React Components

Building Custom React UIs Faster with Claude MCP + Figma + shadcn/ui

Hi, I'm Taka from airCloset Inc.

I recently joined a new project as a lead engineer, and we're under a very tight schedule. That means one thing: I need the most efficient way to build and ship UI components, fast.

In this post, I'll share the fastest approach to creating React components by leveraging Claude and Figma MCP, powered by shadcn/ui and Tailwind CSS.

🧩 Frontend tech stack

• Next.js

• shadcn/ui

• Tailwind CSS

• Figma

• Storybook

I'm using shadcn/ui because it's highly customisable with Tailwind CSS and helps avoid wasting time reinventing the wheel.

💡 For tight schedules: reuse and adapt — don't rebuild.

Steps / Commands to produce custom React UIs

Step 1: Install shadcn/ui components

First things first, install a base component. In this example, we pick.

Tabs:

pnpm dlx shadcn@latest add tabs

✅ After this, you'll have the base Tabs component scaffolded and ready to customise.

Step 2: Generate and check Storybook

Generate a Storybook entry to preview the component before and after customisation.

At this stage, Storybook will display the unmodified Shadcn/UI component, which is helpful for later comparison.

I recommend creating Claude instruction files for repetitive tasks. In my project, I store them under ./claude/frontend/:

./claude/
├── frontend/
│   ├── generate-storybook.md
│   ├── adjust-component-design.md  ← used in Step 3

generate-storybook.md takes the component file path as its argument, then outputs a Storybook file.

Example command:

/frontend:generate-storybook ${filename}
# e.g.
/frontend:generate-storybook apps/web/components/ui/tabs.tsx

The actual execution…

✅ This generates a Storybook story with sample usage.

Step 3: Adjust the component design based on Figma

Now, customise your Shadcn/UI component according to the Figma design.

Prerequisite: Have Figma MCP installed locally.

This step is where devs and designers meet — don't make the designers angry. Match spacing, radii, and colours.

The actual Figma design…

The .md instruction used in this step (e.g. adjust-component-design.md) accepts two arguments:

1. Component path

2. Figma link

Command:

/frontend:adjust-component-design ${pathToComponent} ${figmaLink}
# e.g.
/frontend:adjust-component-design apps/web/components/ui/tabs.tsx https://www.figma.com/file/XXXXX

💡 Tip — copying the Figma URL: open the file in the Figma desktop app -> right-click the frame or file, -> Copy link. Paste that link as the second argument.

After running the command, Claude will attempt to update the component styles and regenerate the Storybook entry.

✅ Result: the Tabs reflect the Figma radii and theme colours.

🎨 Last tips

Use semantic colours in globals.css

Define colours by role, not by literal colour names. This helps both designers and automation understand intent.

: root {
  --color-bg:  hsl(210 20% 98%);
  --color-primary: hsl(220 90% 56%);
  --color-accent:  hsl(160 70% 45%);
  --color-muted: hsl(210 16% 60%);
}

💡 Semantic names (like --colour-primary) help Claude and your team pick up design intent.

Localise Storybook examples automatically

If your project contains localised content (e.g., Japanese), instruct Claude to read layout.tsx and other metadata files. Claude can detect metadata, such as title, description, or language, and generate localised examples in Storybook.

Example: if layout.tsx metadata shows lang: 'ja' and site name MyApp. Claude can create story examples with Japanese labels and localised text.

✅ Workflow summary

1. Install component:

2. pnpm dlx shadcn@latest add tabs

3. Generate Storybook with Claude:

4. /frontend:generate-storybook apps/web/components/ui/tabs.tsx

5. Adjust the component based on Figma:

6. /frontend:adjust-component-design apps/web/components/ui/tabs.tsx ${FIGMA_URL}

7. Verify Storybook and iterate.

🏁 Final thoughts

This process helps you move from standard shadcn/ui components to pixel-accurate, team-aligned components quickly. Claude + Figma MCP + shadcn/ui = a big productivity multiplier for tight schedules.

I hope this speeds up your component delivery — ship faster, keep designers happy, and avoid wasting time on reinventing the wheel.

Chao~ 👋