首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >我发现了一个逆天的AI设计网站,足以干翻所有UI设计师

我发现了一个逆天的AI设计网站,足以干翻所有UI设计师

作者头像
AIGC新知
发布2025-09-04 11:42:49
发布2025-09-04 11:42:49
3630
举报
文章被收录于专栏:AIGC新知AIGC新知

我刷到一个专门用来设计网页/iPhone UI设计的网站。

Aura,这是一款AI驱动的设计助手,将 AI 的强大功能与直观的设计工具相结合,帮助你比以往更快地创建令人惊叹的设计。

先看一下AI可以做到的程度:

link:https://aura.build/share/L7780PW

其实,非常让我惊叹的是,它的设计哲学。

他将HTML设计样式融入到了产品构建里面,

在刚开始使用的时候,有一个prompt Builder

点击进入,里面支持了各种不同样式。

从layout类型,样式、交互动画以及字体家族,应有尽有。

所以有效的提示词非常重要。

网页设计提示词应该怎么写

在提示词里面可以包括:

  • 框架首选项(Tailwind、Bootstrap 等)
  • 组件结构和布局
  • 配色方案和造型细节
  • 响应式行为要求
  • 互动元素和动画

比如简单的提示词,基本没啥作用。

代码语言:javascript
复制
Create a contact form

如果是专业一点的提示词,设计出来的会更加美观,搭配提示词构建器。

代码语言:javascript
复制
Generate a responsive contact form using Tailwind CSS with form validation, floating labels, and a subtle purple accent color.

要知道,一个专业AI产品网站需要包含很多元素,什么导航栏、特性、定价等等。

一个优秀、精美的HTML生成的技巧包括:

1、指定框架或库

提及想要普通 HTML/CSS 还是特定框架,如 Tailwind CSS、Bootstrap 或 Material UI。

代码语言:javascript
复制
Generate a contact form using Tailwind CSS with responsive design and form validation.

2、定义组件结构

概述需要的关键要素,包括导航栏,feature、price等等。

代码语言:javascript
复制
Create a product card with image at the top, product title, price, short description, and an 'Add to Cart' button.

如下可以作为常见 UI 组件的模板:

Hero

代码语言:javascript
复制
Generate a modern hero section for a SaaS product with Tailwind CSS. Include a headline, subheading, CTA button, and a floating mockup image on the right side. Make it fully responsive.

link:https://aura.build/share/aO0UxR

3、响应行为要求

指定页面设计应如何适应不同的屏幕尺寸。

代码语言:javascript
复制
Create a navbar that collapses into a hamburger menu on mobile devices under 768px width.

指定断点:准确定义布局应更改的时间。

代码语言:javascript
复制
Create a layout that switches from 3 columns on desktop (1024px+) to 2 columns on tablet (768px to 1023px) and 1 column on mobile (below 768px).

描述特定于移动设备的行为:详细说明元素应该如何适应。

包括说web,mobile,ipad,有不同的样式风格。

代码语言:javascript
复制
On mobile, the navigation menu should collapse into a hamburger icon that, when clicked, reveals a full-screen overlay menu with a close button in the top-right corner.

优先考虑移动内容:解释哪些内容最重要。

代码语言:javascript
复制
On mobile, prioritize the sign-up form by placing it above the feature list. On desktop, display them side-by-side.

指定触摸友好元素:请求触摸界面的适当大小。

代码语言:javascript
复制
Make all buttons at least 44px tall on mobile for better touch targets, with 16px spacing between interactive elements.

4、参考风格指南或品牌颜色

接下来掌握制作有效提示的艺术,就可以使用不同的视觉方法、主题、颜色和效果来设计 UI 组件的样式。

代码语言:javascript
复制
Use the color palette #3A86FF (primary), #FF006E (accent), and #FFFFFF (background) with rounded corners (8px radius).

有现代极简主义的样式

代码语言:javascript
复制
Create a minimalist login form with clean typography, subtle borders, and a single accent color for the submit button.

也有表现丰富张力的。

