厳選・オープン・無料

Wrdlss Club

ユーザーの存在とインタラクションに応答するインタラクティブなASCIIアートの遊び場。

Developer ToolsExperimentalTypographyMonochromeClean
Wrdlss Club のスクリーンショット
↓ デザインシステムをダウンロード (2 MB)OpenDesign で開く

オリジナル: https://wrdlss.club

📦 パックの中身を見る →

01

デザイン DNA

ASCIIブラータリストターミナル生成的インタラクティブ

芸術的なキャンバスとしての二重の役割を持つハッカーターミナル

02

カラー

#000000Ink
#FFFFFFBG
rgba(229,231,235,1.0)Line

厳格なモノクローム、白地にハイコントラストの黒

03

タイポグラフィ

monospace

すべてのテキストは等幅フォントを使用し、厳格なグリッドベースのアライメントを実現 · プライマリコンテンツには広範にライトウェイト(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

コンポーネント

09

文体と禁止事項

10

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

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

11

System Prompt

ASCIIアートを主要な視覚言語として使用するミニマリストでブラータリストなデジタルキャンバス。デザインは厳格にモノクロームで、黒(#000000)と白(#FFFFFF)のパレットに繊細なライトグレーのボーダーを採用。タイポグラフィは等幅フォントに限定され、UI要素にはライトウェイト(100)と大文字変換を使用。レイアウトは、生成的なASCIIアートワークを優先するシングルカラムのフル幅コンテナ。インタラクティブ要素は最小限で、括弧で囲まれたメタデータタグを使用。サイトは芸術的ステートメントと技術的プラットフォームの両方として機能し、クリックや長押しといったユーザーインタラクションを追跡。重要な制約には、すべての色彩の回避、厳格な等幅タイポグラフィの維持、ターミナルを模した生のエストheticの保持が含まれる。システムはユーザーの存在とインタラクション指標を追跡し、括弧で囲まれたデータポイントとしてUIに表示。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック(エージェント用) ↗

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