メニュー
UI mockup 与线框图生成。画原型、wireframe、mockup、线框图、UI 原型、界面设计、页面原型、app mockup、web mockup、prototype、low-fi、hi-fi。输入界面描述，输出 HTML/SVG 线框图或 mockup。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| 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）。
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+ 种图表类型。
Dashboard 数据看板生成。做看板、dashboard、数据面板、数据大屏、监控面板、KPI 看板、analytics dashboard、data panel、metrics board、运营看板。输入指标描述，输出 HTML 数据看板。
流程图与时序图生成。画流程图、时序图、sequence diagram、flowchart、flow chart、活动图、泳道图、swimlane、process flow、业务流程、工作流图。输入流程描述，输出 HTML/SVG 流程图或时序图。
信息图生成。做信息图、infographic、数据图解、图文报告、visual summary、data story、统计图解、信息可视化、information graphic。输入数据或主题描述，输出 HTML/SVG 信息图。