非设计师如何用AI进行UI设计

非设计师如何借助 AI Agent 完成高质量 UI 设计？本文整理了目前的最佳实践，涵盖方法论、工具链、Skills 和可执行的工作流。

1. 核心方法论：三层设计架构

Neethan Wu 在 Design Without Designing 中提出了一套非设计师也能交付高质量 UI 的方法论，核心是将设计能力拆解为三个层次，各层由不同角色（AI 或人类）负责：

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#3B82F6', 'primaryTextColor': '#1E3A5F', 'primaryBorderColor': '#2563EB', 'lineColor': '#60A5FA', 'secondaryColor': '#10B981', 'tertiaryColor': '#F59E0B'}}}%%
flowchart LR
    A["Skills 层\n专业知识"] --> B["Canvas 层\n速度与迭代"]
    B --> C["Taste 层\n方向与判断"]

    classDef skills fill:#3B82F6,color:#fff,stroke:#2563EB
    classDef canvas fill:#10B981,color:#fff,stroke:#059669
    classDef taste fill:#F59E0B,color:#1E3A5F,stroke:#D97706

    class A skills
    class B canvas
    class C taste

1.1 Skills 层 —— 给 AI 装上设计知识

不需要你自己懂设计，而是给 Agent 加载一套 “ 设计指令集 “，让它自动识别并修复常见的设计反模式（纯黑背景、低对比度文字、不合理的组件嵌套等）。具体的 Skills 工具和推荐组合在第 2 节详述。

1.2 Canvas 层 —— 在代码画布上极速迭代

放弃像素推拽，在能直接生成代码的 “ 画布 “ 上迭代。设计的结果即代码，通过高频 “ 对话 → 生成 → 修改 “ 循环，用 AI 的速度优势覆盖经验的不足。具体的 Canvas 工具在第 3 节对比。

1.3 Taste 层 —— 唯一需要人类负责的部分

AI 负责执行和打磨，人类负责方向判断和灵感捕捉。Skills 提供专业性，Canvas 提供速度，而审美决定了最终产品的上限。2025 年行业共识：设计师的角色正在从 “ 制作者 “ 转变为 “ 策展人/导演 “，非设计师也可以胜任这个角色。

你不需要会画图，但需要能分辨 “ 好看 “ 和 “ 不好看 “。

实践建议：

• 多看优秀产品的设计（如 Linear、Notion、Vercel 的界面）
• 浏览设计灵感库：Muzli、Mobbin（移动端 UI 模式库）、Dribbble
• 给 AI 一个参考截图或 URL，让它学习其中的视觉节奏
• 按组件（按钮、卡片、导航栏）逐个打磨，而不是一次生成整个页面

方法论明确了 “ 谁做什么 “，接下来看 Skills 层的具体工具选择。

2. AI Agent Skills

Skills 是给 AI Agent 加载的 “ 设计知识包 “，让 Agent 在生成代码时自动遵循专业设计规范。

2.1 Skills 对比

Skill	作者	核心特点	推荐度
Impeccable	Paul Bakaus（jQuery UI 创始人）	20 命令 + 7 参考指南 + 反模式清单，最全面的设计语言	⭐⭐⭐⭐⭐
Interface Design	Dammyjay93	设计系统记忆，自动保存决策到 .interface-design/system.md，跨会话保持一致性	⭐⭐⭐⭐
Emil Kowalski Skill	Emil Kowalski（Linear/Vercel）	动画节奏、微交互、UI 打磨哲学	⭐⭐⭐
UI UX Pro Max	nextlevelbuilder	数据量最大：67 种 UI 风格、161 调色板、57 字体搭配、13 技术栈、161 行业推理规则	⭐⭐⭐
UI Skills	ibelick	模块化集合：baseline-ui、accessibility、metadata、motion-performance	⭐⭐⭐
UX Pilot	UX Pilot	文本生成线框图 + AI 预测性热力图，填补 UX 验证环节	⭐⭐⭐
frontend-design	Anthropic 官方	Impeccable 的基础版本，功能较少	⭐⭐

2.2 推荐组合

非设计师安装以下两个即可覆盖核心需求：

