前言
在古早时期,程序员还需要通过手敲代码古法编程。在AI时期,程序员已经开始言出法随,通过自然语言的描述来开发项目,开发重点变成每次提交代码的审核。单从写页面来说,目前已经完全可以用AI实现,不需要再苦兮兮的学和写HTML、CSS、JS之流。现在项目研发中更重要的其实在于:
对产品的理解:产品是否有市场 对业务流程的清晰认知:功能是否好用 对项目功能的描述拆解:用很少的token生成期望代码,减少抽卡 对接口数据的调用测试:基础要求需要描述精准 对最新AI工具的尝试使用:减少信息差,内化工作流
最近后台还有一些小伙伴会私信问我之前写页面视频中的一些问题、之前开发工具的使用。其实之前的开发流程早已淘汰,对于现在的AI时代来说生产力已经升级了好几个level,为了喜欢我的小伙伴了解现在项目开发的实际流程,我这里干脆录一个现在开发页面的流程,你会发现现在开发页面只需要描述清楚需求,然后刷手机坐等即可。
B站链接
方式一:根据设计图生成项目
此方法页面效果可控,公司项目开发找UI提供figma链接即可
把figma设计图链接发送到AI开发工具,如:trae、cursor、codex中,自动生成(可约束技术栈)
现在需要开发一个新的首页,figma设计图为:https://www.figma.com/design/s5cIJ3LeeRtrPh9Z85r4Af/Untitled?node-id=2-2&t=UwU1c4v3tBQeOtUw-4,要求百分百还原设计图,设计图中需要用到的图片、图标等资源需要下载到本地后再使用。实现此要求,并且不要影响其他功能。方式二:直接描述生成页面
此方法页面效果不可控,页面美观程度与模型能力正相关
书写描述清楚的提示词(可截图意向页面发给AI自动生成) 把提示词发到AI开发工具,如:trae、cursor、codex中,自动生成(可约束技术栈)
页面提示词:B端企业数字化官网首页完整长页面UI设计,简约现代科技风,浅白+淡蓝渐变主色调,清爽干净轻量化商务界面,扁平化3D立体方块科技插画元素,浅蓝通透渐变几何装饰,整体分层模块化长滚动页面,PC端1920宽标准官网版式页面从上至下完整模块布局:1. 顶部导航栏:浅白色通栏导航,左侧品牌logo,中间导航菜单【首页、应用商城、解决方案、标杆案例、政策资讯、需求广场、数字化诊断】,右侧功能按钮:控制台、登录、注册,极简细线条图标2. 首屏Banner横幅区:大标题「数字资产服务平台上线啦!」,配套简短平台介绍文案,左侧蓝色圆角按钮【了解详情】,右侧悬浮3D立体蓝色书本、井号、百分号几何科技透明模型,浅蓝渐变柔光背景,柔和光晕质感3. 四大功能入口横条模块:4个并列卡片,每个卡片配浅蓝图标+标题短句:入驻更多数字化服务、海量企业精选应用、智能化企业解决方案、最新政策资讯,浅灰色分割背景4. 智能化解决方案板块:居中板块标题+副标题,左侧侧边分类菜单列表(智企未来全栈式数字化转型、企业通用数字化转型、物流供应链、金融科技、医疗健康方案),右侧主展示大卡片,包含标题、分段介绍文字、蓝色【查看详情】按钮,搭配浅蓝环形科技抽象背景图5. 多元化企业应用板块:板块标题+切换标签栏(协同办公、资源管理、质量管理、设备管理),下方2行2列四格应用商品卡片,每格包含蓝色图标、系统名称、产品简介、采购量/浏览量数据、标价¥4000/年,白底圆角卡片,轻微阴影分层6. 客户成功案例板块:板块标题,下方3列等宽案例卡片,每张卡片左上角企业logo(华为、上海湘时、优云盟),下方标题「生产线全流程数字化智能化建设」+简短介绍,配图为工业机械臂、智能制造工厂写实科技实拍图,圆角白底卡片7. 政策资讯板块:左侧大图(政企线下会议实拍图),右侧资讯列表,每条资讯包含日期、资讯标题、简短摘要、来源标签,浅灰分割线区分资讯条目8. 活动中心模块(多组重复活动组件):- 第一组:4列横向轮播活动卡片,紫蓝渐变流体科技城市背景图,底部活动标题、活动时间小字- 第二组:左右分栏图文卡片,左侧大尺寸AI光效几何背景图,右侧标题+大段占位正文文字+蓝色查看详情按钮- 第三组:左右分栏反向图文,左侧文字标题+占位文本,右侧AI科技流体配图- 第四组:通栏纯文字板块,大标题+两段占位正文,浅灰引号装饰背景9. 生态合作伙伴板块:居中标题,下方多排企业品牌logo平铺展示(美的、联塑、继峰股份、Aee、Amphenol、HLGY等),灰度彩色logo错落排布10. 底部转化横幅:居中文案「助力企业数字化转型,赋能企业快速成长」,中间蓝色圆角【立即咨询】按钮,浅淡科技线条背景11. 页脚深色深蓝通栏底部:左侧平台简介文字,中间【关于我们、联系我们、客服电话、地址】文字信息,右侧两个二维码(关注我们、联系我们),最底部版权小字文本视觉规范:整体配色:#FFFFFF纯白底色为主,辅助色浅天蓝#cce0ff、深蓝色#165DFF,文字深灰#333333,次要文字#666666,分割线#eeeeee;风格:轻量化B端政企官网,低饱和度柔和渐变,无厚重深色,通透玻璃质感3D小元素,简约圆角卡片(圆角8px),轻微卡片投影,线条纤细干净;字体:无衬线思源黑体,标题加粗深色,正文浅灰色;光影:柔和漫反射柔光,无强烈阴影,页面层次依靠上下留白、区块底色区分;画面比例:PC网页长截图完整页面,1920×3200竖长网页版式,高清UI界面,无多余装饰,专业商务数字化平台,干净清爽工业互联网官网
方式三:自己设计+生成项目
此方法一般用于自建网站,设计这块需要有一定审美
书写描述清楚的提示词(可截图意向页面发给AI自动生成) 把提示词发送给AI设计工具,如:figma make、trae work,生成设计图 把设计图丢给AI开发工具进行生成
结语
目前各种AI工具已经在各个方面提升了我们的生产力,既然大势无法阻挡,我们要做的其实是多去使用用这些AI工具,将其中切实能提升我们生产力的工具融入我们自身的工作流中。
对于研发方面来说,使用AI工具是用于提高我们生产力的器,但不能仅沉迷于器,更需要注重的是对自身认知的提升。目前开发的门槛已经极大的降低了,人人都能写一个程序出来,但写出来的程序是否好用,是否能被市场接受,更多的还是要我们去思考和积累的。这也是为什么我一开始说的重要的是:
对产品的理解:决定最终产品是否有卖点,被客户接受 对业务流程的清晰认知:决定整个项目使用动线是否流畅,被客户爱用 对项目功能的描述拆解:决定是否能用较少的token生成期望的代码,降低抽卡的次数,减少使用的费用 对接口数据的调用测试:需要与人交流场景,开发者需要能精准描述才能实现 对最新AI工具的尝试使用:决定是否跟上潮流,减少信息差
当然以上的重要点都是需要学习积累来实现的,学习积累的方式可以是问AI、看教程、也可以是自行尝试等等,当然我建议是按照实际需要全都去做,一定不要被方法约束,而是要具体问题具体分析,选择符合当前情况最合适的解决方案。
以上就是针对于近期后台喜爱我的小伙伴的页面模块开发的流程介绍,目前市面上有很多好用的AI工具,可以在各个方面提升我们的工作流效率,比如我现在用的obsidian,接入AI后写markdown会非常方便舒服,如果后面有小伙伴感兴趣的话,等有空的时候我再录个屏介绍下。
夜雨聆风