这两个星期,我用AI重构了一下前端
内容提要
作者回顾AI从ChatGPT到成熟Agent的快速发展,认为AI让开发者从执行者变为项目决策者,创意比技术更重要。他用AI重构网站UI,统一为蓝金极简科技风,主页生成不到20分钟且几乎无Bug,但修改现成WordPress主题较吃力,约五版才完善。他提醒AI应作为辅助工具,而非加剧裁员,并附上可复用提示词。
延伸解读
从零生成与修改现成主题的难度差异
作者用AI从零生成主页HTML+CSS+JS,不到20分钟且几乎无Bug;但让AI修改现成WordPress主题时,第一版仍残留旧UI,修改约五版才完善。这说明AI在简单、边界清晰的任务上完成度很高,而在需要理解既有代码结构和设计约束的复杂工程中,仍会出现遗忘和偷懒,需要多轮迭代。
AI时代开发者角色:从执行者到决策者
作者认为,AI已能拆分任务、调用技能实现完整项目,开发者不再需要手敲代码、逐行调试,而是充当项目拍板者,给出构思和想法,在人与AI交互的创建-修改-优化链路中落地。技术方案上AI往往更稳健成熟,速度也远超人工,因此新想法、新创意比单纯的技术能力更重要。
可复用提示词的设计思路与适用边界
文末提供的提示词要求明确项目名称、目标用户、核心功能和首要操作,并指定蓝金极简科技风、配色方案、布局、动效和移动端适配。这套提示词适合展示型首页或工具界面,但作者也提醒,复杂情形下AI仍会出错,需人工检查窄屏可读性、点击区域和横向溢出等细节。
Q&A
作者用AI重构网站UI的整体效果和耗时如何?
作者用AI重构网站UI,将风格统一为蓝金极简科技风。主页生成不到20分钟且几乎无Bug,但修改现成WordPress主题较吃力,约五版才完善。
作者认为AI给开发者角色带来了什么变化?
作者认为AI让开发者从执行者变为项目决策者,只需给出构思,AI就能拆分任务并实现项目,因此创意比技术更重要。
为什么作者最终放弃了仿照Liquid Glass的设计方案?
作者让AI仿照Liquid Glass设计摄影站,但落地效果没有真实的玻璃质感和光学变化,相比抽卡得到的主页差点意思,所以弃用,改为统一成蓝金极简科技风。
作者在让AI修改WordPress主题时遇到了什么困难?
让AI修改现成的WordPress主题UI比较吃力,第一版还有很多旧UI的遗留,差不多修改了5版效果才比较完美。
作者对AI的社会应用提出了什么期望和警示?
作者期望AI成为协助人类的工具,接管繁琐工程和高危职业,而不是因效率提升让一个人干两个人的活、让更多人失业。
作者提供的可复用提示词包含哪些关键设计要素?
提示词要求蓝金配色的极简科技风,排版参考摄影杂志,气质安静精致有空间感;视觉上以午夜蓝#080E1B和近黑色打底,深蓝#123E8B建立层次,香槟金#CCB585点缀;布局采用不对称双栏,交互有约2秒可跳过开场和滚动淡入等。