Tsunagu.AIは2023年11月15日、HTML自動生成ツール「FRONT-END.AI」に、コードエディタ「Visual Studio Code(VS Code)」との連携機能を追加した。Webフロントエンド開発の初期工程として、デザインカンプからWeb画面(HTMLと一部のCSS)を自動生成するクラウドサービスである。VS Codeとの連携により、Webブラウザを介さずに生成したコードをVS Code上に直接表示できるようになった。
Tsunagu.AIの「FRONT-END.AI」は、Webアプリケーションの画面(HTMLと一部のCSS)の開発を支援するクラウド型のHTML自動生成ツールである。
「Adobe XD」や「Figma」などのデザイン/プロトタイピングツールなどで作成したデザインカンプ(JPEG画像ファイルなど)を、FRONT-END.AIプラグインを介してアップロードすることで、AIがWeb画面のコードを自動生成する。
画面1:自動生成したWeb画面のHTMLコードをVSCodeエディタで編集(出典:Tsunagu.AI)拡大画像表示
今回、マイクロソフトのコードエディタ「Visual Studio Code(VS Code)」との連携機能を追加した。WebブラウザでFRONT-END.AIのサイトを開くことなく、FRONT-END.AIを直接利用できるようになる(画面1)。
VS CodeからデザインカンプをFRONT-END.AIにアップロードして使う。生成したコードは、指定のディレクトリにダウンロードしてVS Codeで編集可能になる。VS Codeの拡張機能やスニペットを併用して、コーディングを効率化できるという。
- 業務システム 2027年4月強制適用へ待ったなし、施行迫る「新リース会計基準」対応の勘所【IT Leaders特別編集版】
- 生成AI/AIエージェント 成否のカギは「データ基盤」に─生成AI時代のデータマネジメント【IT Leaders特別編集号】
- フィジカルAI AI/ロボット─Society 5.0に向けた社会実装が広がる【DIGITAL X/IT Leaders特別編集号】
- メールセキュリティ 導入のみならず運用時の“ポリシー上げ”が肝心[DMARC導入&運用の極意]【IT Leaders特別編集号】
- ゼロトラスト戦略 ランサムウェア、AI詐欺…最新脅威に抗するデジタル免疫力を![前提のゼロトラスト、不断のサイバーハイジーン]【IT Leaders特別編集号】






















