专栏名称: 歸藏的AI工具箱
产品设计师🎨 AI画图工具操作员🔧 AI课程撰写与信息收集整理📰 致力于发掘借助AI工具改善设计与产品开发流程的各种可能性🤔
目录
相关文章推荐
51好读  ›  专栏  ›  歸藏的AI工具箱

为了让大家一键生成更漂亮的可视化网页,我写了个工具!

歸藏的AI工具箱  · 公众号  · 互联网安全  · 2025-03-21 17:24

主要观点总结

文章介绍了一个可视化网页生成工具,该工具基于TailwindCSS和Preline UI组件库,允许用户自定义样式并生成漂亮可控的网页。文章还提到了如何使用该工具,包括调整样式、导出样式和提示词、复制提示词和下载文件等步骤。

关键观点总结

关键观点1: 可视化网页生成工具介绍

文章描述了一个基于TailwindCSS和Preline UI的可视化网页生成工具,解决了模型生成结果过于随机的问题,并提供了样式探索工具让用户自定义样式。

关键观点2: 工具的使用方法

介绍了如何使用该工具,包括调整样式、导出样式和提示词、预览不同页面内容等步骤。

关键观点3: 内容要求和技术规范

详细说明了生成网页的内容要求(如所有页面内容必须为简体中文,保持原文件的核心信息等)和技术规范(如使用HTML5、TailwindCSS、Preline UI等)。

关键观点4: 交互体验和性能优化

强调了添加微交互效果提升用户体验和页面性能优化的重要性。

关键观点5: 作者对技术进步的看法

作者表达了对技术进步的复杂情绪,探讨了技术的进步是在取代还是赋能创作者的问题,并强调了技术的本质始终是人类思想的延伸和工具。


正文

前段时间很多人用了我那套帮你从文档生成漂亮可视化网页的提示词。

后面也有很多朋友基于那个进行了很多创新,但是我发现有个问题一直没有被解决。

模型每次生成的结果过于随机了 ,有时候很好看,有时候虽然好看但是不太符合我的喜好。

所以就想能不能让大家用更加可视化的方式探索方案,之后再生成。

还真让我搞出来了一套非常优雅的方案,我写了一个样式探索工具。

你可以自己在这个网页上自定义各种基础的样式,或者你可以直接点击随机生成,直到随机到你喜欢的

然后用用新的提示词和网页导出的文件就可以生成更加漂亮可控的网页

不用担心每次随机都很丑,我做了很多的视觉约束,会保证每次生成的基本美学表现。

可以来试试: https://60mcp23013.yourware.so/

比如下面这就是同样的一个简历用了我这个工具生成的不同样式的结果,是不是感觉比上个版本强了非常多。

先介绍一下怎么使用

整个页面的核心就是两个部分一个是调整样式,一个是导出样式和提示词。

首先你可以在页面左侧对网页样式进行调整,比如主题色、辅助色、字体、大小、字间距、按钮样式等。

Image

然后可以在右侧预览,预览这里我也做的很细,做了三个页面首页、产品、博客,方便你在不同的页面内容上预览。

另外预览的部分还支持手机、电脑、平板不同页面宽度的预览,另外咱们的夜间模式也是有的。

Image

我知道你们看着左边密密麻麻的元素头疼,所以还给大家两个兜底,首先你可以选择预设的各种风格模板,另外的话 可以点击「随机生成」按钮,点完所有的元素都会变化,多点几次选你们喜欢的就好了

Image

最后就是导出和如何使用了,点击导出样式之后,你可以在左侧的 Tab 抽屉看到提示词和对应的代码,觉得看不懂是吧,没问题,我已经考虑到了,你 只需要复制提示词、点击下载文件

之后 将你自己的内容文档、提示词和下载下来的 Json 文件一起扔给 Claude 回车就行 ,其他一概不用管。

Image


当然还有提示词

虽然网页上面可以复制提示词,但这里还是写一下,方便大家收藏,其中 json 部分需要在网页生成。

我会给你一个文件,分析内容,并将其转化为美观漂亮的中文可视化网页:

## 内容要求

- 所有页面内容必须为简体中文
- 保持原文件的核心信息,但以更易读、可视化的方式呈现
- 在页面底部添加作者信息区域,包含:
    - 作者姓名: []
    - 社交媒体链接: 至少包含Twitter/X:
    -






请到「今天看啥」查看全文