Civitai Quick Mockups 实战指南：用 Mantine v7 + Tailwind 并行产出多套 UI 设计方案-酒店常州论坛

Civitai Quick Mockups 实战指南：用 Mantine v7 + Tailwind 并行产出多套 UI 设计方案

【免费下载链接】civitaiA repository of models, textual inversions, and more项目地址: https://gitcode.com/GitHub_Trending/ci/civitai

导读

本文基于 Civitai 仓库中的 .claude/skills/quick-mockups/SKILL.md 技能定义，系统讲解「快速原型（Quick Mockups）」工作流：如何为某个功能一次性并行产出 3～5 套互不相同的单页 HTML 设计稿，并在统一的目录规范与设计系统约束下保持视觉一致性。读完本文，你将掌握该技能的核心调用流程、子 Agent 提示词的四大要素、变体差异化策略，以及基于 Mantine v7 + Tailwind 的 Civitai 设计系统 tokens（色彩、排版、卡片、布局、图标），可直接在仓库内复现这套"多方案并行评审"的 UI 探索流程。

一、技能定位：什么是 quick-mockups

在 .claude/skills/quick-mockups/SKILL.md 的 frontmatter 中，该技能被明确定义为：

name: quick-mockups description: Create multiple UI design mockups in parallel. Use when asked to create mockups, wireframes, or design variations for a feature. Creates HTML files using Mantine v7 + Tailwind following Civitai's design system. allowed-tools: Read, Write, Glob, Task

几个关键信息决定了它的工作方式：

触发时机：当用户要求"为某功能做 mockup / wireframe / 设计变体"时主动使用；
技术栈固定：产出物是使用Mantine v7 + Tailwind CSS编写的单页 HTML 文件，遵循 Civitai 设计系统；
工具权限：仅授权Read, Write, Glob, Task四类工具——其中Task是核心，它允许技能以并行方式派发子任务（子 Agent）；
执行方式：通过Task工具以subagent_type: design-mockup并行启动 3～5 个设计 Agent，每个 Agent 产出一套独立变体。

也就是说，这个技能本身不直接写 HTML，而是扮演"编排者（orchestrator）"角色：拆解需求、并行派单、汇总对比。真正产出页面的是另一个角色定义文件 .claude/agents/design-mockup.md（详见下文第四节）。

二、核心工作流：三步入场

SKILL.md 规定的使用流程只有三步，但每一步都有明确的执行约束：

第一步：创建输出目录

目录不存在时先创建，命名规范为：

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

功能名使用 kebab-case（连字符小写）。例如为"熔炉发现页"做设计时，目录就是docs/working/mockups/crucible-discovery/。

第二步：并行启动 3～5 个 mockup Agent

使用 Task 工具批量派发子任务，subagent_type固定为design-mockup。并行数量建议 3～5 个：太少缺乏对比价值，太多则评审成本过高。

第三步：每个 Agent 产出"唯一变体"

并行价值在于差异化。SKILL.md 明确要求每个 Agent 必须在以下四个维度上做出有意义的区分，而不是微调换色：

差异化维度	说明	示例
布局方式（Layout approaches）	网格 / 列表 / 瀑布流 / 卡片	`v1-grid-cards.html`vs`v3-compact-list.html`
信息层级（Information hierarchy）	哪些信息放首位、如何分组	大 Hero 区突出主推项 vs 全部平铺
视觉强调（Visual emphasis）	重点元素的面积、对比度、色彩引导	奖池金额大字号 + 高亮 vs 倒计时优先
交互模式（Interaction patterns）	单页内的操作形态	左右分栏对比 vs 上下堆叠 vs 滑动切换

三、目录结构规范：变体文件的可追溯命名

SKILL.md 给出了仓库内已遵循的目录范例：

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

这套命名约定值得注意：

一级目录 = 功能名（crucible-discovery），二级文件 = 变体（v1-...、v2-...）；
文件名即"摘要"：v2-featured-hero一眼可知这是"第 2 版、主打 Hero 主推区"的方案；
同一功能的多套变体平级存放，便于横向对比和评审后归档。

仓库中真实存在的产出印证了这一约定，例如 docs/training-step3-mockups/index.html（变体索引页）与 docs/training-step3-mockups/step3-variant-a-card-grid.html（卡片网格变体），以及 docs/plans/model-ui-overhaul-mockups/file-upload.html 与 docs/plans/model-ui-overhaul-mockups/model-sidebar.html（模型 UI 改版的两份组件稿），它们在结构上均与design-mockupAgent 模板保持同源（详见第五节）。

四、给子 Agent 写提示词：四大要素

由于子 Agent 是独立执行者，提示词质量直接决定产出质量。SKILL.md 规定派发任务时必须提供四类信息：

