乐于分享
好东西不私藏
夜雨聆风 > > 办公文件 > 表弟用 AI 写了一天代码,网页还是跑不起来

表弟用 AI 写了一天代码,网页还是跑不起来

当前时间： 2026-08-17 17:29:02 分类：办公文件 评论(0)
表弟用 AI 写了一天代码,网页还是跑不起来

前几天晚上，表弟突然来找我。

他很兴奋地说，自己用豆包搞了一天代码，想做一个小系统。AI 一直在给他写代码，他也一直照着复制、粘贴、修改，看起来每一步都挺像那么回事。

结果折腾到大晚上，网页根本运行不起来。

他的问题不是“AI 没写代码”。恰恰相反，AI 写了很多代码。

真正的问题是：他不知道这些代码应该放在哪里，不知道怎么运行，不知道报错是什么意思，也不知道下一句该怎么问。

这其实是很多普通人第一次用 AI 做系统时都会遇到的情况：

感觉 AI 已经把东西做出来了，但自己就是跑不起来。

后来我接过来，用 Vibe Coding 的方式重新梳理需求、整理项目、补齐运行步骤，大概 30 分钟做出了一个可以跑起来的雏形系统。

那一刻我更明显地感觉到：普通人用 AI 做系统，难点已经变了。

过去的难点是“不会写代码”。

现在的难点是“不会把需求、环境、运行方式和反馈讲清楚”。

如果你只是想把一个想法做成能运行的网页、小工具或管理系统，第一步不是先学会 JavaScript，也不是背框架文档，而是先学会和 AI 把事情说清楚。

AI 编程工具真正改变的地方也在这里：普通人可以通过对话，把一个模糊想法，逐步变成需求、方案、代码和产品。

一、先别急着写代码，先把问题说清楚

表弟那天最大的问题，就是一开始没有把系统边界讲清楚。

很多人第一次找 AI 做工具，也会这样说：

帮我做一个待办工具。

这句话不是不能做，但太粗了。

AI 不知道你是给自己用，还是给团队用；不知道要不要登录；不知道数据放哪里；不知道你想做成网页、App，还是小程序；更不知道你本地电脑里有没有 Node.js、VS Code、浏览器预览环境。

所以它可能会给你一堆代码，但普通人拿到以后还是会卡住：

  • • 文件应该怎么放？
  • • 哪个文件是入口？
  • • 需要安装什么？
  • • 运行命令是什么？
  • • 报错了应该把什么信息发给 AI？

更好的说法是：

我想做一个每日计划网页，可以添加任务、设置优先级、完成后打勾，并统计今天完成了多少。先做纯前端，不需要后端，数据保存在浏览器本地。请告诉我需要创建哪些文件，以及怎么在本地运行。

你会发现，这句话已经包含了几个关键信息：

  • • 要解决的问题：管理每日计划
  • • 使用方式：网页
  • • 功能范围：添加、优先级、完成统计
  • • 技术边界：纯前端
  • • 数据方式：浏览器本地保存
  • • 交付方式：需要文件结构和运行步骤

这就是普通人最需要练习的能力：不是写代码，而是把问题讲明白。

二、让 AI 帮你把需求问清楚

你不需要一开始就把所有功能想完整。更好的方式，是让 AI 反过来追问你。

可以直接这样问：

我想做一个个人效率工具，但我不懂代码。请你先帮我梳理需求，问我几个关键问题，然后整理成一个可以交给 Claude Code 实现的开发方案。

AI 通常会帮你拆出这些问题：

  • • 这个工具给谁用？
  • • 最核心的 3 个功能是什么？
  • • 需要几个页面？
  • • 数据保存在哪里？
  • • 要不要账号登录？
  • • 先做最小版本，还是一次做完整版本？
  • • 页面风格要简洁、商务、可爱，还是像管理后台？

这一轮对话的目标，不是马上生成代码，而是把“我想要一个东西”变成“可以落地实现的方案”。

