UI Mockup
生成一张高完成度的 UI 界面概念图,用于产品视觉探索、落地页配图、功能概念展示。它输出的是图片中的界面 mockup,不是可运行 React 代码。
适用场景
- App / Web / SaaS / Dashboard / CRM / AI 工具界面概念图
- Landing page hero 里的产品截图 mockup
- 电商直播间、数据看板、移动端工具、内容管理后台等界面视觉
- 用户想快速看一个产品功能的视觉方向
不适用:要写前端代码、要真实可交互原型、产品广告摄影、文章封面、电影海报、知识长图。
一次问齐
信息不足时,用一次 AskUserQuestion 收集:
- 产品类型:mobile app / web app / dashboard / landing hero / live-commerce UI。
- 核心功能:界面上最重要的 2-4 个模块。
- 视觉风格:minimal / playful / enterprise / futuristic / editorial。
- 设备框架:mobile phone / desktop browser / tablet / floating screens。
- 比例:16:9、4:3、1:1、9:16。
Prompt 骨架
Role: senior product designer and UI art director.
Goal: create one polished UI mockup image, visually plausible and shippable.
Product: [product/app type]
Primary screen: [screen name]
Core modules: [2-4 modules from user]
Device/framing: [desktop browser / mobile phone / tablet / floating screens]
Style: [minimal / playful / enterprise / futuristic / editorial]
Layout: strong grid, clear navigation, realistic spacing, consistent component system.
Visual details: cards, charts, lists, controls, empty states, status pills, subtle shadows.
Text: use only exact user-provided product/module labels; otherwise use abstract placeholder bars.
Constraints: no real brand logos, no tiny illegible walls of text, no broken UI, no random lorem ipsum, no watermark.
视觉原则
- UI 要像能被前端实现:对齐、间距、层级、组件一致。
- 不堆满屏幕。最多突出 2-4 个核心模块。
- 图中文字容易出错;除非用户给了原文,否则使用 placeholder bar / icon / chart shape。
- 如果用户其实要写代码,切到正常前端实现流程,不使用本 skill。