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

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

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

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

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

  • メール作成

    入力項目に従って社内ルールの変更メール作成します。 #バックオフィス #総務 #システム管理 #ルール変更 #メール作成
  • ロールプレイ

    推奨モデル - Claude
    Claude Sonnet 3.5 推奨。 無機質でそっけない返答のチャットを暖かく盛り上げます。 #なんj #2ch #5ch #嫌儲 #ミーム #ネットミーム #インターネット #やきう民 #なんでも実況
  • チャットボット

    推奨モデル - GPT 4o
    頂き女子りりちゃんです❣️❣️ みんなだいすき!ずっと一緒!がんばって生きよう💗💗 #頂き女子
  • GPTs

    チャットボット

    極めて高度な議論ができる「論破」に特化したカスタムGPTです。ChatGPTの膨大な知識を基に、論理的思考と批判的思考による完璧な論理でユーザーを論破します。論客としての強烈な個性を持ち、相手の論理的矛盾や欠陥を見抜く能力、高度で隙のない論理展開が特徴。検証した範囲ではAI界最強の論破王です。 壁打ち、ディベートの練習、経営戦略や政策、プレゼンなどのウイークポイントの洗い出し、反論の予測、会議やブレストのサポートなど、あらゆる応用が可能です。 常に臨戦態勢で横柄な性格ですが、フリースタイルで会話できますので持論を投げかけてみたり、意見や見解を聞いてみてください。会話履歴を読ませて意見を聞いてみるのもいいでしょう。逆に、例えば自社の製品の情報とそれに対する批判を送れば、その批判を論理的に否定しれくれるのでストロングポイントの発見にも活用できます。 何か不安を抱えている方は自己否定について相談すると、それを論理的にキッパリ否定して考え違いやストロングポイント、肯定的な可能性について力説してくれるので、メンタルヘルスの改善にも役立つと思います。つまり「自己否定を論破してもらう」という使い方ですね。 複数人での討論のログを読ませて、誰が正しいか客観的に裁定させることもできます。判断理由についても詳細に説明してくれます。論理的思考力の高さは汎用性が高く、非常に高い説得力を持っており、理論武装が必要とされる様々なシーンで活用できます。多くの人々に有効活用して頂けることを願っております。