1. Impeccable — 解决 “ 怎么做好 “（审计、打磨、反模式检测）
2. Interface Design — 解决 “ 怎么保持一致 “（跨会话记忆设计决策）

# Impeccable — 从网站下载最推荐，也支持 CLI
# 详见 https://github.com/pbakaus/impeccable#installation

# Interface Design
# Claude Code
/plugin marketplace add Dammyjay93/interface-design

# 其他 Agent
npx skills add Dammyjay93/interface-design

2.3 各 Skill 详细介绍

2.3.1 Impeccable（⭐⭐⭐⭐⭐ 最推荐）

由前 jQuery UI 负责人 Paul Bakaus 创建，目标是将 LLM 变成 “ 创意总监 “，利用引导命令和反模式清单避免 AI 生成千篇一律的 UI（紫色渐变、Inter 字体、嵌套卡片等）。与 Anthropic 官方的 frontend-design Skill 理念相近但功能更强。

核心命令：

命令	用途
/audit	审计设计缺陷，生成报告（不修改代码）
/critique	UX 设计评审，关注用户体验
/normalize	对齐设计系统，修复间距/颜色不一致
/polish	发布前最终打磨
/animate	添加有意义的动画和过渡
/typeset	优化排版和字体层次
/arrange	优化布局和空间节奏
/bolder	增加视觉冲击力
/quieter	降低视觉噪音，提升优雅感
/overdrive	全力以赴的极致设计模式

推荐工作流：/audit → /normalize → /polish

反模式清单：

• 不要使用 Inter / Arial 等过度使用的字体
• 不要在彩色背景上使用灰色文字
• 不要用纯黑/纯灰（应加色调 tint）
• 不要卡片套卡片
• 不要用 bounce/elastic 弹性动画（显得过时）

2.3.2 Interface Design（⭐⭐⭐⭐ 强烈推荐）

核心价值：设计决策的持久化记忆。

没有 Interface Design：
- 每个会话从零开始
- 按钮高度漂移（36px, 38px, 40px...）
- 随机间距值（14px, 17px, 22px...）

有 Interface Design：
- 系统每次会话自动加载
- 按钮固定 36px，卡片固定 16px 内边距
- 间距按网格走（4px, 8px, 12px, 16px）

命令：

命令	用途
/interface-design:init	初始化，建立设计原则
/interface-design:status	查看当前设计系统
/interface-design:audit <path>	检查代码是否符合系统
/interface-design:extract	从已有代码提取设计模式

2.3.3 UI UX Pro Max（⭐⭐⭐）

数据量最大的 Skill，适合需要丰富预设的场景：

• 67 种 UI 风格（Glassmorphism、Brutalism、Neumorphism、Bento Grid 等）
• 161 个行业调色板
• 57 组字体搭配（Google Fonts）
• 支持 13 个技术栈（React、Next.js、Vue、SwiftUI、Flutter 等）

⚠️ 体积较大，可能增加上下文噪音。适合需要大量预设参考的项目，日常使用 Impeccable 更精简高效。

2.3.4 Ibelick UI Skills（⭐⭐⭐）

模块化设计，按需安装：

npx ui-skills add baseline-ui           # 基础 UI 规范
npx ui-skills add fixing-accessibility  # 无障碍修复
npx ui-skills add fixing-metadata       # SEO/元数据修复
npx ui-skills add fixing-motion-performance  # 动画性能优化

Skills 决定了 AI 的设计 “ 知识水平 “，下一步需要选择在哪个 “ 画布 “ 上把设计转化为代码。

3. 工具链

3.1 设计出稿工具（Canvas 层）

工具	适合场景	价格
v0.app（原 v0.dev）	生产级 React/Next.js 组件，Agentic AI，Vercel 生态	有免费额度
Stitch	高保真 UI + Vibe Design + Voice Canvas + 导出 Figma，Gemini 3 驱动	免费
Figma Make	Figma 内 Prompt → Prototype，零迁移成本	AI Credits（2026.3 起收费）
Lovable	全栈 Web 应用原型（含后端 + 数据库 + 部署），非技术人员友好	有免费额度
Bolt.new	全栈应用，内置云/数据库/一键部署，支持 Figma/GitHub/Stripe	有免费额度

