# Hero Studio · 在线设计并导出 Hero 区块 | Creght Blocks

> 组合布局与动态背景，编辑文案，预览桌面和手机效果，并导出 React 代码。

[返回组件库](/zh-CN.md)

# Hero StudioBETA

[EN](/hero-studio.md) [中文](/zh-CN/hero-studio.md)草稿自动保存在本机重置预览导出代码

01 / LAYOUT

## 选择布局

先定前景结构，文案和背景会跟随保留。

AI 输入框03Mockup02

A little idea. A world of possibility.

# Your next big thing starts with an idea.

A creative workspace for turning what you imagine into what comes next. Dream it. Describe it. Make it real.

Describe what you want to create…

Bring your ideas to life

A portfolio websiteA new brand identityMy next big idea

Start with an idea. Make it something real.

**居中输入框** 让想法成为视觉焦点

A little idea. A world of possibility.

# Your next big thing starts with an idea.

A creative workspace for turning what you imagine into what comes next. Dream it. Describe it. Make it real.

[Start creating](#start)

Your creative co-pilot

Describe what you want to create…

Bring your ideas to life

A portfolio websiteA new brand identityMy next big idea

Start with an idea. Make it something real.

**左文右框** 介绍产品，引导创作

![](https://fsu.creght.com/site/2083536173505974272/1790430741908__hero_sphere_ai_creghtai.png?w=3072&fmt=webp)

**CreghtAI** 截图同款导航、标题与输入框

同一个想法，换一种表达。

切换布局不会清空你的文案。

实时预览居中输入框

桌面手机

your-next-idea.com

正在准备画布…

AI 输入框/Cunda Rays·暗色系1200 × 860·75%

MAKE IT YOURS选布局→换背景→调参数→带走代码

背景内容

## 让背景定义氛围

先选择色系，再挑选背景与调整细节。

暗色系亮色系

深色背景搭配浅色文字，适合强调光影与沉浸感。

![](https://fsu.creght.com/site/2083536173505974272/1790153799366__cunda_hero_background_cover.png?w=3072&fmt=webp)
Cunda Rays
![](https://fsu.creght.com/site/2083536173505974272/1788402652071__background_ai_liquid_cover.png?w=3072&fmt=webp)
AI Liquid
![](/covers/cargo-liquid.svg)
Cargo 液态渐变
![](https://fsu.creght.com/site/2083536173505974272/1790430741908__hero_sphere_ai_creghtai.png?w=3072&fmt=webp)
Arc Flow
![](https://fsu.creght.com/site/2083536173505974272/1788336621574__background_neuro_noise_cover.png?w=3072&fmt=webp)
Neuro Noise

**Cunda Rays** 流动光束

已应用

效果参数重置参数

光束颜色 A#EAB308光束颜色 B#0079FF流动速度4.0光照强度3.0光束扩散3.0光源位置右上左上右下左下倾斜角度-3网格透明度0.25

更多参数

双色混合0.65饱和度2.0光线衰减1.5光束透明度1.00

内容可读性

暗色遮罩0.24

降低背景亮度，让浅色文字更清晰。

每种背景的参数会独立保存

TAKE IT WITH YOU

## 你的 Hero，准备好了。

一个 TSX 文件，包含当前布局、背景源码和所有参数。

React + Tailwind CSS v4 `npm install lucide-react ogl`

GeneratedHero.tsx保存后引入 <GeneratedHero />

下载 TSX复制代码

> 全站页面清单：[/llms.txt](/llms.txt)