mcpField
Q
quick-mockups

quick-mockups

github.com/civitai设计与 UI7.3k1.7k 次安装今天更新
代码仓库

关于 quick-mockups

用于并行生成多种设计稿的技能，通过 design-mockup Agent 为同一功能制作不同方案。适合需要比较页面布局、信息层级和交互方式的设计流程。

主要功能

  1. 01并行启动多个设计稿 Agent
  2. 02生成布局各异的方案
  3. 03提示 Agent 纳入需求与参考背景
  4. 04整理输出文件并总结方案

适用场景

  1. 01为新功能快速准备多种页面方向
  2. 02比较卡片、列表或网格布局
  3. 03让团队评审不同交互方案

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/civitai/civitai --skill quick-mockups

安装后在 Claude Code 中输入/quick-mockups确认已加载。

详细介绍

快速创建模型

使用 design-mockup Agent 并行创建多个设计模型。

用法

为某项功能创建模型时：

  1. 创建输出目录（如果不存在）：

    docs/working/mockups/<feature-name>/

  2. 使用 Task 工具并设置 subagent_type: design-mockup，启动 3-5 个并行的模型创建 Agent

  3. 每个 Agent 都要创建一个独特的变体，在以下方面有所不同：

    • 布局方式（网格、列表、瀑布流、卡片）
    • 信息层级
    • 视觉重点
    • 交互模式

目录结构

docs/working/mockups/
├── crucible-discovery/
│   ├── v1-grid-cards.html
│   ├── v2-featured-hero.html
│   ├── v3-compact-list.html
│   └── v4-masonry.html
├── crucible-rating/
│   ├── v1-side-by-side.html
│   ├── v2-stacked.html
│   └── v3-swipe.html
└── [feature-name]/
    └── [variation].html

为 Agent 编写提示词

启动模型创建 Agent 时，请提供：

  1. 功能名称 - 要设计的页面/组件
  2. 关键需求 - 必须包含的内容
  3. 变体重点 - 此变体的独特之处
  4. 参考背景 - 如果有帮助，附上现有类似页面的链接

Agent 提示词示例：

Create a mockup for the Crucible Discovery page.

Requirements:
- List of active crucibles as cards
- Show: name, prize pool, time remaining, entry count
- Filter/sort controls (by prize, ending soon, newest)
- "Create Crucible" button

Variation: Grid layout with large hero card for featured crucible

Output to: docs/working/mockups/crucible-discovery/v1-featured-hero.html

创建模型后

  1. 列出所有已创建的模型文件
  2. 总结每个变体的设计思路
  3. 询问用户想采用哪种方案，或者是否需要更多变体

提示

  • 创建差异明显的变体，而不是只做细微调整
  • 至少在一个变体中考虑移动端布局
  • 展示真实的内容（姓名、数字、时间）
  • 在相关场景中包含空状态
  • 使用 .claude/agents/design-mockup.md 中的 Civitai 设计模式

评论

支持 Markdown