小白程序员必看!用AI打造后台管理系统CRUD页面,收藏提升效率!
本文介绍了如何利用Claude Code和skill-creator工具,通过创建一个自定义skill(crud-creator),实现后台管理系统的增删改查页面开发。文章从业务场景出发,讲解了Skills的基本概念和用途,并详细演示了安装skill-creator、创建crud-creator skill的过程。通过调用该skill并传入接口说明,AI能够自动生成符合项目规范的产品管理页面,极大地提高了开发效率。本文旨在为开发者提供一种利用AI进行代码生成和优化的思路,以应对相似业务场景的开发需求。
01 业务场景
有一个后台管理系统,其中已经写好了一部分增删改查的页面,后面还要实现大量相似的管理页面。

用户管理页面
目前的的需求是开发产品管理页面,功能依然是产品列表、条件查询、增加产品、编辑产品、删除产品。
按照传统的做法,一般是通过封装一些组件配合json配置来渲染实现。 现在有了AI,就可以把这部分工作完全交给AI处理了,自己只关注架构方面即可。下面将通过创建一个curd-creator skill来完成这个需求,后续开发其他类似页面就可以直接用。
为什么要通过创建skill的方式实现,而不是直接告诉ai“帮我实现产品管理页面”?
因为这个场景有很多统一的内容,例如UI风格需要一致,代码风格也极为相似,通过skill的方式能够将这部分内容固定下来,避免AI跑偏。AI非常擅长按固定的模式生产内容。在动手创建之前,需要先了解一下skill相关的知识。
02 Skills基础
Skills是一种轻量、格式开放,用于扩展 AI Agent的能力,包含专门的知识和工作流程。
从本质上讲,Skills就是一个包含 SKILL.md 文件的文件夹。这个SKILL.md 文件包括元数据(至少包含 name 和 description)以及说明,告诉AI如何执行特定任务。Skills扩展了Claude Code的能力范围。
Claude Code 的Skills遵循 Agent Skills[1] 开放标准,如果你正在使用如opencode[2]、cursor[3]、codex[4]、trae[5] 或其他AI编程工具,这里创建的skills也是适用的。
例如一个用于解释代码的Skill,它会位于项目根目录的.claude/skills 目录下:
explain-code/SKILL.md
---
name: explain-code
description: 用可视化图示和类比来解释代码。当需要说明代码如何工作、解释代码库,或者用户询问“这是怎么工作的?”时使用。
---
在解释代码时,始终包括:
1、从类比开始:把代码比作日常生活中的事物
2、画一个图:使用 ASCII 图展示流程、结构或关系
3、逐步讲解代码:一步一步说明发生了什么
4、指出一个坑点:常见的错误或误解是什么?
保持对话式的讲解风格。对于复杂概念,可以使用多个类比来说明。
Skills还可以包含脚本、模板和参考资料等,不限于图中的内容:

Skills通过渐进式披露管理上下文:Agent启动时只读取Skills的名称和描述,当任务匹配时加载完整说明,再按说明执行操作。这种方式保证了Agent运行时不会加载过多无用的上下文,同时在需要时可获取更多信息。
03 安装skill-creator
如果按照上面的方式手工编写SKILL.md,效率不高且很难写出完善的Skill内容。好在官方提供了一个用于编写Skill的Skill,它就是skill-creator[6]。skill-creator在官方插件市场,使用之前需要先安装。进入Claude Code,执行/plugin命令进入插件列表:

安装skill-creator
选中skill-creator,按回车,在下一页的安装范围中,选择“Install for you (user scope)”,即安装到用户级目录下,这样其他项目中也可以使用。安装完成后重启Claude Code,输入/skill-creator,如果能出现,说明安装成功:

04 创建crud-creator
现在我们使用skill-creator创建一个用于开发管理系统增删改查页面的Skill,暂且叫它crud-creator 。大概的实现思路是让AI根据告诉它的接口自行请求数据,然后根据已有的模板开发新页面。

使skill-creator创建crud-creator
提示词内容如下,只作为参考即可,可根据具体业务要求调整。
/skill-creator 分析 @apps/web/src/views/user/ 下的代码,将增删改查的实现创建为crud-creator skill。要求skill能够沉淀增删改查的代码模板,每次开发时根据模板编写代码。具体使用方式为:用户调用此skill,并带有接口说明,skill拿到接口后通过调用curl获取接口数据,根据数据决定要显示的字段,然后根据业务名称创建路由,并在views目录下创建对应的文件夹编写代码。将创建完的skill放到当前项目根目录下的.claude/skills目录下。
AI生成的skill的内容一般是英文的,如果阅读英文不习惯的话可以在上述提示词后面加一句”skill用中文编写”,AI将会输出中文版的skill。
经过一段时间的分析,AI给出了skill的内容:

crud-creator
如果没问题就选择1或者2直接执行,如果有问题就选择3,然后输入要调整的内容,不断往复直到完全没问题。
对于生成后的.claude/skills/crud-creator/SKILL.md,也可以直接手动修改不合理的地方或者增加新内容。最终,生成的crud-creator结构如下,这里的结构和内容并不统一,只要内容符合自己项目的规范即可。

