视觉故事与调色板工作室

🎨 CodeMuse——视觉故事与调色板工作室

微软代理联盟2026-创意应用轨道（战斗#1）

一种滚动驱动的视觉体验，融合了生成艺术、品牌调色板生成、ASCII艺术导出和MCP服务器，为GitHub Copilot提供了创造性的超能力。

✨ 什么是CodeMuse？

CodeMuse是一个 视觉故事和调色板工作室 --创意平台，其中：

• 这 天空真的变了 当你滚动（夜→ dawn → day → 日落），由实时Canvas背景引擎驱动
• 7种生成艺术算法 使用交互式控件实时渲染
• A. 设计助理 从项目氛围中生成确定性的调色板和徽标/布局创意
• 任何画布艺术品都可以 导出为ASCII艺术 具有可配置的字符集
• 一 MCP服务器 6个工具赋予GitHub Copilot视觉创意能力

🌗 涡旋驱动天空发动机

当您滚动时，整个页面背景会随着时间的推移而变化：

🖼️ 生成艺术画廊

HTML5 Canvas上渲染的七种实时算法 悬停以显示算法细节:

每件艺术品都有以下特点：

• 实时画布渲染 60fps
• 悬停覆盖 揭示算法名称、数学公式和技术
• 交互式参数控制 （滑块用于实时调整）
• 源代码查看器 复制到剪贴板
• PNG导出 和 ASCII艺术输出

🎨 设计助理

一个内置的品牌识别工具，可以生成：

• 调色板 （5种颜色，带十六进制代码、名称和CSS变量）
• 徽标和布局建议 （每个氛围3个概念）
• 氛围：大胆、冷静、科技、俏皮、极简、宇宙

所有确定性-不需要外部API密钥。

⣿ ASCII艺术导出

将任何实时画布艺术作品转换为ASCII艺术：

• 可配置的列/行（20-200列）
• 通过亮度将亮度映射到字符
• 复制到剪贴板或下载为 .txt

🔌 GitHub Copilot的MCP服务器

A. 模型上下文协议服务器 随着 6个创意编码工具:

🚀 快速开始

先决条件

• Node.js 18+
• VS Code 随着 GitHub Copilot

运行Web应用程序

# Clone the repository
git clone https://github.com/kagithamanoj/CodeMuse.git
cd CodeMuse

# Install dependencies
npm install

# Start the development server
npm run dev

打开 http://localhost:5173 滚动观看天空的演变！

设置MCP服务器

# Navigate to the MCP server
cd mcp-server

# Install dependencies
npm install

# Build the TypeScript
npm run build

然后添加到您的VS Code MCP配置中(.vscode/mcp.json):

{
  "servers": {
    "codemuse": {
      "command": "node",
      "args": ["${workspaceFolder}/mcp-server/dist/index.js"],
      "env": {}
    }
  }
}

现在在Copilot聊天中，尝试：

• “生成流场生成艺术草图”
• “为我的项目创建赛博朋克调色板”
• “为一个名为Fizz的有趣应用程序推荐一个品牌场景”
• “对于密集的图像，我应该使用什么ASCII艺术风格？”
• “给我一个高级创意编码挑战”
• “在Canvas中创建反弹粒子动画”

🏗️ 建筑

CodeMuse/
├── src/                          # React Web Application
│   ├── App.tsx                   # Main app with scroll layout + sky engine
│   ├── components/
│   │   ├── BackgroundScene.tsx   # Scroll-driven sky (night→dawn→day→sunset)
│   │   ├── ScrollLayout.tsx      # Scroll progress tracker (0→1)
│   │   ├── Header.tsx            # Navigation with glass-morphism
│   │   ├── Hero.tsx              # "Visual Story & Palette Studio" landing
│   │   ├── Gallery.tsx           # Art grid with live canvas previews
│   │   ├── ArtCard.tsx           # Cards with hover-to-reveal algorithm details
│   │   ├── CanvasRenderer.tsx    # Generic canvas animation engine
│   │   ├── Studio.tsx            # Full studio with controls + ASCII export
│   │   ├── DesignAssistantPanel.tsx  # Palette & logo suggestion generator
│   │   ├── AsciiArtModal.tsx     # Canvas → ASCII art converter
│   │   ├── MCPSection.tsx        # MCP server documentation (6 tools)
│   │   ├── ZoneOut.tsx           # Poetic interstitial section
│   │   ├── ConstellationBg.tsx   # Static constellation canvas (legacy)
│   │   └── Footer.tsx            # Links and attribution
│   ├── sketches/                 # Generative Art Algorithms
│   │   ├── flowField.ts          # 🌊 Noise-based flow field
│   │   ├── particleSystem.ts     # ✨ Gravitational particle nebula
│   │   ├── fractalTree.ts        # 🌳 Recursive fractal tree
│   │   ├── wavePattern.ts        # 🎵 Wave interference patterns
│   │   ├── starField.ts          # 🚀 Hyperspace warp effect
│   │   ├── spirograph.ts         # 🎯 Mathematical spirograph
│   │   ├── mandala.ts            # 🔮 Sacred geometry mandala
│   │   └── index.ts              # Sketch registry
│   └── types/                    # TypeScript type definitions
├── mcp-server/                   # MCP Server for GitHub Copilot
│   ├── src/
│   │   ├── index.ts              # Server with 6 tools (stdio transport)
│   │   └── templates/            # Art templates, palettes, challenges
│   └── package.json
├── .vscode/mcp.json              # VS Code MCP configuration
└── docs/                         # Additional documentation

