懒猫小而美：当代码邂逅艺术

似乎开发们总是为审美苦恼，而美工总是不理解开发们对审美也有追求。 下面是懒猫应用商店中的几款“跨界”工具，看看它们是怎样把code和design串联到一起的？ --- # Carbon https://appstore.lazycat.cloud/#/shop/detail/in.zhaoj.carbon 这是一个代码美化工具，它套用常见的代码编辑器主题，把你的代码片段输出成漂亮的图片。 支持几十种不同的风格，可自动识别或手动设置代码的语言格式。 ||| |---|---| ||| ||| 你也可以自定义主题颜色。  猜猜我想到了什么？前段时间流行的AI生成Coder风格名片，手动也不错哦：  --- # ascii-today https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.asciitoday 这个应用刚打开时的界面是这样的，是不是没法再更极简了？  但当你输入任何文字，应用就会自动即时生成各种漂亮的ASCii字体图案。 ||| |---|---| 看好任意一行，点击拷贝按钮，就可以把字型复制到剪贴板。 ```text ___ ___ ___ ___ /\ \ /\__\ /\__\ /\ \ /::\ \ /::| | ___ /:/ / /::\ \ ___ /:/\:\ \ /:/:| | /| | /:/ / /:/\:\ \ /\__\ ___ ___ /:/ /::\ \ /:/|:| |__ |:| | /:/ / ___ /:/ /::\ \ /:/ / /\ \ /\__\ /:/_/:/\:\__\ /:/ |:| /\__\ |:| | /:/__/ /\__\ /:/_/:/\:\__\ /:/__/ \:\ \ /:/ / \:\/:/ \/__/ \/__|:|/:/ / __|:|__| \:\ \ /:/ / \:\/:/ \/__/ /::\ \ \:\ /:/ / \::/__/ |:/:/ / /::::\ \ \:\ /:/ / \::/__/ /:/\:\ \ \:\/:/ / \:\ \ |::/ / ~~~~\:\ \ \:\/:/ / \:\ \ \/__\:\ \ \::/ / \:\__\ |:/ / \:\__\ \::/ / \:\__\ \:\__\ \/__/ \/__/ |/__/ \/__/ \/__/ \/__/ \/__/ ``` 把它做为签名嵌入你的代码，是不是帅呆了？  --- # asciiflow https://appstore.lazycat.cloud/#/shop/detail/io.zeroc.app.asciiflow 什么鬼？这个看上去很拙劣的白板是什么？ 严格来说，这甚至都不能算是白板，你很难在上面真正的“画”什么，只能是随意的“写”上图案。 所有的画像都是基于ASCii字符的，相当于你可以在一个无限扩展的网格上任意“绘制”出字符。 这该算是在写画？还是画字？ ||| |---|---| ||| 即使导出也不是导出图片，而是导出文本。 你可以把结果粘贴在任何只能发布文本的地方，表来表达你的图像。 ``` ┌───────────────────────────────────────────────────────────────────────────────────┐ │ │ │ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │ │ │ │ │ │ │ │ │ │ │ │ ┌──┐ ┌───┐ ┌───┐ ┌─┼ └──┘ └──┘ └──┘ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └──┘ └──┘ └──┘ │ │ │ │ │ │ │ │ │ │┌────────────────────┤ ┌──┐ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┌─────┐ │ │ │ │ │ │ │ │ │ TREASURE │ │ │ ┌────┐ │ └──┘ │ │ ┌──────┐ │ │ │ │ │ │ │ └────│─┌──┐─│ │ │ │ │ │ │ │ │ └──┘ │ │ │ │ └────┘ │ │ └──────┘ │ │ │ ┌────┐ │ │ │ │ │ │ │ │ │ ▲ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └──────└─┬──┘────────┴────────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ │ xxx @@@│ @@ │ │ │ xxxxx @@@@@@@@ │ │ if(!guards.awoken){ xxxxxxx @@@ @@ @@@@@@@ │ │ res.json({ xx xxxx @@@@@@@@@@@@@@@@ │ │ success: true, xxxxxxxxx @@@@ @@@@@@@ @@ │ │ }) │ x xx │ @@ @ @@ │ │ }else{ └──────────────────────────► xxxxxxxxx ──────────┘ @@ @ @ │ │ console.log('failed'); │ │ │ │ } └─┘ │ │ │ │ │ └───────────────────────────────────────────────────────────────────────────────────┘ ``` 当然这个应用的主要目的不是画上面这样奇怪的藏宝图，它更适合流程图或布局示意图之类的表达。  ``` ┌─────────────┐ │ │ ┌─────────────┐ ┌──────►│ Start │◄──────────────────│ │ │ └──────┬──────┘ │ Do it again │ │ │ └─────────────┘ │ │ │ │ ┌──────▼──────┐ │ │ │ To do │ │ │ │ something ├──────────────┐ │ │ └──────┬──────┘ │ │ │ │ │ │ │ │ │ │ │ ┌──────▼──────┐ ┌────▼───────┐ │ │ │ │ │ │ │ │ │ Right │ │ Wrong ├───┘ │ └──────┬──────┘ └────────────┘ │ │ │ │ │ ┌──────▼──────┐ │ │ │ └───────┼Keep doing │ └─────────────┘ ``` 于是在只能文字交流的地方，比如源代码注释里，这就有点意思了。 比如你用自由绘画工具，在前面再画上一竖列的注释符（或者在代码编辑器中按Ctrl+/），就可以把流程图变为注释了。  什么？这还不够劲儿？让我们把它当成文字提示词提交给AI试式（相较于图像输入节省大量输入Token） ||| |---|---| 【获得了SVG布局图】  再进一步吧：  【获得了网页Demo】  # [预览这个网页](https://refly.ai/share/code/cod-fy2107yqhozgszxuc4d8equk) （以上AI调用使用了Refly自由画板） https://appstore.lazycat.cloud/#/shop/detail/iamxiaoe.lzcapp.refly --- …… 所以这就是为什么说———— > ## 代码人不要小看艺术，艺术人也不要小看代码。 这不是鲁迅说的，是我。 ``` @ @ @ @ @ @ @ @ @ @ @@@@@@@ @@@@@@@ @@@ @@@ ///// @ ///// @@@ @ @@@@ @@@@@ ```