Back to Details

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

输入参数

NameTypeRequiredDefaultDescription
url
textyes—The website URL to analyze and redesign (e.g. "https://example.com/pricing").
page_type
textnolanding pageType of page — "landing page", "pricing page", "product page", "dashboard", "about page".
redesign_style
textnomodern, minimal, premium, dark modeThe target visual style for the redesign (e.g. "glassmorphism, vibrant gradient", "clean corporate, light mode").
keep_brand
textnoyesWhether to keep existing brand colors/logo — "yes" or "no" (fully reimagine).
screenshot
image_urlno—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:
  1. 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.
    • If 
      {{keep_brand}}
      is "no", add: 
      Completely reimagined brand identity, new color palette.
    • Aspect ratio: 9:16 (tall to show full page sections)
  2. 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
执行计划包含两个并行步骤：
  1. 整页重设计原型 — 如果提供了
    {{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（纵向尺寸，以展示完整页面板块）
  2. 移动端版本原型 — 使用
    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}}
    占位符替换为用户的实际输入参数。