muapi-url-to-design
Analyze a website URL and generate a redesigned, improved UI — recreate the visual design with modern aesthetics, better hierarchy, and fresh brand direction.
- License 许可
- Apache-2.0
- 最近更新
- 2026-11-13
- Stars
- ★ 1.6k
- Forks
- 483
01 前言 Front Matter
- name
- muapi-url-to-design
- slug
- muapi-url-to-design
- version
- 1.0.0
- description
- Analyze a website URL and generate a redesigned, improved UI — recreate the visual design with modern aesthetics, better hierarchy, and fresh brand direction.
- acceptLicenseTerms
- true
03 SKILL.md 正文
URL to Design
Analyze a website URL and generate a redesigned, improved UI — recreate the visual design with modern aesthetics, better hierarchy, and fresh brand direction.
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. |
Steps
Phase A — Redesign Generation
Submit the plan with TWO parallel steps:
-
Full-page redesign mockup — If
{{screenshot}}is provided, usemuapi image edit(model=gpt4o-edit); otherwise usemuapi 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)
- Prompt:
-
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
- Prompt:
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
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.
Trigger Keywords
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
- This recipe is LLM-orchestrated: read each phase, gather any missing inputs from the user, then call
muapiCLI commands. Usemuapi auth configurefirst ifMUAPI_API_KEYis 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 withmuapi predict wait <request_id>. - Substitute
{{input_name}}placeholders with the user's actual inputs before issuing each call.
04 同仓库更多 Skills
migrate-to-e2e
Moves an existing Playwright, Cypress, Selenium, Appium, Detox, Maestro, or TesterArmy suite to e2e one slice at a time, with the old suite running beside the new one until each ported test is proven. Keeps a MIGRATION.md progress file so any later session resumes where the last stopped. Optionally plants a defect to show both suites catch it. Use for /migrate-to-e2e, "migrate our tests to e2e", "port these Maestro flows", "move our TesterArmy tests", or when a project has an e2e config and an older suite still running.
e2e
Writes, runs, and debugs end-to-end tests for web and mobile apps with e2e, the agentic test runner, which mixes agent.act goals with exact locator assertions on a Playwright browser or an iOS or Android device. Also drives a project's running app live over the e2e MCP server to look at a screen, check a UI change, take a screenshot or record a video, and try a locator; and runs bug bashes, parallel e2e explore runs with each bug proven by a repro test. Use when a project depends on e2e or has an e2e.config.ts, when asked for end-to-end, browser, mobile, or agentic UI tests, to check a change in the running app, to QA or bug bash an app or branch, or when an e2e run fails.
create-verification-skill
Generate a project-local verify-<app> skill on top of e2e, so any coding agent can launch the app, check it is worth driving, exercise a feature the way a user does, keep evidence, and bug bash it. Writes the skill, a feature map with one explore charter per feature, and proves it once. Use for /create-verification-skill, "make a verification skill for this repo", or when a project has no scripted way to prove UI behavior.
deja-search
deja-vu memory — search the user's past AI coding sessions with the deja CLI. Holds what they already settled and never wrote into the repo (naming rules, banned or already-tried tools, required checks before merge, preferred values, who owns what). Use before your first edit in a task, before you call a change done or ready to merge, before you recommend a tool, library, design or reviewer, before re-debugging an error that may already be solved, when they say 'didn't we fix this before', 'what did we decide about X' or 'I already have that', and before telling them something on this machine does not exist.
deja-reflect
End-of-session reflection and memory curation with deja-vu. Review what was decided, what commands broke and what repaired them, and record durable project rules or decisions with deja remember so the next session starts with them.
revid
Make, edit, export and post AI videos with Revid (revid.ai) through the Revid MCP server. Use whenever the user wants a short-form or long-form video made (from an idea, a script, a URL, an article, a PDF, a tweet, a product page, their own clips, or a song), wants to find what is going viral on TikTok, YouTube, Instagram or X before making something, wants to edit or re-export an existing Revid project, generate a standalone AI image or clip, make a series episode, or publish and schedule a finished video to connected social accounts. Covers setup (hosted MCP with OAuth, or an API key), the 36 tools, credits, polling and the rules for publishing. Routes to the more specific revid-* skills when one fits.