AIで作ったサイトが他のAIサイトと同じに見えないようにするデザインシステムプロンプト
フリーのプロンプト百科事典 Wikiprompt より
AIで作ったサイトが他のAIサイトと同じに見えないようにするデザインシステムプロンプト 正確な色、フォント、コンポーネントルールを備えた、名前付きで温かみのある人間らしいデザインシステム。ChatGPT や Claude にページ制作を依頼する前に貼り付けることで、紫のグラデーションと Inter フォントがデフォルトになるのを防ぐ。
プロンプト内容保存
🌐
あなたが作るものすべてにこのデザインシステムを使ってください。正確に従ってください。
雰囲気: 柔らかく、人間味があり、親しみやすく、穏やか。暖かみのある色調、緩やかに丸みを帯びた形、温かく迎え入れる雰囲気、決して事務的にならないこと。
カラー(これらの正確な値をCSS変数として使用してください):
- 背景: #FBF7F2(暖かみのあるクリーム色、純白は使わない)
- サーフェス: #FFFFFF
- 主要テキスト: #3A342E(暖かみのある炭色)
- 副次テキスト: #8A8178
- アクセント: #E07856(暖かみのあるコーラル)
- 副次アクセント: #7BA88F(柔らかいセージグリーン)
- ボーダー: #EDE6DD
タイポグラフィ:
- 見出し: "Fraunces"(セリフ体、Google Fonts)、ウェイト600
- 本文: "Source Sans 3"(Google Fonts)
- Inter、Roboto、システムフォントは絶対に使わない
- サイズスケール: 14 / 15 / 16 / 22 / 56px、行間1.7
余白: 基準4px。スケール: 8 / 16 / 22 / 34 / 56px。余裕を持たせ、窮屈にしないこと。
コンポーネント:
- 非対称のヒーロー、片側に安心感を与えるコピー、もう片側に機能的なカード、中央揃えにしない
- すべて角丸に、カード、入力欄、タグ(半径12から24px)
- ボタン、ナビゲーションにはセージグリーンのピル型、主要なアクションには単色のコーラル
- 細いボーダー付きのピル型タグ
避けるべきもの: 紫、グラデーション、純白の背景、鋭角の角、冷たいグレー、事務的な青、Interフォント。
そのあとで、欲しいものを伝えてください。例えば「上記のシステムを使って、マッサージセラピスト向けの予約ページを作って」のように。
最初の構築の直後にこれを実行して、デフォルトに戻っていないか確認してください。
たった今作ったものを、ありがちなAIデザインの兆候がないか監査してください。紫のグラデーション、InterフォントやRobotoフォント、3カラムのカードレイアウト、中央揃えでボタンが1つだけ下にあるヒーロー、白地に低コントラストのグレーテキストなど。見つかったものはすべて、私が与えたデザインシステムに合う選択肢に置き換えてください。
ログインして完全なプロンプトを表示
次で続行:
ログインすると、次に同意したことになります: 利用規約 と プライバシーポリシー
使い方
このプロンプトは coding 向けに設計されています。上の内容をコピーして、お好みの AI ツールに貼り付けてください。
最良の結果を得るには、プレースホルダー(角括弧や大文字で示された部分)を具体的な要件に置き換えてください。
ノート
0 件のコメント