- Một design engineer vừa gộp gpt-image-2, AI normal map và shader lighting lại làm một — biến UI web phẳng thành giao diện có khối, có bóng, có ánh sáng động theo con trỏ chuột.
TL;DR
Jacob Miller (@pwnies) — design engineer từng làm Figma, Atlassian, Microsoft — vừa show một pipeline 3 bước gọn lỏn: (1) dựng UI bằng gpt-image-2, (2) sinh normal map từ ảnh UI đó, (3) bật dynamic lighting trong browser. Kết quả: nút bấm, thẻ, chip thực sự đổ bóng và bắt sáng theo nguồn sáng động, không cần 3D engine, không cần designer vẽ tay shadow.
What's new
Trong nhiều năm, normal map là đặc sản của game dev — bạn dán nó lên sprite 2D để fake độ sâu. Web UI thì sống bằng box-shadow và gradient tĩnh. Demo của @pwnies là lần đầu tiên hai thế giới chạm nhau ở quy mô ai-cũng-làm-được:
- Bước 1 — Generate UI: prompt
gpt-image-2cho ra một PNG UI hoàn chỉnh (button, card, nav, icon, chữ sắc nét). - Bước 2 — Generate normal map: đẩy PNG đó qua một AI normal map generator (DeepBump, Tripo, ShaderMap-style). Output là RGB map, mỗi pixel mã hoá vector X/Y/Z của mặt.
- Bước 3 — Dynamic lighting: fragment shader (WebGL / WebGPU / Three.js / thậm chí CSS Houdini) sample normal map, dot-product với hướng ánh sáng → tô sáng/tối từng pixel. Light theo cursor, theo time-of-day, theo hover — tuỳ thích.
Why it matters
Đây không phải thêm một hiệu ứng neumorphism. Đây là lần đầu một UI phẳng có thể phản ứng lại ánh sáng thực sự mà không cần ai ngồi vẽ bóng. Với indie hacker và design engineer, chi phí "làm UI cảm giác sờ được" rơi từ vài giờ Figma + thủ công CSS xuống vài giây + ~$0.21 một lần prompt.
Raised elements actually cast shadows and get lit naturally. — @pwnies
Ý nghĩa sâu hơn: AI không chỉ generate ảnh — nó sinh ra cả dữ liệu hình học ẩn (pseudo-depth) mà shader runtime có thể tiêu thụ.
Technical facts
gpt-image-2 (ChatGPT Images 2.0) là miếng ghép mới khiến pipeline này khả thi, vì nó là model đầu tiên render UI kèm text đủ chuẩn để ship:
| Thông số | gpt-image-2 |
|---|---|
| Release | 21 April 2026 |
| LM Arena (image) | 1512 ELO, #1 by +242 |
| Text accuracy | ~99% (Latin, CJK, Hindi, Bengali) |
| Resolution | 1024², 1792×1024, 1024×1792, 2K 2560×1440 |
| Aspect ratio | 3:1 → 1:3 |
| Output format | PNG / JPEG / WebP |
| Price (high, 1024²) | ~$0.211 / ảnh |
| Thinking mode | +15–30s, tối đa 8 ảnh coherent |
Về normal map: mỗi pixel là một vector pháp tuyến được pack vào 3 kênh RGB. Shader làm dot(normal, lightDir) rồi clamp — per-pixel shading mà hình học scene vẫn phẳng. Trick 20 năm tuổi của game dev, giờ gọi được từ một JSON prompt.
Comparison
| Workflow | Cách cũ | Cách @pwnies |
|---|---|---|
| Dựng UI visual | Figma + export PNG | Prompt gpt-image-2 |
| Depth / bevel | box-shadow tĩnh, layer PNG | AI normal map, per-pixel lighting |
| Ánh sáng | Hardcode shadow direction | Động — follow cursor / hover / time |
| Chi phí / vòng lặp | Giờ designer | Giây + ~$0.21 |
| Stack | Figma + CSS | gpt-image-2 + DeepBump/Tripo + fragment shader |
So với Midjourney v7 hay Imagen 4, điểm đột phá của gpt-image-2 là text trong ảnh đủ sắc để dùng làm nhãn button thật, không còn kiểu "enchuita" hay "churiros" như các model cũ.
Use cases
- Indie dev: ship landing page tactile mà không thuê designer.
- Game UI / HUD: normal-map pipeline là ngôn ngữ mẹ đẻ — giờ art cũng generate được.
- Ad creative: hero section có nút "bấm xuống" khi hover, không cần Unity/Unreal runtime.
- Portfolio motion: một kênh thể hiện mới cho design engineer — UI do AI vẽ, thắp sáng bằng shader thật.
- Codex / Cursor agents:
gpt-image-2gắn sẵn trong Codex, agent có thể tự generate UI art giữa lúc code.
Limitations & pricing
- Normal map AI là gần đúng: DeepBump đoán depth từ 1 ảnh duy nhất — vùng text cutout hay rãnh lõm hay bị invert. Ổn cho UI decorative, không dùng cho CAD.
- gpt-image-2 không phải free: high-quality ~$0.21/ảnh, Thinking mode thêm 15–30s. Pipeline này là pre-bake UI art rồi light live, không phải real-time generation.
- Không có native depth / self-shadow: nếu muốn đổ bóng chồng, cần thêm AO pass hoặc depth map.
- Logo không reproducible 100% — brand-exact asset vẫn cần ghép tay.
- Knowledge cutoff Dec 2025 — prompt "UI iOS mới nhất" sẽ không có gì ra sau mốc đó.
What's next
Full API gpt-image-2 mở rộng cho mọi developer đầu tháng 5/2026. OpenAI đã úp mở về các output đa-pass (depth, normal, segmentation) native — nếu ship, pipeline của @pwnies rút từ 3 bước xuống 1 call duy nhất. Trong khi đó, cộng đồng Three.js / Pixi / CSS Houdini nhiều khả năng ship preset "AI UI" chỉ cần quăng vào asset + normal là có component 3D-lit.
Bet an toàn: trong vài tháng tới, Figma, Framer, Linear-style tool sẽ nhúng đúng pipeline này. Demo của @pwnies chính là bản blueprint.
Nguồn: @pwnies trên X, OpenAI, TechCrunch, BuildFastWithAI.
