资讯动态

VibeCurb图片生成工作流完整指南:imagegen-frontend与brandkit-gen如何产出工作室级设计参考图与品牌VI板

发布时间:2026/10/22 2:06:10 来源:尧图企业网站定制
【免费下载链接】VibeCurbVibeCurb - Injects taste into AI workflows to stop agents from generating boring, AI slop.项目地址https://gitcode.com/gh_mirrors/vi/VibeCurb点击查看免费下载VibeCurb 是一个为 AI 工作流注入审美的开源项目专门拦截 AI 生成的平庸设计AI slop。它的两个图片生成技能——imagegen-frontend与brandkit-gen——分别负责产出 Awwwards 级的前端设计参考图与工作室级品牌 VI 板brand board。本文用通俗方式带你走通这条反平庸的图片生成工作流无需设计基础也能上手。为什么 AI 生成的图总是一眼假不加约束的 AI 图片生成会反复塌缩到同几个默认套路AI 默认套路观感紫蓝色 AI 渐变背景一眼AI 生成的悬浮的半透明光球空洞的氛围感左文右图分栏用滥的排版6~8 张一模一样的仪表盘卡片模板味大脑、闪电、盾牌 Logo陈词滥调VibeCurb 的思路是用严格协议代替随意发挥每个技能都是一份带质量门禁Quality Gate的流水线文档AI 必须按阶段提取设计信号、做出明确选择、生成后逐项自检任何一项不达标都打回重做——这就是它反平庸anti-slop的核心。项目机制总览见 README.md全部技能清单可参考 skills/llm.txt。快速上手如何3条命令安装图片生成技能VibeCurb 不是笨重的依赖库而是把设计约束直接注入你的 AI 代理上下文一条命令即可# 查看所有可用技能 $ npx vibecurb-cli list # 安装指定的图片生成技能 $ npx vibecurb-cli add imagegen-frontend $ npx vibecurb-cli add brandkit-gen也可以手动部署克隆 VibeCurb 仓库后把需要的 SKILL.md 放到项目的.cursor/rules/或.agents/skills/目录再在提示词中引用该技能即可。兼容 Cursor、Claude Code、v0、Codex、ChatGPT 等所有能读取 markdown 上下文的工具。imagegen-frontend使用指南一张图一个区块的设计参考图这个技能的定位是艺术指导它不写代码只产出开发者能照着写代码的视觉参考图。规则源文件见 skills/imagegen-frontend/SKILL.md。硬性输出规则一个区块一张横版图要 1 个区块 → 出 1 张图6 个区块的落地页 → 出 6 张独立的 16:9 横版图严禁把整页塞进一张长图每张图都是完整、可编码的独立区块逐张播报进度如 Section 1 of 8: Hero5阶段流水线每一关都设质量门禁阶段做什么1. 读取需求提取品牌类型、情绪词、密度偏好、目标受众等 8 类信号写出 2~3 行的方向简报需求太模糊时最多只反问一个问题2. 艺术指导在主题、背景、字体、Hero 结构、构图锚点等类别里各选且只选一个——不许混搭、不许骑墙整页至少出现 3 种不同构图锚点相邻区块禁止同构图3. 提示词工程按提示词蓝图为每个区块写结构化提示词画幅、构图、字体、色板精确到 HEX、氛围以及关键的WHAT THIS IS NOT 负面清单4. 生成逐张生成并校验色板一致性某张跑偏比如飘出紫蓝渐变就强化负面描述重生成5. 视觉校验按构图 / 色板 / 字体 / 区块职责 / AI 漂移 / 可实施性六张 PASS/FAIL 检查表逐项打勾任何 FAIL 重做该区块决定出图质感的4条设计信条 整页最多 3 个色相强调色只出现在 CTA 与激活状态标题是建筑构件而不是大字桌面端最小 60pt 当量留白是设计材料内容住在刻意的呼吸感岛屿里每个区块都有转化职责吸引→证明→教育→说服→行动页面是一条说服链而非好看的碎块集合brandkit-gen使用指南如何生成工作室级品牌VI板如果说 imagegen-frontend 产出一张区块brandkit-gen 产出的是一整块板board多面板网格组成的品牌系统展示板质量标尺对标 Pentagram、Collins、Base Design 的真实提案稿。协议全文见 skills/brandkit-gen/SKILL.md。核心定义品牌板是一场视觉论证一块板只讲一个品牌方向不做多方案对比Logo 是论点16px 下认得出1600px 下经得起细看克制才是高级感板子应该空间过多而不是塞得太满默认 4:3 或 16:10 横版网格、间距、面板关系本身就是设计8阶段流水线从参考图DNA提取到Logo原创性门禁阶段做什么Phase 0 视觉参考获取提供一张你欣赏的品牌板提取纹理/版式/色彩 DNA同时明令禁止照抄其 Logo、名称与色板Phase 1 品牌策略提取品类、受众、核心隐喻等 10 类信号写出 3~5 行策略简报Phase 2 识别架构从14 种视觉模式深色开发者、轻奢美妆、游戏竞技、暖调人文、霓虹创意 OS 等中选 1 种再定板面布局、Logo 手法、字体、色板、Slogan 能量Phase 3 面板编排每个面板分配角色Anchor 锚点 / Proof 实证 / System 系统 / World 氛围 / Signal 信号 构图锚点 能量级Phase 4 提示词工程按蓝图逐字段填写附WHAT THIS IS NOT负面清单Phase 5 视觉校验Logo、构图、色板、字体、身份系统五张检查表逐项 PASS/FAILPhase 6 面板手术只重画失败的 1~2 格生成独立卡片 → 导入 Figma 合成回板面保住好面板Phase 7 Logo 原创性门禁用一句话几何做词汇重叠测试生成 Logo 与参考 Logo 超过 3 个形状词重合即判定为克隆强制换手法重做Logo硬约束过不了就不许出板这是 brandkit-gen 最有工作室味的部分Logo 必须同时通过3 图元上限整个标志最多由 3 个几何图元圆、矩形、三角形、线、弧构成Favicon 测试16×16 像素下依然可辨识一句话几何能用它是 A 形状经某操作的 B 形状一句话描述反色测试黑底白字、白底黑字下同样成立禁止清单金属 3D、大脑神经元、地球加弧线、带翅膀的盾牌、无限符号……出现即判失败6种板面布局从快速概念稿到全家桶布局网格适用场景Full Identity System3×3完整品牌提案默认Cinematic Deck Overview2×3精炼展示、迭代轮Compact Concept Board2×2快速概念、以 Logo 为主Horizontal Brand Strip1×3社媒头图、紧凑展示Wide Contact Sheet4×2摄影主导的品牌Mega System6×3 / 7×3覆盖 18~21 个触点官网 Hero、App 图标坞、社媒主页卡、名片、包装盒、卫衣、会员卡……出板前还要跑一遍25 点预检清单Logo 质量 6 项、板面构图 6 项、系统一致性 5 项、反平庸 5 项、物理真实感 3 项、参考克隆 3 项任何一项不通过都不允许渲染。两个技能怎么配合一条完整的AI设计生产线推荐工作顺序brandkit-gen 先行先定识别系统——Logo、色板、字体、氛围世界得到一块品牌宪法板imagegen-frontend 跟进把品牌板当参考图喂给它按同一套色板与气质产出落地页各区块的 16:9 设计参考图交给编码技能参考图可直接作为 brief 喂给pixel-perfect、awwwards-hero、awwwards-sections等技能精确还原成代码 提示词技巧与其说做个高级落地页不如写清主题、元素、色调与参照物。参考图越强AI 猜的成分越少。常见问题输出跑偏怎么办 ️症状一招纠正输出像普通仪表盘模板回复你忽略了技能文件。重读它并应用漂移约束。排版平庸、字级对比弱回复字级对比太保守加大 h1 与正文的差距。AI 跳过读取阶段直接动手回复停下。先跑完 Design Read提取不通过不许生成。Logo 在不同面板里变形使用冻结 Logo 描述把一句话精确几何原样复制进每个面板关键文件导航项目总览与漂移纠正表README.md图片技能一前端设计参考图skills/imagegen-frontend/SKILL.md图片技能二品牌 VI 板skills/brandkit-gen/SKILL.md技能索引说明skills/llm.txt其余技能hero、sections、motion、redesign、pixel-perfectskills/赞分享【免费下载链接】VibeCurbVibeCurb - Injects taste into AI workflows to stop agents from generating boring, AI slop.项目地址https://gitcode.com/gh_mirrors/vi/VibeCurb点击查看免费下载相关推荐如何把一张图片变成3D资产Hunyuan3D 2.1图生3D工作流完整指南如何把一张图片变成3D资产Hunyuan3D 2.1图生3D工作流完整指南 腾讯开源的 Hunyuan3D 2.1 是一个图生3DImage to 3D生Flux.1 Dev USO参考图生成工作流实战从模板加载到出图的完整教程Flux.1 Dev USO参考图生成工作流实战从模板加载到出图的完整教程 USO_1.0_Repackaged 是专为 ComfyUI 重打包的 Flux.Beav图片创作工作区参考图、文字变量模板与AI拆解图存模板的完整玩法Beav图片创作工作区参考图、文字变量模板与AI拆解图存模板的完整玩法 Beav 是一款本地优先的「小红书 AI 运营工作台」 其中的 图片创作工作区 帮你AI 应用人工智能AI AgentMCP 服务浏览器控制音视频上一篇scikit-learn 多分类与多输出算法完全指南multiclass、multilabel 与 multioutput 元估计器实战下一篇pandoc-server 实战指南将 Pandoc 文档转换能力封装为安全 Web 服务创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价 →
↑