分享一个 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 的工作方式:
有了这个配置文件,Claude Code 在后面开发中就能准确理解项目规范,生成符合预期的代码。
核心功能实现
1. Logo 生成逻辑
开发过程采用了"探索→规划→编码"的工作流:
首先让 Claude Code 分析自己需求:"创建一个类似 ProHub 风格的 Logo 生成器,支持自定义文本、颜色、样式、导出等功能,不需要用户登录模块。"
Claude Code 给出的答案:
使用 Canvas API 进行图形绘制
支持多种字体和样式组合
实现实时预览功能
添加导出功能
2. 迭代开发策略
还是小步走策略:先实现基础功能,再逐步完善。每个功能模块开发完后,让 Claude Code 检查并优化代码。
过程中踩的坑
Canvas 导出图片质量问题
最开始用 Canvas 导出图片的时候,发现图片质量很差,特别是文字边缘有锯齿。
解决方案:
实践感受
1. 配置文件很关键
CLAUDE.md
配置文件起到了重要作用。它就像给 Claude Code 的"记忆体",让 AI 能记住项目规范和偏好。这点和 Cursor 类同。
建议配置内容包括:
技术栈说明
编码规范
常用命令
项目结构约定
2. 结构化提示带来精确结果
相比简单的"帮我写代码",结构化的提示能得到更好的预期结果:
3. 自定义命令简化重复操作
参考了一些资料,自己可以自定义 Command, 可以减少一些重复性操作的工作。
4. 上下文管理的实用技巧
适时使用
/compact
: 完成一个功能模块后立即压缩上下文及时清理历史: 切换到新功能开发前使用
/clear
命令文件引用优化: 使用
@filename
精确引用,避免让 Claude Code 搜索,也能减少 Token 消耗。
总结
这次用 Claude Code 开发 ProHub Logo 生成器,整体体验还是不错的。
几个心得:
配置文件必不可少:不管是 Claude Code 中的
CLAUDE.md
,还是 Cursor 中的.mdc
,给 AI 定义好规则可以大大提高开发效率。上下文管理:就算是编码能力出色的 Claude 4,如果不能有效管理上下文,照样会返回错误或无关的内容。所以提示工程很重要。
好了,今天的分享就到这里。
如果觉得有用,别忘了点个赞哦~ 👍
其他好文推荐
一个 Cursor mdc 自动生成器,基于 Gemini 2.5,很实用!
搞定 XLSX 预览?别瞎找了,这几个库(尤其最后一个)真香!
【完整汇总】近 5 年 JavaScript 新特性完整总览
版权声明: 本文为 InfoQ 作者【Immerse】的原创文章。
原文链接:【http://xie.infoq.cn/article/30b9f17b4fc4c58e76531a1d3】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
评论