作者簡介

詹林峯，全棧開發工程師，積極擁抱 Vibe Coding，專注探索 AI IDE 與全棧開發全流程的深度融合 —— 從前端界面實現、移動端適配到後端邏輯開發、數據庫優化，將 AI 賦能提效落地於每一個環節。作品「積木工坊」入圍“CCF程序員大會碼力全開：AI加速營”活動決賽，並獲得“最佳商業價值獎” 。

初衷：在這個數字化的時代，我想做一件有意義的事——讓每一個孩子都能平等地獲得優質的創意啓蒙資源，不受家庭條件的限制，感受創造的快樂。

一、為什麼要做積木工坊？

實體積木太貴，一套好幾百甚至上千；

積木散落一地，收納成家長每天的"噩夢"；

創意有限，孩子很快就對現有積木感到厭倦；

外出遊玩時，無法帶上沉重的積木玩具。

剛出來工作的時候，我曾做過少兒編程和地推工作，見識到很多孩子對新鮮事物的好奇心，但也看到了教育資源的巨大差異。有些孩子從小就接觸各種編程玩具和創意工具，而另一些孩子連最基本的積木都沒摸過。更讓我觸動的是，有次去醫院的時候，看見很小的小朋友也在刷抖音，他們的注意力被算法牢牢控制，卻缺乏真正有意義的創意活動。

我想改變這種狀況。我希望通過技術手段，打造一個輕量化、高價值的數字積木平台，讓每個孩子都能擁有無限的創意空間。這不僅僅是一個遊戲，更是為了讓每個孩子都能在起跑線上獲得公平的創意啓蒙機會，用創造性的數字體驗替代被動的娛樂消費。

想法很美好，但現實很骨感。我是一個獨立開發者，時間和精力都非常有限。要開發一個跨平台的3D應用，需要掌握Flutter、Three.js、3D數學計算、多平台適配等複雜技術棧。更重要的是，我要如何在有限的時間內，打造一個真正符合兒童心理、操作簡單、功能豐富的應用？就在這時，我遇到了百度文心快碼（Comate），它成為了我的破局關鍵。

二、文心快碼：我的技術合夥人

在這次開發中，文心快碼不再是簡單的代碼補全工具，而是我的"全能技術合夥人"。項目始於一個簡單的想法：讓每個孩子都能輕鬆創造3D積木作品。作為技術負責人，我首先為AI設定了明確的角色：

同時，我向AI提供了Flutter開發規範文檔，確保所有代碼都符合行業標準和最佳實踐，為了確保AI理解我的需求，我讓AI先寫了一個它理解我想做的PRD文檔，並且分析框架的實現。

這一過程刻意將「需求對齊」前置，而不是直接進入編碼階段。實踐證明：先讓 AI 明確需求、和我對齊邊界和設計取捨，再進入代碼生成，不僅能顯著減少返工，還能讓產出更貼近真實產品目標，在複雜系統和中大型 PRD 場景下效果尤為明顯。

1 讓AI根據PRD文檔實現一個mvp版本最初的3D展示

第一個技術挑戰是如何在Flutter中集成3D渲染，我讓它先實現基本的three.js框架加載, 這個加載成功，後面功能就慢慢再細分了。

一次就成功加載本地three 了，下一步繼續讓它實現文檔中的積木添加：

過程中遇到很多問題，比積木的模型怎麼添加，通過AI瞭解到 three.js可以用代碼編寫簡單的模型，積木的凸點怎麼添加等。我不急讓它先寫，而是做出分析與最佳選擇給我：

遇到問題，粘貼報錯讓AI直接修復

2 搞定複雜的3D渲染

3D積木渲染是整個項目的技術核心，涉及到複雜的3D數學計算和圖形學知識。我告訴Comate："要支持積木的拖拽、旋轉、碰撞檢測，幫我找合適的方案，先不要修改。"它提出了好幾種算法，我確認沒問題後，再讓AI開工。

幾秒鐘後，它生成了完整的3D渲染引擎代碼與算法碰撞實現：

class LegoRenderer {
  constructor(container) {
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    
    // AI智能建議：啓用陰影效果，提升真實感
    this.renderer.shadowMap.enabled = true;
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    
    this.setupLighting();
    this.initControls();
  }
  
  // AI生成的智能碰撞檢測
  checkCollision(position, size) {
    const box = new THREE.Box3().setFromCenterAndSize(
      new THREE.Vector3(...position),
      new THREE.Vector3(...size)
    );
    
    return this.bricks.some(brick => {
      const brickBox = new THREE.Box3().setFromObject(brick.mesh);
      return box.intersectsBox(brickBox);
    });
  }
}

我幾乎一行沒改，直接運行成功。 這讓我這個對3D圖形學不太熟悉的開發者，也能快速構建出專業的3D渲染效果。

3 設計兒童友好的界面

我很清楚，這個應用的用户是孩子，界面必須簡單、直觀、有趣。

