人工智能（AI）的热潮已持续相当一段时间。在深度体验AI的这段时间里，我愈发深刻地体会到：即便是不具备编程背景的“小白”，也能借助AI的力量，将创意构想付诸实践。
以我最近的实践为例，我利用AI独立开发了一款名为 MDtoIMG 的小工具。其核心功能是将Markdown文档转换为多种风格的精美图片，便于分享。你可以通过以下链接亲自体验：
markly-style-craft.netlify.app/
缘起：一个简单的需求
当前，AI的应用无处不在，我们越来越习惯于向AI寻求答案。众所周知，AI的回答常以Markdown格式呈现。然而，在分享这些内容时，直接暴露原始的Markdown语法标记往往不甚美观，也无法直观展现最终效果。于是，一个想法应运而生：能否开发一个工具，将Markdown内容渲染成更具视觉吸引力的样式，并生成图片以便分享？
实践： AI 驱动的开发之旅
想法既定，我立刻着手实践。
第一步：使用 Lovable 生成基础架构
我首先打开了 AI 代码生成工具 lovable，并输入了以下指令，旨在明确需求并指导 AI 完成初步构建（当然这个指令也不是我手敲的，而是让kimi的提示词专家帮我写的）：
- Role: 软件架构师和界面设计师
- Background: 用户需要一个将Markdown文档转换为多种风格图片的工具，用于内容创作、社交媒体发布或商业展示等场景。用户希望工具界面美观、操作便捷，并支持多种风格，以满足不同场景的需求。
- Profile: 你是一位资深的软件架构师和界面设计师，拥有丰富的软件开发经验和界面设计能力，擅长将复杂的功能需求转化为简洁易用的界面，并确保软件的稳定性和高效性。
- Skills: 你精通多种编程语言和框架，熟悉图像处理、界面设计、用户交互等技术领域，能够设计出美观大方且功能强大的软件架构。
- Goals: 设计并开发一个界面美观、操作便捷的工具，支持将Markdown文档转换为多种风格的图片，并提供丰富的导出选项。
- Constrains: 确保工具的界面简洁明了，易于上手，同时支持至少10种不同的风格，且每种风格的转换效果高质量、高一致性。
- OutputFormat: 提供详细的软件架构设计文档、界面设计图、功能模块说明以及示例代码片段。
- Workflow:
1. 分析Markdown文档的结构和内容，提取关键信息。
2. 设计支持多种风格的图片模板，包括小红书风格、赛博朋克风格、简约风、商务风、海报风等。
3. 实现图片生成引擎，将Markdown内容与模板结合，生成高质量的图片。
4. 开发用户界面，提供便捷的操作方式，支持风格选择、图片预览和导出功能。
- Examples:
- 例子1：Markdown文档内容为一篇旅行日记，用户选择“小红书风格”，生成的图片具有清新、文艺的视觉效果，适合在小红书上分享。
- 例子2：Markdown文档内容为技术文档，用户选择“商务风”，生成的图片具有专业、简洁的视觉效果，适合在商务场合使用。
- 例子3：Markdown文档内容为活动宣传文案，用户选择“海报风”，生成的图片具有强烈的视觉冲击力，适合用于活动宣传海报。
执行指令后，lovable 迅速生成了项目的初始版本（效果如下图所示）。
这个原型基本符合预期，为后续优化奠定了基础。此时，lovable 的阶段性任务完成，我随即将代码推送至 GitHub 进行版本管理。
第二步：借助 Cursor 进行代码优化
接下来，我将代码克隆到本地，并启用 AI 辅助编程工具 Cursor 进行深度优化。此阶段的核心目标聚焦于提升用户体验和视觉效果：
-
优化页面布局： 调整整体结构，避免内容撑满屏幕，使布局更显合理与优雅。
-
提升风格效果： 细致打磨每种预设风格的样式，确保美观度，并保证转换效果的高质量与一致性。
-
增强移动端适配： 确保工具在各类移动设备上均能正常显示和操作。
-
优化导出功能： 针对移动端阅读习惯，增大导出图片的字体大小，提升可读性。
-
……
在 Cursor 的智能辅助下，通过逐步迭代和精细调整，MDtoIMG 的界面布局、风格呈现、移动端适配及导出体验均得到了显著提升，最终达到了令人满意的效果（如下图所示）。
再次将优化后的代码提交至 GitHub。
第三步：选择 Netlify 实现网站部署
万事俱备，只欠发布。我首先考虑了 Vercel 平台。Vercel 对于 Next.js 等框架支持良好，能够基于 GitHub 仓库实现自动化编译和部署，操作十分便捷且提供免费额度。只需导入 GitHub 项目，Vercel 便会自动完成后续流程。
然而，考虑到 Vercel 的默认域名在国内访问可能存在障碍，且自定义域名需要额外购买和配置，我转而选择了另一个优秀的部署平台——Netlify。Netlify 的功能与 Vercel 类似，同样支持从 GitHub 自动部署，且其分配的域名在国内通常具有更好的访问性。最终，MDtoIMG 成功上线，大家可以通过以下地址访问：
markly-style-craft.netlify.app/
总结：简洁高效的开发流程
回顾整个开发流程，可以清晰地看到利用AI开发是如此简单：
-
使用 lovable 生成基础前端代码。
-
将代码提交至 GitHub 进行版本管理。
-
运用 Cursor 进行代码优化和功能完善。
-
通过 Netlify（或 Vercel）快速部署网站。
结语
这个实例清晰地展示了，在 AI 工具的加持下，技术门槛正在被显著降低。即使是从零开始，只要有想法、善用工具，将创意转化为实际应用已不再是少数专业人士的专利。
这里是我其他的一些想法：
- 开发者工具箱 www.huhage.fun/
- 留言墙 www.huhawall.fun/
