大家好，我是 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，如果不能有效管理上下文，照样会返回错误或无关的内容。所以提示工程很重要。
好了，今天的分享就到这里。
如果觉得有用，别忘了点个赞哦~ 👍
其他好文推荐
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
