はじめに これまで設計書からプログラム、構成図からIaCなど、GPT4-Vで画像を使ったケースを取り扱ってきました。今回は画面設計書みたいなものから画面のコードを生成させてみたいと思います。 なお、生成するコードはSvelteコンポーネントです。 画面設計書 本当は日本語が良かったのですが、日本語OCRの精度に不安があったので英語で記載しました。なお、英語もChatGPTで日本語をもとに翻訳したものをそのままいれています。 DallePanel.svleteというSvelteコンポーネントについて、画面の構成と、動作に関する説明などを右側にいれています。右側の説明は画像にいれなくてもプロンプトに入れてもいいかなと思いましたが、とりあえず画像です。 ともすればfigmaとかでもいいじゃないかっていう話もありますが、動作含めて画像にすることを今回試します。 説明の内容は日本語(翻訳前)だと以下