Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>FRONT-END.AINew to Visual Studio Code? Get it now.
FRONT-END.AI

FRONT-END.AI

FRONT-END.AI

|
2,272 installs
| (1) | Free
Build HTML 10X faster with AI that understands design.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

FRONT-END.AI​

For the Japanese translation, please see below.
日本語訳は下にあります。

This is a plugin for users of FRONT-END.AI, a developer-focused low-code platform.

🎉 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) 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.

:white_check_mark:What can you do with the VS Code plugin?

"AI that understands design" automatically generates semantic, responsive HTML and partial CSS.

:large_blue_diamond:The plugin instantly generates clean, editable code directly in your VS Code environment based on complete design data uploaded from Figma.
:large_blue_diamond:The generated HTML can be freely edited and finalized in VS Code.

file upload screen of FRONT-END.AI's extension

:sparkles: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 15 seconds.
  3. Readable HTML
    • Generates clean, structured HTML that’s easy for engineers to read and maintain.

:woman_technologist:How to use

  1. Open the Figma plugin and export your design data. Save all files locally.

    1. Set up export settings for each layer in your design.
      file upload screen of FRONT-END.AI's extension
    2. Select Main Menu > Plugins > FRONT-END.AI.
      file upload screen of FRONT-END.AI's extension
    3. When the modal appears, click the Export button to download the ZIP file, then extract it.
      file upload screen of FRONT-END.AI's extension
  2. Launch the FRONT-END.AI in VS Code and upload the files you saved locally.

    1. Click the FRONT-END.AI icon in the sidebar and log in.   file upload screen of FRONT-END.AI's extension

    2. Click Upload your design and select the complete set of files exported via the Figma plugin (design comp, assets, and output.json file).
      file upload screen of FRONT-END.AI's extension

    3. Click Specify download destination and choose the directory where the generated files will be downloaded.
      file upload screen of FRONT-END.AI's extension

    4. Please make sure the design comp, assets, and output.json file are checked, then click Analyze.
      file upload screen of FRONT-END.AI's extension

  3. HTML code is automatically generated, completing the initial implementation phase. You can now focus your time on more creative and meaningful development work. file upload screen of FRONT-END.AI's extension

(以下、日本語訳です)

FRONT-END.AI​

本拡張機能はFRONT-END.AI利用者向けプラグインです。

🎉 今すぐお試し!FRONT-END.AIでは、無料でトライアルをご利用いただけます。
アカウントのサインアップはこちらhttps://front-end.aiからお願いします。

🚀 FRONT-END.AIとは

FRONT-END.AIとは、デザインデータからHTMLコードを自動生成することで、初期のコーディング作業を大幅に効率化できる開発支援ツールです。 当サービスに搭載された**「デザインを理解するAI」は、アメリカ・日本・中国で特許を取得**しており、高精度なデザイン解析を実現しています。

FRONT-END.AIのVS Codeプラグインを利用すれば、VS Code上でAIにより生成されたHTMLコードの編集をシームレスに行うことができ、開発フローがよりスムーズになります。

​

:white_check_mark:FRONT-END.AIにできること

VS Code から「デザインを理解する AI」によりHTML/CSS*を自動生成

:large_blue_diamond:Figmaのデザインデータから「デザインを理解するAI」が構造を判別しHTMLを生成し、VS Codeに直接出力します。
:large_blue_diamond:出力されたHTMLをもとにVS Code上で自由に編集し、最終化させます。
(※cssは一部)

file upload screen of FRONT-END.AI's extension

:sparkles:特徴

  1. 優れた適応能力
    • テンプレートのようなデザインから、完全オリジナルなデザインまで、デザインカンプとアセットファイルを読み込めば、「デザインを理解するAI」が構造を判別します。
    • デザインデータの構造をきれいにする必要はありません。
  2. 素早いコード出力
    • VS Code向けのコードは、最短15秒で自動生成されます。
  3. 理解しやすいコード出力
    • エンジニアにとって、可読性の高く、構造的なHTMLが書き出せます。 ​

:woman_technologist:使い方

  1. Figmaプラグインからデザインデータの書き出しを行い、ローカルに保存します。

    1. 各レイヤーでアセットの書き出しを設定します。
      file upload screen of FRONT-END.AI's extension

    2. メインメニュー>プラグイン>FRONT-END.AIを選択してください。
      file upload screen of FRONT-END.AI's extension

    3. モーダルが開いたら、書き出すボタンを押下し、zipファイルをダウンロードして解凍してください。
      file upload screen of FRONT-END.AI's extension

  2. VS CodeからFRONT-END.AIを開き、ローカルに保存したファイルををアップロードします。

    1. サイドバーのFRONT-END.AIアイコンを押下し、ログインします。
      file upload screen of FRONT-END.AI's extension

    2. Upload your designを押下し、Figmaプラグインで書き出したファイル一式(デザインカンプ、アセット、output.jsonファイル)を選択します。
      file upload screen of FRONT-END.AI's extension

    3. Specify download destinationを押下し、生成されたファイルをダウンロードするディレクトリを指定します。
      file upload screen of FRONT-END.AI's extension

    4. デザインカンプ、アセット、(output.jsonファイル)の左にチェックが入っているのを確認したらAnalyzeを押下します。
      file upload screen of FRONT-END.AI's extension

  3. HTMLが自動生成され、初期コーディングが完了します。削減された時間でよりクリエイティブな開発体験を実現できます。
    file upload screen of FRONT-END.AI's extension

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft