精選 · 開放 · 免費
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 藝術構圖
- 按鈕文案 極簡的方括號包裹 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 藝術作品。互動元素極為精簡，使用方括號包裹的中繼資料標籤。網站兼具藝術宣言與技術遊樂場的功能，追蹤使用者點擊與長按等互動。關鍵限制包括避免所有色彩、保持嚴格的等寬字體排版，以及保留原始的終端機靈感美學。系統追蹤使用者存在感與互動指標，將其顯示為 UI 中方括號包裹的資料點。
en · zh-CN · zh-TW · ja · ko