logo
文档更新博客下载 Studio
资产库登录

Pencil 官网叙述逻辑拆解

目标：拆出 Pencil 首页如何完成“定义新品类 -> 建立可信度 -> 解释机制 -> 证明价值 -> 收转化”的说服链路，后续可直接映射到 OOMOL 官网优化。

一句话总结​

Pencil 的首页不是在“介绍功能”，而是在用一条非常清晰的叙述路径，让用户快速接受一个新范式：

这不是另一个设计工具 -> 这是把设计放回代码工作流中的新模式 -> 它能和你现有 IDE、Agent、代码库协同 -> 最终能直接缩短从设计到交付的路径

1. 首屏先做两件事：定义新品类 + 提供最低成本行动​

页面表达​

  • Design Mode for Cursor
  • Introducing a new way to design right where you code.
  • Available soon. Be first to get access.
  • 邮箱输入框 / Watch 1 min demo
  • Backed by

叙述作用​

首屏没有先讲一长串特性，而是先完成三件事：

  1. 给新品类命名
  2. 用一句话解释这个新品类的核心变化
  3. 立刻给一个最轻的转化动作

这种写法的关键不在“信息完整”，而在“让用户 3 秒内知道这东西是什么，并且值不值得继续看”。

底层逻辑​

  • 用户先判断“你是什么”
  • 再判断“这和现有方案有什么不同”
  • 最后才会有耐心看你怎么做到

Pencil 把这个顺序处理得非常克制。

2. 第二步马上树立对立面：旧流程的问题是什么​

页面表达​

  • Design right where you code. No more design handoffs.

叙述作用​

这句话很重要，因为它不是继续解释产品，而是先打掉旧流程。

它选的敌人不是“Figma 不好”，而是更高层级的协作摩擦：

  • 设计和开发割裂
  • handoff 成本高
  • 视觉稿和代码实现容易偏移
  • 反馈循环长

为什么有效​

因为新产品很难靠“功能更多”说服用户，但可以靠“把一个人人都烦的问题直接消掉”来建立迁移理由。

Pencil 在这里不是卖功能，而是在卖一种更顺滑的工作方式。

3. 接着不空喊愿景，而是马上解释机制​

页面表达​

  • agent driven MCP canvas
  • open design format that lives in your codebase
  • VSCode / Claude Code / OpenAI Codex / Any IDE of your choice

叙述作用​

这一步非常关键：它把“愿景型产品”变成“可理解的系统”。

如果只说“在代码里设计”，听起来像概念。 但加上这些机制描述后，用户开始理解：

  • 它不是独立封闭工具
  • 它基于 Agent 工作流
  • 它能接入 IDE
  • 它的数据以开放格式存在代码仓库里

核心策略​

Pencil 很擅长把抽象价值翻译成工程语境：

  • 不讲“无缝协作”这种空词
  • 讲 MCP、open format、in your codebase
  • 不讲“兼容生态”
  • 直接列出 IDE 和 coding agent

这会让技术用户快速产生可信感。

4. 中段功能组织不是平铺，而是按“能力层级”递进​

Pencil 的功能表达可以拆成三层：

4.1 底座能力：它首先是一个可用的设计环境​

页面表达​

  • Infinite design canvas
  • Pixel-perfect precision
  • without ever leaving your IDE

叙述作用​

先证明它不是概念演示，不是 Agent 玩具，而是能真正承接设计工作的基础设施。

这层是在回答：

如果我真拿它做设计，它够不够用？

4.2 增益能力：AI 不是点缀，而是并行劳动力​

页面表达​

  • AI Multiplayer
  • extra hands to explore ideas in parallel

叙述作用​

这里把 AI 的价值从“帮我生成一下”升级成：

  • 同时探索多个方向
  • 并行推进设计方案
  • 把设计迭代变快

这是从“助手”叙述切到“产能”叙述。

4.3 操作能力：强调上下文内编辑和可控动作​

页面表达​

  • Prompt entire screens or specific parts directly in context
  • Curated actions
  • write your own

叙述作用​

这一步是在处理用户对 AI 的天然担忧：

  • 会不会太黑盒
  • 会不会不可控
  • 会不会只能全量生成

Pencil 的回答是：

  • 你可以局部改
  • 你可以在上下文里改
  • 你可以用内置动作
  • 你也可以自定义动作

所以它不是“全自动替你设计”，而是“给你一个更高带宽的设计操作界面”。

5. 然后把价值落到结果层：从设计走到代码​

页面表达​

  • From vectors to code. Pixel perfect.
  • Ship production ready apps
  • Design and code live under one roof—in your repo
  • HTML / CSS / React / <code of choice>

叙述作用​

Pencil 不满足于说“设计更快”，而是把最终承诺落在更硬的结果上：

  • 设计与代码一致
  • 更容易进入生产
  • 资产就在 repo 里
  • 输出可以直接服务开发

为什么这一步重要​

因为对于技术用户，工具价值最终不是“体验先进”，而是：

  • 能不能减少返工
  • 能不能提升交付效率
  • 能不能更接近 production-ready

Pencil 把“设计工具”叙事，往“交付工具”方向推了一步，这会显著提高说服力。