三、安装 VS Code：普通人的代码工作台

VS Code 是最适合普通人入门的代码编辑器。你可以把它理解成一个“项目工作台”：

  • • 左边看文件
  • • 中间看代码
  • • 下方开终端
  • • 浏览器里预览效果

打开官网下载安装：

https://code.visualstudio.com/download

Windows 用户安装时，建议勾选：

Add to PATHRegister Code as an editorAdd "Open with Code" action

这样以后就可以在终端里输入：

code .

直接用 VS Code 打开当前项目文件夹。

如果 macOS 提示 code: command not found，可以这样配置：

  1. 1. 打开 VS Code
  2. 2. 按 Command + Shift + P
  3. 3. 搜索 Shell Command: Install 'code' command in PATH
  4. 4. 回车执行
  5. 5. 重新打开终端

四、安装 Claude Code：让 AI 在本地帮你写代码

Claude Code 是运行在终端里的 AI 编程工具。它可以在你的项目文件夹里读文件、写代码、改 bug、运行命令。

macOS / Linux / WSL 可以这样安装：

curl -fsSL https://claude.ai/install.sh | bash

macOS 如果装了 Homebrew，也可以用：

brew install --cask claude-code

Windows PowerShell：

irm https://claude.ai/install.ps1 | iex

Windows CMD：

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

安装完成后，重新打开终端，输入：

claude

第一次启动时，按照提示登录 Claude 账号。

五、在 VS Code 里启动 Claude Code

创建一个项目文件夹：

cd Desktopmkdir my-first-ai-appcd my-first-ai-appcode .

在 VS Code 里打开终端：

Terminal → New Terminal

然后输入：

claude

现在你就可以把整理好的需求发给 Claude Code：

我想做一个纯前端网页工具，用来管理每日待办事项。要求：1. 使用 HTML、CSS、JavaScript 实现。2. 不需要后端。3. 数据保存在浏览器本地。4. 支持添加任务、删除任务、完成任务。5. 支持按“全部 / 未完成 / 已完成”筛选。6. 页面要简洁、美观，适合普通用户使用。7. 请直接创建完整项目代码，并告诉我如何运行。

Claude Code 会在当前文件夹里创建文件，比如：

index.htmlstyle.cssscript.js

这时候你就已经从“一个想法”走到了“一个本地项目”。

六、用 VS Code 插件提升体验

普通人做前端项目，建议安装这些 VS Code 插件：

插件
作用
Claude Code
在 VS Code 里使用 Claude Code
Live Server
本地预览 HTML 页面
Prettier
自动格式化代码
ESLint
检查 JavaScript / TypeScript 问题
Auto Rename Tag
自动同步修改 HTML 标签
Path Intellisense
自动补全文件路径

如果是纯前端项目，安装 Live Server 后：

  1. 1. 打开 index.html
  2. 2. 右键页面
  3. 3. 点击 Open with Live Server

浏览器会打开类似这样的地址：

http://127.0.0.1:5500

以后你改代码，页面会自动刷新。

七、国产模型也可以作为选择

如果你希望使用国产模型，也可以选择 DeepSeek、通义千问、Kimi、智谱 GLM、MiniMax 等。

平台
地址
适合场景
DeepSeek
https://platform.deepseek.com
性价比高，适合通用编程和推理
通义千问 / 阿里云百炼
https://bailian.console.aliyun.com
中文内容、企业应用、多模态
Kimi / 月之暗面
https://platform.kimi.ai
长上下文、代码、Agent 任务
智谱 GLM / Z.AI
https://z.ai
编程 Agent、复杂任务执行
MiniMax
https://www.minimaxi.com/pricing
编程套餐、低成本使用

要注意一点：Claude Code 默认使用 Claude。国产模型通常需要支持自定义 API Base URL 的工具，比如 Cline、Roo Code、OpenCode、Continue、Cherry Studio，或者模型路由工具。

