隆重推出

平面设计工作台

将简单指令转换成高质量平面设计稿,支持矢量级无损输出、多图层PSD导出、美术资产管理、风格预设等生产级特性,适用于各种平面设计场景。

DesignCode 设计案例: 中文简历DesignCode 设计案例: 硅谷名片DesignCode 设计案例: 硅谷明信片DesignCode 设计案例: 游戏海报
中文简历

如何设计这个?

仅需 3 对话

1

将以下简历内容排到一张A4纸的比例内,美观专业简洁,保证文字易读、排布合理、结构优雅:...

2

着重考虑增强对比色,现在看着有点平淡。渐变彩条可以去掉,教育信息应该更加和简历更加融合。

3

调大正文小字,增加易读性,允许多占下面的留白。

通过 DesignCode 完成

生产级设计体验

不仅是简单的生成,更是完整的工作流。DesignCode 提供了一系列为专业设计师和开发者准备的高级特性。

对话式生成

在对话框中向 Agent 直接描述你的需求,获得完整的设计稿,并在连续的对话中进行微调。

实时预览与直接编辑

在画布中实时预览设计效果,对文本内容进行直接修改。

矢量级无损输出

理论无限分辨率,可导出为 SVG 矢量格式或多档画质的高清图片。

多图层 PSD 导出

无缝衔接专业工作流,导出的 PSD 中包含完整图层结构,且每个图层都具有正常的透明通道。

风格预设与配置

提供丰富风格预设可供选择,并可在菜单中预先配置尺寸要求,精准控制输出规格。

美术资产管理

建立用户级的本地素材库,并在每个设计稿中自由选择要使用的素材。

无忧历史回溯

拥有完整的历史记录系统,每一次调整都可回退,多个设计稿独立保存在本地。

无版权风险

使用HTML、CSS、SVG作为设计媒介,不依赖任何图片生成模型,不属于生成式内容,无AI相关风险。

跨平台桌面端

基于前沿的 Tauri v2 构建,兼顾轻量与高性能,完美支持 macOS 与 Windows 操作系统。

核心原理

使用代码作为设计媒介,
突破传统 AI 生图瓶颈。

DesignCode 的独特优势来源于其创新性的技术路线。与使用扩散生成技术(Diffusion Models)的传统 AI 画图工具不同,DesignCode 创造性地使用 HTML / CSS / SVG 作为底层设计媒介。

  • 精准的文本渲染,根绝文本模糊、乱造字的问题。
  • 矢量级高清晰度,理论上具有无限分辨率,可导出多档画质。
  • 完全的后期可编辑性,生成的不再是死板的位图,而是活的代码和图层

<div className="relative flex flex-col p-8">

<!-- Agent generates precise layout -->

<h1 className="text-4xl font-black text-white">

AI Driven Design

</h1>

<svg viewBox="0 0 100 100">

<path d="M10,50 L90,50..." stroke="#F97316" />

</svg>

</div>

Rendered instantly via Webview Vector Perfect

面向用户的快速开始

下载安装,三步即可开始创作。

1

下载应用

前往 GitHub Releases 下载适合您系统的安装包(macOS / Windows)。

前往下载
2

配置 Agent

打开应用,在左侧「运行时」菜单中配置您的 AI Agent 连接。

3

开始创作

在右侧对话框中描述您的设计需求,即可获得结果。

面向开发者的快速开始

对于有二次开发需求,或希望获取非正式更新的高级用户。

确保您的环境中已安装 Node.js ≥ 18 Rust
# 克隆仓库
git clone https://github.com/haruhiyuki/DesignCode.git
cd DesignCode
# 安装依赖
npm install
# 桌面开发模式 (macOS)
npm run desktop:dev
# 构建分发包 (macOS)
npm run desktop:build

关于我们

DesignCode 由 凉宫春日开发组 发布。

凉宫春日开发组是凉宫春日应援团的附属组织,致力于创造更多让世界变得更加热闹的项目。

欢迎通过邮件投递加入申请!