一个 /design 指令让你成为设计师

背景

auto-coder.chat 本来就非常擅长代码和文档辅助，可以看这里的演示：

然后也擅长拷贝别人的设计，并且能直接对接后端：

但前置的设计能力还是有缺失的，比如如果你开发的时候，或者写文档的时候，希望有个配图，亦或者设计一个小logo, 设计一个组件，那么就需要有设计师的能力。

现在，auto-coder.chat 终于补齐了这个短板，提供了一个 /design 指令，支持矢量图和普通图片格式。

矢量图风格

/design /svg 帮我设计一个电脑小icon,方便我用在网页里

这个小 icon 还是不错的，默认导出的是 png 图片（同时也有个同名的.svg 图片），如果你想把他转换成 ico 等其他格式，可以使用我们的 /summon 指令，该指令会召唤出一个程序员，这个程序员会努力尝试通过写代码帮你解决任何问题。

/summon 把 output.jpg 转换成 ico 格式

看上图，成功搞定。

让我们再来试一个适合做插图的例子：

/design /svg 一个优秀的设计师，国风，可爱

或者来设计一个网页：

/design /svg 帮我设计一个官网登录界面,官网名字是  
auto-coder.chat  统一使用宋体

恩，字体还有丢丢问题，待我后续解决。

传统文生图风格

同样的，我们也可以用制作一些非矢量图的设计，比如：

/design /sd 帮我设计一个官网登录界面,官网名字是  auto-coder.chat

整体还可以，接着你可以把这张图给到 auto-coder.chat 让他转换成网页。

我们来看看给文档设计一些题图啥的效果：

/design /sd 一个优秀的设计师

/design /sd 一个优秀的设计师，国风，可爱

快速体验

根据前面的例子，矢量图需要使用 /desigh /svg 指令， 而 普通图片则是  /desigh /sd 指令。每一种模式都需要一个专属模型。

svg 需要 claude sonnet 3.5 才能获得较好的效果,启动方式为：

byzerllm deploy --pretrained_model_type saas/claude \
--cpus_per_worker 0.001 \
--gpus_per_worker 0 \
--worker_concurrency 1000 \
--num_workers 1 \
--infer_params saas.api_key=${MODEL_CLAUDE_TOEKN} saas.model=claude-3-5-sonnet-20240620 \
--model sonnet_3_5_chat

注意，将 api_key 替换成你的。然后在 auto-coder.chat 中设置:

/conf designer_model:sonnet_3_5_chat

即可。

sd 则需要 flux 模型，可以在硅基流动申请一个api key，然后使用如下方式启动代理：

byzerllm deploy --pretrained_model_type saas/siliconflow \
--cpus_per_worker 0.001 \
--gpus_per_worker 0 \
--num_workers 1 \
--worker_concurrency 1000 \
--infer_params saas.api_key=${MODEL_silcon_flow_TOKEN}  saas.model=black-forest-labs/FLUX.1-dev \
--model flux_chat

注意把 `${MODEL_silcon_flow_TOKEN}` 换成你自己的token。

然后在 auto-coder.chat 里设置：

/conf sd_model:flux_chat

现在，你就可以自由自在的做设计了，然后使用 auto-coder.chat /coding 指令将其转化为代码实现。