デザイン仕様書を作成プロンプト

デザイン仕様書を作成プロンプト

デザイン仕様書を作成するプロンプト

6
0
264
22
user_53691282826950656
user_166910699665272832
user_122033393808353280
がお気に入り登録しました。

投稿日時:

  • プロンプト実行例
デザイン仕様書を作成プロンプト

どんなアプリのデザイン仕様書を作成したいですか?

アプリ名

画面

デザイン仕様書を作成プロンプト

デザイン仕様書:

ページレイアウトと構造

  • ログインページ:
    • ロゴとタイトルが中央に配置される
    • ユーザー名とパスワードの入力フォームが垂直方向に並ぶ
    • ログインボタンがフォームの下に配置される
  • ダッシュボードページ:
    • ナビゲーションバーがページ上部に固定配置される
    • サイドバーが左側にあり、メニュー項目が垂直に表示される
    • メインコンテンツがサイドバーの右側に表示される
    • チャートがメインコンテンツ内に埋め込まれる

UI要素と配置

  • ログインページ:
    • ロゴ
    • タイトル
    • ユーザー名入力フォーム
    • パスワード入力フォーム
    • ログインボタン
  • ダッシュボードページ:
    • ナビゲーションバー:
      • ロゴ
      • ログアウトボタン
    • サイドバー:
      • ダッシュボード
      • タスク管理
      • レポート
    • メインコンテンツ:
      • チャート

スタイリングとカラースキーム

  • ログインページ:
    • 背景色: #f5f5f5
    • ボタンカラー: #007bff
  • ダッシュボードページ:
    • ナビゲーションバー背景色: #333
    • ナビゲーションアイテムカラー: #fff
    • サイドバー背景色: #f8f9fa
    • メインコンテンツ背景色: #fff
    • チャートカラー: カラーパレットを使用

インタラクションとアニメーション

  • ログインボタンをクリックすると、ログイン処理が開始される
  • チャートにマウスオーバーすると、詳細情報がポップアップで表示される
  • ナビゲーションアイテムをクリックすると、対応するコンテンツがメインエリアに表示される

追加技術仕様

  • CSS Flexboxを使用してレイアウトを調整する
  • チャートにはchart.jsライブラリを使用して作成する

<design_specification> こちらの設計に沿って、HTMLとCSSを使用してログインページとダッシュボードページのデザインを実装します。Flexboxを使ったレイアウト調整とchart.jsライブラリを使用したチャート作成を行います。スタイリングは指定されたカラースキームに従い、インタラクションやアニメーションを実装します。 </design_specification>

コメント 0

他のプロンプトもチェック

  • 画像生成

    キャラクター作成

    Minecraft風のキャラ画像を生成します。
  • GPTs

    要件定義・設計

    こんにちは!今日は、中学生の君にも分かりやすく、Webサービスの要件定義を助けるエージェントプロンプトの構造について説明するよ。 想像してみて。君がWebサービスを作りたいと思ったとき、何が必要かな?まず、そのサービスが何をするのか、誰のために作るのかを決めることが大切だよね。でも、それだけじゃ不十分なんだ。 そこで登場するのが、要件定義エージェント!このエージェントは、君の考えを引き出すために、いろんな質問を投げかけるんだ。例えば、「サービスでできることを詳しく教えてください」とか、「利用者はどんなことをしたいと思っているでしょうか」といった感じ。 エージェントは、君の答えを基に、サービスに必要な機能をリストアップしていくよ。「ユーザー登録が必要だね」「商品検索機能が欲しいね」みたいに、どんどんアイデアを整理していくんだ。 次に、エージェントは君のWebサービスを作るための技術的なアドバイスをするよ。「こんなツールを使うと良いですよ」「このような構成でファイルを管理しましょう」って感じで、わかりやすく説明してくれるんだ。 でも、エージェントは君の考えをそのまま受け取るわけじゃないんだ。例えば、君の要求があいまいだったり、実現が難しそうだったりすると、「こういう風に変更するのはどうでしょうか」って提案してくれるんだよ。 最後に、エージェントは君との会話を基に、要件定義書を作成してくれるんだ。この書類には、君のWebサービスの目的や、必要な機能、使う技術などが詳しく書かれているんだよ。これを読めば、開発チームのお兄さんやお姉さんたちも、君の考えを理解しやすくなるんだ。 こんな感じで、要件定義エージェントは君の考えを引き出し、整理して、分かりやすく説明してくれる頼もしい相棒なんだよ。難しそうに見えるかもしれないけど、エージェントが一緒なら大丈夫。 君のアイデアを形にする第一歩として、ぜひ要件定義エージェントを活用してみてね! 言葉や仕組みを知らないと自分が楽しいと思えるサービスやゲームは作れません。抽象化、一般化されたプロンプトから以下に具体化されたアイデアや仕組み、ロジックを引き出せるか。それには自分自身の中にしかない創造性のインプットが不可欠です。SF作品で未来を予測しましょう。モノポリーしましょう。アドベンチャーしましょう。
  • 物語・脚本・プロット

    推奨モデル - GPT 4o
    なんJのスレのようなクソ架空スレを生成します! #2ch #なんJ
  • GPTs

    資料作成

    文字起こしから議事録を作成する。 文字起こしデータのみだと、議事や参加者の氏名がめちゃくちゃになるので、文字起こしデータに加え、議事のレジメファイルをアップロードすることで、正確な議事録づくりを目指す。
    5
    0
    86
    256