3.2 IDE 内设计工具

3.2.1 Pencil.dev（推荐）

https://pencil.dev/

定位：在 IDE 内直接做可视化设计，设计文件 .pen 存在代码仓库中，支持 Git 版本控制。

特点：

• 直接嵌入 VS Code / Cursor / Antigravity 作为扩展安装
• 生成 React / HTML / CSS 生产级代码
• 支持 Figma 设计导入
• 通过 MCP 与 AI Agent（如 Claude Code）联动
• 设计文件 .pen 支持 Git 分支、合并、回滚

安装：

1. 在 IDE 的 Extensions 面板搜索 Pencil 并安装
2. 用邮箱激活
3. 创建 .pen 文件即可开始设计

3.2.2 Paper.design

https://paper.design/

定位：独立桌面应用，创意设计画布，代码原生（React + Tailwind）。

特点：

• 基于 React + Tailwind 代码构建设计，支持 “Copy as React” 1:1 代码导出
• 集成 AI 图片生成、背景去除、色板提取等
• 通过 MCP 与 Claude Code / Cursor 连接

3.2.3 Pencil Vs Paper 对比

维度	Pencil.dev	Paper.design
集成方式	IDE 扩展，嵌入编辑器	独立桌面应用 + MCP
设计文件	.pen 文件在代码仓库内，Git 可控	独立格式
适合谁	开发者 / 非设计师	设计师 / 创意探索
Figma 兼容	✅ 支持复制粘贴	❌
代码生成	React + HTML + CSS	React + Tailwind（双向工作流）
AI 能力	多 Agent 并行生成，Vibe Coding 模式	AI 图片生成、动画着色器、背景去除、色板提取
产品状态	已发布（目前免费）	⚠️ Alpha 阶段

推荐：非设计师优先用 Pencil.dev（更稳定、Git 集成更好）。Paper.design 适合创意探索，但仍处于 Alpha 阶段，功能和稳定性可能不如预期。

3.3 Google Stitch

https://stitch.withgoogle.com/settings

Google 出品的 AI 原生设计平台，已从 Labs 实验升级为成熟产品，由 Gemini 3 模型驱动。核心功能：

• Vibe Design — 描述用户感受（而非具体 UI）即可生成多种设计方向
• Voice Canvas — 语音描述设计需求，支持实时对话式设计评审
• 图片、草图或现有网页转设计稿
• 导出到 Figma 和开发者工具（HTML/CSS）
• 生成交互式原型，自动推导后续页面流

3.3.1 MCP 配置

https://stitch.withgoogle.com/docs/mcp/setup

Codex CLI 的 TOML 配置（官方文档未写，放置在 codex.toml 或相应配置文件中）：

[mcp_servers.stitch]
command = "npx"
args = ["-y", "@_davideast/stitch-mcp", "proxy"]
enabled = true
startup_timeout_sec = 120

[mcp_servers.stitch.env]
STITCH_API_KEY = "YOUR-API-KEY"

3.4 腾讯设计 Ardot

https://design.tencent.com/

腾讯出品的 AI 设计助手，面向中文市场。支持智能布局、设计规范检查和组件生成。适合面向国内市场的项目，但目前生态成熟度和社区活跃度不及上述国际工具，建议作为补充选项关注。

工具链选好了，接下来是一套可直接执行的完整流程。

4. 实践流程（面向非设计师）

以下是可直接执行的分阶段流程。每一步只推荐一个选择，不需要在多个工具间犹豫。

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#3B82F6', 'primaryTextColor': '#1E3A5F', 'primaryBorderColor': '#2563EB', 'lineColor': '#60A5FA', 'secondaryColor': '#10B981', 'tertiaryColor': '#F59E0B'}}}%%
flowchart TD
    A["阶段零: 一次性搭建"] --> B["阶段一: 确定设计方向"]
    B --> C["阶段二: 搭建项目 + 实现 UI"]
    C --> D["阶段三: 打磨循环"]
    D --> E["Pencil.dev 可视化微调"]
    E -->|"不满意"| D

    classDef phase0 fill:#6366F1,color:#fff,stroke:#4F46E5
    classDef phase1 fill:#3B82F6,color:#fff,stroke:#2563EB
    classDef phase2 fill:#10B981,color:#fff,stroke:#059669
    classDef phase3 fill:#F59E0B,color:#1E3A5F,stroke:#D97706
    classDef pencil fill:#8B5CF6,color:#fff,stroke:#7C3AED

    class A phase0
    class B phase1
    class C phase2
    class D phase3
    class E pencil

