和 AI 溝通 UI 介面的提示詞小技巧

可能很多人早就在用，但是這招是筆者上星期才發現的超好用小技巧，在這裡分享給大家。

以前在 TUI(Text-based User Interface, 文字使用者介面)下要和 AI 溝通想要呈現的 UI 界面，都要鬥志鬥勇很多回合，但是還是不太了解到底要怎麼做，最後都要等到真的做出來才會知道說，哦～原來你是這個意思啊!

上星期突然想到，直接開了一個新視窗問 ChatGPT，我們每次溝通界面都要講很多次，還是你不了解我，我也不懂你，有沒有什麼好方法?
他提了幾個方案，最後發現了這個究級關鍵字：ASCII+尺寸標註

產出來的內容如下：

    
    .
 1 ┌───────────────────────────────────────────────┐ ▲
 2 │  Card (Material3 Card Container)              │ │ 16dp (Padding Top)
 3 │  ┌─────────────────────────────────────────┐  │ ▼
 4 │  │ ┌────────┐  Developer Name (16sp, Bold) │  │
 5 │  │ │  Icon  │  Category/Description (14sp) │  │
 6 │  │ │ 56x56  │                              │  │
 7 │  │ └────────┘ <─── Corner Radius 12dp      │  │
 8 │  └─────────────────────────────────────────┘  │ ▲ 16dp (Margin)
 9 │  ┌─────────────────────────────────────────┐  │ ▼
10 │  │                                         │  │
11 │  │   [ 瀏覽更多來自此開發者的 App ] (Pill)   │  │
12 │  │                                         │  │
13 │  └─────────────────────────────────────────┘  │ ▲
14 │                                               │ │ 16dp (Padding Bottom)
15 └───────────────────────────────────────────────┘ ▼
16   ◀────────────── 16dp (Padding) ──────────────▶
    

以後在終端機/指令視窗中要和 codex/Claude Code 等 AI 溝通就知道該怎麼做了

已知用火😂