CodeSpark 灵码

基于扣子编程官网深度改造的 AI 编程平台品牌着陆页。完整克隆原站架构，将品牌全面重塑为 CodeSpark（灵码），标语「灵感一闪，代码即成」，展示 AI 智能编程、一键部署、对话式开发等核心能力。

在线体验 ·

独立开发者 · 2026年3月 · 个人项目

CSS3 / EdgeOne Pages / HTML5 / JavaScript / SingleFile / SVG

项目简介

CodeSpark 灵码是一个从扣子编程官网（code.coze.cn）深度克隆并全面品牌重塑的 AI 编程平台着陆页。使用 SingleFile CLI 完整保存原站页面，经过 7 步流水线处理后，将品牌全面改造为个人品牌 CodeSpark（灵码）。

核心亮点

• 完整克隆流水线: SingleFile CLI 下载 → js-beautify 格式化 → Base64 资源提取（24个资源文件含10个字体）→ CSS/HTML 分离（257KB CSS）→ CSP 策略修复的标准化流程
• 深度品牌重塑: 72 处品牌引用全面替换，扣子→CodeSpark（46处）、coze/Coze→CodeSpark（26处），火山引擎→CloudSpark，OpenClaw→CodeSpark Agent，标语「灵感一闪，代码即成」
• EdgeOne Pages 部署: 集成到 uiux-showcase 项目，自定义域名 uiux.weilanx.com，路由和导航完善
• 资源优化: 24 个提取资源（10个字体 + 6张图片 + 5张照片 + 2个SVG + 1个WebP），结构清晰可维护

挑战

• 品牌重塑量大: 共 72 处品牌引用需全面替换，包括标题、描述、用户评价、FAQ、页脚等，确保零遗漏
• Base64 资源内嵌: 原始 HTML 包含大量 Base64 编码的图片和字体，导致文件体积过大
• CSP 策略冲突: SingleFile 自动注入的 Content-Security-Policy 阻止外部 CSS 加载

解决方案

• 系统化正则替换: 分批次精确替换品牌文字，最终验证 0 处扣子/Coze 残留
• 资源提取流水线: Python 脚本自动提取 24 个 Base64 资源为独立文件，HTML 从 4.9MB 降至 101KB
• CSP 标签清除: 删除注入的 CSP meta 标签，CSS 外部引用正常加载