g.3操作⏱ 约 5 分钟

用 AI 搭项目骨架

先把"能跑起来的空架子"立起来

🔎 最后验证 2026-05📚 来源:Claude Code 官方文档、《AI编程实战三卷书》卷一🧰 Claude Code、Git✅ 63 人学过👁 150 次阅读

为什么学这个

第一个里程碑:让项目能跑起来——哪怕只是个空架子、一个写死的页面。先有一个"能运行的起点",后面所有功能都往上长。这一步,让 AI 帮你快速搭好骨架。

💡 打个比方

就像盖房先打地基和框架:还没有家具、没装修,但房子的骨架立住了、能进人了。项目骨架就是这个"能站人的毛坯"——简单,但必须先有,且必须能跑。

搭骨架时该让 AI 做的:
- 创建项目的基本文件结构(页面、样式、脚本/或前后端目录)
- 一个能直接运行、能看到效果的最小版本(哪怕只显示一行字)
- 告诉你怎么运行它(P2 学的 localhost / 起服务用上)
用上你学过的方法:
- 四要素提示词(P3 6.8)说清技术栈和约束:"用基础 HTML/CSS/JS,别引入框架"
- 先 git init + 首次 commit(P1C / P3 6.12):骨架就是第一个存档点
- 搭完先跑起来确认(P3:别只看代码,要真运行)

示例:让 AI 搭最小骨架示例 · 非实时

你

帮我搭一个待办清单的项目骨架:index.html / style.css / app.js 三个文件,页面先显示一个标题'我的待办'和一个写死的示例任务。用基础 HTML/CSS/JS,别引入框架。

Claude Code

已创建三个文件,页面能显示标题和一个示例任务。用浏览器打开 index.html 即可看到。要不要我接着做'添加任务'?

⚙ 创建 index.html⚙ 创建 style.css⚙ 创建 app.js

这是示意性的会话片段,帮助你了解真实 Claude Code 大致的交互方式。实际回应会因项目和版本而不同——一切以你在真实终端里看到的为准。

❓ 测验

搭项目骨架阶段,最该确保的是?

⚠️ 避坑骨架阶段就别让 AI 提前堆功能

你只要骨架,AI 却可能"热心"地把一堆功能也写了(P4 #3 越界、#8 过度工程)。明确告诉它'这一步只搭骨架,先别加功能',并用 git diff 确认它没多做。一步一个里程碑,是 P6 全程的纪律。

🤖 搭你的项目骨架(去真实环境)

请帮我搭【我的项目】的最小骨架:【说明技术栈,如基础 HTML/CSS/JS / 或 Node 服务】。要求:1) 只搭一个能直接运行、能看到基本界面的空架子,这一步先别加任何功能;2) 告诉我怎么运行它;3) 改动控制在最小范围。我会先 git init 和提交。

🔎 来源与核验· 1 条,点开核对

本节每个关键论断都对应一个可追溯的来源 —— 这是本课程"靠谱、不过时"的底线。

「先建立可运行的最小项目骨架并提交,再逐步开发,是稳妥的项目起步方式」

✅ 小结

骨架立起来了。在往里填功能之前,先想清楚"数据怎么组织"——下一节设计数据结构,这决定了后面写起来顺不顺。

下一节 → 设计数据结构

都看到这了，打个赏呗！