Markdown 输入，HTML 输出：速成课
用 Markdown 编写。用 HTML 阅读。这是与 agent 协作的两种文档语言。
大多数人向 AI 输入一个含糊的请求，然后拿回一大段文字。请求很含糊，所以 AI 只能猜他们想要什么。答案太长读不下去，于是他们草草扫一眼。两个方向上都丢了东西：AI 从未真正理解他们，他们也从未真正读过它的回答。
本课程把两个方向都修好，每个方向用一种语言。这两个名字你可能都没听过。Markdown 是纯文本，加上几个表示结构的额外标记：标题前一个 #，列表每一项前一个 -。你早就见过它，只是不知道名字：当 Claude 或 ChatGPT 把某个词加粗，或给你一个项目符号列表时，它写的就是 Markdown。你直接把它输入你一直在用的那个聊天框就行，没有什么要安装的。HTML 是构建网页的语言：你在浏览器里打开过的每个页面，包括这一页，底层都是 HTML。两者都不是编程，都是普通文本。技巧在于知道在哪个方向该用哪一个。
高手按方向把对话拆开。他们用 Markdown 写给 AI（标题、列表、代码块），因为结构让 AI 无从猜起。他们要求 AI 用 HTML 回答（图表、表格、颜色、交互），因为对一个忙碌的人来说，设计过的页面是他真正会读完的唯一长答案。第一种语言学一个小时就够了。第二种你根本不用写，你只需学会要求它。（继续之前先说一句：本书用 agent 指代为你执行多步骤工作的 AI。今天它只是浏览器标签页里的 Claude。本书后面，它会拿到一个终端和你的文件。你在这里学到的格式规则，无论哪种情况都一样。）
整门课程，浓缩成一张图：
图片背后是一个问题，它决定了本课程中的每一个格式选择：谁最后读这份内容？ 如果一个人会在浏览器里读它，就要 HTML。如果 AI 会读它，或者你之后会把它喂回给 AI，就保留 Markdown。如果它要进社交信息流，就用纯文本。“Markdown 输入，HTML 输出”只是其中最常见的一对答案。把这个问题记住；本页其余部分都是细节。
两分钟亲手验证一下
讲任何理论之前，先把整门课跑一遍。打开 Claude.ai（注册免费账户只要一分钟；ChatGPT 或 Gemini 也行），然后粘贴：
给我做一个小网页，作为一个 HTML artifact：一张面向社区 补习中心的欢迎卡片。顶部一条彩色的节日通知横幅，三门 示例课程及每月费用整齐地排成一张表格，再加一个 WhatsApp 联系按钮。让它在手机上可读。
Claude 想一会儿，然后在聊天旁边打开一个面板，在里面构建一个真实的、带样式的页面：横幅、表格、按钮。那个面板就是一个 artifact：AI 在对话旁边而不是对话内部构建的实时文档。（ChatGPT 和 Gemini 把它叫作 Canvas；是同一个东西。）如果你拿到的是一堵代码墙而不是渲染好的页面，就说 show it to me as a rendered artifact，它会切换过来。现在在 artifact 面板上找到分享或发布的控件，点一下，再在手机上打开生成的链接。
两分钟，你已经把整门课程教的东西全都做了一遍，只是这一次是无意间做的：几行结构化的内容进去，一个设计好的页面出来，一个链接让它可以分享。下面的十四个概念让每一步都变得有意识，这样当风险高于一次演示时，它们仍然管用。Part 1 搭起这道分工的框架。Part 2 教你需要亲手写的那一点点 Markdown。Part 3 教你去要求、评判和发布你从不动手写的 HTML。Part 4 用一个练习贯穿本书中你会遇到 agent 的三种方式。学完之后，你将能写出一份干净的 Markdown 规范，把它变成别人可以从链接打开的、可读的 HTML artifact，并能为任何给定的输出判断它该是 Markdown、HTML，还是用于信息流的纯文本。
📚 教学辅助
查看完整演示 — Markdown 输入，HTML 输出
本速成课假设你已学过前面的基础课：AI 到底是什么 给你这台机器的心智模型，2026 年的 AI 提示 给你那些习惯。那些习惯（载入正确的上下文、先头脑风暴再迭代、给输出打个十分制的分）在这里都会再次出现；本课程给它们一种可以落脚的文件格式。更深入的工具讲解在 Agentic 编程速成课 和 Cowork 与 OpenWork 速成课 中；要读完本页，这两门课你都不需要。
- 一个免费的聊天账户。 示例用的是 Claude.ai；这里的每一条聊天提示词，ChatGPT 或 Gemini 也能原样运行。提示词里说“artifact”的地方，在这两个工具上说“Canvas”；在其他任何工具上，要求_“一个单独的 HTML 文件”_，效果一样。
- 在工具里打开联网访问，这样 AI 才能抓取你给的链接。大多数工具里默认是开着的；如果某个带链接的示例不起作用，检查一下联网搜索的设置。
- 一部手机，用读者实际看到的方式来评判你做出来的东西。
阅读大约需要一个小时；结尾的七条提示词再加大约三十分钟。边读边跑这些提示词：阅读给你词汇，动手跑给你技能。
第 1 部分：两种语言
1. 为什么 agent 需要结构
同一个请求，写两遍。
未结构化的：
I want a page for my tuition center, it should look professional
and have our courses and timings and a way for parents to contact
us, also fees, and it should work on phones since most parents
use phones, oh and put the Eid holiday notice somewhere visible.
结构化的：
# Tuition Center Landing Page Specification
## Goal
A single-page site parents visit from their phones to check
courses, timings, fees, and contact info.
## Requirements
- Mobile-first layout (most visitors are on phones)
- Course list with timings and monthly fees
- Contact section: phone, WhatsApp link, location
- Holiday notice banner at the top (currently: Eid holidays,
center closed June 6-9)
## Out of scope
- Online payments
- Student login
两者包含相同的信息。但第一种逼着 agent 去_推断_结构：假期通知比费用更重要吗？“专业”是一条约束还是一种感觉？“联系我们的方式”是一个表单还是一个电话号码？每一处推断都是 agent 可能猜错的地方，而猜错的 agent 看起来并不像出错，看起来很自信。
第二个版本把结构写明白了。标题声明每个块是哪一类信息。项目符号声明这些需求是一个_集合_，每一条都能独立核对。而“超出范围”这一节做了散文几乎从不做的事：它写明了你不想要什么，这是每份好规范的一半。
这就是为什么 Markdown 是 agent 工作的规范语言。agent 是在海量的 Markdown 上训练出来的（互联网上大多数文档都用它写成），所以它们能原生地解析其结构：对它们来说，# 标题不是装饰，而是关于层级和重要性的信号。（后面的章节把这些写下来的意图所在之处称为意图层：人类的意图，写得足够精确，让 agent 可以据此行动。你现在正在学着写它。）
一个非软件的例子。 一位学校管理员要求 agent“起草年度运动会方案，安排常规项目，并确保年幼的孩子不在下午的暑热里活动。”起草出来的方案还是把 8 岁以下的赛跑排在了下午 2 点：那条约束被埋在散文的句子中间，agent 把它当成了一种偏好。她用 ## Hard constraints 标题重写了请求，里面只有一条项目符号：“所有 8 岁以下的项目必须在上午 11:30 前结束。”下一版方案完美照办。约束没有变，变的是它_在结构中的可见度_。
这个习惯，说一遍就够：任何 agent 绝不能弄错的东西，都该有自己的标题或自己的项目符号，绝不要藏在句子里。
2. 这种不对称：Markdown 输入，HTML 输出
那么 Markdown 是输入语言。它也是输出语言吗？直到不久前，是的：agent 默认用 Markdown 回答，对于简短的答案这没问题。
但如果你心目中的 AI 输出还是满墙的项目符号文字，那幅画面现在已经过时了。在一篇广为流传的文章里，Anthropic 旗下 Claude Code 团队的 Thariq Shihipar 讲述了 为什么他和团队里的其他人不再要求 Markdown 输出，转而要求 HTML。他的理由，转述如下：
- 长的 Markdown 没法读。 超过大约一百行，人就不再读 Markdown 文件了，而随着 agent 接手更大的任务，它们的方案和报告越来越长。一百不是什么神奇的数字；诚实的检验是看_你_愿不愿意从头到尾读完它，到某个长度，答案就变成不愿意。没人读过的方案，等于你其实没有批准的方案。
- Markdown 的上限很低。 标题、列表、表格，再没多少别的了。当 agent 需要给你展示一套工作流、一组配色或一种布局时，Markdown 只能退而求其次用 ASCII 字符画：有意思，但终归是权宜之计。
- HTML 几乎没有上限。 带样式的表格、图表、带批注的代码、可交互的控件。agent 知道的东西，几乎没有 HTML 不能高效地展示给人看的。
- HTML 可以分享。 浏览器原生就能渲染它。同事点一下链接；谁都不用安装任何东西。人们真的会读一个设计过的页面；他们会礼貌地无视一个原始文本文件。
- Markdown 的杀手锏正在褪色。 Markdown 当年了不起，是因为人可以轻松手动编辑它。但越来越多的情况下，你不再手动编辑 agent 的输出；你提示 agent 去编辑它。一旦由 agent 来做编辑，格式就只需要适合读者了。
结果是一种清晰的不对称，它是整门课程的脊梁：
| 方向 | 格式 | 为什么 |
|---|---|---|
| 你 → agent | Markdown | 结构消除歧义。打字快。agent 原生就能解析它。 |
| agent → 你 | HTML | 丰富、可读、可分享、可交互。一份 500 行的方案，你真的会读。 |
| agent → agent | Markdown | 在多次 AI 会话之间传递的规范、笔记和上下文，保持紧凑而精确。 |
第一行你亲手写，所以 Part 2 会好好教它。第二行你从不写；你提示它出现，所以 Part 3 教的是提示词，而不是标签。
HTML 的每一项优势，都是为眼睛和浏览器服务的优势。对 AI 来说，同一个文件就是包裹着意义的噪音：标签、样式和布局代码花掉几千个词，才说清 Markdown 用五十个词就能说清的事。所以任何_为_ AI 而留的东西，都保留 Markdown。这比你想的范围更广：一次新的聊天什么都记不住，所以你今天保存、明天粘进对话的笔记也算“agent → agent”，即便两个 agent 都在和你说话。问那一个问题：谁最后读这份内容？
- 一个人最后读它 → HTML。
- AI 最后读它（包括以后的某次聊天）→ Markdown。
- 老实说不确定 → Markdown。人读 Markdown 读得还行；AI 读 HTML 读得很差。而且你总能在有人需要的那一刻，把 Markdown 渲染成 HTML。
本书的每一章都用 Markdown 写成（源文件以 .md 结尾），你看到的图表大多是 SVG，那是 HTML 的插图语言。这本书践行着它所宣讲的不对称：在精确性要紧的地方用 Markdown，在人要阅读的地方用丰富的视觉。
第 2 部分：Markdown，写作语言
Markdown 有几十种功能。你需要其中五种。下面这五种基本上覆盖了你在本书中会写的每一份规范、简报和上下文文件，而本部分最后的概念会把它们组装成你的第一份完整规范。
如何练习：本部分的每个示例都是一条提示词，你现在就能粘进 Claude.ai。你输入的那个结构_本身_就是课程。
3. 标题：告诉 AI 什么最重要
一个 # 构成一个标题。# 越多，层级越深：
# Document title (one per document)
## Major section
### Subsection
这就是全部语法。要紧的是标题_为_ AI 做了什么：它们显示哪些信息最重要、哪些细节归在哪一节下。## Hard constraints 下面的一切都是 AI 必须遵守的约束。## Nice to have 下面的一切都是可选的。没有标题，AI 只能猜什么要紧。有了标题，你直接告诉它。
三条规则能避免 90% 的标题错误：
| 规则 | 为什么它对 agent 要紧 |
|---|---|
每个文档只有一个 # 标题 | 两个标题意味着两个文档被拼在了一起；agent 可能把它们当成两个独立的任务。 |
不要跳级（# → ###） | 跳一级就破坏了这棵树；agent 可能把某个小节挂错到不对的父级上。 |
| 让标题成为_声明_，而非标签 | ## Budget 说的比 ## Budget: PKR 50,000 hard ceiling 少。标题本身就承载着约束。 |
现在就试试。 把这段粘进 Claude.ai：
这是我为一次家庭开斋节晚宴记的笔记，乱成一段：
“大约 20 位客人，其中三位吃素，预算约 25k 卢比， 印度香饭由我母亲负责，所以别再安排主食米饭， 需要一张儿童餐桌，晚上 8 点开饭，我们另租了 4 把椅子。”
把这些笔记重新整理成一份 Markdown 文档，标题分别为 目标、硬约束、已安排妥当、待定问题。 把每一个事实放到正确的标题下。如果一个事实可能归入 两个标题，选一个，并告诉我为什么。
读读拿回来的内容。agent 会做出一两次判断（“晚上 8 点开饭”是约束还是目标？），看它_解释_这个判断，能教会你 agent 是怎么读你的结构的。
4. 列表：集合用项目符号，序列用数字
两种列表类型，一处 agent 会认真对待的区别：
Features the page must have: Steps to publish:
- Course list with fees 1. Review the draft
- WhatsApp contact button 2. Fix the timings table
- Holiday banner 3. Publish
- Urdu/English toggle 4. Send the link to parents
- 项目符号（
-） 说的是：这些项是一个集合；顺序无关紧要；每一条各自成立。 用它来写功能、需求、约束、选项。 - 数字（
1.） 说的是：这些项是一个序列；顺序就是重点；第 3 步假定第 2 步已经发生。 用它来写流程、工作流，以及任何倒着做就会出错的事。
这听起来只是表面功夫。其实不是。给 agent 一个编号列表，它就把顺序当成指令的一部分；它几乎绝不会在第 1 步之前就开始第 4 步。给它项目符号，它就觉得可以按任何高效的顺序处理这些项。选错列表类型，发出的就是关于你意图的错误信号。
嵌套又加了一个维度：子项归属于它们的父项。
- Contact section
- Phone number (clickable on mobile)
- WhatsApp link (tapping it opens a chat)
- Map pin, not a full embedded map
可核对的项目符号这个习惯。 最好的需求项目符号，是审阅者无需讨论就能打上 ✅ 或 ❌ 的那种。“页面应该快”不可核对。“页面在 3G 连接下加载时间不到 3 秒”就可以。写规范时，重读每一条项目符号，问一句：agent，或者我，能客观核实这一条吗？ 这就是 2026 年的 AI 提示 里那套十分制评分的纪律，一次只用在一条项目符号上。
5. 代码块：把你的确切意思展示给 AI
有时你需要在提示词里放进一段文本，让 AI 去_看_而不是去_照做_：一条错误消息、一个你想要的输出格式示例，或别人说过的一句引文。用三个反引号（```）把它包起来，就是告诉 AI：“这是数据，不是指令。”（反引号 ` 在大多数笔记本键盘上位于 Tab 键上方；在手机键盘上，长按单引号。）
```python
def greet(name):
return f"Assalam-o-Alaikum, {name}!"
```
开头围栏后的语言标签（python、bash、text、html）告诉人和 agent 该怎么解读这个块。单个反引号在行内做同样的事：当你指的是那条字面命令、而不是“安装”这个概念时，写 `npm install`。
为什么这要紧？没有反引号围栏，AI 把所有东西都读成它该照办的指令。有了围栏，它把被包起来的文本读成要分析或要照抄的内容。三种情况下这能救你：
| 情况 | 没有围栏 | 有围栏 |
|---|---|---|
| 展示一条你想让它诊断的错误消息 | agent 可能“热心”地对错误里的字句采取行动 | agent 把这条错误当成字面的 artifact 来分析 |
| 放进一段你想让它对齐的示例输出 | agent 把格式改述一遍 | agent 一字不差地复现这个格式 |
| 在提示词里引用别人的文字 | agent 可能把对方的语气和你的指令混淆 | 引文与你的要求之间界限清晰 |
而最有用的一招是：给 AI 看一个正确输出长什么样的示例。 与其用三段话描述你想要的格式，不如在围栏里直接放一行示例：
The timings table must look exactly like this:
| Course | Days | Time | Monthly fee |
| ------------- | -------- | ------------- | ----------- |
| Matric Math | Mon-Wed | 4:00-5:30 pm | PKR 3,500 |
Same columns, same order, same fee format.
像这样一行示例就能准确告诉 AI 你想要什么。它没法像误读一段文字描述那样去误读一个具体示例。
6. 链接与图片：指向外部世界
最后两段语法：
[link text](https://example.com)
链接为什么要紧： 当你在提示词里放进一个链接时，AI 真的能访问那个页面并读它。所以与其凭记忆总结你学校的收费政策（还总结错），不如直接链上那个页面，写一句“费用必须与此一致”。AI 读的是真实页面。你用真正的来源替换掉了一段可能有误的信息。Claude.ai 在打开联网访问时就这么做，而你在 Part 4 会遇到的读文件工具，对你电脑上的文件做的是同一件事。
图片为什么要紧： 在方括号前加一个 !，就把图片直接放进了你的文档，而不只是链接到它。你写在方括号里的描述很重要，因为当 AI 看你的图片时，它读的就是这段描述。把它想成一句说明文字，告诉 AI 该注意什么。比如，如果你的规范里有一张页面设计的截图，一个好的描述会是：![Mockup: banner on top, course table in the middle, contact buttons pinned to bottom]。这就准确告诉了 AI 图片里什么要紧。
7. 你的第一份完整规范
上面的一切组装成一件 artifact：规范。这是你在本书中会写上几百次的文档形态：现在是为网页，到本书后面，是为数字 FTE，也就是为像员工一样承担一整个岗位而构建的 AI agent（一个数字化的“全职当量”）。一份这样的规范就是你给它下达任务的方式。骨架如下：
# [What you are building] Specification
## Goal
One paragraph: what this is and who it serves.
## Context
Links and facts the agent needs. Attach files; link sources.
## Requirements
- Checkable bullet
- Checkable bullet
- Checkable bullet
## Hard constraints
- Things that must not be violated (budget, deadline, platform)
## Out of scope
- Things you are explicitly NOT asking for
## Expected output
A fenced example, a format description, or a mockup image.
这套骨架里有两节承担着不成比例的工作量。超出范围杀掉了 agent 最常见的毛病：热情过头的超额交付，那个你从没要过的登录系统，那十七个把你想要的三个功能埋掉的功能。预期输出杀掉了第二常见的毛病：格式漂移。
然后是把规范和愿望区分开的那一步：在执行规范之前先验证它。 别把初稿交给 agent 然后听天由命。把它交给 agent，让它来挑刺：
这是我的规范：[粘贴规范]
先别构建任何东西。先评审规范本身：
- 列出每一处歧义：每一个会让两位讲理的读者 构建出两种不同东西的地方。
- 列出每一条你不得不去猜的、缺失的约束。
- 从清晰度、完整性和可核对性三方面给这份规范打分 （满分 10 分），每项配一句话说明理由。
- 提出能把分数提得最多的那一处单一改动。
这就是 2026 年的 AI 提示 里那套打分加迭代的循环，只不过这次对准的是你的规范，而不是 agent 的输出。通常两三轮就能把一份规范从 6 分提到 9 分，而一份 9/10 的规范是整个 agent 工作中最便宜的质量提升，因为下游的每件 artifact 都会继承它的清晰度。修掉规范里一条含糊的项目符号要花一分钟。修掉 agent 照那条项目符号构建出的错误成品，要花一个下午。
本书会反复强化的一个观念转变：在 AI 原生的工作里，规范不是真正工作之前的文书活儿。它就是真正的工作。agent 的输出是你那份规范的函数；改进规范，每一次重新生成都随之改进。本书把这种构建方式称为规范驱动开发，本书第 1 部分会把它完整展开。这套骨架就是它的种子。
第 3 部分：HTML，阅读语言
你现在会写结构化的输入了。这项技能的后半部分是要求结构化的_输出_，而在这里规则完全反了过来。你不会在这里学 HTML 标签，因为你不用写它们。agent 来写。你的活儿是知道何时要 HTML、要什么、以及怎样评判拿回来的东西。
8. 为什么要 HTML
把这个实验跑一次，你就再也不用被说服了。拿一份 agent 用 Markdown 给你做过的方案或报告，比一屏更长的那种。（历史记录里还没有长答案？就你正在学的任何东西，要一份详细的两周学习计划，然后拿它来用。） 然后问：
把这个变成一个为阅读而设计的单一 HTML 文件： 清晰的视觉层级，一个小目录，关键数字做成带样式 的表格，再加一张整体流程的 SVG 图。 针对在手机上读一遍的人来优化。
你拿回来的是同样的信息，但这一次你真的会_读_它。读 与 略读 的这个差别，就是全部论点。在本页顶部那两分钟的验证里你已经体会过一个小号版本；附录会用一份真实规范从头到尾展示它。把这个差别拆成各个部分来看：
| HTML 带来什么 | 实际看起来是什么样 |
|---|---|
| 信息密度 | 表格、颜色编码、SVG 图、带批注的代码，而不是 ASCII 字符画和满墙的项目符号 |
| 可导航性 | 标签页、目录、可折叠的小节：一份 500 行的方案，你能在其中穿行 |
| 可分享性 | 在任何浏览器里打开；发布一个 artifact 链接，家长、学生或同事点一下就能看，无需 app、无需账户 |
| 交互性 | 滑块、开关、可拖动的卡片、实时预览：文档成了一件仪器，而不是一份打印件 |
| 一个“复制回去”的循环 | 一个按钮，把你的选择导出为可粘回给 agent 的文本：你直观地调整，agent 精确地接收 |
最后这一行值得细看，因为它最不明显、也最强大。有些偏好用语言来表达很痛苦：一种颜色、一段动画的速度、三十个项目的优先顺序。让 agent 为它们构建控件，再加一个_复制为文本_的按钮，就把“让它再暖一点，不对，少点橙”变成了拖动滑块三十秒、再粘贴一次。你始终在这个循环里；而循环变得更紧。
一个非软件的例子。 一位校长向 agent 要一份关于三年招生趋势的报告。Markdown 版本是九屏的项目符号；她读了两屏。重新提示为 HTML 后（趋势线做成 SVG 图表，每个校区一种颜色，顶部一张结论表格，详情折叠在下面），同一份报告四分钟就消化完了，当晚她就把发布好的链接转发给了董事会。董事会里没人会去打开一个 .md 附件。但人人都会点一个链接。
HTML 输出比 Markdown 用掉更多的 token，对于三行的答案来说这纯属额外开销。只有当输出又长、又有视觉、又要分享、或者会被反复回看时，这笔交易才划算。随着你的任务变大，这种情况会成为大多数要紧的输出。对于聊天里快速的一来一往，普通回复仍是正确的默认值。让格式去匹配阅读，而不是去赶时髦。
还有一笔在移动数据上会咬人的开销：一个沉重的可交互 artifact（外部字体、大块的内嵌图片、庞大的库）可能膨胀到好几兆字节，对一个在慢速网络上用手机打开它的读者来说，这是个实打实的问题。当带宽要紧时，就在简报里说清楚：“轻量、单文件、不要外部字体或库，控制在 200 KB 以内。” agent 会把它需要的内联进来，把不需要的跳过。
9. 你不写 HTML；你提示它
从 agent 那里拿到 HTML 不需要任何特殊语法。在 Claude.ai（或 ChatGPT 或 Gemini）里，说“创建一个 HTML artifact”，AI 就会在你聊天旁边的侧面板里构建一个实时页面。你能立刻看到它、点它、和它交互。稍后在 Part 4 里，你会遇到 Claude Code 和 OpenCode 这样的终端工具，它们运行在你的电脑上，而不是浏览器里。这些工具没有侧面板；它们直接把真实文件写到你的电脑上。在那里，你说“把这个写成一个 HTML 文件”，AI 就在你的磁盘上创建一个像 report.html 这样的文件，你在浏览器里打开它。工具不同，触发方式一样简单。
要 HTML 是简单的部分。拿到_好的_ HTML 才是技能所在。一个平庸的页面和一个出色的页面，差别不在那个触发词（“artifact”还是“HTML 文件”），而在你围绕它写的简报。这样想：“给我做一个页面”就像跟厨师说“给我做点吃的”。你会拿到点东西，但多半不是你想要的。你越是把_谁会读它、它该包含什么、它该是什么感觉_告诉 AI，结果就越好。
每个 HTML 请求里都要包含四件事：
- 谁会读它。 一个为校长在手机上看一次而设计的页面，和一个为你自己作工作参考、会打开十次的页面，长得完全不同。告诉 AI 读者是谁、他们会怎么看它。例如：“给我的两位联合创始人看，在笔记本上读一次。”
- 它该包含什么。 点名你想要的具体部件：一张 X 的图、一张 Y 的表、顶部一条带三个关键数字的摘要条、底部一节“坑”。你点名的部件，agent 构建得很出色；该猜你想要哪些部件，agent 就很平庸。你不点名，它多半就不会出现。
- 它该不该可交互。 读者只是读它，还是该能做点什么？用滑块调一个数字？一个把他们的选择复制为文本的按钮？一组在不同视图间切换的标签页？如果你不需要任何交互，就跳过这一条。如果需要，就点名这些控件的作用。
- 它该怎样被读。 “针对读一遍来优化”会产出一个干净、线性的页面。“针对我会反复回看的参考来优化”会产出一个目录和可折叠的小节。“做成能拿给客户看的样子”会产出足够精致、可以转发的东西。每一句话都把设计往一个不同的方向拉。挑一个。
对比一下：
Weak: Make an HTML report about my sales data.
Strong: Read the attached sales CSV. Produce one HTML file for
my two co-founders, reading once on laptops: a headline
findings strip on top (3 numbers, large), one SVG chart
of monthly revenue by product, a table of the 5 fastest
growers, and a short "what I'd do next" section. No
scrolling past 3 screens.
再看一遍那个强版本。它回答了上面的四个问题：谁读它（我的两位联合创始人，在笔记本上），它该包含什么（标题数字、一张图、一张表、一节建议），有无交互（这里不需要，所以跳过），以及_它该怎样被读_（读一遍，滚动不超过 3 屏）。要的就是这么多。你写的正是你在 Part 2 学过的那种结构化简报，只不过这一次你要的是一个设计好的页面，而不是一段文字答案。
评判拿回来的东西。 那套评分纪律可以直接套用。对任何 HTML artifact 都管用的一套评分标准，每项满分 10 分：我来源里的每一个事实都体现出来了吗？我能在 10 秒内找到最重要的那件事吗？它在手机上读得了吗？这个链接我愿意转发吗？ 任何低于 9 分的地方，点名差距，重新生成。迭代一件 artifact 很便宜；agent 会就地改它。
10. 五种 HTML 模式
既然你知道怎么要 HTML 了，那你到底该要什么？实际上，大多数 HTML 输出落入五种常见形态。Anthropic 旗下 Claude Code 背后的团队天天用这些模式，你也会。下面每种模式都讲清它是什么、何时用，并给你一条现成可粘的提示词，你现在就能试。
模式 1：方案与探索。 当你需要做决定时，别问 AI 要一个答案。让它把几个选项并排铺成一张视觉网格，这样你一眼就能比较它们。每个选项有自己的卡片，写明你得到什么、放弃什么。你先看，挑出喜欢的那个，然后才让 AI 把它详细构建出来。这就是 AI 提示课程 里那套头脑风暴加迭代的循环，只不过现在这些选项是你真能看见的一个设计好的页面，而不是一堵你必须读完的项目符号墙。
我正在决定怎么组织[某物]。生成 5 种明显不同的 做法，把它们铺成一个 HTML 文件里的网格，让我能并排 比较。给每张卡片标上它所做的取舍。先别推荐。 让我先看。
模式 2：讲解与报告。 你有一份很长的文档、一个数据文件，或一堆会议记录，你永远不会逐行去读它们。让 AI 替你读，产出一页 HTML 摘要：一张主流程如何运作的图、提炼进带样式表格的关键事实，以及底部一节“坑”，放任何出人意料的东西。这正是本课程前面那位校长用的模式，把三年的招生数据变成了董事会真会读的报告。
Read [source]. Produce a one-page HTML explainer: an SVG
diagram of how [system/process] works, the 4 key facts
annotated, and a "gotchas" section at the bottom. Optimize
for someone reading it exactly once.
模式 3：代码评审与理解。 如果你跟代码打交道（或本书后面会），用纯文本展示改了什么、为什么改，很痛苦。在 HTML 里，AI 能产出颜色编码的 diff、在页边批注解释的代码，以及各部分如何连接的流程图。这种模式在 Agentic 编程速成课 里会完整展开；现在只要知道它存在，以及 HTML 正是让代码评审变得可读的原因就够了。
模式 4：设计原型。 有些东西没法用语言描述。什么样的蓝？圆角该有多圆？标题该有多大？与其在文字里和 AI 来回拉扯（“暖一点，不对橙少一点，不是那种橙”），不如让它构建一个带实时控件的页面：滑块、色块、字号开关。你拖动调整，直到看着对了，再点一个“复制我的选择”按钮，把你的设置导出为可粘回给 AI 的文本。拖动十秒，代替了十轮“再试一次”。
我正在为[某物]挑外观，但我没法用语言描述我想要什么。 用一张示例卡片构建一个 HTML artifact，并给它配上实时 控件：背景暖度和圆角程度的滑块、几个强调色的色块、 一个字号开关，再加一个“复制参数”按钮，把我最终的 选择导出为我能粘回给你的文本。
模式 5：用完即弃的小编辑器。 最被低估的模式。有时你需要一个只为一件活儿用的微型定制工具：给 30 个任务排优先级、把 20 个点子分类、给 15 名候选人排名。与其在脑子里或纸上做，不如让 AI 构建一个快速的拖放页面：你可以把卡片在“现在”“接下来”“以后”这样的列之间拖动，底部一个按钮把你最终的排列复制为文本。用它十分钟，点复制按钮，把结果粘回给 AI，然后再也不打开这个页面。页面是一次性的；它导出的文本才是你保留的。那个导出按钮正是让这个模式成立的关键：它把一个视觉决策又变回了 AI 能据此行动的精确文本。
注意那条贯穿始终的主线：在每一种模式里，Markdown（或你的数据）进去，HTML 出来，而任何需要继续对话的东西都以文本形式返回。 这正是概念 2 里那种不对称，现在成了一种实际的工作节奏。
11. 当目的地是信息流，而不是浏览器
“HTML 输出”这条规则有一个重要的例外，如果你用 WhatsApp、LinkedIn 或 Facebook，你会立刻撞上它。这条规则在有人于浏览器里打开你的页面时管用，因为浏览器知道怎么显示 HTML。但社交媒体的信息流不是浏览器。当你在 WhatsApp 或 LinkedIn 上发帖时，那个 app 会无视你的格式，用它自己的设计来显示你的内容。你控制不了它长什么样。所以问题变了：你要问的不再是_“谁最后读这份内容？”_，而是**“目的地实际显示的是什么？”**
下面是你发帖时每个平台实际显示的东西：
- WhatsApp 几乎把所有格式都剥掉了。你能用
*asterisks*把文字加粗、用_underscores_变斜体，但仅此而已。标题、表格、带样式的布局：WhatsApp 全都无视。所以当你让 AI 为 WhatsApp 写东西时，要求短行的纯文本，一行一个意思，也许用一个表情符号标记每个要点，如果你要分享一个 URL，就在末尾放一个光秃秃的链接。 - LinkedIn 和 Facebook 也一样：帖子正文是纯文本。你不能把一个词加粗、加一个标题，或插一张表。（有些人靠复制看起来像粗体的特殊字符在 LinkedIn 上假装粗体，但那是个权宜之计，不是功能。）当你让 AI 写一篇 LinkedIn 帖子时，最重要的是第一行抓住注意力，因为 LinkedIn 把前几行之后的所有内容都藏在一个“……查看更多”按钮后面。对于 Facebook，写短一点。对两者，都要求为那个具体平台写的纯文本。
把原始 HTML 粘进帖子正文，是那个永远错误的一招；它会以一堵尖括号墙的样子落地。
那么 HTML 在社交媒体上就没用了吗？不。它在两个地方仍然要紧：
- 链接预览卡片。 你知道有人在 WhatsApp、LinkedIn 或 Facebook 上分享链接时冒出来的那些小卡片吗？带标题、一句简短描述、有时还有一张图的那些？那些卡片是平台自动构建的。它访问你链接的那个页面，在 HTML 里找特定的隐藏标记（叫 Open Graph 标签），用它们来构建卡片。如果这些标记缺失，你得到的是一个只有光秃秃 URL 的难看空白预览。如果它们在，你得到的是一张设计好的卡片，带标题、描述和图，让人想点。你不需要懂技术细节。只要告诉 AI：“加上 Open Graph 元标签，让链接预览在 WhatsApp 或 LinkedIn 上分享时看起来是经过设计的。” AI 知道该加什么。
- 为帖子设计的图片。 社交信息流展示图片，比展示文字显眼得多。如果你需要一张专业感的图片用于帖子（一张语录卡、一张数据图、一张信息图），一个快办法是让 AI 把它构建成一个带样式的 HTML 页面，再把那个页面存成一个图片文件（PNG）。你发的是图片，不是 HTML。告诉 AI：“把这个构建成一张带样式的 HTML 卡片，再把它存成一张我能发到 LinkedIn 上的高分辨率 PNG 图片。” 你在 Part 3 学的那套给 HTML 页面写简报的技能在这里也管用；你只是把成果存成一张图片，而不是把它发布成一个页面。
所以社交媒体的完整图景是一道干净的分工：纯文本用于你打进帖子里的内容，HTML用于链接预览卡片和你要发的图片设计。
| 你要发布什么 | 向 AI 要什么 | 为什么 |
|---|---|---|
| 一条 WhatsApp 消息 | 纯文本，短行，一行一个意思 | WhatsApp 除基本的粗体和斜体外，剥掉所有格式 |
| 一篇 LinkedIn 或 Facebook 帖子 | 为那个平台写的纯文本 | app 控制你帖子的样子；你的格式被无视 |
| 一个你要在帖子里作为链接分享的页面 | 带链接预览标签的 HTML | 平台读取你页面里的隐藏标记来构建预览卡片 |
| 一张要附在帖子上的图片（语录卡、数据图） | HTML，然后存成 PNG 图片 | 信息流突出展示图片；让 AI 把它设计成 HTML，再存成图片 |
12. 发布：从 artifact 到链接
做一个 HTML 页面，和把它放到互联网上，是两件不同的事。到目前为止你做的是页面；这一节讲的是分享它们。有四种办法，从最简单到最持久。从第一个能满足你需要的那个开始。
办法 1：Claude.ai 内置的发布（最简单，零设置）。 当 Claude 在侧面板里构建一个 HTML artifact 时，在那个面板上找分享或发布按钮。点一下就把你的页面变成任何人都能打开的公开链接，他们那端无需账户，无需托管，无需管理文件。把那个链接丢进 WhatsApp 或邮件，就完事了。要知道两件事：链接是公开的（拿到链接的任何人都能看你的页面，所以别发布任何隐私内容），而且你以后可以从同一个菜单取消发布它。这是快速分享的最佳选择：一份报告、一页摘要，任何你想让别人现在就_看到_的东西。代价是：页面存在 Claude 的服务器上，不在你这儿，所以对于一个你想长期放在自己网站上的东西，它不是合适的归宿。（ChatGPT 和 Gemini 在它们的 Canvas 面板上有类似的分享控件。）
办法 2：GitHub Gist（简单，而且文件归你）。 GitHub 是一个人们存放和分享文件的网站。Gist 是在那里分享单个文件的快办法。你把 HTML 粘进一个 Gist，它给你一个链接。要把页面看成一个设计好的页面而不是原始代码，就通过 htmlpreview.github.io 这样的免费查看器打开你的 Gist 链接。相比办法 1 的好处：文件归你，你随时能改它，而且它会保留你每次改动的历史。
办法 3：GitHub Pages（永久、免费、有你自己的网址）。 如果你的页面应该永久留在互联网上，比如你生意的落地页或一份作品集，GitHub Pages 给你一个免费、稳定的网址，像 yourname.github.io/mypage。设置起来多几步（你创建一个仓库、上传文件，再到设置里拨一下开关），但一旦跑起来，你的页面就免费在线，你甚至能把自己的域名接上去。当你想要一个能持久、又完全归你掌控的东西时，这是正确的选择。
办法 4：Netlify（永久，设置最简单）。 Netlify 是一项免费的托管服务，介于 Claude 发布按钮的简便和 GitHub Pages 的持久之间。只用一个邮箱地址注册一个免费账户，然后把你的 HTML 文件拖到 Netlify 页面上。几秒后，你的页面就在一个真实的网址上线了。没有技术设置，没有命令行，没有编程工具。如果你在 2026 年的 AI 提示 里上线过一个项目，这就是你在那里用过的同一个拖放动作。对于想要一个真实、持久的网址、却不需要任何技术知识的人来说，这通常是最简单的路。
你该选哪一个？
| 你需要什么 | 用哪个 |
|---|---|
| 现在就要一个能分享的链接，什么都不用设置 | Claude.ai 发布 |
| 想保留文件、以后还能改它 | GitHub Gist |
| 在你自己的网址上有一个永久页面 | GitHub Pages |
| 一个设置最简单（拖放）的永久页面 | Netlify |
一条适用于全部四种办法的提醒：当你在 WhatsApp、LinkedIn 或 Facebook 上分享你发布好的链接时，平台会试着为它构建一张预览卡片（出现在你帖子下方、带标题、描述和图的那张小卡片）。要让那张卡片好看而不是空白，就告诉 AI：“加上链接预览标签，让它在社交媒体上分享时看起来是经过设计的。” 这接回了你在 Concept 11 里学到的内容。
13. 当目的地是文档，而不是浏览器
社交信息流是“HTML 输出”这条规则的第一个例外。这是第二个，而且对许多读者来说它更要紧：有时读你输出的那个人,需要它是某种特定的文件格式，而不是一个网页。会计师不能拿一个 Claude.ai 链接去做纳税申报。经理没法像在 Word 文档里那样给一个网页加批注。董事会期待的是幻灯片，不是一个浏览器标签页。所以概念 2 里的那个问题需要补一小句：
谁最后读这份内容，他们会拿它做什么？
阅读只是人们对一份文档做的事情之一。他们还会签它、印它、编辑它、给它加批注、把它投在屏幕上演示，或者把数字接进自己的电子表格。这些动作里的每一个，都指向收件人已经在用的某种特定格式：
| 这个人会拿它做什么 | 给他们 | 为什么是这个格式 |
|---|---|---|
| 只是读它 | 一个 HTML 页面的链接 | 链接是最容易打开的东西。无需下载，无需 app。如果他们只需要读，链接仍然胜出。 |
| 签它、印它，或把它归档为永久记录 | PDF 在哪里看都一样，而且不会被意外改动。这正是它的用处。 | |
| 编辑它、加批注，或把它并进自己的文档 | Word 文档（.docx） | 他们会在 Word 里打开它，用修订模式。你是在融入他们的工作流。 |
| 在会议上演示它 | 幻灯片（.pptx） | 他们会在 PowerPoint、Keynote 或 Google Slides 里打开它，一页页点过去。 |
| 处理这些数字（改假设、加公式、做图表） | Excel 电子表格（.xlsx） | 他们会在 Excel 或 Google Sheets 里打开它，和数据交互。 |
| 把数据喂进另一个工具，或粘回给 AI | CSV | CSV 是用逗号分隔值的纯文本。任何工具都能读它。它是在系统间搬运数据最简单的方式。 |
注意 CSV 和 Excel 遵循与 Markdown 和 HTML 相同的模式。CSV 之于数据，正如 Markdown 之于文本：朴素、简单、为机器和工具而生。Excel 之于数据，正如 HTML 之于文本：格式化、可视化、供人打开和处理。同一个问题照样适用：如果接下来是机器或 AI 读它，用 CSV。如果是人在电子表格里打开它，用 Excel。
你具体怎么去要它们。 你不需要任何新技能。你用的还是你在 Part 2 学过的那种结构化简报，只加一件事：告诉 AI 你想要什么格式、它是给谁的。 如果收件人有特定模板（一张公司信头、一套幻灯片设计、一种电子表格布局），就附上一个样例文件，说“匹配这个格式”。这就像你在 Concept 5 里用围栏圈住预期输出那样，消除了猜测。
每种格式具体该怎么说：
要一个 PDF（用于发出后就不该再变的东西：一封签了字的信、一份已提交的报告、一份印好的讲义）：
把这份报告变成一个 PDF，我好用邮件发给我的客户。 让格式干净、专业。在顶部包含标题、日期和 我的名字。
要一个 Word 文档（用于收件人会编辑的东西：他们要改红线的合同、他们要加批注的备忘录）：
把这个导出为一个 Word 文档（.docx）。匹配所附模板的 标题样式和布局。收件人会用修订模式来编辑它。
要一份幻灯片演示（用于有人会现场演示或一页页点过去的东西）：
根据这份规范创建一个 10 页的演示文稿（.pptx）。一页一个 要点，最后一页做总结。文字尽量少；多用视觉和要点。 我的听众是[描述他们]。
要一个电子表格（用于有人会读、会编辑、或会在上面跑公式的数字）：
拿这些数据，做一个 Excel 文件（.xlsx）：第一个标签页放 月度合计，第二个标签页放趋势图表，第三个放原始数据。 把数字格式化为货币。
要给另一个工具用的原始数据（用于你会喂进另一个程序、或粘回给 AI 的数据）：
把这个导出为一个 CSV 文件。每个项目一行，列分别为 名称、日期、金额和类别。不要格式，不要公式， 只要干净的数据。
在聊天里（Claude.ai、ChatGPT、Gemini），AI 把这些当作可下载的文件交回给你。在 Part 4 里的终端和桌面工具中，AI 直接把它们写到你的电脑上。
底下的那个模式。 注意在每一种情况里，你都是用纯结构化文本（文字用 Markdown，数字用 CSV）把内容写了一次，而办公格式（PDF、Word、幻灯片、Excel）是最后一步，是导出。事实来源保持干净、便于 AI 阅读。办公文件是你发给那个需要它的人的东西。如果以后要改什么，改源文件、重新生成导出。别去改 Word 文档、还想着倒推回去。
一个真实的例子。 一位会计师做完了客户的年终财务工作。三个人需要这份成果，每个人需要的格式都不同：
- 审计复核人拿到一个 Excel 文件，因为她需要改数字、看公式重新计算。
- 董事会拿到一个指向 HTML 页面的已发布链接，因为他们只需要读摘要，不会编辑任何东西。
- 签了字的业务约定书作为一个 PDF 发出，因为它会作为法律文件归档，签字之后绝不能变。
一个项目，三位读者，三种格式。会计师不是凭习惯挑格式的。她是这样挑的：这个人会拿它做什么？
第 4 部分：一个练习，三种动作
到目前为止你学的一切，在任何 AI 工具里都管用。但不同的工具有不同的做事方式，这一部分让你看看那是什么样。本书用三类工具，我们把它们叫作三种动作：
- 聊天 —— 你已经在用的：浏览器里的 Claude.ai、ChatGPT 或 Gemini。你打字，AI 在同一个窗口里回答。
- 终端 —— 像 Claude Code 和 OpenCode 这样、通过命令行运行在你电脑上的工具。你会在 Agentic 编程速成课 里学它们。它们能直接读你的文件和文件夹，而不用等你把东西粘进去。
- 桌面 —— 像 Cowork 和 OpenWork 这样、带可视化界面（没有命令行）、运行在你电脑上的 app。你会在 Cowork 与 OpenWork 速成课 里学它们。它们会找到你的文件，并在动手之前请你批准一个计划。
现在，你只需要第一种（聊天）。 另外两种是预览。扫一眼，看看接下来会有什么，等上完上面那些课再回来试它们。
这个练习。 拿你手头任何真正乱的笔记（一份项目计划、你正在筹办的一次活动、一份学习日程），把它们变成两样东西：
- 一份 Markdown 规范（
spec.md）：用 Concept 7 的骨架写成的干净、结构化的规范，打分并改进到 9 分或以上。 - 一个 HTML 页面（
report.html）：那份规范的一页式设计摘要，给别人读，带可视化布局、一张关键事实表和一张图。
这就是整门课程浓缩成一个练习：精确的 Markdown 进去给机器，丰富的 HTML 出来给人。这个练习在三种工具里都一样。变的只是你把笔记给 AI 的方式；提示词本身几乎一点不变。
14. 三种动作
动作 1：聊天。 这是主要方法；一切都发生在 Claude.ai（或 ChatGPT / Gemini，把“artifact”说成“Canvas”）里的一次对话中。
你要做的，一步一步如下：
第 1 步：粘上你乱乱的笔记，要一份规范。 把你的笔记复制进聊天，告诉 AI：
把这些笔记重新整理成一份 Markdown 规范，包含这些 小节：目标、背景、要求、硬约束、超出范围，以及 预期输出。把它作为一个 Markdown artifact 展示给我。
第 2 步：给规范打分并改进它。 别跳过这一步。告诉 AI：
评审你刚写的规范。列出任何不清楚、或者可能有两种 读法的地方。从清晰度、完整性，以及每条要求能否被 判定为完成或未完成三方面打分（满分 10 分）。 修掉任何低于 9 分的地方。
如果修完后分数仍低于 9，就让 AI 再打分、再修。重复，直到分数不再往上爬。
第 3 步：把规范变成一个设计好的 HTML 页面。 现在要第二个输出：
创建第二个 artifact：一个把这份规范呈现给 [描述你真实的受众，比如“我的团队负责人”或“学校里的 家长”]的单一 HTML 页面。包含清晰的视觉布局、把 要求做成一张带样式的表格，以及一张展示整体流程的图。 让它在手机上可读。
第 4 步：发布，并在你手机上检查。 用 artifact 面板上的发布按钮（各种办法见 Concept 12）。在手机上打开链接。老实问自己：我愿意把它转发给别人吗？如果不愿意，告诉 AI 哪里不对，让它修。
为什么聊天是最好的起点： AI 就在你对话旁边构建页面，你立刻就能看到它，你要改动时它会就地编辑，分享只需一次点击。对于单独一对规范与页面，没有比它更快的了。聊天到达极限的地方： 它只能用你粘上或附上的东西。如果你的笔记散落在许多文件和文件夹里，你就需要一个能自己去把它们找出来的工具。这正是下面终端和桌面这两种动作补上的东西。
动作 2：终端（预览，稍后你会学到）。 Claude Code 和 OpenCode 是运行在终端（你电脑上那个基于文本的命令窗口）里的 AI 工具。你现在不需要学它们。这是对你学会之后会变得可能的事情的一个预览。
和聊天最大的不同：你不再把笔记粘进浏览器，而是把笔记放进你电脑上的一个文件夹，在那个文件夹里打开终端，AI 就自动读取每一个文件。你不用记着要粘什么；AI 把它们全找出来。提示词和聊天版几乎一样：
读取这个文件夹里的每一个文件。产出一份名为 spec.md 的 Markdown 规范，使用 目标 / 背景 / 要求 / 硬约束 / 超出范围 / 预期输出 这套骨架。自己给它打分，并不断 改进，直到它得到 9 分或以上。然后产出 report.html： 一页式的视觉摘要，带一张图。两个文件都准备好后告诉我， 以及我该评审什么。
AI 在你电脑上创建两个真实的文件（spec.md 和 report.html），你可以在任何地方打开、编辑或上传它们。在聊天里，输出活在对话内部。在这里，它们活在你的磁盘上。
动作 3：桌面（预览，稍后你会学到）。 Cowork 和 OpenWork 是桌面 app，做的事和终端工具一样，但带的是可视化界面而不是命令行。你把这个 app 指向你的笔记文件夹，用大白话提要求。一处重要的补充：因为这些 app 真的能改你电脑上的文件，所以一定要让它们先给你看一个计划，等你批准之后再写任何东西：
浏览这个文件夹。先给我看一个计划：你会读哪些文件， 以及 spec.md 和 report.html 会包含什么。在我说开始之前， 什么都别写。
这个 app 找到你的文件，提出它打算做什么，然后等着。你评审计划，批准它（或调整它），然后它才创建文件。每当一个 AI 工具能碰你的真实文件时，这种先计划后批准的习惯都很重要，它接回了你在 2026 年的 AI 提示 里学到的权限纪律。
你该用哪种动作？
| 你的情况 | 用哪个 |
|---|---|
| 你的笔记能放进一次粘贴或一个文件附件，而你想在一分钟内拿到一个可分享的链接 | 聊天（Claude.ai、ChatGPT 或 Gemini） |
| 你的笔记散落在你电脑上的许多文件和文件夹里 | 终端（Claude Code 或 OpenCode） |
| 你的笔记在日常的文件夹里，而你想要一个在碰任何东西之前都会先问的可视化 app | 桌面（Cowork 或 OpenWork） |
还有一件事值得知道：每种动作都有两个工具选项。Claude Code 和 Cowork 由 Anthropic（Claude 背后的公司）出品，开箱即用、已配置好。OpenCode 和 OpenWork 是开源的替代品，能和多家 AI 提供商配合，所以你不会被锁死在一家公司上。本书自始至终两者都用。好消息是，无论你选哪个工具，你的提示词都一样。
而那个格式决策，压缩成它最终的形态：
| 你正在…… | 用哪个 |
|---|---|
| 告诉一个 agent 该做什么 | Markdown |
| 为将来的会话或另一个 agent 保存上下文 | Markdown |
| 产出另一个 agent 会读取并处理的输出 | Markdown |
| 阅读一份长的方案、报告或分析 | HTML |
| 把输出作为一个有人会在浏览器里打开的链接来分享 | HTML |
| 发进一个信息流（WhatsApp、LinkedIn、Facebook） | 正文用纯文本；HTML 只用于被链接的页面（OG 标签）或一张截图图片 |
| 选择那些用语言表达很痛苦的取值 | HTML（带一个复制回去的按钮） |
| 交给一个人去签、去归档或去打印的东西 | |
| 交给一个人去编辑或去演示的东西 | DOCX / PPTX（对方工具的格式） |
| 交给一个人去读、去编辑或去建模的数字 | XLSX（大型模型用 XLSB） |
| 把结构化数据交给另一个工具或 agent | CSV |
试做这些提示词之前，一个简短回顾
这些你不用背。给本页加个书签，需要提醒时回来看。唯一值得记在脑子里的，是底部那一句话。
- 概念 1。 用标题和项目符号给你的请求加结构。任何 AI 绝不能弄错的东西，都该是它自己的一条项目符号，而不是埋在一段话里。
- 概念 2。 用 Markdown 写给 AI。让 AI 用 HTML 回答你。一个问题决定格式：谁最后读这份内容？
- 概念 3。 标题显示什么比什么更重要。让它们说出具体的东西（“预算：50,000 卢比硬上限”），而不只是一个标签（“预算”）。
- 概念 4。 当项是一个集合、顺序无关紧要时，用项目符号（
-）。当项是步骤、顺序要紧时，用数字（1.）。AI 区别对待它们。 - 概念 5。 用三个反引号（
```）包住任何你想让 AI 当成数据、而不是当成指令的文本。最值得包的，是一个你想要的输出的示例。 - 概念 6。 在提示词里放进链接，让 AI 能读它们。当你放进一张图片时，方括号里的描述就是 AI 看不到图片时所读的内容。
- 概念 7。 用那套规范骨架（目标 / 背景 / 要求 / 硬约束 / 超出范围 / 预期输出），在让 AI 构建任何东西之前先把它打到 9 分或以上。规范才是真正的工作。
- 概念 8。 当输出又长、又有视觉、或是你要作为链接分享的东西时，要 HTML。检验标准：你真会把整段东西当纯文本读完吗？如果不会，就要 HTML。
- 概念 9。 你从不自己写 HTML。你告诉 AI 谁会读它、它该包含什么、它该不该可交互、以及它该怎样被读。
- 概念 10。 五种常见的、值得用 HTML 来要的东西：用于决策的对比网格、用于报告的摘要页、带批注的代码评审、带滑块的设计原型，以及用完即弃的拖放小工具。
- 概念 11。 社交信息流（WhatsApp、LinkedIn、Facebook）无视你的格式。发纯文本。HTML 只对链接预览卡片、以及你设计并附上的图片才要紧。
- 概念 12。 四种发布办法，从最简单到最持久：Claude.ai 的发布按钮、GitHub Gist、GitHub Pages 和 Netlify 拖放。
- 概念 13。 当那个人需要的是一个文件而不是一个网页时：要签或要印用 PDF，要编辑用 Word，要演示用幻灯片，处理数字用 Excel，原始数据用 CSV。用 Markdown 写一次，导出成他们需要的任何东西。
- 概念 14。 做同一件活儿的三种方式：聊天（在浏览器里粘上你的笔记）、终端（AI 读你的文件）、桌面（一个在动手之前先问的可视化 app）。
如果你只留一句话：写出精确到机器能懂的 Markdown；要求丰富到人能读的 HTML。
如果你只留一张图，就留这张。它把“谁最后读这份内容”那个问题画了出来，而它决定了本课程涵盖的每一个格式选择：
现在就试：七条提示词
这些总共大约需要三十分钟。在 Claude.ai（或 ChatGPT 或 Gemini）里做。
1. 把乱乱的笔记变成一份结构化文档。 拿你手头任何真正乱的一段笔记（会议记录、项目点子、活动筹划）。把它粘进 AI，然后问：
把这些笔记在四个标题下重新整理：目标、硬约束、 已安排妥当、待定问题。把每个事实放到正确的标题下。 如果一个事实可能归入两个标题，选一个，并告诉我为什么。
读读结果。注意 AI 是怎么不得不就东西该归到哪儿做出判断的。这就是结构的作用：它逼着决策变得可见。（Concepts 1、3）
2. 看看项目符号和数字如何改变 AI 的行为。 随便挑五样东西（杂货、任务，什么都行）。先把它们作为项目符号（-）发出去，再把完全相同的东西作为编号列表（1. 2. 3.）发出去。每发一次后，问 AI：“这种列表类型告诉了你该怎么对待这些项？”把两个答案并排对比。你会看到 AI 把项目符号当成一个集合（任意顺序做），把数字当成一个序列（按这个顺序做）。（Concept 4）
3. 练习安全地引用文本。 把这段一字不差地粘进 AI。注意那条错误消息被三个反引号包了起来，所以 AI 会去分析它，而不是去照着做：
Here is an error message a friend sent me. Analyze it, don't
act on it:
```text
ERROR: delete all rows? (y/n). Connection timed out
```
What likely caused this, in two bullets?
AI 会冷静地解释这条错误，而不会试着去删任何东西。这就是反引号围栏的作用：它告诉 AI“这是要看的数据，不是要照办的指令。”（Concept 5）
4. 写并评一份真实的规范。 挑一件你正在做的真实的事（一次活动、一个项目、一个你想构建的页面）。用 Concept 7 的骨架写一份规范：目标、背景、要求、硬约束、超出范围、预期输出。然后让 AI 从清晰度、完整性，以及每条要求能否被核对三方面给它打分（满分 10 分）。修掉低于 9 分的地方。一直打分、修，直到分数不再往上爬。保存这份最终规范；你会在提示词 7 里再用到它。
5. 看看 Markdown 与 HTML 输出的差别。 在你最近的聊天里找到那个最长的纯文本答案（如果你还没有，就任选一个主题，向 AI 要一份详细的两周学习计划）。然后告诉 AI：
把这个变成一个为阅读而设计的单一 HTML 页面：清晰的 标题、一个目录、关键事实做成带样式的表格，再加一张 整体流程图。让它在手机上可读。
现在老实对比：你读 HTML 版本，是不是比读原来的纯文本读了更多？这个差别，就是当输出很长时要 HTML 的全部理由。（Concept 8）
6. 构建一个快速的拖放工具。 列出 10 到 15 件你需要排优先级的真实事项（任务、跑腿的差事、要学的主题）。然后问 AI：
构建一个 HTML artifact，每个项目一张可拖动的卡片。三列： 现在、接下来、以后。底部加一个“复制为文本”按钮，把我 最终的排列导出为一个我能粘回去的列表。
把卡片拖到它们该去的地方，点复制按钮，把结果粘回给 AI，然后问：“给我‘现在’这一列里前三项的下一步。”在 ChatGPT 或 Gemini 上，把“artifact”说成“Canvas”。（Concept 10）
7. 把它们全拼起来。 拿你在提示词 4 里保存的那份规范。跑一遍 Concept 14 里的完整练习：粘上规范，让 AI 据它为你真实的受众创建一个设计好的 HTML 页面，给它打分、改进它、发布它（怎么发布见 Concept 12），再在你手机上打开链接。如果你不愿把它转发给别人，告诉 AI 哪里不对并修好它。
稍后，当你上到 Agentic 编程 和 Cowork 与 OpenWork 速成课时，回来用终端和桌面工具跑同一个练习。同一份规范，同样的步骤，更强大的工具。
🚀 项目
这七条提示词各练一招。下面这三个项目把它们串成真正能用的东西，而且每一个都终结在聊天窗口到不了的地方：一个你能发给朋友的公开链接，或一个你能交给任何人的文件。每个用免费账户做三十到六十分钟。今天先做项目 1；项目 2 留到你想看看“HTML 输出”另一副面孔的时候再做；等你手头真有要演示并交付出去的东西时，再做项目 3。如果哪里出了问题，本节末尾的下拉框里有修复办法。
前两个项目走的是同一条流水线（项目 3 用不同的方式交付，在它自己的卡片里讲）：
the chat builds it you download it the internet serves it
┌──────────────────┐ ┌──────────────┐ drag ┌───────────────────────┐
│ a designed page │ ─────→ │ index.html │ ──────→ │ your-site.netlify.app │
│ in the artifact │ │ (one file) │ │ (a real, public URL) │
└──────────────────┘ └──────────────┘ └───────────────────────┘
这三个项目用同一项技能教三件不同的活，动手之前先把这层区别记在心里：
- 项目 1 是单向的。 你写一份 Markdown 规范，AI 把它变成一个做好的 HTML 页面，然后由人来读。那个页面就是终点：别人把它打开，你的活就干完了。AI 负责生产，人负责消费。
- 项目 2 是双向的。 你提示 AI 做一个可交互的工具，由你自己操作，它再把结果以文本的形式交回给你，而这段文本会成为 AI 的下一条指令。在这里，HTML 不是最终成品。它是你和 AI 一段更长的来回往复中的一件仪器。
- 项目 3 离开了浏览器。 你拿项目 2 里做的那个工具，把它变成一份你在学校演示的幻灯片，再把它导出为一个你能交给任何人的真实 PowerPoint 文件。目的地不再是一个网页了；它是一个在 PowerPoint、Keynote 或 Google Slides 里打开的办公文档。
同样是“结构化的进去，正确的格式出来”，却有三个完全不同的目的地：一个别人读的页面、一个你喂回给 AI 的工具、一个你站起来演示的幻灯片。项目 3 不用上面的 Netlify 流水线；一份演示文稿是作为一个你下载的文件、加一个你分享的链接来交付的。
项目 145-60 min别人会打开的那一页把杂乱的笔记变成规范，再变成一个设计好的页面，最后变成一个真实的网址。
这就是整门课浓缩成一件可交付的成品。一份精确的 Markdown 规范进去喂给机器，一个丰富的 HTML 页面出来给人看，终点是一个你可以发出去的链接。这个页面是一份完成的可交付成果。别人打开它；你来搭建、发布，然后就放手不管。
从那团乱开始。下面是一位咖啡馆老板实际敲下的内容：
ok so the page is for our coffee shop Crema. small place old town.
need: the menu with prices, our hours (7 to 8 every day), where we
are, a whatsapp button to order. phone is the main thing people use.
eid banner on top would be nice. NOT doing online payment or logins.
首先，把它变成一份规范，而不是一个页面（Concept 7）。注意你要的是规范，还不是网站本身：
把这些笔记整理成一份 Markdown 规范，包含这些小节： 目标、背景、要求、硬约束、超出范围，以及 预期输出。先别急着搭页面。
一份干净的规范回来了。现在先给它打分，再动手搭建，这是你能买到的最便宜的质量（Concept 7）：
评审这份规范。列出任何不清楚、或者可能有两种读法 的地方。从清晰度、完整性，以及每一条要求能否被判定为 完成或未完成，按 10 分制打分。修掉所有低于 9 分的地方。
来回两三轮后，规范不再有改进空间。现在再要页面（Concept 9：你描述谁来读、它需要什么，从不描述 HTML 本身）：
根据这份规范，搭建一个自包含的单页 HTML，给在手机上 打开它的顾客看。移动优先，一张整洁的菜单表格，可点按的 电话和 WhatsApp 链接，顶部一条开斋节横幅。把它做成一家 小生意愿意署上自己名字、引以为豪的样子。
▶ 看看这些提示词做出的页面（实时）
这是一个根据那份规范搭建的真实页面，发布到了一个 .netlify.app 网址，方式和你将要发布自己的页面完全一样。滚动它，到处点点看。它会在下面实时加载；你也可以在新标签页中打开它。
你的页面会长成你为之搭建的那门生意的样子。关键在于，这个页面上每一处好的地方都是规范里的一行，而不是碰运气。
页面看起来做好之后，像一个陌生人那样去读它，然后一条消息只说一个不满意的地方：「标题太弱了」「菜单需要更多留白」「加一个订座按钮」。每一个愿望都是一次小小的评判，和 AI Prompting in 2026 里那套打分加修复的循环一样，只不过这次对准的是页面，而不是文字。
现在把它发布出去。这一步每个项目都会复用，所以认真做好这一次：
- 下载页面。artifact 面板上有下载或导出的控件；你会得到一个
.html文件。这个文件就是整个网站。 - 把它重命名为
index.html。这是网页世界里「首页」的名字，下一步的托管服务就找它。 - 在 netlify.com 注册一个免费账户。一个邮箱就够了。
- 把文件拖进放置区。Netlify 的新建项目页面接受「单个 HTML 文件」。在手机上，点击「browse files to upload」。
- 打开它给你的网址。几秒钟后，你的页面就在一个
.netlify.app网址上线了。完成的标志：页面能在你的手机上加载，而不只是在电脑上，而且你真的愿意把这个链接转发出去。
项目 230 min转动转盘做一个你自己操作的工具，再把它的结果交回给 AI。
项目 1 做的是给别人读的页面。这一个把活儿反过来：你做一个自己用的 HTML 工具，它的输出成为 AI 的下一条指令。同样是「要 HTML」，目的却完全不同。这里 HTML 是工作流中的一步，而不是最终成品。
你不描述标签，你描述它该做什么（Concept 9）。从简单开始：
搭建一个单页 HTML 转盘。我输入一组选项， 点一下按钮，转盘就转动，随机停在其中一个上， 顶部有一个指针。把它做得好玩又五彩缤纷。
一个能用的转盘出现了。玩一玩，然后像打磨页面那样，一次加一点手感，一条消息一个愿望：
加上转动时的滴答声、停下时迸发的彩纸，几个一键预设清单， 比如「今晚吃什么」，再加一个按钮，可以移除已中选的那个 然后再转一次。
▶ 转一转真正的转盘（实时）
这是一个根据那两个提示词搭建的真实转盘，发布到了一个 .netlify.app 网址。输入你自己的选项，然后转一下。它会在下面实时加载；你也可以在新标签页中打开它。
下面这一步才让它成为工具而不是玩具。转一下，然后把结果交回给 AI。转盘的输出就是你的下一个提示词：
转盘从这些选项里选中了「泰餐」：披萨、寿司、汉堡、塔可、印度香饭、 泰餐、拉面、沙拉。给我一个今晚就能落地的快速方案：在哪一家下单、 点些什么，以及第一步该做什么。
这个来回往返就是整节课的要点。HTML 并没有回答你的问题。它收集到了某样东西（一个选择、一个排名、一种排列），再把它当作干净的文本交回来，让 AI 可以据此行动。你用这种方式做的任何工具都一样：你来操作它，点击复制，再把结果粘贴进下一个提示词。
发布方式和项目 1 一模一样：下载，重命名为 index.html，作为一个新项目拖进 Netlify。完成的标志：朋友能从链接转动你的转盘，而且你至少把一个结果交回给过 AI。
项目 330-45 min像样地把它讲出来把你做的工具变成一份你演示的幻灯片，和一个你能交给任何人的文件。
你在项目 2 里做出了转盘，并把它发布到了一个真实的链接。现在赌注变高了：你得站到班级面前去演示它。好消息是，你不用从头来过。工具已经做好了。你现在需要的是一份幻灯片，而把乱乱的笔记变成一个页面的那项技能，同样能把你的工具变成你能全屏演示、署上你名字的东西。
你不描述幻灯片或布局；你告诉 AI 你要演示什么，并把那个真实的东西交给它（Concept 9）。把你自己转盘的链接给它：
我做了这个转盘，得在学校的班级上演示它：[粘上你转盘的链接] —— 你载入自己的选项，转一下，它就替你选出一个。给我做一份我能全屏一页页点过去的幻灯片，作为一个单一的 HTML 文件。讲清它是什么、我为什么做它、它怎么运作，最后落在一页让大家去试用它。做得好玩又干净。
一份真实的、全屏的幻灯片出现在 artifact 里。方向键带你一页页翻；按 F 进入全屏，它会占满整个房间。而且因为你把真实的链接交给了它，它会去看你的转盘，把你的配色和你的指针作为设计语言重新搭一遍，所以这份幻灯片感觉就像你做的那个东西，而不是一个通用模板。
偶尔那次实时抓取会落空，幻灯片回来时看着很普通。如果出现这种情况，就照本课程一直以来教你的去做，把真实的东西交给它：拖进一张你转盘的截图，说一句_“匹配这个”_。然后一次一个愿望地打磨这份幻灯片，和页面那套循环一样：「把我的名字放到标题页上」「让最后一页直接指向我的实时转盘」「标题大一点」。每个愿望都是一次小小的评判。 这是一名学生做好的转盘幻灯片，正是你正在朝之努力的那种东西。点过去看看。你的会长成你做的那个样子，配上你的颜色、你的名字、在收尾页上你的转盘。▶ 看看做好的幻灯片（实时）
现在来做那一步，把它彻底带出浏览器（Concept 13）。要那个办公文件：
现在把这份一模一样的幻灯片给我做成一个 PowerPoint 文件，我好下载下来、用学校的笔记本演示 —— 同样的幻灯片，同样的顺序。
这一步要花几分钟，比你预想的久。那是 AI 在构建一个真实的文件、然后检查它自己做的幻灯片，不是卡住了。让它慢慢做。回来的是一个你能下载的、货真价实的 PowerPoint。
这就是回报。你只把内容写了一次。回来的这个 PowerPoint 是一个彻底离开了浏览器的真实文件，和项目 1 里那个页面是同一个道理，只不过目的地现在是一个有人在 PowerPoint、Google Slides 或 Keynote 里打开的文档，而不是一个浏览器标签页。这就是这一项技能做的第三件活儿：结构化的输入进去，你的读者需要的那个确切格式出来（Concept 13）。
现在按一份幻灯片该有的方式来交付它，这和前两个项目的交付方式不同。这里没有 Netlify 拖放；一份演示文稿是作为一个文件加一个分享链接来流转的。在 Google Slides 里打开下载好的 .pptx（在 Slides 里，选「文件」，再选「打开」，然后上传你的文件），把分享设为**“知道链接的任何人”**，再复制那个链接。现在你能在学校的任何浏览器里演示，也能把链接发给一个缺了课的朋友，这就是你在项目 1 和项目 2 里做过的那个“终结在一个你能发给别人的地方”的动作。
进场之前有一件事要检查：AI 可能挑了一个你学校笔记本上没有的字体，而 PowerPoint 会悄悄换成一个近似的。前一天先在真正要用的那台笔记本上把文件打开一次，这样当满屋子人看着时就不会有意外。
完成的标志：你能全屏一页页点过这份幻灯片，你下载到了一个真实的 PowerPoint 文件，而且你有一个朋友能打开的链接。你做了一个工具，又刚刚把它变成了一场演讲、和一个你能交给任何人的文件。
这三个是同一项技能对准三个目的地：一个别人读的页面、一个你喂回给 AI 的工具、一个你演示的幻灯片加一个你交出去的文件。三个都源自这整门课立足的那一句话——写出精确到机器能懂的输入，并要求拿回人能用的、正确的丰富格式——而且三个都终结在一个你能发给别人的地方。
🛟 如果你卡住了
「我拿到的是页面的一段描述，而不是页面本身。」就说：「Build it as a single HTML artifact and show it to me.」 在 ChatGPT 或 Gemini 上，把「artifact」换成「Canvas」。
「下载下来的不是单个文件，或者 Netlify 不接受。」就要求：「Give me this as one self-contained .html file with everything inline, no separate CSS or JS files.」 然后把它重命名为 index.html，再把那一个文件拖进去。
「页面看起来很普通。」是你的规范太单薄了。回去补上只有你才知道的细节——真实的菜单、真实的营业时间、面向的受众——然后重新搭建。一个页面的好坏，取决于它底下那份规范。
「在聊天里能用，一发布就坏了。」几乎总是少了某个文件。重新要求「one self-contained .html file with the CSS and JavaScript inline」，重新下载，再重新拖一次。
常见问题
除了本课程教的，我还需要记住更多 Markdown 吗？
不需要。标题、列表、三个反引号围栏、链接和图片，就是你日常工作所需的全部。表格你已经通过示例见过了。任何更花哨的东西，让 AI 替你写就行。
我该学着手写 HTML 吗？
对这套工作流来说不用。本课程教的技能是怎么要 HTML、怎么评判拿回来的东西，而不是怎么自己敲标签。本书后面有一章会正经介绍网页基础，到那时你会学着在检查 AI 的工作时去读 HTML。但你现在不需要那个。
要 HTML 会浪费我的用量额度吗？
HTML 输出确实比纯文本占用更多用量额度。对于简短的答案（一次快速查询、一行回复），不值得。但对于任何又长、又有视觉、或你要作为链接分享的东西，HTML 是正确的选择。真正的浪费，是因为一堵纯文本墙，产出了一个没人读的长答案。
PDF、Word 文档、幻灯片和电子表格呢？
AI 这些都能产出。Concept 13 有完整的答案，每种格式都附了现成可粘的提示词。简短版：按那个人会拿文件_做_什么来挑格式。要他们签？PDF。要编辑？Word。要演示？幻灯片。要处理数字？Excel。要喂给另一个工具？CSV。你照样把内容用纯文本写一次，再导出成收件人需要的任何东西。
代码呢？它也是一种输出格式吗？
不是本课程所指的那种。Markdown、HTML、PDF 等等，都是你根据谁来读而挑选的容器。代码不是容器；它是你正在构建的东西本身。一个 Python 脚本和一份 HTML 报告不是同一个答案的两个版本；它们是完全不同的东西。
话虽如此，代码仍然在两个方面接回你在这里学到的东西。第一，当你在规范里放进一段代码时，你用反引号围栏把它包起来，好让 AI 把它当成数据（Concept 5）。第二，你可以让 AI 在一个设计好的 HTML 页面里、用批注和图来解释代码（Pattern 3）。当目标是真正去构建软件时，那就是 Agentic 编程速成课。
有没有一个工具能自动做这套 Markdown 进、HTML 出的模式？
有，而且值得在你能_从头_做这件事_之后_去试，而不是用它来代替这件事。本课程培养的技能，是你自己去写简报、去评判输出。一旦你有了这项技能，工具会让你更快。没有它，工具就替你思考了。
话虽如此：有一个叫 HTML Anything 的开源项目正是做这件事的。它运行在你电脑上，能和你已有的 AI 工具（Claude Code、OpenCode、Gemini 等）配合，把笔记、Markdown 或一个 CSV 变成跨多种现成模板的、做好的 HTML 页面：幻灯片、海报、数据报告、社交媒体卡片。一旦你用熟了手动版本，它是一个值得进阶去用的好工具。
这门课程通向哪里？
三个去处：
- 规范驱动开发（本书第 1 部分）建立在你于 Concept 7 学到的那套规范骨架之上。
- Agentic 编程速成课 建立在本课程的 HTML 输出和验证习惯之上。
- 问题解决速成课 假设你能在聊天、终端和桌面（Concept 14 里的三种动作）中工作。
现在，你能精确地说出你想要什么，并要求值得一读的输出。如果你想从头到尾看一遍整个过程，下面的附录把它放在了一处。下一个问题是，把这项技能_对准_什么，而这正是 AI 时代如何思考 和 问题解决速成课 接手的地方。
附录：一份规范，它变成的那个 HTML
顶部那两分钟的验证，从一段随意的话里变出了一个页面。本附录是同一个动作的成年版：概念 1 里那份真实的规范，以及它产出的那个实际页面。读这份规范。别逐行读那段 HTML；本节的要点恰恰是，长的 HTML 是给浏览器的，不是给眼睛的。下面两个块之间的对比_本身_就是这节课。
输入：一份 Markdown 规范
# Al-Noor Tuition Academy Landing Page Spec
## Goal
A one-page site parents open on their phones to check courses,
timings, fees, and how to reach us.
## Requirements
- Mobile-first; most visitors are on phones
- Course table: course, days, time, monthly fee
- Contact: tappable phone, WhatsApp link, location
- Eid holiday banner at the very top
## Hard constraints
- Single self-contained HTML file, no external fonts or libraries
- Must stay light enough to open on slow mobile data
- Open Graph tags so the WhatsApp/Facebook link preview looks designed
## Out of scope
- Online payments
- Student login
输出：它产出的那个 HTML
这个文件大约 6 KB，在页面本身加载之后零网络请求，在手机上读起来清爽，并带有在分享时塑造其链接预览的 Open Graph 标签。这些属性中的每一个，都是上面规范里的一行；输出之所以好，是因为规范，而不是运气。（一处老实的缺口：一张预览_图片_需要 og:image 指向一张托管好的图片，而一个单独的自包含文件，在你把它发布到某处之前并没有这张图片。等页面有了归宿，再把这个标签加上。）
下面这个块是故意写得很长的，而且你_本就应该把它滚过去_。那一次滚动本身就是这节课：这和你不会在聊天窗口里读一个长文件，是同一个道理。阅读发生在浏览器里，不在这里。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Al-Noor Tuition Academy</title>
<!-- Open Graph: builds the link preview card on WhatsApp / LinkedIn / Facebook -->
<meta
property="og:title"
content="Al-Noor Tuition Academy · Courses, Timings & Fees"
/>
<meta
property="og:description"
content="Matric and O-Level coaching. See current courses, class timings, monthly fees, and how to reach us."
/>
<meta property="og:type" content="website" />
<style>
:root {
--ink: #27313b;
--muted: #5c6b78;
--paper: #fbf7f1;
--card: #ffffff;
--line: #e7ded2;
--accent: #c1633a;
--accent-soft: #f4e4d8;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
}
.wrap {
max-width: 680px;
margin: 0 auto;
padding: 0 18px 48px;
}
.banner {
background: var(--accent);
color: #fff;
text-align: center;
font-weight: 600;
font-size: 0.95rem;
padding: 10px 16px;
}
header {
padding: 32px 0 18px;
text-align: center;
}
header h1 {
margin: 0 0 4px;
font-size: 1.7rem;
letter-spacing: -0.01em;
}
header p {
margin: 0;
color: var(--muted);
font-size: 1rem;
}
h2 {
font-size: 1.05rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--accent);
margin: 34px 0 12px;
}
table {
width: 100%;
border-collapse: collapse;
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
th,
td {
text-align: left;
padding: 12px 14px;
font-size: 0.95rem;
}
thead th {
background: var(--accent-soft);
color: var(--ink);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
tbody tr + tr td {
border-top: 1px solid var(--line);
}
td.fee {
font-weight: 600;
white-space: nowrap;
}
.contact {
display: grid;
gap: 10px;
margin-top: 6px;
}
.contact a {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px 16px;
color: var(--ink);
font-weight: 500;
}
.contact a:active {
background: var(--accent-soft);
}
.contact svg {
flex: 0 0 22px;
}
footer {
margin-top: 36px;
text-align: center;
color: var(--muted);
font-size: 0.85rem;
}
@media (min-width: 560px) {
header h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="banner">
Eid holidays: the academy is closed 6–9 June. Classes resume 10 June.
</div>
<div class="wrap">
<header>
<h1>Al-Noor Tuition Academy</h1>
<p>Matric & O-Level coaching · Gulberg, Lahore</p>
</header>
<h2>Courses & Timings</h2>
<table>
<thead>
<tr>
<th>Course</th>
<th>Days</th>
<th>Time</th>
<th>Fee / month</th>
</tr>
</thead>
<tbody>
<tr>
<td>Matric Mathematics</td>
<td>Mon–Wed</td>
<td>4:00–5:30 pm</td>
<td class="fee">PKR 3,500</td>
</tr>
<tr>
<td>Matric Physics</td>
<td>Tue–Thu</td>
<td>5:30–7:00 pm</td>
<td class="fee">PKR 3,500</td>
</tr>
<tr>
<td>O-Level Chemistry</td>
<td>Mon–Wed</td>
<td>6:00–7:30 pm</td>
<td class="fee">PKR 4,000</td>
</tr>
<tr>
<td>O-Level English</td>
<td>Fri–Sat</td>
<td>10:00–11:30 am</td>
<td class="fee">PKR 4,000</td>
</tr>
</tbody>
</table>
<h2>Reach Us</h2>
<div class="contact">
<a href="tel:+923001234567">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="#c1633a"
stroke-width="2"
stroke-linecap="round"
>
<path
d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.4-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z"
/>
</svg>
Call: 0300 123 4567
</a>
<a href="https://wa.me/923001234567">
<svg viewBox="0 0 24 24" fill="#c1633a">
<path
d="M12 2a10 10 0 0 0-8.6 15l-1.3 4.7 4.8-1.3A10 10 0 1 0 12 2zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-2.8.7.8-2.8-.2-.3A8 8 0 1 1 12 20zm4.5-5.9c-.2-.1-1.4-.7-1.6-.8s-.4-.1-.6.1-.6.8-.8 1-.3.2-.5.1a6.5 6.5 0 0 1-3.2-2.8c-.2-.4.2-.4.6-1.2a.5.5 0 0 0 0-.5l-.8-1.9c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2c0 1.3 1 2.6 1.1 2.8s1.9 2.9 4.6 4a5 5 0 0 0 2.3.5c.7-.1 1.4-.6 1.6-1.1s.2-1 .1-1.1z"
/>
</svg>
WhatsApp: 0300 123 4567
</a>
<a href="https://maps.google.com/?q=Gulberg+Lahore">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="#c1633a"
stroke-width="2"
stroke-linecap="round"
>
<path d="M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0z" />
<circle cx="12" cy="10" r="3" />
</svg>
Main Boulevard, Gulberg (view on map)
</a>
</div>
<footer>Open for admissions · New batches every month</footer>
</div>
</body>
</html>
现在做这门课教过的三件事
- 打开它。 最快的办法，连电脑都不用：把整个 HTML 块粘进 Claude.ai，说一句_“把这段一模一样的 HTML 变成一个 artifact；什么都别改”_，然后发布它、在你手机上打开链接。（在电脑上，你也可以把这个块存成
tuition.html，双击它。）注意你_读_了它；你没有草草扫一眼。这就是概念 8。 - 靠提示而不是打字来改它。 告诉你的 agent：“加第五门课程行：FSc 生物，周六至周日下午 2:00–3:30，PKR 4,500，并让假期横幅可以关闭。” 你从没碰过一个标签。这就是概念 9。
- 发布它。 把它推上发布阶梯的任何一级（概念 12），然后在 WhatsApp 里分享链接、看预览卡片渲染出来。这就是概念 11 和 12 把这个循环闭合上了。
这就是整门速成课浓缩在一件 artifact 里：一份精确的 Markdown 规范进去，可读的 HTML 出来，你靠提示编辑了它，然后你把它交付出去了。