AI学习 | AI编程实例(不写一行代码)

多客科技

作者：微信文章
0、前言

AI编程如同一把绝世好剑，既锋利无比又充满创意，但若控制不当，便会失控。通过合理的结构和框架限制AI，同时利用其强大的分析能力，可以更好地发挥AI的优势。本次实践，我将系统设计转化为提示词，辅助AI生成代码，在没写一行代码的情况下，生成了符合预期的前端应用。

1、概述

1.1 AI编程特点

AI编程很强大，就像拿到了绝世好剑，锋利无比，充满天马行空的创意，然而一旦控制不住，就会像脱缰的野马一样难以驾驭。


1.2 当前使用情况

既然控制不住，那就弱水三千，只取一瓢饮。我到浏览器中，让AI生成一些代码片段，然后贴进去。但这样有个问题，无法发挥AI通过理解完整代码来生成更符合结构、更合适风格的代码的优势，生成的代码片段会有很大的割裂感。
1.3 如何更好的使用AI来写代码

以下是我自己的观点：关键在与平衡好AI的“限制”和“自由发挥”

随着MCP协议的应用，AI已经具备了自主编写代码的能力，这就好比为AI赋予了“手脚”，使其能够自行操作编译器、阅读代码，从而在编程领域拥有更广阔的施展空间。

“限制”如同给神经猫划定活动范围，为其提供一个有限的空间来发挥其能力。这种限制并非束缚，而是通过设定合理的结构和框架来实现的，让AI在既定的范围内有序地开展工作，确保其行为符合既定的目标和规范。



而“自由发挥”则充分发挥了AI强大的分析能力，使其能够自主产生一些新颖的想法和创意，从而带来一些意想不到的惊喜。

这就好比在去购买肉类食材时，会自然而然地联想到家中是否备有料酒，如果没有，就会顺手将其加入购物清单，这是一种基于已有知识和经验的灵活思考与自主决策，AI在“自由发挥”的过程中也能展现出类似的智慧和灵活性。
1.4 本次实现内容

1、根据自己以前写的系统设计，转化为提示词

https://mp.weixin.qq.com/s/RAYA7dkbvhsR2EF7vOdwhg

2、在生成代码的过程中，辅助AI修改代码。注意是我辅助AI，不是AI辅助我。

3、生成代码完成后，根据内容优化。

2、提示词

从二进制、16进制编程，到C语言，再到面向对象语言，编程技术不断演进，但无论技术如何发展，明确的需求都是成功开发的关键。

举个例子，如果甲方只是说“自己要做一个公司主页”，仅凭这一句话，开发者很难做出完全符合甲方需求的网站。这就好比只给了一个模糊的方向，成功的概率可能只有1/10000。

但如果甲方能够进一步明确需求，比如“做一个公司主页，风格要商务，包含组织架构、招聘信息、公司简介、公司产品”，那么开发出来的网站就会更接近预期，目标也更加清晰。

AI也是如此，如果用户提出的要求不够明确，AI只能凭借有限的信息去尝试，这就像在碰运气。只有当用户提供清晰、具体的需求时，AI才能更精准地理解和执行，从而提供更符合用户期望的结果。

以下内容是根据系统设计改写的提示词：
一、角色定义
1、你是一名资深移动端开发程序员，开发的页面兼容性强，能适配各种分辨率的移动端
2、你是一名资深前端开发程序员，写出的代码，可读性强、健壮、可读性强

二、功能概述
1、我要开发一个在移动端上看新闻的webapp
2、通过点击新闻类别，跳转到对应的新闻列表

三、使用框架
使用vite创建项目脚手架
React + TypeScript + React-Router + ReactHook + axios +antdMobile

四、目录
目录包括：mockapi、type、page、router、utils

