Wix KickstartX 挑战赛 2026 — 完整 Writeup

结果: 200/200 (100%) — Token: WKX-9245FA70-200 日期: 2026年3月24日

1. 发现与侦察

挑战公告

LinkedIn 上的一篇帖子宣布了 Wix KickstartX 的一项特别挑战——一个面向初级开发者的项目。规则如下：

30 分钟，只有一次机会
得分最高的前 10 名直接晋级考试阶段
提供了两个链接：wix-kickstartx-challenge-2026.base44.app/ 和 wixkickstart.com

找到挑战入口

主站点 wixkickstart.com 是 Wix 托管的站点（由 Wix 的 Thunderbolt 引擎服务端渲染）。标准 curl 只返回 JavaScript 外壳——没有任何实际内容。我们使用了 headless Chromium 来渲染它：

chromium --headless --disable-gpu --no-sandbox --virtual-time-budget=10000 \
  --dump-dom "https://wixkickstart.com" > /tmp/wix_rendered.html

从渲染后的 DOM 中，我们提取出了一个嵌入的 iframe：

这是一个 p5.js 粒子动画（首屏部分的视觉特效），并不是挑战本身。真正的挑战位于 Base44 应用中。

2. 挑战应用的逆向工程

平台：Base44

挑战运行在 Base44 上——一个低代码应用平台。该应用是一个单页 React 应用，所有逻辑都在一个 JS bundle 中：

https://wix-kickstartx-challenge-2026.base44.app/assets/index-oTG160r9.js

大小: 410,809 字节（压缩后的 React + 应用逻辑 + Base44 SDK）

提取 API 表面

通过 grep 这个 JS bundle，我们绘制出了整个 API 的全貌：

函数	用途
`startGame`	创建一个游戏会话，返回 200 张图片 + 200 条描述
`scoreGame`	接受 `{matches: {}, sessionId: ""}`，返回 `{correctCount: N}`
`generateToken`	接受 sessionId，返回完成 token
`getLeaderboard`	返回最高分
`saveNickname`	保存排行榜上的显示名称

数据实体: GameSession, Participant

API URL 模式：

POST /api/apps/{appId}/functions/{functionName}

App ID: 69aea07cbcb9a3dd1039a58d

Bundle 中的关键常量

const or = 1800;   // 时间限制：1800 秒（30 分钟）
const rm = 200;    // 项目总数：200 对图片-描述

发现 JSON 提交功能

一个关键发现——该应用有 JSON 批量提交模式。来自压缩后的源码：

function Ik({onSubmit:r, onClose:n}) {
    // ...
    h = JSON.parse(s)  // 解析 JSON 输入
    // 验证：必须是类似 { "IMG-001": "DESC-042", ... } 的对象
    r(h)  // 一次性提交所有匹配
}

模态框中的占位文本：

{
  "IMG-001": "DESC-042",
  "IMG-002": "DESC-017",
  ...
}

这意味着我们不需要在 UI 中点击 200 次——我们可以通过编程方式提交一个包含全部 200 个匹配的 JSON 映射。

认证流程

Base44 SDK 使用 JWT 认证：

Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

JWT payload 包含：

{
  "sub": "[email protected]",
  "exp": 1782162460,
  "iat": 1774386460
}

所有 API 调用所需的 headers：

Content-Type: application/json
Authorization: Bearer {jwt_token}
X-App-Id: 69aea07cbcb9a3dd1039a58d
Base44-Functions-Version: prod
X-Origin-URL: https://wix-kickstartx-challenge-2026.base44.app/

3. 理解游戏数据

startGame 响应

POST /api/apps/69aea07cbcb9a3dd1039a58d/functions/startGame
Status: 200
Transferred: 62.87 kB compressed (2.20 MB decompressed)
Content-Encoding: br (Brotli)

响应结构：

{
  "status": "active",
  "sessionId": "69c2fd218e5b26f307c941c9",
  "startedAt": "2026-03-24T21:07:45.101Z",
  "imageOrder": ["IMG-154", "IMG-102", ...],   // 200 项（显示顺序）
  "descOrder": ["DESC-125", "DESC-109", ...],  // 200 项（显示顺序）
  "imagesData": { "IMG-001": "data:image/svg+xml;base64,...", ... },  // 200 个 SVG
  "descriptionsData": { "DESC-105": "milky field, overlaid with...", ... }  // 200 段文本
}

图片格式：内联 SVG（base64 编码）

每张图片是一个 200x200 的 SVG，包含：

一个背景渐变（浅色或深色主题）
一个可选的叠加图案（线条、圆点、圆环等）
几何形状，具有特定的颜色、大小、不透明度、旋转和位置

解码后的 SVG 示例（IMG-001）：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <linearGradient id="bg" ...>
      <stop offset="0%" stop-color="#f5f0eb"/>
      <stop offset="100%" stop-color="#e8e0d5"/>
    </linearGradient>
  </defs>
  <rect width="200" height="200" fill="url(#bg)"/>
  <!-- 可选的叠加线条/圆点/圆环在此 -->
  <polygon points="..." fill="#E2725B" transform="translate(128.6,185.7) rotate(90)"
           style="opacity:0.5;filter:drop-shadow(...)"/>
  <!-- 更多形状... -->
</svg>

描述格式：结构化自然语言

每条描述都遵循严格的模式：

{背景} field[, overlaid with {叠加}]. {N} elements total:
{大小} {不透明度} {颜色} {形状} ({旋转}, at {位置}) ·
{大小} {不透明度} {颜色} {形状} ({旋转}, at {位置}) · ...

示例：

