DEPLOYMENT & DEBUGGING IN PRACTICE

从 Demo → 到 正式产品

部署与调试实战

deploy --env=prod

build

migrate

healthcheck

# shipped, not a demo.

开场：自我介绍 + 这场讲什么。高亮带落在「Demo / 正式产品」对比上。停 2 秒再翻。

大多数 idea 死于「没人真的要」，
而不是没做出来。

先验证需求，再写一行代码。

核心论点。一句话、大字号、一个高亮短语。标题陈述结论。

三个工具，按这个顺序看最容易看懂区别

01SKILL · 接入工作流

Skills

能直接接入 Claude Code 工作流的一段；规则、流程、审查的化身。

规则流程审查

02PENCIL · 方向探索

Pencil

页面方向探索与设计辅助，帮你跳出当前 demo 的惯性。

方向探索

03CLAUDE DESIGN · 视觉

Claude Design

把生成与表达拉到上限，直观对比不同设计方向带来的差异。

生成上限

编号卡 = 01 + 衬线标题 + mono 标签。差异化填充、统一描边，不是模板网格。

42%

创业失败归因于「没有市场需求」，远高于任何技术原因。

来源：CB Insights, Top Reasons Startups Fail（示例，需替换为真实出处）

Data Hero：一个真实大数字当视觉主角，配出处。无真实数据就别用这版式。

Pencil 帮你跳出惯性，
Claude Design 帮你看到上限。

把产品截图放进统一的浏览器框里，加柔和卡片与阴影，比裸贴截图专业一个量级。

images/01-shot.png · 1600px 宽

截图是第一公民：统一框、统一阴影。没图用 .frame__placeholder（不造假 UI）。

渠道意愿（示例 · 需替换为真实数据）

哪个钩子转化最高

立即购买

78%

免费试用

54%

加入候补

31%

纯 CSS 条形图，--v 是真实百分比。强调=accent，副系列=accent-2。绝不编数字。

先验证 vs 先开发

先开发

花 3 个月做完美产品

上线发现没人要 · 沉没成本高 · 难回头

先验证 ✓

花 7 天测真实意愿

便宜 · 可快速转向 · 数据驱动决策

视觉分层不是热闹：右侧用 card--accent 做唯一落点，引导结论。

“Make something people want.”

— Paul Graham, Y Combinator

金句页：大字、留白、一个署名。

PART 02

现在，开始验证

分节页：整页强调色，作为节奏呼吸点。chrome 的分段标签会跟着切到「收束」。

现在就
做出你的 第一版。

your-cli ship --prod

# 一行命令，把想法发出去

收尾：一个具体的行动召唤，不写「Get Started」。