分享一个 ProHub 风格 logo 生成器

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI 实践者。

关注公众号：#沉浸式趣谈，获取最新文章（更多内容只在公众号更新)
个人网站：https://yaolifeng.com 也同步更新。
转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。

如果本文对您有所帮助，欢迎动动小手指一键三连(点赞、评论、转发)，给我一些支持和鼓励，谢谢！

最近体验了 Claude Code，临时起意，又搞了个新项目 - ProHub Logo，这次完全是用 Claude Code 来实战开发的。说实话，整个过程体验 + 踩坑。

项目地址：

海外访问：https://prohub-logo.vercel.app
国内访问：https://prohub-logo.netlify.app
GitHub：https://github.com/yaolifeng0629/prohub-logo

全程用 Claude Code，说实话体验还不错，但使用命令行的方式还是有点小小的不适应，还是喜欢 GUI 的方式。

开发过程基本和之前类同，感兴趣的小伙伴可以看最近 Vibe Coding 的实践经验分享

过程

初始化与技术选型

我选择 Next.js + TypeScript 技术栈。在项目根目录创建了 CLAUDE.md 文件来规范 Claude Code 的工作方式：

# ProHub Logo Generator

## 技术栈

- 前端：Next.js 14, TypeScript, Tailwind CSS

- 部署：Vercel + Netlify

## 编码规范

- 使用 TypeScript 严格模式

- 组件采用函数式写法

- 使用 Tailwind 进行样式管理

- 每次修改后运行 typecheck

## 项目结构

- components/: 可复用组件

- app/: Next.js App Router 目录结构

- utils/: 工具函数

有了这个配置文件，Claude Code 在后面开发中就能准确理解项目规范，生成符合预期的代码。

核心功能实现

1. Logo 生成逻辑

开发过程采用了"探索→规划→编码"的工作流：

首先让 Claude Code 分析自己需求："创建一个类似 ProHub 风格的 Logo 生成器，支持自定义文本、颜色、样式、导出等功能，不需要用户登录模块。"

Claude Code 给出的答案：

使用 Canvas API 进行图形绘制
支持多种字体和样式组合
实现实时预览功能
添加导出功能

2. 迭代开发策略

还是小步走策略：先实现基础功能，再逐步完善。每个功能模块开发完后，让 Claude Code 检查并优化代码。

过程中踩的坑

Canvas 导出图片质量问题

最开始用 Canvas 导出图片的时候，发现图片质量很差，特别是文字边缘有锯齿。

解决方案：

// 设置高分辨率

const scale = 2;

canvas.width = width * scale;

canvas.height = height * scale;

ctx.scale(scale, scale);

// 开启抗锯齿

ctx.textRenderingOptimization = 'optimizeQuality';

ctx.imageSmoothingEnabled = true;

实践感受

1. 配置文件很关键

CLAUDE.md 配置文件起到了重要作用。它就像给 Claude Code 的"记忆体"，让 AI 能记住项目规范和偏好。这点和 Cursor 类同。

建议配置内容包括：

技术栈说明
编码规范
常用命令
项目结构约定

2. 结构化提示带来精确结果

相比简单的"帮我写代码"，结构化的提示能得到更好的预期结果：

项目背景：ProHub 风格的 Logo 生成器

当前任务：实现 Canvas 导出功能

技术要求：

- 支持高分辨率导出

- 确保文字清晰度

- 兼容主流浏览器

- 代码要有良好的错误处理

3. 自定义命令简化重复操作

参考了一些资料，自己可以自定义 Command, 可以减少一些重复性操作的工作。

4. 上下文管理的实用技巧

适时使用 /compact: 完成一个功能模块后立即压缩上下文
及时清理历史: 切换到新功能开发前使用 /clear 命令
文件引用优化: 使用 @filename 精确引用，避免让 Claude Code 搜索，也能减少 Token 消耗。

总结

这次用 Claude Code 开发 ProHub Logo 生成器，整体体验还是不错的。

几个心得：

配置文件必不可少：不管是 Claude Code 中的 CLAUDE.md，还是 Cursor 中的 .mdc，给 AI 定义好规则可以大大提高开发效率。
上下文管理：就算是编码能力出色的 Claude 4，如果不能有效管理上下文，照样会返回错误或无关的内容。所以提示工程很重要。

好了，今天的分享就到这里。

如果觉得有用，别忘了点个赞哦~

其他好文推荐

2025 最新！独立开发者穷鬼套餐

就这样用 Vibe Coding 又完成了一个项目

最近 Vibe Coding 的实践经验分享

分享一款 AI 自动生成流程图的工具

一个 Cursor mdc 自动生成器，基于 Gemini 2.5，很实用！

这个 361k Star 的项目，一定要收藏！

搞定 XLSX 预览？别瞎找了，这几个库（尤其最后一个）真香！

实战分享】10 大支付平台全方面分析，独立开发必备！

关于 MCP，这几个网站你一定要知道！

做 Docx 预览，一定要做这个神库！！

【完整汇总】近 5 年 JavaScript 新特性完整总览

关于 Node，一定要学这个 10+万 Star 项目！