AGENTS THAT ACT
01

AI 网页生成 · Aurora Gradient Hero

Dark canvas, Tesla Red highlight. Fullpage · Parallax · ECharts.

Fullpage ECharts Tailwind
10x
更快的迭代速度 ITERATION SPEED
0 → 1
从空白到可用原型 ZERO‑TO‑PROTOTYPE
可组合的工具链 COMPOSABILITY
TOOLBOX

生成与样式 · 新手友好工具集

页面生成

  • Bolt.new / v0.app / Framer:从提示词到页面与代码。
  • Relume:网站地图/线框/样式指南一键生成。

样式与组件

  • Tailwind + shadcn/ui + Radix:工程化组件基座。
  • daisyUI / HyperUI:拷贝即用的 UI 模块。

布局与排版

  • Layoutit Grid / CSS Grid Generator:可视化网格。
  • Clippy / Fancy Border Radius:形状与边角。

渐变与背景

  • Haikei / Mesh Generators:SVG/CSS 极光/网格渐变。
  • uiGradients / WebGradients / Gradient Hunt:渐变图库。

颜色与动效

  • Coolors / Adobe Color / ColorBox:配色与色阶。
  • GSAP + ScrollTrigger / Lenis:段落切屏与视差。
02
TOOLBOX · LAYOUT · GRADIENT · MOTION
LAYOUT

现代布局:Grid / Flex 与容器查询

A

主视觉 / Hero

B

功能要点 / Features

C

数据可视化 / Chart

建议:用 clamp() 控制标题字号,用 minmax()fr 单位搭配 Grid。

03
RESPONSIVE · GRID · FLEX · CLAMP
AURORA / MESH

极光渐变 · 黑底单色高亮透明度渐变

/* Aurora 背景片段(仅品牌红自身透明度渐变) */
.aurora .blob.red-a{
  background:radial-gradient(40% 40% at 50% 50%, rgba(227,25,55,.55), rgba(227,25,55,0) 65%);
}
.aurora .blob.red-b{
  background:radial-gradient(35% 35% at 50% 50%, rgba(227,25,55,.32), rgba(227,25,55,0) 62%);
}

提示:避免多高亮色互相渐变串色;若要多色,请分层渲染并控制不透明度。

04
GRADIENT · GLOW · OPACITY
CHART

ECharts 勾线图 · 与主题一致的深色样式

05
WIRE · LINE · DARK THEME
PROMPT

高质量提示词 · 直接生成可运行页面

角色:你是前端设计工程师,使用 Tailwind + fullPage.js + ECharts。
目标:生成暗色主题演示站点,首屏为 Aurora Gradient Hero,品牌红 #E31937。
信息架构:Hero / 工具集 / 布局 / 渐变 / 图表 / CTA。
约束:不使用 emoji;仅 transform/opacity 动效;可访问性 AA;无控制台报错。
产出:单文件 HTML,CDN 引入依赖,注释清晰。
07

准备好把想法发布为网页了吗?

Copy this file, tweak tokens, ship it.