设计决策

1. 滚动驱动背景 --The BackgroundScene 组件读取 scrollProgress (0→1) 并使用以下公式计算每帧的天空梯度+恒星阿尔法 requestAnimationFrame星星在白天逐渐消失，在日落时重新出现，在用户浏览页面时创造了一种时间叙事。

2. 确定性设计助理 --所有调色板/徽标建议都使用来自精心策划的vibe库的基于哈希的变体选择。无需外部AI API——可靠、快速、零配置。

3. 通过亮度映射的ASCII艺术 --画布像素被下采样为可配置的网格，亮度映射为10个字符的字符集，用于即时的文本艺术转换。

4. 悬停以在艺术卡片上显示 --每张卡都存储算法元数据（数学公式+技术）。悬停覆盖动画将显示每个片段背后的计算细节。

5. 不需要外部AI API --所有生成艺术都是算法的（Canvas 2D），MCP服务器使用精心策划的模板。一致、高质量的输出，零配置。

6. MCP over stdio --MCP服务器使用标准I/O传输进行无缝VS代码副本集成。

🤖 GitHub Copilot如何帮助构建这个

该项目已建成 完全由GitHub Copilot协助 在VS代码中：

代码生成

• 基于滚动的天空引擎：Copilot帮助设计了平滑夜晚的颜色插值逻辑→dawn→day→日落过渡
• 生成艺术算法：Copilot提出了螺旋图（周转方程）的数学公式、流场的Perlin样噪声和分形树的递归分支
• 设计助理：Copilot通过精心策划的色彩和谐产生了从氛围到调色板的映射系统
• ASCII艺术转换器：Copilot推荐了具有可配置密度的亮度到字符映射方法
• MCP服务器：Copilot实现了所有6个工具定义、请求处理程序和品牌场景模板

问题解决

• 帆布性能：建议使用副驾驶 requestAnimationFrame 使用线性颜色插值实现平滑的背景过渡
• 滚动跟踪：Copilot建议使用带有渲染道具模式的被动滚动监听器，以实现高效的重新渲染
• 悬停显示：Copilot设计了带有变换+不透明度的叠加动画，以实现平滑的显示过渡

创意设计

• 用户滚动时告诉视觉故事的夜空叙事
• 数学符号与简明英语技术描述相结合的算法元数据叠加
• 确定性调色板生成，从项目名称中产生一致的结果

🎯 挑战对齐

Track：使用GitHub Copilot的创意应用✅

评判标准覆盖范围

📦 技术栈

🎬 演示

Web库

1. 跑 npm run dev 并打开 本地主机：5173
2. 慢慢滚动 观看天空从夜晚到黎明、白天和日落的演变
3. 将鼠标悬停在艺术卡片上以查看 算法数学与技术 揭示
4. 点击任何艺术品打开工作室
5. 使用滑块调整参数，实时观看艺术变换
6. 点击 ⣿ ASCII 导出为文本艺术的按钮
7. 使用 设计助理 生成品牌调色板和徽标创意
8. 将您喜爱的作品下载为PNG格式

MCP服务器正在运行

1. 构建MCP服务器： cd mcp-server && npm install && npm run build
2. 使用项目打开VS代码
3. 这 .vscode/mcp.json config自动加载服务器
4. 打开Copilot Chat并尝试：
   • “生成分形树生成艺术草图”
   • “为名为Aurora的宇宙应用程序推荐一个品牌场景”
   • “哪种ASCII风格最适合细节图像？”

🤝 贡献

欢迎投稿！以下是一些想法：

• 添加新的生成艺术算法（沃罗诺伊图、L-系统、细胞自动机）
• 用字体配对建议增强Design Assistant
• 使用Web audio API添加音频反应
• 使用URL编码参数实现图库共享
• 添加更多ASCII艺术字符集和导出格式

📄 许可证

该项目根据MIT许可证获得许可——请参阅 许可证 文件以获取详细信息。

🏆 代理商联盟提交

• 轨道: 🎨 使用GitHub Copilot的创意应用
• 挑战：2026年微软代理商联盟
• 提交: 问题链接
• 仓库：公共，麻省理工学院许可
• 作者：内置❤️ GitHub Copilot

CodeMuse — Visual Story & Palette Studio ✨