4.1 阶段零：一次性搭建

只需做一次，之后所有项目复用。

4.1.1 选定主力 IDE

推荐 Cursor，原因：AI Agent 模式最成熟，Skills 安装最方便，Pencil.dev 直接嵌入。

VS Code + Claude Code CLI 和 Antigravity 也能用，但 Cursor 在 UI 设计场景的 Agent 集成最顺滑。

4.1.2 安装 Skills（全局生效）

在终端执行：

# 必装：设计质量 + 设计记忆
npx skills add pbakaus/impeccable --global --yes
npx skills add Dammyjay93/interface-design --global --yes   # `/interface-design:init` — 初始化设计系统记忆

参考：https://github.com/pbakaus/impeccable?tab=readme-ov-file#whats-included

Command	中文说明
/teach-impeccable	一次性初始化：收集设计上下文，保存到配置
/audit	运行技术质量检查（无障碍、性能、响应式）
/critique	UX 设计评审：层次、清晰度、情感共鸣
/normalize	对齐设计系统标准
/polish	发布前最终打磨
/distill	精简到本质
/clarify	改善不清晰的 UX 文案
/optimize	性能优化
/harden	错误处理、国际化、边界情况加固
/animate	添加有意义的动效
/colorize	引入策略性配色
/bolder	增强平淡设计的视觉冲击力 🔥
/quieter	降低过于强烈的视觉噪音
/delight	添加令人愉悦的细节 🔥
/extract	提取为可复用组件
/adapt	适配不同设备
/onboard	设计用户引导流程
/typeset	修正字体选择、层次和大小
/arrange	修正布局、间距和视觉节奏
/overdrive	添加技术上极致的视觉效果

4.1.3 安装 Pencil.dev 扩展

在 Cursor 的 Extensions 面板搜索 Pencil → 安装 → 邮箱激活。

4.1.4 注册 Stitch

访问 https://stitch.withgoogle.com，用 Google 账号登录。免费，无需信用卡。

搭建完成后的工具链：

Stitch（出设计稿）→ Cursor + Skills（写代码 + 打磨）→ Pencil.dev（可视化微调）

4.2 阶段一：确定设计方向

工具：Stitch（浏览器打开）

执行步骤：

1. 找 2-3 张你喜欢的游戏/应用 UI 截图
2. 打开 Stitch，用自然语言描述你的项目：

示例 Prompt：
"一个浏览器端的卡牌策略游戏，暗色主题，科技感，
参考 Hearthstone 的卡牌布局但更简约现代。
需要：游戏主界面、卡牌组件、对战界面、结算页面。"

1. Stitch 会生成多个设计方向，只需选一个你觉得最好看的
2. 导出设计稿（截图保存即可，作为后续的参考锚点）

产出：一套设计参考图（不需要完美，只需确定大方向和视觉风格）。

4.3 阶段二：搭建项目 + 实现 UI

工具：Cursor + Impeccable + Interface Design

4.3.1 初始化项目

在 Cursor 中新建项目，让 Agent 创建基础框架：

Prompt 示例：
"用 Vite + React + Tailwind CSS 初始化一个浏览器游戏项目。
参考这张设计图 [粘贴 Stitch 截图]，先实现主界面的基础布局。"

4.3.2 初始化设计系统

/interface-design:init

Agent 会分析你的项目，生成 .interface-design/system.md，记录间距、颜色、字体等决策。之后每次会话自动加载。

4.3.3 按组件实现

不要让 AI 一次生成整个页面。 按优先级逐个组件来：

第 1 轮："实现游戏卡牌组件，参考这张截图 [粘贴]"
第 2 轮："实现顶部状态栏，显示玩家血量和回合数"
第 3 轮："实现游戏主界面布局，把卡牌和状态栏组合起来"