05 开发产品管理页面
有了crud-creator skill,现在用它来完成文章开头的产品管理的需求。后端已经写好了接口,均在/api/products 路径下,风格和已有的用户管理中的接口一致。(如果不一致,就需要把所有涉及到的接口都告诉AI)。
注意:因为是刚创建的skill,需要重启一次Claude Code才能加载到。

用crud-creator创建产品管理页面
可以看到它开始请求接口,并且拿到了接口数据,对于不确定的值,它会很智能的询问用户如何处理:

询问不确定的值如何处理
如果后端接口需要携带token才能当问到,可以把认证方式及token告诉AI,并让它记下,它会将token写入到自己的记忆文件中,后续访问接口时会直接读取。
经过一段时间的执行,产品管理页面已经成功开发完成,完全遵循项目UI风格和代码规范,且增删改查功能一应俱全:

完成后的产品管理页面
本文最大的价值并非是给出具体的实现,而是提供了一种思路,能够让AI在可控的范围内编写代码,实现需求,提高人工开发的效率。开发者可以完全根据自己项目的实际需求调整提示词或者skill,例如对于全栈式开发的项目,可以从后端接口开发到前端页面开发全部编写到skill中。
如何学习大模型 AI ?
由于新岗位的生产效率,要优于被取代岗位的生产效率,所以实际上整个社会的生产效率是提升的。
但是具体到个人,只能说是:
“最先掌握AI的人,将会比较晚掌握AI的人有竞争优势”。
这句话,放在计算机、互联网、移动互联网的开局时期,都是一样的道理。
我在一线科技企业深耕十二载,见证过太多因技术卡位而跃迁的案例。那些率先拥抱 AI 的同事,早已在效率与薪资上形成代际优势,我意识到有很多经验和知识值得分享给大家,也可以通过我们的能力和经验解答大家在大模型的学习中的很多困惑。我们整理出这套 AI 大模型突围资料包:
- ✅ 从零到一的 AI 学习路径图
- ✅ 大模型调优实战手册(附医疗/金融等大厂真实案例)
- ✅ 百度/阿里专家闭门录播课
- ✅ 大模型当下最新行业报告
- ✅ 真实大厂面试真题
- ✅ 2026 最新岗位需求图谱
所有资料 ⚡️ ,朋友们如果有需要 《AI大模型入门+进阶学习资源包》,下方扫码获取~
① 全套AI大模型应用开发视频教程
(包含提示工程、RAG、LangChain、Agent、模型微调与部署、DeepSeek等技术点)
② 大模型系统化学习路线
作为学习AI大模型技术的新手,方向至关重要。 正确的学习路线可以为你节省时间,少走弯路;方向不对,努力白费。这里我给大家准备了一份最科学最系统的学习成长路线图和学习规划,带你从零基础入门到精通!
③ 大模型学习书籍&文档
学习AI大模型离不开书籍文档,我精选了一系列大模型技术的书籍和学习文档(电子版),它们由领域内的顶尖专家撰写,内容全面、深入、详尽,为你学习大模型提供坚实的理论基础。
④ AI大模型最新行业报告
2025最新行业报告,针对不同行业的现状、趋势、问题、机会等进行系统地调研和评估,以了解哪些行业更适合引入大模型的技术和应用,以及在哪些方面可以发挥大模型的优势。
⑤ 大模型项目实战&配套源码
学以致用,在项目实战中检验和巩固你所学到的知识,同时为你找工作就业和职业发展打下坚实的基础。
⑥ 大模型大厂面试真题
面试不仅是技术的较量,更需要充分的准备。在你已经掌握了大模型技术之后,就需要开始准备面试,我精心整理了一份大模型面试题库,涵盖当前面试中可能遇到的各种技术问题,让你在面试中游刃有余。

以上资料如何领取?

为什么大家都在学大模型?
最近科技巨头英特尔宣布裁员2万人,传统岗位不断缩减,但AI相关技术岗疯狂扩招,有3-5年经验,大厂薪资就能给到50K*20薪!

不出1年,“有AI项目经验”将成为投递简历的门槛。
风口之下,与其像“温水煮青蛙”一样坐等被行业淘汰,不如先人一步,掌握AI大模型原理+应用技术+项目实操经验,“顺风”翻盘!

这些资料真的有用吗?
这份资料由我和鲁为民博士(北京清华大学学士和美国加州理工学院博士)共同整理,现任上海殷泊信息科技CEO,其创立的MoPaaS云平台获Forrester全球’强劲表现者’认证,服务航天科工、国家电网等1000+企业,以第一作者在IEEE Transactions发表论文50+篇,获NASA JPL火星探测系统强化学习专利等35项中美专利。本套AI大模型课程由清华大学-加州理工双料博士、吴文俊人工智能奖得主鲁为民教授领衔研发。
资料内容涵盖了从入门到进阶的各类视频教程和实战项目,无论你是小白还是有些技术基础的技术人员,这份资料都绝对能帮助你提升薪资待遇,转行大模型岗位。

以上全套大模型资料如何领取?

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐

所有评论(0)