mcpField
M
muapi-url-to-design

muapi-url-to-design

github.com/samuraigpt设计与 UI25659 次安装4 周前更新
代码仓库

关于 muapi-url-to-design

muapi-url-to-design 是一项由 LLM 编排的技能,可根据网站 URL 或提供的截图生成桌面和移动端改版模型图。它支持指定页面类型、视觉方向以及是否保留现有品牌。

主要功能

  1. 01生成桌面端改版模型图
  2. 02生成移动端改版模型图
  3. 03指定页面类型和视觉风格
  4. 04选择是否保留品牌元素
  5. 05URL 无法抓取时使用截图

适用场景

  1. 01探索落地页改版方案
  2. 02比较页面的桌面和移动端构想
  3. 03根据提供的截图改版页面

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/samuraigpt/generative-media-skills --skill muapi-url-to-design

安装后在 Claude Code 中输入/muapi-url-to-design确认已加载。

详细介绍

URL 转设计

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

输入

名称类型必填默认值描述
urltext是—要分析并重新设计的网站 URL(例如 "https://example.com/pricing")。
page_typetext否landing page页面类型——"landing page"、"pricing page"、"product page"、"dashboard"、"about page"。
redesign_styletext否modern, minimal, premium, dark mode重新设计的目标视觉风格(例如 "glassmorphism, vibrant gradient"、"clean corporate, light mode")。
keep_brandtext否yes是否保留现有品牌颜色和标志——"yes" 或 "no"(完全重新构想)。
screenshotimage_url否—当前页面的可选截图(适用于无法抓取 URL 的情况)。

步骤

阶段 A — 生成重新设计方案

并行执行以下两个步骤,提交方案:

  1. 整页重新设计稿——如果提供了 {{screenshot}},则使用 muapi image edit(model=gpt4o-edit);否则使用 muapi image generate(model=gpt4o-text-to-image):

    • 提示词:为网站 {{url}} 的 {{page_type}} 进行专业 UI/UX 重新设计。采用 {{redesign_style}} 设计风格。现代网页设计,2025 年美学风格。包含:带有清晰标题和 CTA 按钮的首屏、功能/优势部分、社会认同内容、简洁页脚。像素级精准、Figma 质量的设计稿。桌面视口,设计宽度为 1440px。
    • 如果 {{keep_brand}} 为 "no",则添加:品牌形象彻底焕新,并采用全新配色方案。
    • 纵横比:9:16(纵向较长,以展示完整页面各区块)
  2. 移动版设计稿——使用 muapi image generate(model=bytedance-seedream-v4.5):

    • 提示词:为同一 {{page_type}} 进行移动优先的响应式重新设计——采用 {{redesign_style}} 风格。iPhone 15 Pro 机框,可滚动布局。简洁的移动导航,适合拇指操作的 CTA,针对 390px 宽度优化。现代 2025 年移动 UI 设计。
    • 纵横比:9:19.5

生成后:

  • 并排展示桌面版和移动版设计稿
  • 提供一份书面总结,说明所做的设计改进
  • 提出可将特定区块(首屏、定价卡片、用户评价)生成为独立素材

说明

  • 如果无法访问该 URL,请让用户提供截图或描述当前设计。
  • 始终优化:字体层级、留白、CTA 的醒目程度和移动端响应能力。

触发关键词

url to design、redesign website、website redesign、ui redesign、landing page design、page redesign、website to design、convert url to design


执行 Agent 注意事项

  • 此方案由大模型编排:阅读各个阶段,向用户收集任何缺失的输入,然后调用 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}} 占位符替换为用户提供的实际输入。

评论

支持 Markdown