
我刷到一个专门用来设计网页/iPhone UI设计的网站。
Aura,这是一款AI驱动的设计助手,将 AI 的强大功能与直观的设计工具相结合,帮助你比以往更快地创建令人惊叹的设计。
先看一下AI可以做到的程度:


link:https://aura.build/share/L7780PW
其实,非常让我惊叹的是,它的设计哲学。
他将HTML设计样式融入到了产品构建里面,
在刚开始使用的时候,有一个prompt Builder

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

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

所以有效的提示词非常重要。
在提示词里面可以包括:
比如简单的提示词,基本没啥作用。
Create a contact form
如果是专业一点的提示词,设计出来的会更加美观,搭配提示词构建器。
Generate a responsive contact form using Tailwind CSS with form validation, floating labels, and a subtle purple accent color.
要知道,一个专业AI产品网站需要包含很多元素,什么导航栏、特性、定价等等。
一个优秀、精美的HTML生成的技巧包括:
提及想要普通 HTML/CSS 还是特定框架,如 Tailwind CSS、Bootstrap 或 Material UI。
Generate a contact form using Tailwind CSS with responsive design and form validation.
概述需要的关键要素,包括导航栏,feature、price等等。
Create a product card with image at the top, product title, price, short description, and an 'Add to Cart' button.
如下可以作为常见 UI 组件的模板:
Hero
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
指定页面设计应如何适应不同的屏幕尺寸。
Create a navbar that collapses into a hamburger menu on mobile devices under 768px width.
指定断点:准确定义布局应更改的时间。
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,有不同的样式风格。
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.
优先考虑移动内容:解释哪些内容最重要。
On mobile, prioritize the sign-up form by placing it above the feature list. On desktop, display them side-by-side.
指定触摸友好元素:请求触摸界面的适当大小。
Make all buttons at least 44px tall on mobile for better touch targets, with 16px spacing between interactive elements.
接下来掌握制作有效提示的艺术,就可以使用不同的视觉方法、主题、颜色和效果来设计 UI 组件的样式。
Use the color palette #3A86FF (primary), #FF006E (accent), and #FFFFFF (background) with rounded corners (8px radius).
有现代极简主义的样式
Create a minimalist login form with clean typography, subtle borders, and a single accent color for the submit button.

也有表现丰富张力的。
Design a creative portfolio hero section with vibrant gradients, bold typography, and animated elements that showcase personality.

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

颜色使用指南

以此描述你需要的动画或效果。
Include a hover effect that scales the card by 1.05x and adds a subtle shadow when users hover over the product.
常见的动画效果包括了淡入淡出、模糊、序列动画等。
淡入效果: 逐渐显现出微妙、优雅的入口元素。
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.
滑入式动画: 将元素从屏幕外移动到适当的位置。
Create a slide-in animation for the sidebar that enters from the left with a transform: translateX(-100%) to translateX(0) transition.
模糊效果: 从模糊过渡到清晰,以获得戏剧性的揭示。
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): 跨多个元素错开动画。
Create a staggered entrance for list items where each item appears 150ms after the previous one using incremental animation-delay values.

当然可以用Javascript库的设计思路,比如用Vanta.js来设计。
Use Vanta.js BIRDS effect as a subtle animated background for our newsletter signup section.
Vanta.js示例:
link:https://aura.build/share/bg8BfOOC

指向现有设计。
Create a testimonial section similar to those on Airbnb's homepage with avatar, quote, and customer name.
好的UI设计离不开排版,这是基础。
但是往往,我们与AI交互的时候,很难表达清楚我们需要的是什么,一来是因为我们对这个排版掌握的不太深刻,每个人认知不一样,二来是我们给它表达的不够明确,模棱两可,需要专业术语。
良好排版有三要素:

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

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

导航栏:
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

Home主页

chart图表

交互

这个是我最喜欢的一版。

还有这种3D交互的。

UI设计真的,已经可以让AI来做了。
UI设计师、产品经理等确实有一种危机感了。
目前看来,精准提示词还是核心,结合业务场景来做,
所有的AI编程、AI智能体,绕不开的一环,就是提示词写的是否优秀。

看到最后这个with cursor,我是大写的服。
拿用AI设计UI来说,需要了解各种设计样式,色彩理论,美学基础,才能设计出体感还可以的UI。