之前是Claude 3.7 生成 APP/网站 UI 设计稿的提示词,这次更直接一些,直接生成手机自适应的网站。
原来一周的网页开发量,现在五分钟就能靠 ai 自动生成,而且美观度,交互体验,和功能细节都比我手写的要好🥲。哎,等待 ai 生成代码的时间,我还去洗了个澡 ╮(¯▽¯)╭ 这个时代真好。
用重新设计我的博客网站做示例。
提示词
我想开发一个程序员的个人博客网站,需要手机自适应,现在需要输出网页代码,请通过以下方式帮我完成所有界面的代码: 1、用户体验分析:先分析这个网站的主要功能和用户需求,确定核心交互逻辑。主要包括首页文章列表,文章详情页,分类/Tag 页面等,文章编辑页。 2、产品界面规划:作为产品经理,定义关键界面,确保信息架构合理。 3、高保真 UI 设计:作为 UI 设计师,设计贴近真实 网页设计规范的界面,使用现代化的 UI 元素,使其具有良好的视觉体验。 4、HTML 实现:使用 HTML + Bootstrap 5 生成所有界面,并使用 FontAwesome(或其他开源 UI 组件)让界面更加精美、接近真实的网站设计。拆分代码文件,保持结构清晰: 5、每个界面应作为独立的 HTML 文件存放,例如 index.html、article.html 等。index.html 作为主入口。 真实感增强:优先保持手机的体验,然后才是电脑端,做到自适应 。 使用真实的 UI 图片,而非占位符图片(可从 Unsplash、Pexels、Apple 官方 UI 资源中选择)。请按照以上要求生成完整的 HTML 代码。
微信关注我哦 👍
我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式