FRONT-END.AI
For the Japanese translation, please see below.
日本語訳は下にあります。
🎉 Try FRONT-END.AI for Free!
Sign up here 👉 https://front-end.ai
🧠 What is FRONT-END.AI?
FRONT-END.AI is an AI-powered tool that accelerates initial coding by auto-generating HTML from design data.
Our patented "AI that understands design" (patents granted in the US, Japan, and China) ,combined with the latest large language model (LLM), enables highly advanced design interpretation.
The plugin for Visual Studio Code provides seamless editing of HTML code in your VS Code environment, streamlining the development process.
🚀 What can you do with the VS Code plugin?
Automatically generate HTML and partial CSS
🔷 The plugin instantly generates clean, editable code directly in your VS Code environment based on complete design data uploaded from Figma.
🔷 Leveraging an LLM, the plugin produces semantically rich, structurally sound HTML code that contributes to even greater efficiency in front-end development.
🔷 The generated HTML can be freely edited and finalized in VS Code.
✨ Feature
1 Excellent Design Adaptability
- Powered by “AI that understands design”, it automatically detects structure in both template-based and highly original design comps - just upload your design and assets, no need to tidy up your layer structures.
2 Fastest Code Generation
- Get production-ready code for your VS Code environment in as little as 1 minute.
3 Readable HTML
- Generates clean, structured HTML that’s easy for engineers to read and maintain.
🧰 Preparation Checklist
Make sure you have these ready:
✅ Sign up for a FRONT-END.AI account：https://front-end.ai
✅ Install Figma Plugin：https://www.figma.com/community/plugin/1211854652970580910
✅ Install VS Code Plugin：https://marketplace.visualstudio.com/items?itemName=FRONT-END-AI.front-end-ai
🛠 How to use
0. Prepare the Files to Upload
You'll need the following to generate HTML code:
🖼️ Design comp (.png / .jpg, up to 20 MB)
🧩 Asset images (.png / .jpg / .gif / .svg / .webp, total with design comp: up to 100 MB)
📄 output.json file
📌 Notes
- If you have both PC and mobile designs, please upload them one at a time — not together.
- Assets can be exported at 1x, 2x, and 3x resolutions.
- If you upload assets and output.json without using the plugin, you may encounter errors due to data mismatches.
- The plugin cannot extract text or images from external image elements, as it is designed to work with the structure created within Figma.
1. Open the Figma plugin and export your design data. Save all files locally.
1-1 Set up export settings for each layer in your design.
Select all the assets to be exported. There is no need to export each asset manually.
On the right-hand panel, click Export and set the desired scale (1x, 2x, 3x) and file format (e.g.,png,jpg).
💡 Please export your design one page at a time. FRONT-END.AI analyzes each page individually.
💡 Even if you select PDF as the file format, it will not be exported by the plugin.
💡 For more details, please refer to Figma’s official guide.
1-2 Select the entire page to export.
1-3 Select Main Menu > Plugins > FRONT-END.AI.
2. Launch the FRONT-END.AI in VS Code and upload the files you saved locally.
If you haven't signed up yet, please complete the sign-up process first, then click Log in.
2-2 Click Upload your design and select all the files exported from the Figma plugin.
Make sure that the design comp, assets, and output.json file are included.
2-3 Click Specify download destination and choose the directory where the generated files will be downloaded.
2-4 Please make sure the design comp, assets, and output.json file are checked, then click Analyze.
3. HTML code is automatically generated, completing the initial implementation phase.
You can now focus your time on more creative and meaningful development work.
（以下、日本語訳です）
FRONT-END.AI
本拡張機能はFRONT-END.AI利用者向けプラグインです。
🎉 今すぐお試し！FRONT-END.AIでは、無料でトライアルをご利用いただけます。
アカウントのサインアップはこちらからお願いします。
🧠 FRONT-END.AIとは
FRONT-END.AIとは、デザインデータからHTMLコードを自動生成することで、初期のコーディング作業を大幅に効率化できる開発支援ツールです。
当サービスに搭載された「デザインを理解するAI」は、アメリカ・日本・中国で特許を取得しており、高精度なデザイン解析を実現しています。
さらに、最新の生成AI技術（LLM）を導入することで、よりセマンティックで高精度なHTMLコードの生成が可能になりました。
FRONT-END.AIのVS Codeプラグインを利用すれば、VS Code上でAIにより生成されたHTMLコードの編集をシームレスに行うことができ、開発フローがよりスムーズになります。
🚀 FRONT-END.AIにできること
VS Code からHTML/CSS*を自動生成
🔷 Figmaのデザインデータから「デザインを理解するAI」が構造を判別しHTMLを生成し、VS Codeに直接出力します。
🔷 LLMとの連携により、可読性と構造性に優れたコードを自動で出力することで、開発工数のさらなる削減をサポートします。
🔷 出力されたHTMLをもとにVS Code上で自由に編集し、最終化させます。
（※cssは一部）
✨ 特徴
1 優れた適応能力
- テンプレートのようなデザインから、完全オリジナルなデザインまで、デザインカンプとアセットファイルを読み込めば、「デザインを理解するAI」が構造を判別します。
- デザインデータの構造をきれいにする必要はありません。
2 素早いコード出力
- VS Code向けのコードは、わずか1分で自動生成されます。
3 理解しやすいコード出力
- エンジニアにとって、可読性の高く、構造的なHTMLが書き出せます。
🧰 始める前に
事前にご用意いただくもの
✅ サインアップ：https://front-end.ai
✅ Figmaプラグイン：https://www.figma.com/community/plugin/1211854652970580910
✅ VS Codeプラグイン：https://marketplace.visualstudio.com/items?itemName=FRONT-END-AI.front-end-ai
🛠 使い方
0. アップロード要件
HTML生成に必要なものは以下です。
🖼️ デザインカンプ (.png / .jpg、上限容量：20MB)
🧩 アセット画像(.png / .jpg / .gif / .svg / .webp、上限容量：デザインカンプと併せて100MBまで)
📄 output.json file
📌 注意事項
- レスポンシブなどPC/SP用それぞれデザインがある場合は、同時にアップロードせず一方のみをアップロードしてください。
- アセットの書き出しは1x,2x,3xの解像度に対応しています。
- プラグインを通さずに書き出したアセットとoutput.jsonを最初にアップロードした場合、output.jsonの内容と整合性が取れずエラーとなります。
- Figma内にて作られた構造ではなく、外部からもってきた画像要素に関しては、本プラグインでは文字/画像を抽出することが出来ない仕様となっております。
1. Figmaプラグインからデザインデータの書き出しを行い、ローカルに保存します。
1-1 各レイヤーでアセットの書き出しを設定します。
書き出したいアセットを全て選択し、右下のExportをクリックして、倍率・拡張子を設定します。 アセットごとの個別書き出しは不要です。
💡 1ページごとに書き出しを行ってください。FRONT-END.AIは1ページずつ解析を行います。
💡 拡張子をPDFに選択しても、プラグインでは書き出しされません。
💡 詳細はFigmaにおけるエクスポートのガイド(https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma-Design)を確認してください。
1-2 書き出すページ全体を選択してください。
1-3 メインメニュー>プラグイン>FRONT-END.AIを選択してください。
1-4 モーダルが開いたら、Exportボタンを押下し、zipファイルをダウンロードして解凍してください。
2. VS CodeからFRONT-END.AIを開き、ローカルに保存したファイルををアップロードします。
2-1 サイドバーのFRONT-END.AIアイコンを押下し、ログインします。
サインアップがまだお済みでない方は、先にサインアップを完了したうえで、VS Code上でログインボタンを押下してください。
2-2 **Upload your design（デザインをアップロード）**を押下し、Figmaプラグインで書き出したファイルを全て選択します。
その際デザインカンプ、アセット、output.jsonファイルが含まれていることを確認してください。
2-3 **Specify download destination（ダウンロード先を指定する）**を押下し、生成されたファイルをダウンロードするディレクトリを指定します。
2-4 デザインカンプ、アセット、（output.jsonファイル）の左にチェックが入っているのを確認したらAnalyzeを押下します。
3. HTMLが自動生成され、初期コーディングが完了します。
削減された時間でよりクリエイティブな開発体験を実現できます。
