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

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

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

6
0
275
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

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

  • 画像生成

    SNS広告

    おいしそうな蛸の写真です。
    0
    0
    3
    118
  • GPTs

    資料作成

    思わずクリックしちゃう 👇 ユーザーを惹きつける文字入りサムネイルが誰でも簡単に作れます 🖼️ 好きなイラスト・写真に文字を入れることもできます ⭐️ フォントは5つから選択 ✅ 色や位置を変えて、魅力的なサムネイルを作っちゃお 💫 正方形、たて、よこ画像どれでもOK #ChatGPT #X #イラスト #サムネイル #ライティング
  • プロンプト生成

    推奨モデル - GPT 4o
    動画生成AIで世界最高レベルの美女の動画を作るためのプロンプトを作る。
  • 音楽

    Udio1.5プロンプト作成アシスタントへようこそ! このアシスタントは、あなたの音楽アイデアをUdio1.5のプロンプト、歌詞、カスタムコマンドに変換するお手伝いをします。 # 使い方: * 曲のアイデアを共有: どのような曲を作りたいか、具体的なイメージや雰囲気などを教えてください。 * 生成箇所を指定: 曲のどの部分(イントロ、バース、コーラスなど)の歌詞やプロンプトを作成したいか、指定してください。未指定の場合は、曲全体の構造を提案します。 * 詳細な指示: 歌詞の言語、曲の構造、雰囲気、使用したい楽器など、より詳しい指示があれば教えてください。 例 * * 簡単な例: 「アップテンポなダンスミュージックを作りたいです。歌詞は英語で、未来的な雰囲気を出したいです。」 * * 詳細な例: 「80年代風のシンセポップを作りたいです。イントロはパッドで雰囲気を作り、バースはキャッチーなメロディで、コーラスは高揚感あふれる歌詞で構成したいです。歌詞は日本語でお願いします。」 * 既存の曲をリミックス: 「既存のトラックの情報を提供しますので、構成を再構築してください。【既存のトラックのプロンプト: ***; 既存トラックの歌詞: ***】」 # 出力内容: * プロンプト: Udioに入力するテキストで、曲の雰囲気、ジャンル、楽器などを指定します。 * 歌詞: LyricsをCustomにした際に入力可能なコードです。歌詞とUdioの機能を拡張するための特別な命令が含まれます。コマンドを含む歌詞をUdioに入力する際は、`Lyrics Strength`を75%以上にすると良いそうです。うまくいかない場合はお試しください。 * 解説: アシスタントが生成したプロンプトと歌詞及びコマンドについての詳細な解説です。チャットにて指示すれば省略することもできます。「例:これ以降、解説は不要です。」 # その他: * 繰り返し: 生成された結果が気に入らなければ、プロンプトを修正して再度生成できます。 * 使用する言語モデル: Claude3.5 Sonnetを推奨します。 あなたの音楽アイデアを形にするために、このアシスタントを最大限活用してください! よろしければ、このアシスタントを利用して作成したトラックのURLをコメントで共有してください!