✦ AI PRODUCT DESIGNER, ON YOUR TEAM

从产品想法，
到可以体验的界面。

Pencil 理解用户目标、页面流程和设计系统，帮你创建结构化、可编辑、可交接的 UI 设计成果。

查看 npm 包 ↗⌁ 查看 GitHub
PFinora Mobile⌄
Saved
AJ
▶
Dashboard · 390 × 844
9:41● ◒ ▰
Good morning,

Alex Morgan

AM
Total balance

$24,680.40

+8.2% this month
Quick actionsSee all
↗Send
＋Add
⌁Pay
•••More
Recent activityView all
N
Nova MarketToday, 10:42
− $84.20
S
SalaryYesterday
+ $4,800
⌂◫◎◯
Insights · 390 × 844
9:41● ◒ ▰
←Spending insights•••
Monthly spending

$3,240.80

MTWTFSS
Top categoriesMay 2026
⌂
Housing42% of spending
$1,360
✦
Shopping24% of spending
$780
⌁
Transport16% of spending
$518
Auto layout · 342 × 74
Pencil AI
72%
从流程到界面从页面到组件从设计到分享
01 / DESIGN WITH INTENT

每一个像素背后，
都有产品逻辑。

Pencil 不只是把页面画漂亮。它从目标和任务出发，建立流程、信息层级、组件规范与关键状态。

01USER FLOW

先理清路径，
再开始画页面。

识别用户、任务和关键步骤，生成合理的页面清单与导航关系。

01欢迎
→
02注册
→
03首页
→
04完成任务
02DESIGN SYSTEM

从 Token 开始，
让一致性自然发生。

定义颜色、排版、间距与圆角，让组件和页面共享同一套视觉语言。

AaDisplay / 48Inter · Semibold
481624
03REUSABLE COMPONENTS

一次设计，
处处复用。

创建按钮、输入框、卡片与导航组件，确保多页面设计高效而一致。

AMAlex MorganProduct Designer•••
04PUBLIC SHARING

设计完成，
让每个人都能看见。

保存确认版本并生成用户可访问的公开链接，快速完成评审、演示与交接。

02 / MADE FOR PRODUCT TEAMS

为每一种产品时刻，
准备好合适的画布。

MOBILE PRODUCT / 01

把核心任务装进
用户的每一次触碰。

从首次进入、主要任务到异常状态，设计完整而连贯的移动体验。

iOSAndroidResponsive
9:41

Discover

Daily inspiration

Fresh ideas curated for you.

9:41

Your space

AM
390
844
03 / FROM BRIEF TO HANDOFF

思考、设计、验证，
一条完整路径。

01
⌁

理解需求

提取产品目标、用户角色、平台尺寸和品牌限制。

02
◫

规划体验

定义用户流程、页面清单、信息层级和关键状态。

03
✦

生成设计

分区构建界面，应用 Token、组件和响应式规则。

04
✓

检查完善

验证对齐、间距、可读性、一致性与可编辑结构。

05
↗

保存分享

固定当前版本，生成可供团队评审的公开访问链接。

“
过去我们用几天对齐产品方向，
现在第一轮评审从一张完整界面开始。
JL
Jia LinProduct Lead · Finora
FROM IDEA TO INTERFACE

你的下一个产品，
已经可以开始设计。

给想法一个结构，给团队一个看得见的起点。

前往 npm 查看 Pencil ↗