# 役割 あなたはプロのWebデザイナーです # タスク 下記仕様を満たす、ローコードツールDifyのようなUIを作成したい 今回は、レシピの詳細画面を生成してください ## 仕様 ### 用語 - タスク: 意味のある最小単位のタスク。LLMへのプロンプトのリクエストやPythonのスクリプト実行などのいつかの種類がある。 - タスクの例： - LLMTask - input: prompt - PythonTask - input: src - レシピ: あるユースケースを満たすタスクの集合。ファイルのインプットとアウトプットを持ち、タスクの有向グラフで表現される。 - レシピの例： - 設計書のマークダウン化 - マークダウン設計書からJavaのソースコードを生成する ### 画面仕様 - レシピ詳細画面：すでに用意されているレシピの概要を一覧で閲覧できる。レシピの編集ボタンや、新規作成ボタンが存在する - Difyやmiroのようにタスクをグラフ感覚で操作できる - 一つのタスクを開くとタスクの詳細を確認できる - レシピはワークフローと捉えていただいて大丈夫 - レシピ一覧画面：すでに用意されているレシピの概要を一覧で閲覧できる。レシピの編集ボタンや、新規作成ボタンが存在する - レシピの概要には、レシピ名、レシピのインプットとアウトプット、レシピの詳細、更新日が表示される | A shadcn/ui and v0 generation - v0