- 每月造訪次數
- 29.9K
- 下降28.1%較上月2026 年 10 月
- 入門價
- 免費
- 沒有月付訂閱價
- 首次發布
- 7 年前
- 2019-04-04 · 估算
訪問與收入
- 2026 年 10 月$4,000自述 MRR · 未經驗證
營收佐證
公開披露與已驗證的收入數字，按數字日期行銷動作
發布、搜尋與內容、引薦、促銷- Turning all my wild ideas into reality!! I present to you, the new Versus spectator mode in @css_battle 🔥
@cssmonk · 2026-11-05 · 5 贊 · 2 轉發 · 213 瀏覽
- another sneak peek 引用帖 @css_battle： What if...you had a new fun way to play on CSSBattle?? Lots of exciting updates coming your way, players!
@css_battle · 2026-10-18 · 1 贊 · 0 轉發 · 151 瀏覽
- This post by @artlung is so good! https://artlung.com/blog/2025/05/06/110-css-battle/
@css_battle · 2026-10-16 · 3 贊 · 1 轉發 · 227 瀏覽
在 Show HN 發布（5 分）發布
CSSBattle – A competitive game for web designers and developers — My name is Kushagra, and I am the co-founder of CSSBattle[1]. We built CSSBattle to make web designing a bit more fun. CSSBattle is an onl…
2023 年 10 月 8 日 · 3 年前發布頁
在 Show HN 發布（14 分 · 3 評論）發布
CSSBattle 2.0 – The funnest CSS game for web designers and developers — Hello HN! My name is Kushagra, and I am the co-founder of CSSBattle[1]. We built CSSBattle to make web designing a bit more fun. CSSBattle…
2023 年 9 月 26 日 · 3 年前發布頁
在 Show HN 發布（1 分）發布
CSSBattle – A CSS game to replicate images in least amount of code
2021 年 3 月 9 日 · 5 年前發布頁
第三方評測與案例拆解
客戶來源管道拆解、工程師評測與開源檔案- 創作者原帖摘錄：
- Hello HN! My name is Kushagra, and I am the co-founder of CSSBattle[1]. We built CSSBattle to make web designing a bit more fun. CSSBattle is an online competitive game where you have to replicate a given target image with CSS. When you submit your CSS code, you get a score based on how well you replicated the image + how short your code is. Our community ha
- 創作者原帖摘錄：
- My name is Kushagra, and I am the co-founder of CSSBattle[1]. We built CSSBattle to make web designing a bit more fun. CSSBattle is an online competitive game where you have to replicate a given target image with CSS. When you submit your CSS code, you get a score based on how well you replicated the image + how short your code is. Our community has now grow
流量來源
訪問構成
管道
- 直接訪問54%
- 自然搜尋38%
- 外部引薦3%
- 其他4%
國家/地區
- 美國23%
- 英國21%
- 印度15%
- 新加坡15%
- 埃及5%
搜尋
站點權重 —網域名稱註冊 2019-03-24
| 關鍵字 | 月搜尋量 |
|---|---|
| css battle | 2,050 |
| cssbattle | 550 |
| css battles | 160 |
| css draw triangle | 70 |
| css challenge\ | 50 |
流量資料：Vaneform
定價
官網未公開方案價格。
試用：未提供 · 觀察於 2026-11-04 · 來源頁面
頁面與變化
關鍵頁面
每週快照變化
設計
深黑底配黃強調色與左側導航，像素風角色插畫與每日挑戰卡片構成開發者練習工作台。
首屏畫面預覽 · 點擊放大
首屏畫面講了什麼與轉化路徑
“CSSBattle — CSS Battles, Games & Coding Challenges”
左側邊欄導航，右側上半左插畫右標題按鈕，下方橫向每日目標卡片。
首屏畫面轉化路徑：左文右圖 + 插畫、手繪或卡通角色 → 首屏畫面直接輸入或試用
- 品類定位錨點
- 插畫
色板 · 點擊複製
- 字體與排版
- 7.0
- 色彩與對比
- 7.0
- 構圖與留白
- 7.0
- 細節與工藝
- 7.0
- 風格辨識度
- 7.0
結構
- 字體
- Inter
- 首屏畫面版式
- 左文右圖
- 主視覺
- 插畫、手繪或卡通角色
- 轉化動作
- 首屏畫面直接輸入或試用
- 信任背書
- 無顯式背書
- 導航
- 左側應用側邊欄
- 明暗與密度
- 深色 · 適中
- 圓角與層級
- 大圓角 · 有陰影
預覽 AI 設計說明全文（含 :root CSS 變量與版式規則）只寫風格參數，禁止復刻該產品的品牌名、標誌、文案與圖片
# 設計說明：暗色開發者（兼備復古懷舊）
深色背景、等寬字體與程式碼片段，首屏畫面常放終端機或命令列示例。
## 設計參數
```css
:root {
--background: #0e1116;
--surface: #1a1e27;
--foreground: #ffffff;
--muted-foreground: #9aa3b2;
--accent: #f5c518;
--radius: 16px;
--font-heading: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
}
```
色彩面積配比：背景 #0E1116（約 46%） · 面板 #1A1E27（約 28%） · 正文 #FFFFFF（約 12%） · 次要文字 #9AA3B2（約 8%） · 強調 #F5C518（約 6%）。背景與面板占絕大部分面積，強調色只用於主按鈕與當前激活狀態。
## 版式與轉化結構
- 首屏畫面版式：左文右圖
- 導航結構：左側應用側邊欄
- 明暗與密度：深色 · 適中
- 圓角與層級：大圓角；用陰影區分層級
- 主視覺載體：插畫、手繪或卡通角色
- 轉化動作：首屏畫面直接輸入或試用
- 標題切入點：品類定位錨點
- 首屏畫面元件特徵：插畫
- 空間布局拆解：左側邊欄導航，右側上半左插畫右標題按鈕，下方橫向每日目標卡片。
- 視覺特徵總結：深黑底配黃強調色與左側導航，像素風角色插畫與每日挑戰卡片構成開發者練習工作台。
## 避免
- 照片
- 柔和粉彩
- 大圓角
請按上面的設計參數與版式實現介面：顏色只用這些變量，強調色只給主要操作與當前狀態。只採用這種風格，禁止復刻任何參考產品的品牌名、標誌、文案與圖片。
問題與證據
同分類研究對象
這些產品屬於同一目錄分類。選型時請進一步核對客戶任務、功能與部署要求。