dimensional-drawing

把普通 UI 组件一键画成苹果风立体插画

开源 🏷️完全免费 🔧 仅开源项目，无在线服务，需自行部署设计创意 🍴 复刻 85 🐛 待处理 3 👀 关注 8

访问官网 ↗ GitHub ↗

GitHub 星标 ★ 1361

维护状态活跃

是否开源开源

定价模式 🏷️完全免费开源免费使用

项目预览

dimensional-drawing 项目界面预览图 — 图片来源：GitHub 官方仓库名片

项目数据

分类设计创意

开发团队enesozturk

官网地址https://x.com/enesozturkdev/status/2114035471953326126

GitHubhttps://github.com/enesozturk/dimensional-drawing

定价模式🏷️完全免费

价格说明开源免费使用

访问状态🔧 仅开源项目，无在线服务，需自行部署

是否开源是

开源协议MIT

主要语言HTML

技术栈/模型skills,ui

GitHub 星标★ 1361

上线时间2026-10-23 00:00:00

代码更新2026-10-24

仓库体积17.4 MB

本站数据更新2026-10-29

维护状态活跃

收录时间2026-10-29

浏览次数0

项目介绍

dimensional-drawing 是一个面向 UI 设计师与前端开发者的开源绘图工具，用 HTML 技术栈实现，目标是把普通界面组件快速转成具有苹果风格的三维立体插画。它解决的是设计稿中组件展示缺乏层次感、手工绘制立体效果耗时且难以复用的问题。核心能力包括：以组件为基本单元生成带透视与光影的立体图形，内置苹果设计语言常用的圆角、渐变、柔和阴影与材质质感，支持在浏览器中直接预览与调整参数，输出可嵌入文档或演示的图形。项目以 skills 形式组织，便于按需扩展绘图能力，适合做设计规范展示、产品介绍页配图与组件库视觉包装。整体轻量、上手门槛低，无需专业三维软件即可产出统一风格的立体 UI 示意图。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-10-29 · 当前星标 ★ 1361

技术标签

skills ui

使用教程

难度：入门约 10 分钟部署方式：本地安装 6 步

环境要求

已安装 git，可克隆 GitHub 仓库
使用 Claude Code 时，需要本机存在 ~/.claude/skills/ 目录（其中存放已安装 Skills）
使用 skills CLI 方式安装时，需要 Node.js 环境来运行 npx
要使用这套技能，需要支持 skills 的 agent（例如 Claude Code、claude.ai/Claude desktop、Codex、Cursor

安装与启动步骤

1克隆仓库

将项目完整克隆到本地，后续所有技能文件都从该目录复制或打包。
```
git clone https://github.com/enesozturk/dimensional-drawing
```
2安装到 Claude Code

把 skills 下的全部技能目录复制到用户级 skills 目录，装完后 agent 即可识别。
```
cp -r dimensional-drawing/skills/* ~/.claude/skills/
```
3或用 skills CLI 安装

不手动复制时，可用 skills CLI 直接从仓库添加技能，适合 Codex、Cursor、Gemini CLI 等 agent。
```
npx skills add enesozturk/dimensional-drawing
```
4网页端上传技能

在 claude.ai 或 Claude desktop 中，把 skills/dimensional-drawing 文件夹压缩为 zip，再到 Settings → Capabilities → Skills 处添加。
5生成组件图纸

向 agent 描述要绘制的 UI 组件（如卡片、对话框），技能会输出单页 HTML 图纸，标注内边距、间距、圆角、层级与视口位置。
6查看示例与动效

skills/dimensional-drawing/examples 下有卡片与对话框的单文件 HTML 示例；需要短片时改用 dimensional-drawing-motion 技能，参照其 templates 与 adapters

关键配置

配置项	必填	说明	示例
`技能安装目录`	是	Claude Code 读取用户级技能的位置，技能文件夹需直接放在其下。	`~/.claude/skills/dimensional-drawing/`

如何确认成功

在支持 skills 的 agent 中让它绘制一个卡片组件，若返回带尺寸标注的单页 HTML 图纸，即表示技能已生效。

常见问题

Q：安装后 agent 找不到技能怎么办？

A：检查复制结果：技能文件夹应直接位于 ~/.claude/skills/ 下，且目录内有 SKILL.md，层级多套一层会导致识别失败。

Q：Windows 上无法执行 cp 命令怎么办？

A：可在文件管理器中手动把 dimensional-drawing/skills/ 下的各个技能文件夹复制到用户目录的 .claude/skills/ 内，效果等同。

Q：需要安装三维建模软件吗？

A：不需要。项目用 HTML 技术栈实现，输出的是单文件 HTML 图纸，在浏览器中打开即可查看。

Q：图纸里包含组件文案吗？

A：不包含。按 README 说明，文案与内容被刻意省略，只保留内边距、间距、圆角、层级、视口位置等结构信息。

Q：能否让图纸动起来？

A：可以，使用 skills/dimensional-drawing-motion 技能，配合其 templates 参考场景与 stylesheet，生成约 10 秒的短片。

注意事项

本项目以 skills 形式组织，本身不是可直接运行的 Web 应用，需配合支持 skills 的 agent 使用。
README 提供了 Claude Code、claude.ai/Claude desktop 与 skills CLI 三种安装路径，按实际使用环境选择其中一种即可。
动效能力主要在 Claude 的 Motion artifact 中使用，其他 agent 需参照 adapters 目录下的说明调整。