在做产品的时候苦于Claude Code的审美实在太差了，所以一直在尝试AI驱动的产品设计工具或者素材库。下面为整理最近在使用的AI 产品设计工具、资源与学习内容：

自己做一个Demo：数据报表设计前后对比

简单介绍一下：Pencil.dev 是IDE 内置的 AI 驱动设计画布，可直接在代码仓库中做矢量设计，使用方式分为两种：

1. 直接使用 Pencil.dev 独立 app 仅支持基础矢量绘制、静态排版，无 AI 生成、代码双向联动与批量页面生成能力，设计与代码完全割裂

2. Pencil MCP 搭配 Claude Code 使用则能打通提示词生成、智能设计、代码输出全链路，实现设计与代码实时同步、版本共管理。

我本次抱持着要后续上线迭代的预期（以及不想多训练一个模型）本次使用了Pencil.dev + Claude Code 的方案

设计前（默认第一版）

设计后（叠加材料与调整）

可以感觉质感明显提升！

核心是色系，字体选择外，图表样式的丰富度，设计细节的新增，以及icon的细腻度都是核心的修改点

以下是我这次参考的一些网站：

• ui.shadcn.com

可自由定制、扩展的开源 UI 组件库，直接复制代码使用，快速搭建高颜值界面。非常适合直接用CSS设计的人！我自己本次是它作为来源主要来跟pencil沟通

• github.com/shadcn-ui/ui

shadcn/ui 官方开源仓库，MIT 协议，可自由二次开发，构建专属设计系统，免费开源，可以下载到你自己的Claude Code里面使用！

• fontjoy.com

AI 自动生成优质字体组合，一键锁定心仪字体，快速解决设计字体搭配难题。一次把标题-副标题-内文字体搭配解决！

• happyhues（https://www.happyhues.co）

提供可直接落地的配色方案，标注背景、标题、按钮等场景用色，新手也能用好色彩，色卡直接复制走！

【题外话】学习资源推荐：Designing with Claude Code

视频地址：https://www.youtube.com/watch?v=lkKGQVHrXzE

作者 Steve Schoger 手把手教你把 Claude Code 作为主力设计工具，结合 AI完成从界面构思到代码实现的全流程，包含大量实用 UI 设计技巧，还分享了按钮、布局等细节优化方法，帮开发者不用专业设计师也能做出优质界面。

以上就是 AI 产品设计的实用工具、资源与学习内容推荐，熟练运用 Pencil.dev+Claude Code 搭配各类设计资源，就能高效打造出美观、规范、可直接上线的数据报表与产品界面。