Description
Getting a decent UI mockup out of an AI usually means opening claude.ai/design, adding another subscription, and leaving the result on someone else's server. baoyu-design packages that design engine as an Agent Skill: drop it into Cursor, Claude Code, Codex or any agent that can read and write files, and the work happens in your editor with the output landing in your own repo.
What it produces is self-contained HTML: UI mockups, clickable prototypes, wireframes, landing pages, dashboards, mobile apps and full slide decks. Because the result is just a page on localhost, you can open it in the agent's built-in browser, point at a button and say what to change, and the agent edits the source. That beats re-describing things on a website.
Ask first, then build: it clarifies the brief and gathers design context before producing one or more HTML deliverables, then previews and checks its own work.
Wide range: hi-fi design, interactive prototypes, wireframes, decks with speaker notes, mobile prototypes, animated video, landing pages, social content, HTML email, fliers and brochures, plus data visualization, maps, documents and 3D objects.
Design systems: create and reuse one, or import from a Figma .fig file, a GitHub repo or existing HTML/CSS.
Many exports: standalone HTML, PDF, editable PPTX, screenshot PPTX, MP4, or send it to Figma, Canva or hand it to Claude Code to turn into real code.
Starter components: device and browser frames, social platform shells, a pan-zoom design canvas, deck and chart stages and a tweaks panel, so the agent does not hand-roll the basics.
Local first: plain Markdown plus a few scripts, no build step, MIT licensed. The stronger the model the better the result; the author suggests pairing it with Opus.
What it produces is self-contained HTML: UI mockups, clickable prototypes, wireframes, landing pages, dashboards, mobile apps and full slide decks. Because the result is just a page on localhost, you can open it in the agent's built-in browser, point at a button and say what to change, and the agent edits the source. That beats re-describing things on a website.
Features
Ask first, then build: it clarifies the brief and gathers design context before producing one or more HTML deliverables, then previews and checks its own work.
Wide range: hi-fi design, interactive prototypes, wireframes, decks with speaker notes, mobile prototypes, animated video, landing pages, social content, HTML email, fliers and brochures, plus data visualization, maps, documents and 3D objects.
Design systems: create and reuse one, or import from a Figma .fig file, a GitHub repo or existing HTML/CSS.
Many exports: standalone HTML, PDF, editable PPTX, screenshot PPTX, MP4, or send it to Figma, Canva or hand it to Claude Code to turn into real code.
Starter components: device and browser frames, social platform shells, a pan-zoom design canvas, deck and chart stages and a tweaks panel, so the agent does not hand-roll the basics.
Local first: plain Markdown plus a few scripts, no build step, MIT licensed. The stronger the model the better the result; the author suggests pairing it with Opus.