我告訴Comate："設計一個適合兒童的積木選擇界面，要有大按鈕、鮮豔顏色，支持拖拽操作。"

它生成的界面不僅符合我的要求，還自動考慮了兒童的使用習慣：

// AI生成的兒童友好界面
class BrickSelector extends StatelessWidget {
  Widget _buildBrickButton(BrickShape shape) {
    return GestureDetector(
      onTap: () => _selectShape(shape),
      child: Container(
        width: 80,
        height: 80,
        decoration: BoxDecoration(
          // AI建議：大尺寸，便於兒童點擊
          borderRadius: BorderRadius.circular(16),
          // AI建議：鮮豔的顏色，吸引注意力
          gradient: LinearGradient(
            colors: [
              _getPrimaryColor(shape.id),
              _getSecondaryColor(shape.id),
            ],
          ),
          // AI建議：明顯的陰影效果，提供立體感
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.2),
              blurRadius: 8,
              offset: const Offset(0, 4),
            ),
          ],
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              _getBrickIcon(shape.id),
              size: 32,
              color: Colors.white,
            ),
            const SizedBox(height: 4),
            Text(
              shape.name,
              style: const TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

三、這款應用到底有什麼？

在Comate的加速下，積木工坊的完成度遠超我的預期。它不僅僅是一個數字積木，更是一個創意啓蒙的"瑞士軍刀"。

1 無限創意空間

• 豐富的積木類型：標準積木、矮積木、帶輪子積木等多種選擇
• 12種鮮豔顏色：激發孩子的色彩認知和搭配能力
• 360度自由視角：從任何角度觀察和調整作品
• 智能網格對齊：積木自動吸附到網格，讓搭建更整齊

2 跨平台體驗

• 五端適配：Android、iOS、HarmonyOS、Windows、macOS全平台支持
• 響應式設計：自動適配不同屏幕尺寸
• 一致體驗：在任何設備上都能獲得流暢的使用體驗

3 教育價值

• 空間想象力培養：通過3D搭建鍛鍊空間思維
• 色彩搭配訓練：培養孩子的色彩感和審美能力
• 邏輯思維發展：通過規劃和實現作品，培養邏輯思維
• 創造力激發：沒有固定答案，鼓勵自由創作

4 家長友好

• 零成本：比實體積木便宜100倍
• 零收納：沒有散落一地的煩惱
• 便攜性：隨時隨地都能玩
• 安全環保：沒有小零件吞嚥風險

四、開發效率的飛躍

傳統開發 vs AI輔助開發

關鍵突破

• 技術門檻降低：我不需要深入瞭解3D圖形學，也能構建專業應用
• 開發週期縮短：原本需要2個月的項目，只用了不到2周
• 代碼質量提升：AI生成的代碼結構清晰、註釋完整
• bug減少70% ：AI的智能檢測避免了很多常見錯誤

五、更深層的意義

這個項目對我來説，不僅僅是一個技術應用，更承載了一份教育情懷。

推動教育公平

在很多偏遠地區，孩子們很難接觸到優質的創意啓蒙資源。通過這個免費的數字應用，我們希望能夠：

• 消除地域限制：只要有手機，就能享受優質的創意教育
• 降低經濟門檻：完全免費，不增加家庭負擔
• 提供優質內容：經過精心設計，符合兒童認知發展規律

助力培養創造力

在這個強調創新的時代，創造力是孩子未來最重要的競爭力。積木工坊通過：

• 開放式設計：沒有標準答案，鼓勵自由探索
• 即時反饋：孩子能立即看到自己的創意成果
• 循序漸進：從簡單到複雜，培養成就感

促進親子關係

數字產品不應該成為親子關係的障礙。我們希望：

• 共同參與：家長可以和孩子一起搭建，增進感情
• 交流機會：通過作品分享，創造更多家庭話題
• 教育橋樑：幫助家長了解孩子的創意世界

寫在最後

這個項目沒有大公司的資源，也沒有複雜的商業模式，只有一份簡單的初心：讓每個孩子都能擁有無限的創意空間。感謝百度文心快碼（Comate），它讓我在有限的時間裏，把這份初心變成了一個完整、可用的產品。它讓我看到，AI技術的進步不是為了替代開發者，而是為了讓每一個有情懷的開發者，都能更輕鬆地實現自己的教育理想。

如果你也是一名開發者，有自己的教育理想，不妨試試Comate，它可能會給你帶來意想不到的驚喜。如果你是家長，或者對兒童教育感興趣，歡迎下載體驗積木工坊，讓我們一起為孩子的創意世界添磚加瓦。

演示&體驗

產品演示視頻：https://www.bilibili.com/video/BV1yAUaBnE4c/

目前應用上架到華為應用商店，點擊鏈接體驗鴻蒙應用積木工坊https://appgallery.huawei.com/app/detail?id=com.aizhaiyu.jimu