6. 再往后专门清除迁移阻力​

这是很多官网容易漏掉的一段，但 Pencil 做得比较完整。

页面表达​

  • Curated design kits ... or bring your own
  • Fully open file format
  • No lock-in
  • Bring over designs from Figma
  • Design as code
  • branch / merge

叙述作用​

当用户开始心动时，脑子里会立刻冒出几个反对意见：

  • 我已有设计系统怎么办
  • 我们团队已经在用 Figma
  • 文件会不会被锁在你这里
  • 团队协作版本怎么处理

Pencil 在这里逐个拆雷：

  • 你可以带自己的 kit
  • 文件格式开放
  • 支持从 Figma 迁移
  • 设计资产可以像代码一样 branch / merge

核心价值​

这段不再是“激发兴趣”，而是“降低采用风险”。

对于新范式产品来说，采用阻力往往比功能缺失更致命，所以这段很关键。

7. 后段给高级用户一个“能力上限”的想象空间​

页面表达​

  • bi-directional MCP vector canvas
  • full write access
  • plug-in the whole world of MCPs
  • databases, APIs
  • Playwright / Puppeteer
  • You are in charge!

叙述作用​

这段不是给所有人看的，而是给核心意见领袖、重度用户、技术决策者看的。

它在传递一个信息：

这不是一个只有几个预设能力的 SaaS 工具，而是一个可以持续扩展的系统。

为什么必要​

因为新工具如果只有“当前能做什么”，会显得短命。 但如果能让人看到“这个系统未来还可以连接什么”，就会显得像平台，而不是 feature。

这会明显提高产品的长期想象力。

8. 收尾不是总结功能，而是回到身份认同和转化​

页面表达​

  • We are all just makers
  • 再次出现 Available soon 和邮箱 CTA

叙述作用​

到页面结尾，Pencil 没有继续往里塞功能点，而是做两件事：

  1. 用一句轻价值观的话收口
  2. 重复 CTA，承接已经被说服的用户

这说明它的页面目标非常明确：

  • 不是让你看完所有功能
  • 而是让你形成认知，并愿意留下联系方式或继续关注

Pencil 的完整说服链路​

如果压缩成一条链路，大致是：

  1. 这是一个新品类
  2. 它解决的是 handoff 问题，不只是设计效率问题
  3. 它有具体机制，不是空概念
  4. 它既能做基础设计，又能用 AI 提速
  5. 它最终把设计更直接地带到代码和交付
  6. 它不会锁死你，能接住现有资产
  7. 它还有更大的系统扩展空间
  8. 如果你认可这个方向，现在就留下联系方式

Pencil 叙述逻辑的核心特征​

1. 先讲范式，不先讲功能​

它卖的不是“某个功能更强”，而是“工作方式发生变化”。

2. 先卖结果，再补机制​

先让你想要，再让你相信。

3. 工程词汇非常克制但精准​

没有太多营销黑话，技术词一旦出现，都是为了建立可信度。

4. 功能组织有明确层级​

不是功能列表，而是能力递进：

  • 基础可用
  • AI 增益
  • 结果闭环
  • 迁移无忧
  • 上限够高

5. 转化目标始终没丢​

每一段都在为最终 CTA 服务，而不是单纯展示信息。

可直接复用的“Pencil 式官网叙述骨架”​

如果要把这种逻辑迁移到别的官网，可以抽象成下面这个模板：

1. 定义新品类​

  • 我们是什么
  • 和旧类别有什么本质不同

2. 打掉旧流程​

  • 用户当前最烦的摩擦点是什么
  • 为什么旧方式天然低效

3. 用机制建立可信度​

  • 它通过什么架构工作
  • 为什么能嵌入现有工作流
  • 为什么不会成为孤岛

4. 用层级化能力介绍产品​

  • 基础能力
  • 提效能力
  • 可控能力

5. 把价值落到业务结果​

  • 更快交付
  • 更少返工
  • 更接近生产可用

6. 清除采用阻力​

  • 迁移
  • 兼容
  • 开放格式
  • 协作方式

7. 展示上限​

  • 可扩展性
  • 平台能力
  • 面向高级用户的想象空间

8. 收口并重复 CTA​

  • 简短价值观
  • 再次转化

对 OOMOL 官网优化的直接启发​

如果后面要参考 Pencil 的做法来优化 OOMOL 官网，最值得借鉴的不是视觉，而是这几个叙述原则：

  • 不要一上来铺功能，要先定义 OOMOL 属于什么新工作方式
  • 不要只说“能做什么”，要先说“替代掉了什么旧摩擦”
  • 不要停留在抽象愿景，要用机制解释为什么这件事成立
  • 不要把模块堆成清单，要按用户认知顺序排布
  • 不要只展示能力，要把结果落到真实交付和协作方式上
  • 不要忘记处理用户的采用顾虑

后续如果继续做下一步，可以基于这份文档，直接对 OOMOL 当前首页逐段做映射分析：

  • 现有每一屏在说什么
  • 缺了 Pencil 链路里的哪一环
  • 哪些段落该删、该并、该前移
  • 最终重组出一个新的首页叙述结构