原型设计工具：Figma、Stitch、Claude Design、Open Design、OpenPencil

虽然不是前端开发，更不是UI设计师，但毕竟日常用过或听过各种原型设计工具，甚至短暂基于工具开发过简单后台系统页面。

本文汇总一些原型设计工具，尤其是想探究一下AI对此领域带来的变革。

Figma

Stitch

官网，Google推出的产品原型设计工具。

核心功能：

从自然语言提示生成UI界面；
从图片／草图／线框图生成界面；
支持对话方式修改，如全局或局部调整颜色、风格、圆角、字体、light/dark模式等；
支持导出HTML、CSS代码，也能直接导入Figma继续编辑；
可用于需求分析兼设计师，边构思边设计边修改；
如果已经有比较详细的规划，就可把产品大概功能以及需要哪些页面都告诉他。

操作界面非常简洁，左边是示例作品，右边就是和AI进行对话的区域。

两种模式：

标准模式，使用Gemini 2.5 Flash模型，生成速度更快，支持调整和导出为Figma。
专业模式，使用Gemini 2.5 Pro模型，生成速度会相对慢一点，支持上传图片或草图生成高保真UI。

Claude Design

官网，中文官网，简称CD，Anthropic推出的AI视觉设计工具，由多模态模型Claude Opus 4.7驱动。无需设计经验，通过自然语言对话即可创建交互原型、演示文稿和品牌素材。

官网提供演示案例。

让用户以对话方式完成从概念构思到成品交付的完整设计流程，彻底消除设计软件的学习门槛。与Figma或Photoshop不同，不要求用户掌握任何设计软件技能。只需描述想要的视觉效果，AI就能理解意图并生成专业级作品。无论是融资路演PPT、交互原型还是品牌落地页，都能在几分钟内从想法变为可交付的成果。

六大核心功能：

自动品牌设计系统：CD自动读取代码库、Figma文件和品牌资产，智能生成包含配色、字体和组件库的完整设计系统。所有后续项目继承品牌一致性。
交互原型创建：通过CD的对话能力，快速创建可点击、可分享的交互原型，无需编写代码。产品团队可直接用原型进行用户测试，大幅缩短验证周期。
演示文稿与文档：一键生成专业演示文稿。上传内容要点，系统自动匹配品牌风格，生成逻辑清晰、视觉精美的PPT，支持PPTX和PDF导出。
Web Capture智能抓取：内置Web Capture工具，可直接从实时网站抓取视觉元素用于设计参考，提取网页的设计语言并融入项目。
Claude Code无缝交接：设计方案确定后，一条指令打包为交接包传递给CC，直接进行生产级代码实现。设计到开发不再需要繁琐的规范文档。
多维度编辑方式：提供对话式修改、行内注释、直接编辑和自定义滑块四种模式。从全局风格调整到单个像素微调，在CD中都能精准完成。

四步完成专业设计，从品牌系统搭建到最终交付，CD提供一套完整且流畅的创作工作流。

搭建品牌设计系统：首次使用时，CD自动分析品牌资产，如Logo、配色、字体和代码库中的组件样式，据此构建完整的设计系统。团队可维护多个版本，确保所有产出视觉一致。
多种方式开始创作：支持文本描述、上传参考图片、导入文档（DOCX、PPTX、XLSX），或使用Web Capture从实时网站抓取设计元素。灵活的输入方式适应不同创作场景。
精准控制每一个细节：支持对话式大幅调整、行内注释针对性修改、直接文本编辑，以及通过自定义滑块实时调节间距与颜色。设计师和非设计师都能高效迭代。
多格式灵活输出：导出为ZIP、PDF、PPTX和独立HTML文件，也可直接发送至Canva编辑协作。需要开发实现时，一键生成交接包传递给CC进行代码实现。

Open Design

官网，开源（GitHub，22.6K Star，2.5K Fork）版Claude Design，支持接入各种Coding Agent：Claude Code、Codex、Cursor、Gemini CLI、OpenCode、Qwen。

功能特性：

内置71套品牌级设计系统，Linear、Stripe、Vercel、Airbnb、Apple、Tesla都有，选一个就有完整的色板、字体和组件规范。19个可组合的Skill覆盖原型、Deck、移动端、Dashboard、定价页、文档等常见场景，自带PM文档、周报、OKR等工作模板。
5种视觉风格：编辑杂志、现代极简、科技工具、粗野主义、柔和温暖，每种都有确定性的色板和字体栈。

