FRONT-END.AI for VS Code​

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

*This extension is a plug-in for FRONT-END.AI subscribers.
If you would like to use FRONT-END.AI, please apply at https://front-end.ai.

AI extension enables smooth analysis and code editing of analysis results by FRONT-END.AI in the VS Code environment.

Feature

Automatically generate HTML from VS Code using “AI that understands design”.

"AI that understands design" determines the structure from design data such as Figma or Adobe XD, generates HTML, and outputs it directly to VS Code.
The output HTML can be freely edited and finalized on VS Code.
*No need to modify the layer structure of your design data

How to use

1. Install the extension
2. Open the extension and login to FRONT-END.AI
3. Upload the Design Comp asset image, specify the directory to download the automatically generated file, and analyze it.

4. The HTML file will be opened automatically, so please start editing as is.

FRONT-END.AI for VS Code​

※本拡張機能はFRONT-END.AI契約者向けプラグインです。
FRONT-END.AIをご利用になりたい方は、https://front-end.ai からお申し込みください。

FRONT-END.AI拡張機能を使えば、FRONT-END.AIによる解析・解析結果のHTML編集をVS Code環境でスムーズに行えます。
​

機能

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

FigmaやAdobe XDなどのデザインデータから「デザインを理解するAI」が構造を判別しHTMLを生成し、VS Codeに直接出力します。
出力されたHTMLをもとにVS Code上で自由に編集し、最終化させます。
※デザインデータのレイヤー構造を修正する必要はありません。
​

使い方

1. 拡張機能をインストールします
2. 拡張機能を開き、FRONT-END.AIにログインします
3. デザインカンプ・アセット画像のアップロード、自動生成したファイルをダウンロードするディレクトリを指定して、解析します

4. 自動でHTMLファイルが開かれるため、そのまま編集をスタートしてください