muapi-url-to-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

URL to Design

URL转UI重设计

Analyze a website URL and generate a redesigned, improved UI — recreate the visual design with modern aesthetics, better hierarchy, and fresh brand direction.

Estimated credits: ~80 per run.

分析网站URL并生成经过重新设计、优化的UI——以现代美学、更清晰的层级结构和全新的品牌方向重新打造视觉设计。

**预估消耗积分：**每次运行约80积分。

Inputs

输入参数

Name	Type	Required	Default	Description
`url`	text	yes	—	The website URL to analyze and redesign (e.g. "https://example.com/pricing").
`page_type`	text	no	landing page	Type of page — "landing page", "pricing page", "product page", "dashboard", "about page".
`redesign_style`	text	no	modern, minimal, premium, dark mode	The target visual style for the redesign (e.g. "glassmorphism, vibrant gradient", "clean corporate, light mode").
`keep_brand`	text	no	yes	Whether to keep existing brand colors/logo — "yes" or "no" (fully reimagine).
`screenshot`	image_url	no	—	Optional screenshot of the current page if URL cannot be crawled.

名称	类型	是否必填	默认值	描述
`url`	文本	是	—	待分析和重设计的网站URL（例如："https://example.com/pricing"）。
`page_type`	文本	否	landing page	页面类型——可选值："landing page"、"pricing page"、"product page"、"dashboard"、"about page"。
`redesign_style`	文本	否	modern, minimal, premium, dark mode	重设计的目标视觉风格（例如："glassmorphism, vibrant gradient"、"clean corporate, light mode"）。
`keep_brand`	文本	否	yes	是否保留现有品牌颜色/标志——可选值："yes"（是）或"no"（完全重新设计）。
`screenshot`	图片URL	否	—	当URL无法爬取时，可提供当前页面的截图。

Steps

步骤

Phase A — Redesign Generation

阶段A：重设计生成

Submit the plan with TWO parallel steps:

Full-page redesign mockup — If

{{screenshot}}

is provided, use

muapi image edit

(model=

gpt4o-edit

); otherwise use

muapi image generate

(model=

gpt4o-text-to-image

Prompt:

Professional UI/UX redesign of a {{page_type}} for the website at {{url}}. {{redesign_style}} design. Modern web design, 2025 aesthetic. Includes: hero section with clear headline and CTA button, features/benefits section, social proof, clean footer. Pixel-perfect, Figma-quality mockup. Desktop viewport, 1440px width design.

{{keep_brand}}

is "no", add:

Completely reimagined brand identity, new color palette.

Aspect ratio: 9:16 (tall to show full page sections)

Mobile version mockup —

muapi image generate

(model=

bytedance-seedream-v4.5

Prompt:

Mobile-first responsive redesign of the same {{page_type}} — {{redesign_style}} style. iPhone 15 Pro frame, scrollable layout. Clean mobile navigation, thumb-friendly CTAs, optimized for 390px width. Modern 2025 mobile UI design.

Aspect ratio: 9:19.5

After generation:

Present both desktop and mobile mockups side by side
Provide a written summary of design improvements made
Offer to generate specific sections (hero, pricing cards, testimonials) as separate assets

执行计划包含两个并行步骤：

整页重设计原型 — 如果提供了

{{screenshot}}

，使用

muapi image edit

（模型=

gpt4o-edit

）；否则使用

muapi image generate

（模型=

gpt4o-text-to-image

）：

提示词：

为{{url}}网站的{{page_type}}进行专业UI/UX重设计。采用{{redesign_style}}风格。符合2025年现代网页设计美学。包含：带有清晰标题和CTA按钮的Hero区域、功能/优势板块、社交证明、简洁页脚。像素级精准，达到Figma品质的原型。桌面端视口，1440px宽度设计。

如果

{{keep_brand}}

为"no"，添加：

完全重塑品牌标识，使用全新配色方案。

宽高比：9:16（纵向尺寸，以展示完整页面板块）

移动端版本原型 — 使用

muapi image generate

（模型=

bytedance-seedream-v4.5

）：

提示词：

针对同一{{page_type}}进行移动端优先的响应式重设计——采用{{redesign_style}}风格。iPhone 15 Pro框架，可滚动布局。简洁移动端导航，适合拇指操作的CTA，针对390px宽度优化。符合2025年现代移动端UI设计。

宽高比：9:19.5

生成完成后：

将桌面端和移动端原型并排展示
提供设计改进的书面总结
可提供特定板块（Hero、定价卡片、客户评价）的单独生成服务

Notes

注意事项

If the URL is unreachable, ask the user to provide a screenshot or describe the current design.
Always improve: typography hierarchy, whitespace, CTA visibility, and mobile responsiveness.

如果URL无法访问，请要求用户提供截图或描述当前设计。
始终优化以下方面：排版层级、留白、CTA可见性和移动端响应式效果。

Trigger Keywords

触发关键词

url to design

redesign website

website redesign

ui redesign

landing page design

page redesign

website to design

convert url to design

url to design

redesign website

website redesign

ui redesign

landing page design

page redesign

website to design

convert url to design

Notes for the Executing Agent

执行Agent注意事项

This recipe is LLM-orchestrated: read each phase, gather any missing inputs from the user, then call
```
muapi
```
CLI commands. Use
```
muapi auth configure
```
first if
```
MUAPI_API_KEY
```
is unset.

For model IDs without a CLI alias yet, fall back to the raw endpoint via

curl -X POST https://api.muapi.ai/api/v1/<endpoint> -H "x-api-key: $MUAPI_API_KEY" -H 'content-type: application/json' -d '{...}'

and poll with

muapi predict wait <request_id>

Substitute
```
{{input_name}}
```
placeholders with the user's actual inputs before issuing each call.

本流程由LLM编排：阅读每个阶段内容，向用户收集缺失的输入参数，然后调用
```
muapi
```
CLI命令。如果
```
MUAPI_API_KEY
```
未设置，请先执行
```
muapi auth configure
```
。

对于尚未有CLI别名的模型ID，可通过原始端点调用：

curl -X POST https://api.muapi.ai/api/v1/<endpoint> -H "x-api-key: $MUAPI_API_KEY" -H 'content-type: application/json' -d '{...}'

，并使用

muapi predict wait <request_id>

轮询结果。

在发起每次调用前，将
```
{{input_name}}
```
占位符替换为用户的实际输入参数。