关于 muapi-url-to-design
muapi-url-to-design 是一项由 LLM 编排的技能,可根据网站 URL 或提供的截图生成桌面和移动端改版模型图。它支持指定页面类型、视觉方向以及是否保留现有品牌。
主要功能
- 01生成桌面端改版模型图
- 02生成移动端改版模型图
- 03指定页面类型和视觉风格
- 04选择是否保留品牌元素
- 05URL 无法抓取时使用截图
适用场景
- 01探索落地页改版方案
- 02比较页面的桌面和移动端构想
- 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——以现代美学、更清晰的层级和全新的品牌方向重现视觉设计。
输入
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
url | text | 是 | — | 要分析并重新设计的网站 URL(例如 "https://example.com/pricing")。 |
page_type | text | 否 | landing page | 页面类型——"landing page"、"pricing page"、"product page"、"dashboard"、"about page"。 |
redesign_style | text | 否 | modern, minimal, premium, dark mode | 重新设计的目标视觉风格(例如 "glassmorphism, vibrant gradient"、"clean corporate, light mode")。 |
keep_brand | text | 否 | yes | 是否保留现有品牌颜色和标志——"yes" 或 "no"(完全重新构想)。 |
screenshot | image_url | 否 | — | 当前页面的可选截图(适用于无法抓取 URL 的情况)。 |
步骤
阶段 A — 生成重新设计方案
并行执行以下两个步骤,提交方案:
-
整页重新设计稿——如果提供了
{{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(纵向较长,以展示完整页面各区块)
- 提示词:
-
移动版设计稿——使用
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 注意事项
- 此方案由大模型编排:阅读各个阶段,向用户收集任何缺失的输入,然后调用
muapiCLI 命令。如果未设置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