메뉴
UI mockup 与线框图生成。画原型、wireframe、mockup、线框图、UI 原型、界面设计、页面原型、app mockup、web mockup、prototype、low-fi、hi-fi。输入界面描述，输出 HTML/SVG 线框图或 mockup。
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/yuchangxu1989-Openclaw/claw-design --skill claw-design-mockup명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
AI 设计引擎——一句话生成 PPT、图表、架构图、海报、视频剪辑、落地页、原型、PDF 等 10+ 种设计产物。Claude Design 的免费开源平替。 内置 ChartSkill（饼图/柱状图/折线图，纯 SVG，自然语言输入自动解析）、VideoEditorSkill（FFmpeg 本地剪辑）、SlidesSkill（36 主题 PPT）、PosterSkill、ArchDiagramSkill 等。 零图片 API 依赖，纯 HTML/CSS/SVG + FFmpeg 渲染，成本稳定，结果可控。 触发词："做个 PPT"、"生成图表"、"画个饼图"、"做个架构图"、"剪个视频"、"做个海报"、"生成落地页"、"做个原型"、"generate a presentation"、"make a chart"、"create a poster"。
架构图生成。架构图、系统图、部署图、组件图、拓扑图、技术架构、architecture diagram、system diagram、component diagram、deployment diagram。输入架构描述，输出 HTML/SVG 架构图，支持明暗双主题。
图表与数据可视化生成。画图表、chart、数据可视化、柱状图、饼图、折线图、漏斗图、桑基图、热力图、bar chart、line chart、pie chart。输入数据描述，输出 HTML 图表，支持 35+ 种图表类型。
SOC 직업 분류 기준
SKILL.md 표시 중
| name | claw-design-mockup |
| description | UI mockup 与线框图生成。画原型、wireframe、mockup、线框图、UI 原型、界面设计、页面原型、app mockup、web mockup、prototype、low-fi、hi-fi。输入界面描述，输出 HTML/SVG 线框图或 mockup。 |
| designSystem | general |
| aestheticPrincipleAdditions | interface-affordance-clarity |
生成 UI mockup 与线框图（HTML/SVG）。
npx tsx scripts/generate.ts --content "界面描述"
参数：
--content：UI 界面的自然语言描述--output：输出目录（默认 ./output）HTML mockup/线框图文件 + 质量检查报告（JSON stdout）。