Feature name（功能名）：要设计哪个页面 / 组件；
Key requirements（关键需求）：页面上必须包含哪些内容与能力；
Variation focus（变体焦点）：本变体与其他变体的差异点是什么；
Reference context（参考上下文）：如仓库内有相似页面可参考，附上链接。

SKILL.md 给出的完整示例提示词如下：

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

可以拆解这个示例，看到高质量提示词的结构：需求用要点列出（可核验）、变体焦点一句话讲清（避免与其他 Agent 撞车）、输出路径写死（保证落盘位置符合目录规范）。其中"Output to"必须显式给出，否则子 Agent 可能随意选址。

五、单页 HTML 模板与 Civitai 设计系统

这是整个技能体系中最有复用价值的部分，完整定义在 .claude/agents/design-mockup.md 中。design-mockupAgent 每次都会以固定模板起步：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>[Page Title] - Civitai Mockup</title> <!-- Mantine v7 CSS --> <link rel="stylesheet" href="https://unpkg.com/@mantine/core@7.17.4/styles.css"> <!-- Tailwind CSS --> <script src="https://cdn.tailwindcss.com"></script> <!-- Tabler Icons --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.3.0/dist/tabler-icons.min.css"> <style> :root { --mantine-color-scheme: dark; } body { background: #1a1b1e; color: #c1c2c5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Civitai card patterns */ .card-image { transition: transform 400ms ease; } .card:hover .card-image { transform: scale(1.05); } .chip { background: rgba(0,0,0,0.31); border-radius: 9999px; padding: 4px 10px; font-size: 12px; font-weight: 600; } .stat-chip { display: flex; align-items: center; gap: 4px; } .drop-shadow { filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.8)); } .gradient-footer { background: linear-gradient(transparent, rgba(0,0,0,0.6)); } </style> </head> <body> <!-- MOCKUP CONTENT HERE --> </body> </html>

模板的关键设计决策如下：

三个 CDN 依赖：Mantine v7（@mantine/core@7.17.4的预编译样式）、Tailwind（浏览器端 CDN 脚本）、Tabler Icons webfont。整个 mockup 是零构建、零 npm 安装的静态单文件，双击即可在浏览器打开评审；
暗色为默认：:root强制--mantine-color-scheme: dark，因为 Civitai 默认深色模式（component-preview 技能同样强调"dark first"）；
内置五个工具类：.chip（胶囊标签）、.stat-chip（图标+数字统计）、.drop-shadow（图片文字叠加阴影）、.gradient-footer（图片底部渐变遮罩）、.card-image+ hover 放大（400ms ease 过渡），它们是 Civitai 卡片视觉语言的原子单元。

5.1 色彩系统（暗色主题）

Agent 被约束使用以下固定色板，保证多套变体虽布局不同、观感一致：

用途	色值
页面背景（body）	`#1a1b1e`
卡片背景（cards）	`#25262b`
浮起层（elevated）	`#2c2e33`
正文文字	`#c1c2c5`
标题文字	`#fff`
弱化文字（dimmed）	`#909296`
主色（蓝）	`#228be6`
成功（绿）	`#40c057`
危险（红）	`#fa5252`
强调（紫）	`#7950f2`
强调（黄）	`#fab005`

仓库真实稿与之一致：如 docs/training-step3-mockups/step3-variant-a-card-grid.html 中卡片用#25262b、边框#373a40、状态徽章用rgba(64, 192, 87, 0.15)+#40c057，信息气泡用#7950f2；docs/plans/model-ui-overhaul-mockups/file-upload.html 中的主按钮正是#228be6、虚线 dropzone hover 时边框转#228be6。这些都是模板 tokens 的直接落地。

5.2 排版与卡片模式

排版：标题font-weight: 700+xl/2xl/3xl字号；正文font-weight: 400+sm/base；统计数字font-weight: 600+xs；
卡片比例：aspect-[7/9]（竖版人像卡）、aspect-square、aspect-video三档；
圆角：卡片rounded-lg，胶囊/头像rounded-full；
交互：hover 时阴影加深并配合图片 scale（.card-image400ms 过渡）；图片上的文字使用半透明遮罩（.gradient-footer）保证可读性。

5.3 布局骨架

容器：max-w-7xl mx-auto px-4；
响应式网格：grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4——这意味着即使是最简单的卡片网格稿也天然携带移动端到超大屏的断点，满足"至少一个变体考虑移动端"的硬性要求；
Flex 组合：flex items-center justify-between gap-2。

5.4 图标与占位图

