[No Terminal Required] How to Code Figma Designs Using the 'Code' Tab in the Claude App | Beginner-Friendly

I can create designs in Figma, but I can't code...

Good news for those people.

Simply install the Claude desktop app on your computer and open the 'Code' tab, and the AI will automatically code your Figma designs.

Terminal? Command line? Black screen? You won't use any of that.
Just install a regular app and give instructions in Japanese in the chat window.

━━━━━━━━━━━━━━━━━━
What you can do with this method
━━━━━━━━━━━━━━━━━━

・AI automatically converts Figma designs into HTML/CSS
・Create pages compatible with both PC and smartphone versions
・Implement directly into WordPress
・Automatically manage code with GitHub
・Ask the AI for animations too

━━━━━━━━━━━━━━━━━━
The cost is only 5,000 yen per month
━━━━━━━━━━━━━━━━━━

① Figma Dev Seat: Approx. 1,800 yen/month
→ A plan that allows the use of Dev Mode. It enables the AI to read design information.

② Claude Pro Plan: 20 USD/month (approx. 3,000 yen)
→ Required to use the 'Code' tab in the desktop app.

Total: Approx. 5,000 yen/month. You can earn it back with a single project.

【What to prepare for free】
・Claude desktop app (from claude.com/download)
・Figma desktop app (from figma.com/downloads)
・FileZilla (FTP software, free)
・GitHub account (free)

━━━━━━━━━━━━━━━━━━
What is GitHub?
━━━━━━━━━━━━━━━━━━

It's 'cloud storage & a time machine for code'.

① All history is saved → Reverting to a previous version is instant
② Saved to the cloud → Code is safe even if your PC breaks
③ Share via URL → Share code just by sending a URL. No ZIP files needed

━━━━━━━━━━━━━━━━━━
Overall Flow
━━━━━━━━━━━━━━━━━━

① Create a design in Figma
　↓
② Install the Claude desktop app ← Same as a regular app!
　↓
③ Open the 'Code' tab and connect to Figma
　↓
④ Ask for coding in the chat ← Japanese is fine!
　↓
⑤ Check the finished page on PC/smartphone
　↓
⑥ If it's broken, ask for fixes in Japanese
　↓
⑦ Save to GitHub
　↓
⑧ Implement to WordPress via FTP and publish

You will never use the terminal (black screen). Everything is completed within the app screen.

━━━━━━━━━━━━━━━━━━
Step 1. Install the Claude desktop app
━━━━━━━━━━━━━━━━━━

It is exactly the same as installing a regular app.

1. claude.com/download Access

2. Click 'macOS' or 'Windows' to download

3. Double-click the downloaded file to install

4. Launch the app → Click 'Get Started'

5. Sign in with your email address or Google account

You are all set.

When you open the app, you will see three tabs at the top: 'Chat', 'Cowork', and 'Code'.
We will be using the 'Code' tab this time.

━━━━━━━━━━━━━━━━━━
Step 2. Open a project in the 'Code' tab
━━━━━━━━━━━━━━━━━━

1. Click the 'Code' tab in the app

2. Click 'Open folder'

3. Select the project folder you prepared in advance

This allows the AI to read and write within that folder.
A chat screen will appear, where you can enter instructions in Japanese.

━━━━━━━━━━━━━━━━━━
Step 3. Connect Figma to Claude Code
━━━━━━━━━━━━━━━━━━

To have the AI read your Figma design, you need to perform an 'MCP connection'.
*Currently, you can connect to MCP via Settings > Connectors.

[Figma-side preparation]

