厳選・オープン・無料

Seint Store

標準的なブログテンプレートを基に構築された、機能的でテキスト主体のディレクトリサイト。

01

デザイン DNA

ディレクトリ一覧に使用される基本的なWordPressブログテンプレート。

02

カラー

機能的なブルーアクセントカラーを1色だけ加えた、標準的なハイコントラストのウェブパレット。

03

タイポグラフィ

system-ui

• display35px · 700
• body17px · 400

基本のタイポグラフィはシステムUIフォントを使用。 · キーワードの強調に太字を多用。

04

余白

ブラウザのデフォルト値と基本的なpadding値に主に依存した、標準的な垂直リズム。

05

サーフェス (角丸 / 影 / 罫線)

1px solid #f0f0f0

06

レイアウト

デスクトップ向けの、メインコンテンツエリアとサイドバーを持つ標準的な2カラムブログレイアウト。

07

モーションとインタラクション

インタラクティブ要素上での微細な色の遷移。

リンクの色の変化。 · 標準的なブラウザのデフォルト動作。

08

コンポーネント

• button シンプルなダークな長方形ブロックボタン。
• card 明示的には設計されておらず、コンテンツセクションとして扱われる。
• chip なし。
• input ラベルが上に付いた、シンプルなボーダー付き入力フィールド。
• hero 複雑なスタイルなしの、基本的な画像とテキストのブロック。

09

文体と禁止事項

• トーン 情報提供的で実用的。
• 見出し 直接的でキーワードを重視。
• CTA シンプルで機能的。

• カスタムフォントを使用しない — スクリーンショットには標準のsystem-uiフォントスタックが表示されている。
• 複雑なborder-radiusを使用しない — スクリーンショットにはシャープで丸みのない角が表示されている。
• ドロップシャドウを使用しない — スクリーンショットには完全にフラットなサーフェスが表示されている。
• カラフルなグラデーションを適用しない — スクリーンショットにはプレーンな白背景が表示されている。
• 複雑なアニメーションを使用しない — スクリーンショットにはシンプルなホバー遷移のみが表示されている。
• 装飾的なイラストを使用しない — スクリーンショットには標準的なウェブテキストと単一の画像のみが表示されている。
• 避ける: ブランド名
• 避ける: 専門用語
• 避ける: 遊び心のある表現

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko