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

似乎开发们总是为审美苦恼，而美工总是不理解开发们对审美也有追求。下面是懒猫应用商店中的几款“跨界”工具，看看它们是怎样把code和design串联到一起的？ --- # Carbon https://appstore.lazycat.cloud/#/shop/detail/in.zhaoj.carbon 这是一个代码美化工具，它套用常见的代码编辑器主题，把你的代码片段输出成漂亮的图片。支持几十种不同的风格，可自动识别或手动设置代码的语言格式。 |![image.png](https://dl.playground.lazycat.cloud/guidelines/319/48ebfab3-f948-4547-b7e2-726380e109c2.png "image.png")|![image.png](https://dl.playground.lazycat.cloud/guidelines/319/7c9e870a-e287-4425-86c1-7d4bf59d2e1b.png "image.png")| |---|---| |![image.png](https://dl.playground.lazycat.cloud/guidelines/319/3dcbd314-6b61-4943-b729-2d42750d3ee7.png "image.png")|![屏幕截图 2025-07-16 235959.png](https://dl.playground.lazycat.cloud/guidelines/319/4a51d375-804b-4662-aa35-584028313a0d.png "屏幕截图 2025-07-16 235959.png")| |![image.png](https://dl.playground.lazycat.cloud/guidelines/319/5db1060b-8d18-4af2-83f5-3eb4b99975ed.png "image.png")|![image.png](https://dl.playground.lazycat.cloud/guidelines/319/3c94e458-6c7f-4fb5-a4b3-edd361c57700.png "image.png")| 你也可以自定义主题颜色。 ![image.png](https://dl.playground.lazycat.cloud/guidelines/319/29084a1a-3e4e-42eb-9d5f-ec7946fcdb0f.png "image.png") 猜猜我想到了什么？前段时间流行的AI生成Coder风格名片，手动也不错哦： ![carbon.png](https://dl.playground.lazycat.cloud/guidelines/319/e4c795b8-7d09-457b-a4eb-95654ce45289.png "carbon.png") --- # ascii-today https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.asciitoday 这个应用刚打开时的界面是这样的，是不是没法再更极简了？ ![image.png](https://dl.playground.lazycat.cloud/guidelines/319/05009cca-305b-4bee-8f35-38814593aa56.png "image.png") 但当你输入任何文字，应用就会自动即时生成各种漂亮的ASCii字体图案。 |![image.png](https://dl.playground.lazycat.cloud/guidelines/319/6b13ad05-1510-4020-a204-3bae1b7df0d5.png "image.png")|![image.png](https://dl.playground.lazycat.cloud/guidelines/319/88ce73d2-ade7-48f4-8e32-f6986aa933f1.png "image.png")| |---|---| 看好任意一行，点击拷贝按钮，就可以把字型复制到剪贴板。 ```text ___ ___ ___ ___ /\ \ /\__\ /\__\ /\ \ /::\ \ /::| | ___ /:/ / /::\ \ ___ /:/\:\ \ /:/:| | /| | /:/ / /:/\:\ \ /\__\ ___ ___ /:/ /::\ \ /:/|:| |__ |:| | /:/ / ___ /:/ /::\ \ /:/ / /\ \ /\__\ /:/_/:/\:\__\ /:/ |:| /\__\ |:| | /:/__/ /\__\ /:/_/:/\:\__\ /:/__/ \:\ \ /:/ / \:\/:/ \/__/ \/__|:|/:/ / __|:|__| \:\ \ /:/ / \:\/:/ \/__/ /::\ \ \:\ /:/ / \::/__/ |:/:/ / /::::\ \ \:\ /:/ / \::/__/ /:/\:\ \ \:\/:/ / \:\ \ |::/ / ~~~~\:\ \ \:\/:/ / \:\ \ \/__\:\ \ \::/ / \:\__\ |:/ / \:\__\ \::/ / \:\__\ \:\__\ \/__/ \/__/ |/__/ \/__/ \/__/ \/__/ \/__/ ``` 把它做为签名嵌入你的代码，是不是帅呆了？ ![image.png](https://dl.playground.lazycat.cloud/guidelines/319/1b41bd58-0a13-4ada-abaf-b233cdfc09c9.png "image.png") --- # asciiflow https://appstore.lazycat.cloud/#/shop/detail/io.zeroc.app.asciiflow 什么鬼？这个看上去很拙劣的白板是什么？严格来说，这甚至都不能算是白板，你很难在上面真正的“画”什么，只能是随意的“写”上图案。所有的画像都是基于ASCii字符的，相当于你可以在一个无限扩展的网格上任意“绘制”出字符。这该算是在写画？还是画字？ |![屏幕截图 2025-07-17 001812.png](https://dl.playground.lazycat.cloud/guidelines/319/1bb6f678-a5a2-43a5-9661-882b0b0c561e.png "屏幕截图 2025-07-17 001812.png")|![image.png](https://dl.playground.lazycat.cloud/guidelines/319/cd801270-7169-4b9d-a3eb-040842439ccf.png "image.png")| |---|---| |![屏幕截图 2025-07-17 002755.png](https://dl.playground.lazycat.cloud/guidelines/319/9e397fcc-4532-4a98-b9a8-6356c3782ce7.png "屏幕截图 2025-07-17 002755.png")|![屏幕截图 2025-07-17 002742.png](https://dl.playground.lazycat.cloud/guidelines/319/4d7d5872-402a-4616-a590-e3595b32d59b.png "屏幕截图 2025-07-17 002742.png")| 即使导出也不是导出图片，而是导出文本。你可以把结果粘贴在任何只能发布文本的地方，表来表达你的图像。 ``` ┌───────────────────────────────────────────────────────────────────────────────────┐ │ │ │ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │ │ │ │ │ │ │ │ │ │ │ │ ┌──┐ ┌───┐ ┌───┐ ┌─┼ └──┘ └──┘ └──┘ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └──┘ └──┘ └──┘ │ │ │ │ │ │ │ │ │ │┌────────────────────┤ ┌──┐ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┌─────┐ │ │ │ │ │ │ │ │ │ TREASURE │ │ │ ┌────┐ │ └──┘ │ │ ┌──────┐ │ │ │ │ │ │ │ └────│─┌──┐─│ │ │ │ │ │ │ │ │ └──┘ │ │ │ │ └────┘ │ │ └──────┘ │ │ │ ┌────┐ │ │ │ │ │ │ │ │ │ ▲ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └──────└─┬──┘────────┴────────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ │ xxx @@@│ @@ │ │ │ xxxxx @@@@@@@@ │ │ if(!guards.awoken){ xxxxxxx @@@ @@ @@@@@@@ │ │ res.json({ xx xxxx @@@@@@@@@@@@@@@@ │ │ success: true, xxxxxxxxx @@@@ @@@@@@@ @@ │ │ }) │ x xx │ @@ @ @@ │ │ }else{ └──────────────────────────► xxxxxxxxx ──────────┘ @@ @ @ │ │ console.log('failed'); │ │ │ │ } └─┘ │ │ │ │ │ └───────────────────────────────────────────────────────────────────────────────────┘ ``` 当然这个应用的主要目的不是画上面这样奇怪的藏宝图，它更适合流程图或布局示意图之类的表达。 ![屏幕截图 2025-07-17 003725.png](https://dl.playground.lazycat.cloud/guidelines/319/28191b7f-36dc-4d50-9e08-f99925fda0ee.png "屏幕截图 2025-07-17 003725.png") ``` ┌─────────────┐ │ │ ┌─────────────┐ ┌──────►│ Start │◄──────────────────│ │ │ └──────┬──────┘ │ Do it again │ │ │ └─────────────┘ │ │ │ │ ┌──────▼──────┐ │ │ │ To do │ │ │ │ something ├──────────────┐ │ │ └──────┬──────┘ │ │ │ │ │ │ │ │ │ │ │ ┌──────▼──────┐ ┌────▼───────┐ │ │ │ │ │ │ │ │ │ Right │ │ Wrong ├───┘ │ └──────┬──────┘ └────────────┘ │ │ │ │ │ ┌──────▼──────┐ │ │ │ └───────┼Keep doing │ └─────────────┘ ``` 于是在只能文字交流的地方，比如源代码注释里，这就有点意思了。比如你用自由绘画工具，在前面再画上一竖列的注释符（或者在代码编辑器中按Ctrl+/），就可以把流程图变为注释了。 ![image.png](https://dl.playground.lazycat.cloud/guidelines/319/77bdbc4a-63ec-491d-b02e-d97ee7f90587.png "image.png") 什么？这还不够劲儿？让我们把它当成文字提示词提交给AI试式（相较于图像输入节省大量输入Token） |![image.png](https://dl.playground.lazycat.cloud/guidelines/319/a0566598-0909-497b-b492-c7f0e3eaa817.png "image.png")|![image.png](https://dl.playground.lazycat.cloud/guidelines/319/a1bf003f-18e0-46e4-b371-745ade02a943.png "image.png")| |---|---| 【获得了SVG布局图】 ![image.png](https://dl.playground.lazycat.cloud/guidelines/319/9871e36e-0f12-44df-b083-7e600516c4ae.png "image.png") 再进一步吧： ![image.png](https://dl.playground.lazycat.cloud/guidelines/319/7af26d54-a36b-445e-b249-afd0ea41e2de.png "image.png") 【获得了网页Demo】 ![image.png](https://dl.playground.lazycat.cloud/guidelines/319/3c96d42e-b5bd-498c-a95b-2453d63557c6.png "image.png") # [预览这个网页](https://refly.ai/share/code/cod-fy2107yqhozgszxuc4d8equk) （以上AI调用使用了Refly自由画板） https://appstore.lazycat.cloud/#/shop/detail/iamxiaoe.lzcapp.refly --- …… 所以这就是为什么说———— > ## 代码人不要小看艺术，艺术人也不要小看代码。这不是鲁迅说的，是我。 ``` @ @ @ @ @ @ @ @ @ @ @@@@@@@ @@@@@@@ @@@ @@@ ///// @ ///// @@@ @ @@@@ @@@@@ ```