我用AI搞定了一个萌系风格的Markdown查看器，开发体验出奇的好

最近在折腾一些笔记归档的事情，总觉得市面上的Markdown编辑器或查看器都长得太“严肃”了。要么是极简黑白风，要么是充满了程序员味的代码蓝。这种风格看多了容易视觉疲劳，于是我就萌生了一个想法：能不能搞一个看着让人心情愉悦，比如Moe（萌系）风格的Markdown查看器？

很多人可能觉得这种二次元风格的开源项目需要强大的UI设计能力或者前端功底，其实现在的AI工具已经大大降低了门槛。今天就来聊聊我是怎么用AI把这个想法落地的，中间踩了哪些坑，以及这个工具的实际体验如何。

为什么想做一个Moe风格的查看器？

做这个工具纯粹是为了取悦自己。Markdown作为程序员最亲民的文档格式，我们每天都在看。如果阅读界面能做得赏心悦目，哪怕是看枯燥的技术文档，心情也会好很多。

所谓的“Moe样式”，不仅仅是换个可爱的背景图那么简单，它涉及到色彩系统的调整（比如使用更柔和的马卡龙色系）、字体的选择（圆润可爱的非衬线字体）、以及交互微动效的细节（比如按钮点击时的Q弹效果）。这些细节如果纯靠手写CSS，对于不擅长前端的后端开发来说是个噩梦。

AI辅助开发：从0到1的实战

萌系风格Markdown查看器的UI设计示例，展示了柔和的马卡龙色系和圆润的卡片设计

这次开发最大的亮点就是全程“抱大腿”——利用AI大模型来辅助编程。

1. 需求拆解与架构设计

最开始我并没有直接让AI写代码，而是先跟它描述我的构想：“我想做一个基于Web的Markdown查看器，渲染器要用成熟的开源库（如marked.js），但UI要极度可爱，类似Galgame的界面风格，要有粉色为主色调，圆润的卡片设计。”

AI帮我把需求拆分成了几个模块：HTML结构、CSS样式重置、Markdown解析逻辑、以及自定义的渲染规则。这一步帮我理清了思路，避免了上来就陷入细节。

AI生成的CSS配色方案，代码块采用淡紫色背景和粉色高亮，融入萌系风格

2. CSS样式的“炼金术”

这是AI表现最惊艳的地方。我完全不懂怎么配出那种“好看又不腻”的二次元配色，于是我让AI生成了几套配色方案。

利用Canvas实现的飘落樱花花瓣动态背景效果，增加页面的生动感

比如，普通的代码块通常是黑底白字，但我这里希望代码块也融入萌系风格。AI给出的方案是：使用淡紫色作为代码背景，关键字用粉色高亮，甚至给代码块加上了虚线边框和圆角，看起来像是一个个小信笺。

对于复杂的布局，我直接把现有的HTML结构贴给AI，告诉它“把这段文字做成居中的日式竖排风格”或者“给这个表格加上玻璃拟态效果”，AI生成的CSS代码大多能直接复用，稍微微调一下参数就能看到惊艳的效果。

3. 功能实现的捷径

核心的Markdown解析功能，我没有从零造轮子。AI建议我使用marked或markdown-it库，并直接给出了引入CDN的代码和初始化脚本。遇到需要对特定语法（比如任务列表Task List）做自定义样式时，AI也能迅速定位到对应的渲染钩子，帮我注入自定义的HTML类名。

还有一些有趣的细节打磨

在开发过程中，我发现单纯的静态页面还不够味儿。于是我又折腾了几个小功能：

• 动态背景：利用Canvas绘制了一些飘落的樱花花瓣效果，AI写好了粒子系统的核心逻辑，我只负责调整花瓣飘落的速度和透明度，确保不会抢了文字的主体地位。
• 字体回退机制：为了体现萌感，我想用特定的圆体字，但考虑到用户电脑上不一定安装，AI通过CSS的@font-face配合Web Font方案，解决了字体跨平台显示的问题，同时设置了好看的系统字体回退。
• 响应式适配：手机上看这样的UI容易乱，AI自动帮我补全了媒体查询（Media Query），保证了在移动端卡片间距和字体大小的自适应。

遇到的问题与解决方案

当然，过程也不是一帆风顺的，中间也遇到过几个典型的坑：

• 样式冲突：引入的Markdown渲染库自带默认样式，很容易覆盖我的萌系样式。
  • 解决方案：利用CSS优先级，在自定义类名前加上更具体的选择器（如.moe-theme .markdown-body），或者直接在CSS中使用!important强制覆盖（当然这只是偷懒的做法，正规项目还是建议用BEM命名规范）。
• 长文档卡顿：当文档非常长，尤其是包含大量代码和图片时，背景的Canvas动画会导致浏览器渲染压力大。
  • 解决方案：AI建议我使用requestAnimationFrame优化动画循环，并且在滚动页面时暂停复杂的背景渲染计算，从而释放主线程资源。

总结一下

这个项目虽然不大，但它完美展示了AI对于个人开发者的赋能。以前做一个UI工具，我得去啃Bootstrap文档，去搜Penpot模板，现在只需要把脑海里的画面描述清楚，AI就能充当我的“画师”和“切图仔”。

对于很多像我一样的“代码民工”来说，我们可能缺乏美术天赋，但现在的技术栈允许我们用逻辑去弥补审美的短板。如果你也想把自己的工具换个皮，不妨试试让AI带你走出第一步，哪怕是做一个很傻很可爱的东西，也是编程乐趣的一部分。

目前这个查看器我已经部署到了本地，写完代码切过去看一眼，治愈感拉满。未来如果有机会，我打算把它打包成一个浏览器插件，让更多人能享受到“萌化”技术文档的快乐。