前言：
当下AI盛行，使用AI来完成项目事半功倍，当你遇到一个简单的pdf文字需求时， 如何讲文字设计的有感觉？ 今天我将详细讲解一下UI实现从0->1 的过程
话不多说先看成品 : 核桃苑UI设计图-小程序端
核桃苑小程序的UI设计图是通过HTML+JS实现的， 可以实现比较复杂的交互效果，体验感也是杠杠滴
这个pdf需求文件就不给大家看了， 总之非常简洁~
模型大家使用自己喜欢的，Claude, Gemini, GPT都可，AI是哪个不重要， 要看使用它的人， 当然还是推荐大家使用当下比较流行的AI，大家千万不要小看UI设计哦
实现思路：
建议大家使用一个会话来进行提问，因为AI是有Memory的，它可以对你的每一次提问保留记忆，在一个会话中可以保证你的设计风格和样式是一致的， 一定不会有很大的出入。
首先最重要的就是确定整个项目的一个设计风格
1.开启一个对话之前， 我们需要明确我们的目标， 在这个会话中需要AI帮我们做什么， 我们就自己给他定义一个身份
我深知提示词的重要性，所以除了这个会话我还开了一个会话-提示词大师（主要作用：将背景和需求告诉他，让他给你优化一下你的prompt，如果你觉得没有必要，也可以不加）
然后通过需求pdf文档， 让ai给你设计UI实现文档
这个是TUI
这个是AI给我出三种UI方案， 大家可以根据自己的审美或者AI最推荐的找一个最合适的， 上面这三种我选的是第一个， 就是下面这种风格， 根据这个风格先设计出一个简易版的页面， 然后开始在上面添加你需要的东西，这样不管你加什么部分，都会和这种风格很融洽
选择完风格之后， 我们就需要分tab和模块了，通过风格让ai给你排列布局， 如果你不满意， 可以再进行微调 （这里我也是调了不少次 / 笑哭）
这个是第一部分的UI设计想法（这里去实现了但是有点突兀就简单微调了一下）
最终长这个样子
加上UI设计方案结合要展现的内容当做提示词发给AI， 就很无敌了
这种详情的展示都是通过UI设计实现方案和主要模块文字实现的
我对这些UI设计实现方案做了整理， 大概就是这些
具体的实现提示词大概就是这个样子
对于具体的交互大家如果不知道如何实现， 也可以看文档github上的文件结构， 我对其进行了封装， 结构代码清晰 github核桃苑仓库
如果大家有任何问题希望给我issue, 我会及时改正