突然决定“开始AI编码吧！”但具体该如何着手呢？本篇“零基础AI编码”系列第二篇，将重点聚焦于应用的“界面设计”。
上次我们用Claude聊天功能尝试一键生成应用，结果却不尽如人意。为了更接近理想中的应用，这次我们调整方法，从头重新制作。
用“Claude Design”确定应用界面风格
作为示例，我们制作的“PDF工具”需求并不复杂，算不上大型应用。但仅凭几行提示语，难以获得理想的内容，这一点我们已经体会到。
上次的问题不仅在程序实现，界面设计同样存在不足。虽然可以通过更详细的提示语改善，但要在一开始就用语言完整表达脑海中的设计并不容易。
此外，应用完成后逐项指出不满意的部分并让AI修改，工作量巨大，且可能导致已有功能出现“回归”问题。
因此，我们引入了新功能“Claude Design”。它不仅适用于应用，也能用于网站和演示文稿设计。只需表达“想要这样的风格”，它便能根据用户意图生成可交互的设计原型。
虽然可以从预设的模板样例中快速开始设计，但（笔者测试时）没有适合桌面应用的模板，因此这次稍微修改了上次的提示语来尝试。
提示语示例
- 运行于日本国家Windows 11的原生GUI应用
- 采用双窗格布局进行PDF文件编辑
- 设计风格亲切且轻快
- 支持以下PDF操作：
- 全页缩略图显示
- 选中缩略图页的全页显示
- 加载、覆盖保存、另存为
- 页面交换、删除、旋转
- 拖放其他PDF文件以插入或追加页面
细节调整轻松完成，减少繁琐操作
输入提示语后，系统会询问补充信息，通过选择几个选项逐步完善设计需求。确认后，只需等待，系统会生成所需文件，最终产出三种设计原型。
生成的原型中，按钮等UI元素支持鼠标点击，基本交互可直接体验。选定一个作为基础方案后，可继续输入提示语，调整细节和动画，打造满意的设计。
想修改某个按钮外观时，点击右上角的“Comment”按钮，再点击目标元素，输入如“把颜色改成XX”的指令即可，操作简单。
如果直接用Claude聊天功能修改已完成应用，往往需要绕弯子描述“某某标签按钮颜色改为XX”，随着UI复杂度增加，工作量也会大幅提升。
而使用Claude Design，可以在初期高效构建UI，最大限度减少后期修改。界面符合个人喜好，使用体验也更佳。若想打造“专属应用”，设计环节尤为关键。
图标素材网站助力统一风格
需要图标时，推荐使用支持个人及商业用途的免费素材网站。Claude在图像生成方面能力有限，借助现有素材能提升整体美感和专业度。可在以下网站挑选喜欢的图标，提供SVG数据或图标名称给Claude替换使用。
- Material Symbols & Icons - Google Fonts
- Heroicons
完成设计后，点击右上角“Share”按钮，选择“Handoff to Claude Code...”，即可下载原型数据或复制设计链接，准备进入下一步基于此设计制作应用。