五、Mock API
1、 获取新闻类型列表
接口名称为：getNewsTypeList
返回数据类型：[{id:"",name:"",order:""}]
name有这些类型：
国内
国际
娱乐
体育
军事
科技
财经
游戏
汽车
健康
2、按类型获取新闻列表
接口名称：getNewsList
header传分页：pageIndex、pageSize
返回数据示例为：
{
    "reason": "success",
    "result": {
        "stat": "1",
        "data": [
            {
                "uniquekey": "dc4334951a893e0e2b026ff891b68d2c",
                "title": "东营海警局积极探索科技管海新模式",
                "date": "2025-05-30 19:31:00",
                "category": "军事",
                "author_name": "大众网",
                "url": "https:\/\/mini.eastday.com\/mobile\/250530193131441885966.html",
                "thumbnail_pic_s": "https:\/\/dfzximg02.dftoutiao.com\/news\/20250530\/20250530193131_ab18429ec87b5744aa5ea7a76fdf5b39_1_mwpm_03201609.jpeg",
                "thumbnail_pic_s02": "https:\/\/dfzximg02.dftoutiao.com\/news\/20250530\/20250530193131_ab18429ec87b5744aa5ea7a76fdf5b39_2_mwpm_03201609.jpeg",
                "thumbnail_pic_s03": "https:\/\/dfzximg02.dftoutiao.com\/news\/20250530\/20250530193131_ab18429ec87b5744aa5ea7a76fdf5b39_3_mwpm_03201609.jpeg",
                "is_content": "1"
            },
            {
                "uniquekey": "62a5b1eb4eb0c10c2db23e9f17953e98",
                "title": "空军首次在院校组织实施空中加油专项训练",
                "date": "2025-05-30 16:10:00",
                "category": "军事",
                "author_name": "央视新闻客户端",
                "url": "https:\/\/mini.eastday.com\/mobile\/250530161022841643883.html",
                "thumbnail_pic_s": "https:\/\/dfzximg02.dftoutiao.com\/news\/20250530\/20250530161022_46ddd24f917564544ff80b76312d89da_1_mwpm_03201609.jpeg",
                "thumbnail_pic_s02": "https:\/\/dfzximg02.dftoutiao.com\/news\/20250530\/20250530161022_46ddd24f917564544ff80b76312d89da_2_mwpm_03201609.jpeg",
                "thumbnail_pic_s03": "https:\/\/dfzximg02.dftoutiao.com\/news\/20250530\/20250530161022_46ddd24f917564544ff80b76312d89da_3_mwpm_03201609.jpeg",
                "is_content": "1"
            }
        ],
        "page": "1",
        "pageSize": "5"
    },
    "error_code": 0
}
六、页面
包含以下页面
1、新闻类型选择页
通过图标选择类别，图标超过一定数量可左右滑动
底部展示热门新闻

2、新闻列表页
新闻列表通过图文的方式展示
下拉刷新
点击链接跳转到原文

七、注意事项
你写的是前端
系统能运行是前提

3、生成代码

3.1 启动

1、选择模式、模型

2、贴入提示词

3、点击起飞（启动）


3.2 配合AI点continue

这个时候你可以吃着火锅唱着歌，点continue。




3.3 自我修复

遇到报错不要慌，AI会自我修复


3.4 排错

我看到应用程序有一个编译错误，一直没改掉，导致系统不能运行。这个时候我提示AI，缩小排错范围，去检查特定的文件。AI很快就找到了问题，并解决了问题。




3.5 运行



系统运行起来了，看起来朴实无华。问题不大，稍微打扮一下就行。



4、优化

4.1 修改图标

指令：修改news-types，一排5个，分两排；用圆形图标展示#NewsTypes



5.2 增加推荐新闻列表

指令：在组件下，增加推荐新闻列表#newsApi.tsx


5.3 增加mock数据

指令：增加模拟数据，每一个分类模拟20条数据#newsApi.ts


5.4 增加返回按钮

指令：在 news-list 下，增加返回主页导航，吸顶#NewsList.tsx



5、运行结果





8、总结

1. 提示词就是编程语言：在与AI交互中，提示词就是AI的编程语言。它决定了AI如何理解和执行任务，是实现高效沟通的关键。 2. 提升表达能力：我们需要提升自己把问题说清楚的能力。只有清晰地表达需求，AI才能更精准地理解并提供符合预期的结果。 3. 让生成的代码在自己的射程范围内：建立在自己对所有代码充分理解的前提下，我们才能更好地完成任务。 4. 效率提升：通过优化提示词和提升理解能力，原本需要3个小时的任务，现在可能只需半个小时就能完成。这种效率的提升，不仅节省了时间，也提高了工作质量。 5. 手写代码的未来：也许在未来的某一天，手写代码将成为一种非物质文化遗产。