似乎开发们总是为审美苦恼，而美工总是不理解开发们对审美也有追求。

下面是懒猫应用商店中的几款“跨界”工具，看看它们是怎样把code和design串联到一起的？

---

Carbon

这是一个代码美化工具，它套用常见的代码编辑器主题，把你的代码片段输出成漂亮的图片。

支持几十种不同的风格，可自动识别或手动设置代码的语言格式。

你也可以自定义主题颜色。

猜猜我想到了什么？前段时间流行的AI生成Coder风格名片，手动也不错哦：

---

ascii-today

这个应用刚打开时的界面是这样的，是不是没法再更极简了？

但当你输入任何文字，应用就会自动即时生成各种漂亮的ASCii字体图案。

看好任意一行，点击拷贝按钮，就可以把字型复制到剪贴板。

                    ___           ___                       ___           ___                   
                   /\  \         /\__\                     /\__\         /\  \                  
                  /::\  \       /::|  |         ___       /:/  /        /::\  \         ___     
                 /:/\:\  \     /:/:|  |        /|  |     /:/  /        /:/\:\  \       /\__\    
  ___     ___   /:/ /::\  \   /:/|:|  |__     |:|  |    /:/  /  ___   /:/ /::\  \     /:/  /    
 /\  \   /\__\ /:/_/:/\:\__\ /:/ |:| /\__\    |:|  |   /:/__/  /\__\ /:/_/:/\:\__\   /:/__/     
 \:\  \ /:/  / \:\/:/  \/__/ \/__|:|/:/  /  __|:|__|   \:\  \ /:/  / \:\/:/  \/__/  /::\  \     
  \:\  /:/  /   \::/__/          |:/:/  /  /::::\  \    \:\  /:/  /   \::/__/      /:/\:\  \    
   \:\/:/  /     \:\  \          |::/  /   ~~~~\:\  \    \:\/:/  /     \:\  \      \/__\:\  \   
    \::/  /       \:\__\         |:/  /         \:\__\    \::/  /       \:\__\          \:\__\  
     \/__/         \/__/         |/__/           \/__/     \/__/         \/__/           \/__/

把它做为签名嵌入你的代码，是不是帅呆了？

---

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】

预览这个网页

（以上AI调用使用了Refly自由画板）

---

……

所以这就是为什么说————

代码人不要小看艺术，艺术人也不要小看代码。

这不是鲁迅说的，是我。

  @                         @   
 @  @                      @  @ 
@    @                    @    @
                              
     @@@@@@@         @@@@@@@    
         @@@             @@@    
                              
   /////        @       ///// 
               @@@    @       
            @@@@ @@@@@