Communitygithub.com

AbdlrahmanSaberAbdo/mockup

快速制作多种商业视觉方案(如标志方向、调色板、着陆页、应用界面、店铺页面、菜单、标牌、社交媒体帖子),并排展示以便用户比较和选择。

mockup 是什么?

Mockup 技能专为需要视觉决策的场景设计,例如标志方向、调色板、着陆页、应用界面、商店页面、菜单或宣传单、帖子模板等。它适用于有或没有中心文档(hub doc)的场景。技能首先读取中心文档的简报,提取品牌名称、受众、感觉、调色板、标志以及需要避免的元素。如果用户提供了参考图像或调色板,技能会尝试从图像中采样精确的十六进制颜色值。然后,它规划 3-4 个真正不同的方向(而非微小变化),并为每个版本生成所需的所有变体(例如移动端和桌面端、阿拉伯语和英语、方形和故事尺寸)。这些方向被并排布局在一个画布或页面上,通过行排列以便一目了然地比较。技能使用简报中的真实文案,并为缺失的事实使用占位符(如 [PRICE])。它会检查对比度(正文 4.5:1,大标题 3:1),如果调色板对不符合要求,则明确说明并给出替代用法(例如仅用于装饰)。每个方向提供一行说明其核心想法及主要优势或劣势,并邀请用户选择。最终选择通过 **to-brief** 记录,并通过 **to-tasks** 添加后续任务(如最终文件、平面版本、favicon)。技能严格遵守不复制其他品牌标志、字符或专有设计的规则,并提示最终工作可能需要矢量文件或设计师。同时,它要求为图标规划平面版本,因为生成图像和 3D 效果在小尺寸下效果不佳。该技能适用于 Claude Code 等 AI 编码助手,通过清晰的步骤和规则帮助用户做出高效的视觉决策。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AbdlrahmanSaberAbdo/business-skills/tree/main/skills/mockup

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

模拟展示

当用户需要通过观看来进行选择时使用:标志方向、调色板、着陆页、应用界面、商店页面、菜单或宣传单、帖子模板。适用于有或没有中心文档(hub doc)的场景。

步骤

  1. 读取中心文档的简报,获取名称、受众、感觉、调色板、标志以及需要避免的元素。如果用户提供了参考图像或调色板,请使用精确的颜色(尽可能从图像中采样十六进制颜色值)。
  2. 规划 3-4 个真正不同的方向(而非微小变化),以及每个版本所需的所有变体(例如移动端和桌面端;阿拉伯语和英语;方形和故事尺寸)。
  3. 将它们并排布局在一个画布或页面上,按行排列,以便一眼就可以比较。使用简报中的真实文案,并为缺失的事实使用占位符,如 [PRICE]。
  4. 检查对比度:正文文字 4.5:1,大标题 3:1。如果某个调色板对不符合要求,请明确说明并给出替代用法(例如仅用于装饰)。
  5. 每个方向一行说明:其核心想法及其主要优势或劣势。要求用户进行选择。
  6. 使用 to-brief 记录选择,并使用 to-tasks 添加后续任务(最终文件、平面版本、favicon)。

规则

  • 绝不复制其他品牌的标志、角色或专有设计。
  • 这些仅为方向;在最终工作需要矢量文件或设计师时明确说明。
  • 生成的图像和 3D 效果在小尺寸下效果不佳。请始终为图标规划一个平面版本。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相关技能