工作流：输入需求后，AI输出问卷锁定受众、风格和品牌调性，细化用户需求；选择视觉风格，Agent自主构建，生成项目文件和模板，跑完5维度自检，在沙盒iframe里实时渲染。成品支持导出HTML、PDF、PPTX。

基于如下开源项目：

huashu-design：设计哲学和反AI套话的自检清单
guizang-ppt：杂志风Deck能力
open-codesign：流式预览和导出模式
multica：提供本地Daemon架构

OpenPencil

官网，开源（GitHub，4.6K Star，395 Fork）基于Tauri v2，跨平台，浏览器支持，AI原生设计编辑器，兼容Figma格式，支持完全本地运行，无需账户无需订阅。Figma平替。

功能特点：

Figma兼容：原生打开.fig文件，应用间复制粘贴节点
AI原生：内置聊天与工具使用，自带API密钥，无供应商锁定
75个工具：连接到聊天、CLI和MCP。如创建形状、设置填充/描边/布局、变量、矢量、布尔运算、视口、查找节点、打开/保存.fig文件、将JSX渲染到设计节点
永久免费：无账户、无订阅、无需互联网，约7MB安装包
可编程：无头CLI，每个操作都可编写脚本
实时协作：基于WebRTC的P2P连接，无需服务器。包含光标、存在感和跟随模式
绘图工具：形状、钢笔工具（带矢量网络）、富文本（使用系统字体）、自动布局、组件（实时同步）、变量（带模式和集合）
命令行支持：无头CLI

检查、搜索、分析和渲染.fig文件：

bash 复制代码

git clone 
bun install
bun run dev
bunx @open-pencil/cli info design.fig # 文档统计、节点类型、字体
bunx @open-pencil/cli tree design.fig # 可视化节点树
bunx @open-pencil/cli find design.fig --type TEXT # 按名称或类型搜索
bunx @open-pencil/cli export design.fig # 渲染为PNG
bunx @open-pencil/cli export design.fig -f jpg -s 2 -q 90 # JPG格式，2倍缩放，质量90%

所有命令都支持--json以获得机器可读输出。

技术栈

层级	技术
UI	Vue3、VueUse、RekaUI
样式	Tailwind CSS 4
渲染	Skia(CanvasKit WASM)
布局	Yoga WASM
文件格式	Kiwi二进制（自用）+Zstd+ZIP
颜色处理	culori
协作	Trystero(WebRTC P2P)+Yjs(CRDT)+y-indexeddb
桌面应用	Tauri v2
CLI	citty、agentfmt
MCP	`@modelcontextprotocol/sdk`、Hono
测试	Playwright（视觉回归）、`bun:test`（单元测试）
工具链	Vite 7、oxlint、oxfmt、typescript-go

协作

分享链接进行实时协同编辑。无服务器、无账户，对等方直接通过WebRTC连接。

点击右上角面板中的分享按钮
分享生成的链接（app.openpenencil.dev/share/room-id）
协作者可以实时看到您的光标、选择和编辑
点击对等方的头像以跟随他们的视口

所有同步都是通过对等方通过Tryster进行的。文档状态保存在本地IndexedDB中，刷新页面不会丢失本地浏览器缓存。

集成CC：bun add -g @open-pencil/mcp

json 复制代码

{
	"mcpServers": {
		"open-pencil": {
			"command": "openpencil-mcp"
		}
	}
}

项目结构

复制代码

packages/
	core/			# @open-pencil/core，引擎（图层图、渲染器、布局、编解码器）
	cli/			# @open-pencil/cli --- 无头CLI（info、tree、find、export）
	mcp/			# @open-pencil/mcp --- MCP服务器（stdio + HTTP）
	docs/			# VitePress文档站点
src/
	ai/				# AI工具接线
	components/		# Vue SFC（画布、面板、协作、颜色选择器）
	composables/	# 画布输入、键盘快捷键、协作、渲染
	views/			# 路由视图
	stores/			# 编辑器状态（Vue响应式）
	engine/			# 从@open-pencil/core重新导出的垫片
desktop/			# Tauri v2（Rust、配置）
tests/
	e2e/				# Playwright视觉回归
	engine/			# 单元测试

Axure

蓝湖

墨刀

类似于蓝湖，A股上市公司万兴科技旗下的原型设计工具，支持APP、网站页面、管理后台、可视化大屏、工业HMI、小程序、H5多场景领域原型设计，AI智能生成组件、页面，智能填充。

中文文档。