厳選・オープン・無料
Wrdlss Club
ユーザーの存在とインタラクションに応答するインタラクティブなASCIIアートの遊び場。
Developer ToolsExperimentalTypographyMonochromeClean
01
デザイン DNA
ASCIIブラータリストターミナル生成的インタラクティブ
芸術的なキャンバスとしての二重の役割を持つハッカーターミナル
02
カラー
#000000Ink
#FFFFFFBG
rgba(229,231,235,1.0)Line
厳格なモノクローム、白地にハイコントラストの黒
03
タイポグラフィ
monospace
- display
48px · 400 - body
16px · 100
すべてのテキストは等幅フォントを使用し、厳格なグリッドベースのアライメントを実現 · プライマリコンテンツには広範にライトウェイト(100)を使用 · UI要素にはすべて大文字変換を適用
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
等幅文字が内在するタイポグラフィグリッドを確立
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 16px
pill · 999px
1px solid rgb(229,231,235)
06
レイアウト
1440container
1columns
8pxgutter
390 / 768breakpoints
ASCIIキャンバス用のシングルカラムフル幅レイアウト
07
モーションとインタラクション
300msmicro
500mssmall
1000msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
テキスト要素のフェードイントランジション · ASCII文字の連続生成
ポインターカーソルがクリック可能な要素を示す · 新しいASCIIアート文字の生成をトリガー
08
コンポーネント
- button ポインターカーソル付きの最小限の大文字テキストボタン
- card 視覚的なブロックとして機能するASCIIアート要素
- chip [CHROME 131.0.0.0] のような括弧で囲まれたメタデータタグ
- input 表示されず
- hero 大規模な生成的ASCIIアートフィールド
09
文体と禁止事項
- トーン 技術的、芸術的、かつ率直
- 見出し 大きなASCIIアートの構図
- CTA 括弧で囲まれた最小限のUI要素
- カラフルなグラデーションを使用しない — スクリーンショットは厳格な白黒を示している
- セリフフォントを使用しない — スクリーンショットは一貫して等幅フォントを示している
- ドロップシャドウを追加しない — スクリーンショットは完全にフラットな表面を示している
- 重いフォントウェイトを使用しない — スクリーンショットはウェイト100が支配的であることを示している
- 角丸のUI要素を追加しない — スクリーンショットは鋭い幾何学的フォームを示している
- カラフルなアクセントを使用しない — スクリーンショットはアクセントカラーがないことを示している
- 避ける: カラフルなグラデーション
- 避ける: 装飾的なタイポグラフィ
- 避ける: 複雑なナビゲーションメニュー
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
ASCIIアートを主要な視覚言語として使用するミニマリストでブラータリストなデジタルキャンバス。デザインは厳格にモノクロームで、黒(#000000)と白(#FFFFFF)のパレットに繊細なライトグレーのボーダーを採用。タイポグラフィは等幅フォントに限定され、UI要素にはライトウェイト(100)と大文字変換を使用。レイアウトは、生成的なASCIIアートワークを優先するシングルカラムのフル幅コンテナ。インタラクティブ要素は最小限で、括弧で囲まれたメタデータタグを使用。サイトは芸術的ステートメントと技術的プラットフォームの両方として機能し、クリックや長押しといったユーザーインタラクションを追跡。重要な制約には、すべての色彩の回避、厳格な等幅タイポグラフィの維持、ターミナルを模した生のエストheticの保持が含まれる。システムはユーザーの存在とインタラクション指標を追跡し、括弧で囲まれたデータポイントとしてUIに表示。
en · zh-CN · zh-TW · ja · ko