代码语言:javascript
复制
Design a creative portfolio hero section with vibrant gradients, bold typography, and animated elements that showcase personality.

往往品牌的颜色可以影响用户行为、传达品牌个性并提高可用性。

颜色使用指南

  • 原色: 用于主要作、链接和品牌元素(占界面的 5-10%)
  • 辅助色: 用于辅助动作和支撑元件(占接口的 15-20%)
  • 中性色: 用于文本、背景和边框(界面的 70-80%)
  • 语义颜色: 保留红色表示错误,绿色表示成功,黄色表示警告

5、互动元素

以此描述你需要的动画或效果。

代码语言:javascript
复制
Include a hover effect that scales the card by 1.05x and adds a subtle shadow when users hover over the product.

常见的动画效果包括了淡入淡出、模糊、序列动画等。

淡入效果: 逐渐显现出微妙、优雅的入口元素。

代码语言:javascript
复制
Add a simple fade-in animation to the hero section that transitions from opacity 0 to 1 over 800ms with an ease-in-out timing function.

滑入式动画: 将元素从屏幕外移动到适当的位置。

代码语言:javascript
复制
Create a slide-in animation for the sidebar that enters from the left with a transform: translateX(-100%) to translateX(0) transition.

模糊效果: 从模糊过渡到清晰,以获得戏剧性的揭示。

代码语言:javascript
复制
Apply a blur-in effect to images where they start with filter: blur(10px) and transition to filter: blur(0) when they enter the viewport.

序列动画(Sequenced Animations): 跨多个元素错开动画。

代码语言:javascript
复制
Create a staggered entrance for list items where each item appears 150ms after the previous one using incremental animation-delay values.

当然可以用Javascript库的设计思路,比如用Vanta.js来设计。

代码语言:javascript
复制
Use Vanta.js BIRDS effect as a subtle animated background for our newsletter signup section.

Vanta.js示例:

link:https://aura.build/share/bg8BfOOC

6、提供参考或灵感

指向现有设计。

代码语言:javascript
复制
Create a testimonial section similar to those on Airbnb's homepage with avatar, quote, and customer name.

好的UI设计离不开排版,这是基础。

但是往往,我们与AI交互的时候,很难表达清楚我们需要的是什么,一来是因为我们对这个排版掌握的不太深刻,每个人认知不一样,二来是我们给它表达的不够明确,模棱两可,需要专业术语。

良好排版有三要素:

  • 等级制度:标题、副标题和正文之间的清晰视觉区别,引导读者的视线。
  • 可读性:适当的字体选择、大小和间距,使内容易于在不同设备上阅读。
  • 一致性:一种系统的字体方法,在整个设计中创造和谐。

web网页

这是一个Space Exploration Website Interface,带一点科幻+水晶样式。

Feature

这个是动态网页,因为平台限制无法嵌入,可以看原网页:https://aura.build/share/8NfVPdJP

导航栏:

代码语言:javascript
复制
Design a sticky navigation bar with logo on left, navigation links in center, and login/signup buttons on right. Make it collapse to a hamburger menu on mobile, with a smooth slide-in animation.

Pricing

侧边栏

login

Onbording

mobile

Home主页

chart图表

交互

动画

这个是我最喜欢的一版。

还有这种3D交互的。

写在最后

UI设计真的,已经可以让AI来做了。

UI设计师、产品经理等确实有一种危机感了。

目前看来,精准提示词还是核心,结合业务场景来做,

所有的AI编程、AI智能体,绕不开的一环,就是提示词写的是否优秀。

看到最后这个with cursor,我是大写的服。

拿用AI设计UI来说,需要了解各种设计样式,色彩理论,美学基础,才能设计出体感还可以的UI。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2025-08-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 AIGC新知 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 网页设计提示词应该怎么写
    • 1、指定框架或库
    • 2、定义组件结构
    • 3、响应行为要求
    • 4、参考风格指南或品牌颜色
    • 5、互动元素
    • 6、提供参考或灵感
  • web网页
  • mobile
  • 动画
  • 写在最后
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档