图标：一律使用 Tabler 类名ti ti-[icon-name]，模板预置高频图标：ti-trophy（奖池）、ti-clock（倒计时）、ti-photo（图片）、ti-users（人数）、ti-coin（币）、ti-star、ti-heart、ti-download、ti-eye；
占位图：统一用https://picsum.photos/seed/[unique-seed]/400/500生成可复现的随机占位图；AI 艺术风格则用seed/aiart[number]。用确定性 seed 的好处是：同一变体每次刷新图片一致，评审交流时可以"指图说话"。

六、收尾与评审闭环

三套以上变体产出后，SKILL.md 规定了编排者必须完成的收尾动作：

列出所有产出的 mockup 文件（核对落盘位置、数量）；
逐套总结每个变体的设计思路（布局、层级、强调点），形成可对比的摘要；
向用户征询方向：确定走哪个方案，或需要更多变体。

这一步是"并行产出"的价值兑现点——多方案不是为了堆数量，而是为了让评审者能明确说出"我倾向 v2，因为它把倒计时提到了首屏"，从而把模糊的审美偏好转化为具体的布局决策。

七、变体设计 Tips：让差异"有意义"

SKILL.md 的 Tips 部分是避免"假并行"（几套稿看起来一模一样）的操作守则，展开如下：

变体之间要有结构性差异，而非微调：改圆角半径、换按钮颜色不算新变体；网格 ↔ 列表 ↔ 瀑布流才是；
至少一个变体考虑移动端布局：借助模板的响应式断点（md:/lg:/xl:），同时调整信息密度与触控目标；
填充真实感内容：名字、数字、时间用贴近业务的拟真数据（如奖池2,500 Buzz、倒计时03:12:44、参与人数1,284），避免 lorem ipsum 影响层级判断；
覆盖空状态：无数据时的占位（"还没有活跃的熔炉，创建一个"）同样属于设计决策，能提前暴露引导文案需求；
严格遵循设计系统：所有样式取自 .claude/agents/design-mockup.md 中的 Civitai 模式，不允许自造色彩与组件语言。

八、与周边技能的协同：从 Mockup 到可运行组件

quick-mockups 只是 Civitai UI 探索链路的起点，仓库内存在两个强相关的配套技能，理解它们能帮你定位本技能在整个研发流程中的位置：

.claude/skills/component-preview/SKILL.md：当 mockup 方案被选定、进入真实 React 组件开发后，用 Ladle（轻量 Storybook 替代品）在src/**/*.stories.tsx中渲染真实组件，并以 61111 端口服务、按kebab-case 文件名--kebab-case 导出名的路径规则截图，产出 docs/working/component-preview 目录下 dark/light 双主题的 PNG 供评审——它解决的是"真实组件长什么样"，而 quick-mockups 解决的是"方案长什么样"；
.claude/skills/ux-design/SKILL.md：提供 JTBD、渐进披露、尼尔森十条启发式等 UX 方法论，以及用户故事 / 屏幕规格 / 用户流程模板，可作为 mockup 动手前的需求拆解工具——把"要设计什么"想清楚，再交给并行 Agent 去"画出来"。

从流程上可以概括为：ux-design 定需求 → quick-mockups 并行出方案 → 评审定稿 → component-preview 验证真实实现。

九、适用边界与注意事项

产物是静态原型，不是生产代码：mockup 使用 CDN 加载的 Mantine/Tailwind，不经过仓库的构建链路（Next.js/Vite），仅用于评审，不应被当作可复用组件直接合并进src/；
外部资源依赖：模板依赖 unpkg、cdn.tailwindcss.com、jsdelivr 三个 CDN 与 picsum.photos 占位图服务，离线环境无法渲染；
版本一致性：Agent 模板锁定@mantine/core@7.17.4与@tabler/icons-webfont@3.3.0；仓库中部分早期稿（如 file-upload.html）使用了 Tabler 2.x 版本，新产出应以 Agent 模板的版本为准，避免图标类名差异；
评审责任在人：技能只负责"多快好省地产出候选"，方向选择、方案取舍仍由用户决策，这从"After Creating Mockups"环节的设计可以看出——编排者的职责止于汇总与征询。

结语

quick-mockups 技能的价值在于把"UI 多方案探索"从串行的人力劳动变成可并行的工程流程：标准化的目录约定让产出可追溯，固定化的设计 tokens 让多套变体具备可比性，结构化的提示词让子 Agent 稳定交付差异化方案。对于任何需要在 Civitai 仓库内快速验证界面方向的团队，这套"并行 3～5 个 Agent → 目录归档 → 摘要对比 → 用户定夺"的流程都值得直接复用。

【免费下载链接】civitaiA repository of models, textual inversions, and more项目地址: https://gitcode.com/GitHub_Trending/ci/civitai

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析