接入时一般需要填写：

API KeyAPI Base URL模型名称是否使用 OpenAI 兼容格式

普通人刚开始，不建议一上来就折腾模型接入。可以先用 Claude Code 跑通完整流程，再考虑替换模型。

八、功能做好后，用 Skill 做 UI 美化

AI 第一次生成的页面，经常能用，但不一定好看。

这时候可以给 Claude Code 安装前端美化 Skill。

创建 Skill 文件夹：

mkdir -p ~/.claude/skills/frontend-ui-polishcode ~/.claude/skills/frontend-ui-polish/SKILL.md

写入：

---name: frontend-ui-polishdescription: 优化前端页面 UI、美化视觉效果、改善布局、颜色、间距、响应式和交互体验。---你是一个资深前端 UI 设计与实现助手。当用户要求优化页面、改进 UI、美化前端、提升视觉效果、适配移动端时，请按以下标准执行：1. 保留现有功能，不随意删除业务逻辑。2. 优先优化布局层次、留白、颜色、字体、按钮、表单、卡片和导航。3. 页面要像真实产品，不要像测试 Demo。4. 避免过度花哨，不要滥用渐变、阴影和大圆角。5. 确保移动端和桌面端都能正常显示。6. 检查文字是否溢出，按钮是否太挤，内容是否重叠。7. 修改完成后，说明优化了哪些地方，并告诉用户如何运行查看。

以后在 Claude Code 里就可以说：

请使用 frontend-ui-polish 这个 skill，帮我美化当前前端页面。

再创建一个响应式检查 Skill：

mkdir -p ~/.claude/skills/responsive-ui-checkcode ~/.claude/skills/responsive-ui-check/SKILL.md

写入：

---name: responsive-ui-checkdescription: 检查前端页面的响应式适配、移动端布局、文字溢出、按钮遮挡和内容重叠问题。---请检查当前前端页面的响应式体验。重点检查：1. 手机端是否能正常使用。2. 按钮、表单、卡片是否过宽或过窄。3. 文字是否溢出容器。4. 页面是否存在横向滚动。5. 如果发现问题，请直接修改代码，并保留原有功能。

然后使用：

请使用 frontend-ui-polish 和 responsive-ui-check，对当前项目进行 UI 美化和移动端适配。

九、推荐完整工作流

普通人最适合这样用：

VS Code 负责看文件和预览页面Claude Code 负责写代码和改代码Live Server 负责打开网页效果Skill 负责 UI 美化和响应式检查国产模型用于降低成本或作为替代方案

完整流程是：

  1. 1. 先描述自己的问题和想法。
  2. 2. 让 AI 追问并整理需求。
  3. 3. 把需求变成清晰的开发提示词。
  4. 4. 安装 VS Code。
  5. 5. 安装 Claude Code。
  6. 6. 在 VS Code 打开项目文件夹。
  7. 7. 打开内置终端，输入 claude。
  8. 8. 把需求发给 Claude Code。
  9. 9. 让它实现第一个可运行版本。
  10. 10. 用 Live Server 预览页面。
  11. 11. 继续通过对话修 bug、加功能。
  12. 12. 使用 Skill 做 UI 美化和移动端适配。
  13. 13. 如果需要，再接入国产模型。

最后

普通人通过对话实现功能，本质上不是“不会代码也能随便做软件”。

更准确地说，是你可以把过去必须由程序员独立完成的一大段工作，变成你和 AI 协作完成。

你负责说清楚：

我要什么为什么要哪里不满意下一步怎么改

AI 负责把这些话翻译成：

方案代码界面修改可运行的项目

所以，未来普通人最重要的能力，不一定是写代码，而是会表达需求、会拆解问题、会反馈结果、会持续迭代。

能把一句“我想做个工具”，慢慢说成一个真实可用的产品，这就是 AI 时代的新手艺。