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」工作流如何为某个功能一次性并行产出 35 套互不相同的单页 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 Civitais 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并行启动 35 个设计 Agent每个 Agent 产出一套独立变体。也就是说这个技能本身不直接写 HTML而是扮演编排者orchestrator角色拆解需求、并行派单、汇总对比。真正产出页面的是另一个角色定义文件 .claude/agents/design-mockup.md详见下文第四节。二、核心工作流三步入场SKILL.md 规定的使用流程只有三步但每一步都有明确的执行约束第一步创建输出目录目录不存在时先创建命名规范为docs/working/mockups/feature-name/功能名使用 kebab-case连字符小写。例如为熔炉发现页做设计时目录就是docs/working/mockups/crucible-discovery/。第二步并行启动 35 个 mockup Agent使用 Task 工具批量派发子任务subagent_type固定为design-mockup。并行数量建议 35 个太少缺乏对比价值太多则评审成本过高。第三步每个 Agent 产出唯一变体并行价值在于差异化。SKILL.md 明确要求每个 Agent 必须在以下四个维度上做出有意义的区分而不是微调换色差异化维度说明示例布局方式Layout approaches网格 / 列表 / 瀑布流 / 卡片v1-grid-cards.htmlvsv3-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 langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title[Page Title] - Civitai Mockup/title !-- Mantine v7 CSS -- link relstylesheet hrefhttps://unpkg.com/mantine/core7.17.4/styles.css !-- Tailwind CSS -- script srchttps://cdn.tailwindcss.com/script !-- Tabler Icons -- link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/tabler/icons-webfont3.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 v7mantine/core7.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信息气泡用#7950f2docs/plans/model-ui-overhaul-mockups/file-upload.html 中的主按钮正是#228be6、虚线 dropzone hover 时边框转#228be6。这些都是模板 tokens 的直接落地。5.2 排版与卡片模式排版标题font-weight: 700xl/2xl/3xl字号正文font-weight: 400sm/base统计数字font-weight: 600xs卡片比例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/core7.17.4与tabler/icons-webfont3.3.0仓库中部分早期稿如 file-upload.html使用了 Tabler 2.x 版本新产出应以 Agent 模板的版本为准避免图标类名差异评审责任在人技能只负责多快好省地产出候选方向选择、方案取舍仍由用户决策这从After Creating Mockups环节的设计可以看出——编排者的职责止于汇总与征询。结语quick-mockups 技能的价值在于把UI 多方案探索从串行的人力劳动变成可并行的工程流程标准化的目录约定让产出可追溯固定化的设计 tokens 让多套变体具备可比性结构化的提示词让子 Agent 稳定交付差异化方案。对于任何需要在 Civitai 仓库内快速验证界面方向的团队这套并行 35 个 Agent → 目录归档 → 摘要对比 → 用户定夺的流程都值得直接复用。【免费下载链接】civitaiA repository of models, textual inversions, and more项目地址: https://gitcode.com/GitHub_Trending/ci/civitai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考