Claw Design — Mockup Skill
生成 UI mockup 与线框图（HTML/SVG）。
使用方式
npx tsx scripts/generate.ts --content "界面描述"
参数：
--content：UI 界面的自然语言描述--output：输出目录（默认 ./output）
输出
HTML mockup/线框图文件 + 质量检查报告（JSON stdout）。
Claw Design Mockup
UI mockup 与线框图生成。画原型、wireframe、mockup、线框图、UI 原型、界面设计、页面原型、app mockup、web mockup、prototype、low-fi、hi-fi。输入界面描述，输出 HTML/SVG 线框图或 mockup。
yuchangxu1989-openclaw
Updated Claw Design Mockup by yuchangxu1989-openclaw · 00f5c64
npx skillmds@latest add yuchangxu1989-openclaw/claw-design-mockup File contents
---name: claw-design-mockupdescription: UI mockup 与线框图生成。画原型、wireframe、mockup、线框图、UI 原型、界面设计、页面原型、app mockup、web mockup、prototype、low-fi、hi-fi。输入界面描述，输出 HTML/SVG 线框图或 mockup。---# Claw Design — Mockup Skill生成 UI mockup 与线框图（HTML/SVG）。## 使用方式```bashnpx tsx scripts/generate.ts --content "界面描述"```参数：- `--content`：UI 界面的自然语言描述- `--output`：输出目录（默认 ./output）## 输出HTML mockup/线框图文件 + 质量检查报告（JSON stdout）。
yuchangxu1989-openclaw/claw-design/tree/main/skill/mockup commit 00f5c64bc9
Frequently asked questions
Run npx skillmds@latest add yuchangxu1989-openclaw/claw-design-mockup in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
UI mockup 与线框图生成。画原型、wireframe、mockup、线框图、UI 原型、界面设计、页面原型、app mockup、web mockup、prototype、low-fi、hi-fi。输入界面描述，输出 HTML/SVG 线框图或 mockup。 It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
yuchangxu1989-openclaw (@yuchangxu1989-openclaw) published this skill. Their other Agent Skills are listed on their SkillMD profile.