《像素绘画板》：通过Trae将脑中的创意变为现实

在没有大模型和AI编辑器的时候，想要通过编程实现自己的页面并不是一件容易的事情。首先，你得找到一个与你想法类似的项目作为参考，然后再通过对HTML、CSS 以及JS 的深入学习，才能照猫画虎一般完成一个简单demo ，又或是需要了解Vue 和React 等前端框架的使用，熟悉整个的开发流程。但通过AI编辑器Trae，你能够省去前端知识的学习成本，只需要将自己的一些奇思妙想交给编辑器，它便能结合大模型帮助你生成一个还不错的小项目。

那么灵感怎么来呢？

你可以结合自己生活和工作中的一些需求，将它们的核心部分提炼出来，然后你再想想能不能以工具的方式去解决这些问题。比如：当你工作中在处理文件时，需要用到markdown 转pdf 的功能，可是你嫌麻烦又不想去下载其他软件，这时候你就可以借助Trae这款编辑器帮你实现一款markdown 转pdf 格式的页面小项目，同时你还可以根据自己的一些小需求对它进行微调，只需要不断地和Trae对话就可以啦。
如果你没有遇到上述的情况，那么寻找灵感的过程也可以交给Trae来解决。比如你想开发一款休闲小游戏，但不知道应该以什么为主题好。那么你直接将该问题交给AI编辑器，它会给你提供一些有趣的想法。
我便是属于第二种情况，于是我我打开了Trae，把我的问题告诉它：

请帮我想一些页面小项目的名称和功能，要求只能用HTML、CSS以及JS来实现。

Trae交给豆包大模型理解后，给出了我很详细的答复：
1. 可以通过html、css、js设计一款像素绘画板，核心功能：网格画布（CSS Grid实现），点击填色，支持调色盘；特色功能：添加本地保存功能（localStorage存图片数据）、一键导出PNG；技术点：canvas.toDataURL() 导出图片等。
2. 可以通过html，css，js设计一个记忆卡片配对游戏，核心功能：翻牌匹配相同图案，计时计步，胜利提示；技术亮点：JS随机生成卡片布局（ Fisher-Yates 洗牌算法）、CSS 3D翻转动画增强交互感。
3. . . . . . .
我挑选了第一个作为我的想法，并再次发送给Trae的AI对话框：
于是它很快就把代码实现了。

如何对项目进行微调？

我们第一次发给Trae的生成提示词可能比较粗糙，会忽略很多细节的功能和设计。所以我们可以先将每次的代码运行在浏览器中，通过查看它具体的运行效果，以及使用下来发现的一些问题，对我们第一次发送的提示词内容进行补充和优化。经过反复和Trae对话，我们便能够将这个小项目打磨地越来越好。

运行初始的代码，可以得到以下运行结果：
通过与Trae对话进行优化：

请将页面的滚动条去掉，并给画布添加类似于写字画板的棕色边框。
重新运行页面后：
继续将优化的提示词发送给Trae：

请将网格区域的高度整体适当减小，宽度整体适当增加，并放置于页面居中的位置；同时将按钮分别进行美化，颜色为绿色，边框为圆角，大小适中，增加一些CSS特效，放置于调整后的页面的左侧上方的位置；添加用户通过拖动鼠标可以在网格区域上色。
运行代码并测试画板的功能，画了一只可爱的果冻喵：

使用感想

从这个小项目的灵感来源，到包含的功能以及代码的实现，全部都来自于Trae这款编辑器。整个过程中，我所做的只是不断地和Trae对话，根据编辑器的反馈结果给出相应的建议，也算是实现了"零代码"开发页面。

《像素绘画板》 虽然功能非常简单，但它让我第一次体验了使用AI编辑器开发的全过程，只靠人类的自然语言也可以打造出一款自己的小项目。这也意味着，如果你并不从事写代码的相关行业，也可以靠"开口"开发自己的作品。

作品链接：像素绘画板 - AI Coding

源码分享

HTML

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>像素绘画板</title>
    <link rel="stylesheet" href="pixel_painter.css">
</head>
<body>
    <div id="canvas-container"></div>
    <div id="color-picker">
        <button onclick="saveDrawing()">保存</button>
        <button onclick="resetCanvas()">重置</button>
        <input type="color" id="custom-color">
    </div>
    <script src="pixel_painter.js"></script>
</body>
</html>

CSS

css 复制代码

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
}
#canvas-container {
    display: grid;
    grid-template-columns: repeat(80, 10px);
    grid-template-rows: repeat(50, 10px);
    gap: 1px;
    background-color: #ccc;
    border: 10px solid #8B4513;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin-left: 80px;
}
.pixel {
    background-color: white;
    width: 10px;
    height: 10px;
}
#color-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    top: calc(20px + 1 * (10px + 30px + 10px)); /* 恢复原间距 */
    left: 20px;
    width: 100px;
    z-index: 1;
}
.color-option {
    width: 30px;
    height: 30px;
    border: 2px solid transparent;
}
.color-option.selected {
    border-color: black;
}
button {
  width: 120px;
  margin: 0px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
  }
  button:hover {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
  }
  button:active {
  transform: translateY(4px);
  box-shadow: 0 2px #666;
}

#export-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 10px;
  left: 20px;
}

JS

js 复制代码

const canvas = document.getElementById('canvas-container');
const customColor = document.getElementById('custom-color');
let selectedColor = '#000000';
let pixels = [];
let isDrawing = false;

// 初始化画布
function initCanvas() {
    for (let i = 0; i < 80 * 50; i++) {
        const pixel = document.createElement('div');
        pixel.classList.add('pixel');
        pixel.addEventListener('click', () => colorPixel(pixel));
        pixel.addEventListener('mousemove', () => colorPixel(pixel));
        canvas.appendChild(pixel);
        pixels.push(pixel);
    }
    loadDrawing();
}

// 选择颜色
customColor.addEventListener('change', () => {
    selectedColor = customColor.value;
});

// 填充像素
function colorPixel(pixel) {
    if (isDrawing) {
        pixel.style.backgroundColor = selectedColor;
    }
}

// 保存绘画（现在功能为导出 PNG）
function saveDrawing() {
    exportPNG();
}

// 重置画布
function resetCanvas() {
    pixels.forEach(pixel => {
        pixel.style.backgroundColor = 'white';
    });
}

// 加载绘画
function loadDrawing() {
    const savedColors = JSON.parse(localStorage.getItem('pixelDrawing'));
    if (savedColors) {
        savedColors.forEach((color, index) => {
            pixels[index].style.backgroundColor = color;
        });
    }
}

// 导出PNG
function exportPNG() {
    const tempCanvas = document.createElement('canvas');
    const ctx = tempCanvas.getContext('2d');
    tempCanvas.width = 80 * 10;
    tempCanvas.height = 50 * 10;

    pixels.forEach((pixel, index) => {
        const x = (index % 80) * 10;
        const y = Math.floor(index / 80) * 10;
        ctx.fillStyle = pixel.style.backgroundColor;
        ctx.fillRect(x, y, 20, 20);
    });

    const link = document.createElement('a');
    link.download = 'pixel-art.png';
    link.href = tempCanvas.toDataURL();
    link.click();
}

// 添加鼠标事件监听器
canvas.addEventListener('mousedown', () => isDrawing = true);
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseleave', () => isDrawing = false);

initCanvas();