【vibe coding解决100个问题】开发CRM管理系统, Augment/windsurf/bolt.new哪家强?
我相信,vibe coding能够给生活带来翻天覆地的改变,自然语言将超越python,js,java最好的语言。为了践行【vibe coding解决100个问题】,要用真实的100个案例,给大家看看AI的强大。也请网友们积极提供真实问题的线索,看看用AI怎么解决。
工具:Augment Code +claude 4、Cursor , windsurf ,copilot
什么是CRM管理系统?
CRM(Customer Relationship Management)管理系统是一种以客户为核心的管理理念与技术工具的结合体,旨在帮助企业高效管理客户关系、优化业务流程并提升客户价值。
主要包括以下功能模块:
-
客户数据管理
-
销售自动化(SFA)
-
营销自动化
-
客户服务与支持
-
数据分析与报表
CRM大中小企业都需要的一个后台管理平台。当然买早餐的大妈可能不需要,但是一个给美团外卖提供早餐的大妈,需要美团和京东等开的CRM管理系统。
prompt
不玩虚假的,直接上干货。
## 目标:客户 CRM 系统 - 适用于自由职业者和小团队(项目、客户方案、发票开具、客户关系管理等)。 ## prompt:为基于网络的客户 CRM 系统创建简洁现代的用户界面,实现HTML网页设计。## 任务
这是专为自由职业者和小团队打造的一体化业务管理工具,用于处理项目、提案、 invoicing 和客户管理。- 设计应从 Notion 的美学风格中汲取灵感:模块化、简洁且极度简约。
- 采用柔和协调的配色方案,以浅绿色、淡蓝色和柔和的橙色作为点缀。
- 界面应包含一个极简的左侧边栏,配有用于导航的简单图标(仪表盘、分析、设置),以及一个宽敞的主内容区域,
- 使用 Notion 风格的区块、可折叠部分和模块化卡片来显示任务、发票、时间线和客户资料。 - 呈现优雅的数据图表,如饼图、柱状图和折线图,所有图表都采用柔和阴影、圆角和微妙渐变进行设计。
- 排版应使用 Inter 或 SF Pro 字体,标题加粗(24–32 像素),标签清晰,次要文本精致。
- 背景应为中性色(#F9FAFB),文本颜色深且易读(#1A1A1A),留有充足的内边距,并保持一致的垂直韵律。
每个元素都应经过精心设计,便于交互
- 大尺寸触控目标、柔和的分隔线,以及在清晰度和功能性之间取得平衡的布局。最终的用户界面应融合 Notion 和苹果的设计风格
- 专业、精致且令人感到舒适。所有标题使用中文。
Augment+Claude4.0实现效果
可以看到Augment Coder的详细实施计划
-
HTML结构文件 (index.html) - 主页面结构
-
CSS样式文件 (styles.css) - Notion风格的样式设计
-
JavaScript交互文件 (script.js) - 界面交互逻辑
-
图表库 - 使用Chart.js实现数据可视化
主要功能模块:
-
左侧导航栏(仪表盘、客户管理、项目管理、发票管理、分析报告、设置)
-
仪表盘概览(关键指标卡片、图表)
-
客户管理界面
-
项目跟踪系统
-
发票开具功能
-
数据分析图表
最后实现的页面如下,包括仪表盘,客户管理,项目管理,发票管理,数据分析,系统设置。只需要链接数据库,可以给中小公司开发使用了。
Lovable实现效果:华丽胡巧,不够简洁
看上去很有企业氛围,重复利用图标和数据,布局具有扩展性,颜色大胆,倾向于用仪表盘。有一种视觉冲击力
Windsurf实现效果:最简单
最近claude系列,全球最强的代码模型都不能使用,看上去设计比较简单。
小结
lovable/bolt.new等专美为前端打造,视觉冲击力更震撼一些。但是Augment作为目前上下文能力最强的AI native IDE,值得每个人花费50美元/月(他家没有给广告费,纯觉得好用)。Cursor最近改变也挺大,可以作为互相补充使用。
最后打个广告,【vibe coding解决100个问题】,每周精选2-3个案例,欢迎免费参加。