milky field, overlaid with tilted cross-lines. 10 elements total:
minuscule nearly solid dim gray pike (steeply angled, at center inner-left) ·
substantial solid azure pike (diagonal, at top center) · ...

4. 构建自动化求解器

第 1 步：映射所有常量

我们需要将 SVG 属性映射到描述词汇。这需要分析全部 200 张图片和全部 200 条描述，以找到精确的对应关系。

背景映射（12 种）

通过统计两侧的出现次数，我们建立了 1:1 的映射：

SVG 渐变起始颜色	次数	描述单词	次数
`#0a1628`	28	`pitch`	28
`#eef2f7`	20	`frosted`	20
`#0d0d0d`	19	`tenebrous`	19
`#fef9f0`	18	`pearlescent`	18
`#1e0a2e`	18	`nocturnal`	18
`#0a1a0a`	17	`midnight`	17
`#1a0a0a`	15	`inky`	15
`#f5f0eb`	14	`milky`	14
`#f7f3ee`	14	`ethereal`	14
`#f0f0f0`	14	`radiant`	14
`#f0f7f4`	13	`glowing`	13
`#1a1a2e`	10	`somber`	10

方法: 统计全部 200 个 SVG 中唯一的渐变起始颜色，统计全部 200 条描述中唯一的首单词，按次数进行匹配。

叠加图案映射（7 种）

SVG 叠加图案根据类型使用不同的实现方式：

SVG 图案	检测方法	次数	描述名称	次数
`<line>` 元素，水平（`dy=0`）	检查 x1,y1,x2,y2	35	`striped overlay`	35
`<line>` 元素，垂直（`dx=0`）	检查 x1,y1,x2,y2	34	`lattice pattern`	34
带 `opacity="0.06"` 的 `<circle>`（圆点）	统计低不透明度圆形	30	`stippled layer`	30
完全没有叠加元素	无线条、无背景形状	28	（无）	28
`<line>` 元素，对角线	检查斜率方向	27	`tilted cross-lines`	27
带 `opacity="0.06"` 的小型 `<polygon>`/`<path>`	具有低不透明度属性的形状	25	`arrow-band texture`	25
带 `fill="none" stroke="#888"` 的 `<circle>`	仅描边的圆形	21	`ringed pattern`	21

关键洞察: 背景图案元素将 opacity 用作 XML 属性（例如，opacity="0.06"），而前景形状将 opacity 放在 style 属性中（例如，style="opacity:0.7"）。这一区别对于将背景图案与实际形状区分开来至关重要。

颜色映射（28 种颜色）

全部 200 个 SVG 恰好使用 28 种唯一的十六进制填充颜色。全部 200 条描述恰好使用 28 种唯一的颜色名称。

Hex	描述名称	Hex	描述名称
`#708090`	blue-gray	`#cd7f32`	brass
`#f5f5f5`	near white	`#dc143c`	fiery red
`#00bcd4`	electric cyan	`#2196f3`	azure
`#ff6b6b`	salmon pink	`#228b22`	rich green
`#98ff98`	pale green	`#b0b0b0`	platinum
`#0f52ba`	deep sapphire	`#800020`	oxblood
`#ff8c00`	deep orange	`#4b0082`	dark purple
`#e2725b`	terra rosa	`#ffbf00`	marigold
`#b7410e`	russet	`#ff69b4`	candy pink
`#ffd700`	bright gold	`#c0c0c0`	tin
`#6b8e23`	moss	`#008080`	deep teal
`#40e0d0`	pale teal	`#0047ab`	royal blue
`#e34234`	burnt sienna	`#a0522d`	deep red
`#4a4a4a`	dim gray	`#36454f`	dark gray

形状类型映射（10 种）

SVG 元素	检测逻辑	描述名称
`<polygon>` 3 个顶点	统计空格分隔的点对	`pike`
`<polygon>` 4 个顶点		`tilted square`
`<polygon>` 5 个顶点		`quint form`
`<polygon>` 6 个顶点		`bee cell`
`<polygon>` 10 个顶点		`asterisk`
`<rect>`（非背景）	有 width/height，但不是 200x200	`tilted square`
`<circle>`	标签名	`disc`
带 `fill-rule="evenodd"` 的 `<path>`	两条同心圆弧路径	`donut`
带单条弧线 + Z 的 `<path>`	半圆路径	`half-disc`
带 6+ 个 L 命令的 `<path>`	十字/加号形状	`crosshair`
带 3-5 个 L 命令的 `<path>`	箭头状形状	`pointer`

大小映射

基于形状顶点到原点的最大半径：

半径范围	描述名称
0–12	`minuscule`
13–16	`modest`
17–20	`mid-sized`
21–25	`substantial`
26+	`massive`

不透明度映射

SVG 不透明度值	描述名称
1.0	`solid`
0.85	`nearly solid`
0.7	`semi-transparent`
0.5	`faint`

旋转映射

SVG rotate() 值	描述名称
0°	`upright`
1–20°	`slightly tilted`
21–55°	`diagonal`
56–75°	`steeply angled`
76–105°	`sideways`

位置网格

形状放置在 7x7 的网格上，坐标为： X 和 Y 方向均为 [14.3, 42.9, 71.4, 100.0, 128.6, 157.1, 185.7]。

这些坐标映射到列名：far-left, left, inner-left, center, inner-right, right, far-right 以及行名：top, upper, upper-mid, center, lower-mid, lower, bottom

第 2 步：解析所有 SVG

对于 200 张 SVG 图片中的每一张：

wix-kickstartx-challenge-writeup

最受欢迎