产品

CSSBattle

面向网页设计师和开发者的在线 CSS 代码高尔夫游戏，通过尽可能短的 CSS 复现目标图像并参与挑战和排行榜竞争。

cssbattle.dev Discord教育 / 编程学习

AI 竞品立项评估
桌面端
移动端
月访问
29.9K
下降28.1%环比2026 年 10 月
月收入 (MRR)
$4,000自述
2026-10-03 披露Indie Hackers
入门价
免费
没有月付订阅价
创作者
Kushagra Agarwal
@kushsolitary· 7,340 关注与 chinchang、kushagra gour 共创
首次发布
7 年前
2019-04-04 · 估算

访问与收入

月访问数据截至 2026 年 10 月
月收入 (MRR)自述，未经验证 · Indie Hackers
  • 2026 年 10 月$4,000自述 MRR · 未经验证
事件1 条收入证据 · 5 个变化

收入证据

公开披露与已验证的收入数字，按数字日期

营销动作

发布、搜索与内容、引荐、促销
X 账号@css_battle@cssmonk@hint_css@kushsolitary

  • 在 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 发布（3 分）发布

    CSSBattle's LEARN – the fun gamified CSS course

    2022 年 9 月 4 日 · 4 年前发布页

  • 在 Product Hunt 发布发布

    First-ever gamified course to learn CSS

    2022 年 9 月 4 日 · 4 年前发布页

  • 在 Show HN 发布（1 分）发布

    CSSBattle – A CSS game to replicate images in least amount of code

    2021 年 3 月 9 日 · 5 年前发布页

第三方评测与案例拆解

获客渠道拆解、工程师评测与开源档案
Show HN
2023-09-26查看原文
创作者原帖摘录：
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
Show HN
2023-10-08查看原文
创作者原帖摘录：
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

流量来源

2026 年 10 月

访问构成

渠道

  • 直接访问54%
  • 自然搜索38%
  • 外部引荐3%
  • 其他4%

国家/地区

  • 美国23%
  • 英国21%
  • 印度15%
  • 新加坡15%
  • 埃及5%

搜索

站点权重 —域名注册 2019-03-24

关键词月搜索量
css battle2,050
cssbattle550
css battles160
css draw triangle70
css challenge\50

流量数据：Vaneform

定价

官网未公开套餐价格。

试用：未提供 · 观察于 2026-11-04 · 来源页面

页面与变化

开始记录于 2019-04-04

关键页面

每周快照

变化

  1. 11 月 1 日 · 13 天前

    首页主标题（H1）改为「CSSBattle — CSS Battles, Games & Coding Challenges」定位

    Welcome to CSSBattle→CSSBattle — CSS Battles, Games & Coding Challenges

    当时 月访问 29.9K同期还有 4 个动作
  2. 11 月 1 日 · 13 天前

    移除技术栈：Monaco Editor功能

    Monaco Editor→—

    当时 月访问 29.9K同期还有 4 个动作
  3. 11 月 1 日 · 13 天前

    移除技术栈：Sentry功能

    Sentry→—

    当时 月访问 29.9K同期还有 4 个动作
  4. 11 月 1 日 · 13 天前

    新增采用技术栈：Turbopack功能

    —→Turbopack

    当时 月访问 29.9K同期还有 4 个动作
  5. 11 月 1 日 · 13 天前

    首页标题改为「CSS Battle — Daily CSS Challenges, Games & Practice for Web Developers」定位

    CSSBattle→CSS Battle — Daily CSS Challenges, Games & Practice for Web Developers

    当时 月访问 29.9K同期还有 4 个动作

设计

首屏视觉分析与 :root CSS
暗色开发者兼 复古怀旧· 首屏截于 11 月 4 日对比「编程学习」同赛道首屏 →

深黑底配黄强调色与左侧导航，像素风角色插画与每日挑战卡片构成开发者练习工作台。

首屏预览 · 点击放大

首屏讲了什么与转化路径

“CSSBattle — CSS Battles, Games & Coding Challenges”

左侧边栏导航，右侧上半左插画右标题按钮，下方横向每日目标卡片。

首屏转化路径：左文右图 + 插画、手绘或卡通角色 → 首屏直接输入或试用

色板 · 点击复制

五维设计评分7.0 / 10
字体与排版
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%）。背景与面板占绝大部分面积，强调色只用于主按钮与当前激活状态。

## 版式与转化结构

- 首屏版式：左文右图
- 导航结构：左侧应用侧边栏
- 明暗与密度：深色 · 适中
- 圆角与层级：大圆角；用阴影区分层级
- 主视觉载体：插画、手绘或卡通角色
- 转化动作：首屏直接输入或试用
- 标题切入点：品类定位锚点
- 首屏组件特征：插画
- 空间布局拆解：左侧边栏导航，右侧上半左插画右标题按钮，下方横向每日目标卡片。
- 视觉特征总结：深黑底配黄强调色与左侧导航，像素风角色插画与每日挑战卡片构成开发者练习工作台。

## 避免

- 照片
- 柔和粉彩
- 大圆角

请按上面的设计参数与版式实现界面：颜色只用这些变量，强调色只给主要操作与当前状态。只采用这种风格，禁止复刻任何参考产品的品牌名、标志、文案与图片。

问题与证据

CSSBattle 的网站访问量是多少？
Vaneform 估算 2026-10 网站访问量为 29.9K。访问量包含重复访问，付费客户数与收入需分别查看对应证据。来源
CSSBattle 是什么产品，支持哪些平台？
CSSBattle 归属「编程学习」赛道：CSSBattle 是一款面向网页设计师和开发者的在线 CSS 代码高尔夫游戏，通过尽可能短的 CSS 复现目标图像并参与挑战和排行榜竞争。。 支持平台包括：网页。
CSSBattle 有哪些公开披露的收入数据？
Indie Hackers 收录了 2026-10-03 的创始人公开披露：$4,000 /月。来源

同分类研究对象

教育 / 编程学习

这些产品属于同一目录分类。选型时请进一步核对客户任务、功能与部署要求。

产品月访问收入证据
LeetCode巨兽为开发者和求职者提供编程练习、竞赛与技术面试准备工具，并帮助企业识别技术人才。37.7M未公开
W3Schools巨兽为学习和提升网页开发技能的人提供教程、互动练习、代码示例及网站构建托管工具。16.8M未公开
AIスキルアカデミー为对AI感兴趣的人提供免费研讨会，讲解ChatGPT等生成式AI的基础及其在工作和日常生活中的实际应用。4.4M未公开
Codecademy为个人学习者和团队提供互动式技术课程与学习路径，帮助他们学习编程、数据、人工智能等技能并提升职业发展。2.4M未公开
Learn to CodeBoot.dev为初学者和学生提供在线编程课程，通过互动挑战、结构化学习路径和项目帮助他们学习编程。2.2M$1M自述
LabEx为技术学习者、教育者和团队提供浏览器内的动手实验与实战项目，帮助学习 Linux、DevOps、网络安全等技能并跟踪学习进度。1.2M未公开
查看「编程学习」全部产品与定价基准 →