每实现一个组件，立即进入打磨阶段。

如果组件布局较复杂（多栏、网格、响应式断点），可以在 Pencil.dev 中创建 .pen 文件做可视化布局验证，再导出代码回项目。对于简单组件，直接在 Cursor 中用代码实现即可。

4.4 阶段三：打磨循环

工具：Cursor + Impeccable 命令 + Pencil.dev

这是从 “ 能用 “ 到 “ 专业精致 “ 的关键阶段。对每个已实现的组件/页面执行：

第 1 轮：/audit          → 找出所有设计问题（不修改代码）
第 2 轮：/normalize      → 对齐设计系统（间距、颜色一致性）
第 3 轮：/polish         → 最终打磨细节
第 4 轮：/animate        → 添加有意义的过渡动画
第 5 轮：无障碍检查       → 确保对比度、键盘导航、屏幕阅读器兼容
第 6 轮：Pencil.dev 微调  → 在可视化画布上检查间距、对齐、视觉层次
第 7 轮：你自己看一遍     → "这里好不好看？" → 不好看就告诉 Agent 具体改什么

Pencil.dev 在打磨阶段的价值：Impeccable 的 /audit 和 /polish 侧重代码层面的规范检查，但有些视觉问题（元素间距是否均匀、卡片对齐是否舒适、响应式布局断点是否合理）在代码中不够直观。打开 .pen 文件用可视化画布做最后一轮像素级校验，比反复调代码效率更高。

4.4.1 Prompt 技巧

✅ 好的 Prompt：
"这个卡牌组件的悬停效果太生硬，加一个 200ms 的 scale(1.05) 
过渡，并给卡牌添加微妙的发光边框"

❌ 差的 Prompt：
"让它更好看一点"

核心原则：

• 具体 — 说 “4px 圆角 “ 而非 “ 圆润一点 “
• 给参考 — 截图比文字有效 10 倍
• 说不要什么 — “ 不要纯黑背景，用深蓝灰 #0f172a”
• 分步骤 — 先布局 → 后配色 → 再动效 → 最终打磨

4.5 速查卡片

阶段	时间	关键动作
阶段零（一次性）	30 分钟	装 Impeccable + Interface Design + Pencil.dev 扩展 + 注册 Stitch
阶段一	30 分钟	Stitch 出设计稿 → 截图保存
阶段二	2-4 小时	/interface-design:init → 按组件逐个实现（复杂布局可用 Pencil.dev 辅助）
阶段三	每组件 15-30 分钟	/audit → /normalize → /polish → /animate → 无障碍检查 → Pencil.dev 微调 → 人工审美判断

常用命令速查：

命令	用途
/audit	审计缺陷
/normalize	对齐设计系统
/polish	打磨细节
/animate	添加动画
/critique	UX 评审
/bolder	增加冲击力
/quieter	降低噪音
/overdrive	极致模式

5. AI 产品的 UI 设计原则

如果你设计的不仅是 “ 用 AI 做出来的 UI”，而是 “ 包含 AI 功能的产品 UI”，还需要关注以下原则：

• 透明性 — 明确标注 AI 生成的内容，与人类创建内容区分
• 可控性 — 允许用户覆盖 AI 的决策，提供 “ 关闭 AI 建议 “ 等控制选项
• 可解释性 — 对 AI 的推荐或决策提供简要解释（如 “ 基于您最近的浏览记录推荐 “）
• 渐进式信任 — 初次使用时让 AI 功能低调存在，随着用户信任度增加再逐步展示更多能力
• 优雅降级 — AI 不确定时诚实告知，而不是强行输出可能错误的结果

参考设计系统：IBM Carbon for AI、SAP Fiori AI 设计指南

6. 参考资料

• Design Without Designing — Neethan Wu
• Impeccable — AI Design Language
• Interface Design — 设计系统记忆
• Emil Kowalski’s Design Engineer Skill
• Google Stitch
• Pencil.dev
• Paper.design
• Figma Make
• v0.app（原 v0.dev）
• UX Pilot
• Muzli — 设计灵感库
• Mobbin — 移动端 UI 模式库
• linux.do 讨论帖