文章介绍了一个可视化网页生成工具,该工具基于TailwindCSS和Preline UI组件库,允许用户自定义样式并生成漂亮可控的网页。文章还提到了如何使用该工具,包括调整样式、导出样式和提示词、复制提示词和下载文件等步骤。
文章描述了一个基于TailwindCSS和Preline UI的可视化网页生成工具,解决了模型生成结果过于随机的问题,并提供了样式探索工具让用户自定义样式。
详细说明了生成网页的内容要求(如所有页面内容必须为简体中文,保持原文件的核心信息等)和技术规范(如使用HTML5、TailwindCSS、Preline UI等)。
作者表达了对技术进步的复杂情绪,探讨了技术的进步是在取代还是赋能创作者的问题,并强调了技术的本质始终是人类思想的延伸和工具。
前段时间很多人用了我那套帮你从文档生成漂亮可视化网页的提示词。
后面也有很多朋友基于那个进行了很多创新,但是我发现有个问题一直没有被解决。
模型每次生成的结果过于随机了
,有时候很好看,有时候虽然好看但是不太符合我的喜好。
所以就想能不能让大家用更加可视化的方式探索方案,之后再生成。
还真让我搞出来了一套非常优雅的方案,我写了一个样式探索工具。
你可以自己在这个网页上自定义各种基础的样式,或者你可以直接点击随机生成,直到随机到你喜欢的
。
然后用用新的提示词和网页导出的文件就可以生成更加漂亮可控的网页
。
不用担心每次随机都很丑,我做了很多的视觉约束,会保证每次生成的基本美学表现。
可以来试试:
https://60mcp23013.yourware.so/
比如下面这就是同样的一个简历用了我这个工具生成的不同样式的结果,是不是感觉比上个版本强了非常多。
先介绍一下怎么使用
整个页面的核心就是两个部分一个是调整样式,一个是导出样式和提示词。
首先你可以在页面左侧对网页样式进行调整,比如主题色、辅助色、字体、大小、字间距、按钮样式等。
然后可以在右侧预览,预览这里我也做的很细,做了三个页面首页、产品、博客,方便你在不同的页面内容上预览。
另外预览的部分还支持手机、电脑、平板不同页面宽度的预览,另外咱们的夜间模式也是有的。
我知道你们看着左边密密麻麻的元素头疼,所以还给大家两个兜底,首先你可以选择预设的各种风格模板,另外的话
可以点击「随机生成」按钮,点完所有的元素都会变化,多点几次选你们喜欢的就好了
。
最后就是导出和如何使用了,点击导出样式之后,你可以在左侧的 Tab 抽屉看到提示词和对应的代码,觉得看不懂是吧,没问题,我已经考虑到了,你
只需要复制提示词、点击下载文件
。
之后
将你自己的内容文档、提示词和下载下来的 Json 文件一起扔给 Claude 回车就行
,其他一概不用管。
当然还有提示词
虽然网页上面可以复制提示词,但这里还是写一下,方便大家收藏,其中 json 部分需要在网页生成。
我会给你一个文件,分析内容,并将其转化为美观漂亮的中文可视化网页:
## 内容要求
- 所有页面内容必须为简体中文
- 保持原文件的核心信息,但以更易读、可视化的方式呈现
- 在页面底部添加作者信息区域,包含:
- 作者姓名: []
- 社交媒体链接: 至少包含Twitter/X:
-