1. Open the Figma desktop app ( https://www.figma.com/downloads/ )

2. Figma logo in the top left → Preferences

3. Check 'Enable Dev Mode MCP Server'

[Claude Code-side connection]
In the Code tab's chat screen, click the '+' button next to the prompt box → select 'Connectors' and choose Figma to connect.

Alternatively, you can write this directly in the chat:

Please connect to the Figma MCP server.
I have enabled the
Dev Mode MCP server in my local Figma desktop app.
http://127.0.0.1:3845/sse Please connect to this.

You can check by asking, "Are you connected to Figma?"

━━━━━━━━━━━━━━━━━━
Step 4. Preparing the Figma Design
━━━━━━━━━━━━━━━━━━

For an LP (Landing Page)
→ Create a new file and place only the design to be implemented. Do not include rejected drafts.

For a Homepage
→ Prepare only the parts to be coded. Do not include the header or footer.

⚠ Make sure to click the "</>" button in the top right of Figma to turn on "Dev Mode".

━━━━━━━━━━━━━━━━━━
Step 5. Requesting the Coding
━━━━━━━━━━━━━━━━━━

① Select the frame in Figma → Right-click → Copy/Paste as → Copy link to selection

② Paste the following into the Claude Code chat (replace only the URL):

Please code based on this Figma design.

[Requests]

• Please build it using HTML / CSS / JavaScript

• Please make it responsive (PC: 1920px, Smartphone: 375px)

• Please also create an index.html for verification

• Please also create PHP files for WordPress

• Please organize images into an images/ folder, CSS into a css/ folder, and JS into a js/ folder

[Figma URL]
Paste the copied URL here

⚠ You must include "Please make it responsive"! If you don't, it will break on smartphones.

💡 Instead of asking for everything at once, breaking it down by section will result in cleaner code.

━━━━━━━━━━━━━━━━━━
Step 6. Checking the Design (Super Important!)
━━━━━━━━━━━━━━━━━━

[Checking the PC Version]
Double-click index.html in the folder → Open it in a browser and compare it with Figma.

[Checking the mobile version]

1. With index.html open in your browser, press the F12 key

2. Click the smartphone icon in the top left

3. Set the width to 375 and check

[If the layout is broken]
Write specifically in the chat and ask for corrections:

Please fix the following.
[Mobile version (375px)]

• The image is overflowing → Please fit it within the screen

• The cards are still side-by-side → Please arrange them in a single column

• The button text is too small → Please make it 16px or larger

⚠ After making corrections, reload the browser with Ctrl + Shift + R to check.
⚠ Also check if the file has actually been updated.

━━━━━━━━━━━━━━━━━━
Step 7. Save to GitHub
━━━━━━━━━━━━━━━━━━

Just ask in the chat:

Please push this project to GitHub.

You can connect to GitHub by selecting it from '+' -> 'Connectors'.

━━━━━━━━━━━━━━━━━━
Step 8. Implement in WordPress (Child Theme + FTP)
━━━━━━━━━━━━━━━━━━

What is a child theme?
→ A folder for customizing parent themes (JIN:R, SWELL, etc.). It will not be deleted even if the parent theme is updated.

[Steps to upload via FTP]

1. Connect to the server using FileZilla (free)

2. Upload the entire child theme folder to /wp-content/themes/ (unzip it, don't upload the ZIP file!)

3. WordPress Dashboard → Appearance → Themes → Activate

4. Pages → Add New → Select 'LP Page' in templates → Publish

Access the URL, and if the design appears, you're done!

━━━━━━━━━━━━━━━━━━
Useful Tips
━━━━━━━━━━━━━━━━━━

📷 Convert images to WebP to reduce file size
→ Drag images to https://saruwakakun.com/tools/png-jpeg-to-webp/ → Save as WebP. This will make them 20–40% lighter.

✨ When you want to add movement
→ Just ask in the chat:

Please add a fade-in animation when scrolling.
Also, please add a hover effect that makes the button lift up.

👀 When getting client approval
→ Upload to your own server temporarily and share the URL. Once approved, implement it for production.

━━━━━━━━━━━━━━━━━━
Summary
━━━━━━━━━━━━━━━━━━

This method does not use the 'terminal' (the black screen) at all.

There are only three things to do:

1. Download the Claude desktop app (same as any regular app)

2. Open the 'Code' tab and select a folder

3. Give instructions in the chat in Japanese

After that, the AI will create the code, so just check, revise, and implement it in WordPress.

For about 5,000 yen a month, we are in an era where designers can handle coding too.
Try it out on a small project first.

■ Finally—feel free to consult me about design.

• LP Production / Meta Ad Management Agency

• Website Production

• Banner Production

• Recruitment Site Construction

• Seminar and school website construction

• Elementor / STUDIO implementation

• LINE Official Account x L Message (L-Message) construction

I can provide the optimal proposal tailored to your business, including these and more.

Those who want to 'start small and test it out' are also very welcome.