SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场visual-style

visual-style

设计与创作

查看项目

更新于 10-16 10:18

技能介绍

用途

visual-style 用于定义视觉风格和执行反 AI 化检查。它适用于以下场景：设计前的视觉风格定调、避免输出泛化且 AI 味明显的页面、不同产品场景的风格匹配，以及为设计师和前端提供视觉指引。

核心原则

  • 风格匹配产品场景：不要把不同类型产品都设计成“企业白板风”。
  • 视觉服务于功能：装饰为内容服务，而不是反过来。
  • 反 AI 化：避免常见的 AI 模板化效果，保留独特性和表现力。
  • 一致性：一旦定了风格，全产品保持。

风格库

该 skill 内置 10 种风格，每种给出特点、适用场景、代表产品和风格要素。

  1. 极简 SaaS：白底、网格、清晰层级、克制装饰。适用于 B 端工具、协作产品、效率工具。代表：Linear、Notion、Stripe。要素：单一主色 + 灰阶；Inter / SF Pro；圆角 4~8px；阴影极轻；留白充足。

  2. 企业专业：深色侧栏 + 白色内容区、高信息密度。适用于企业后台、数据平台。代表：GitLab、IBM Carbon、Salesforce。要素：深蓝 / 深紫 + 灰；系统字体；圆角 2~4px；几乎没有阴影；数据密度高。

  3. 暗黑科技：深色背景、霓虹色点缀、未来感。适用于开发者工具、数据可视化、监控。代表：Vercel、Dark Reader、各种 dashboard。要素：黑 / 深灰 + 荧光色；等宽字体（代码）；圆角 4~12px；克制使用发光和渐变背景。

  4. 液态玻璃：半透明、模糊背景、深度感。适用于 iOS 26 / macOS 26 风格、艺术类应用。代表：Apple Liquid Glass、部分音乐/视频应用。要素：透明 + 模糊背景色；SF Pro；圆角 12~24px；backdrop-filter: blur；微妙的渐变和阴影。

  5. 数据密集：紧凑布局、表格优先、最小装饰。适用于金融、监控、报表、数据分析。代表：Bloomberg Terminal、各种 BI 工具。要素：极简灰阶 + 红绿（涨跌）；等宽 + 系统字体；圆角 0~2px；行高紧凑；信息密度极高。

  6. 开发者工具：等宽字体、代码高亮、命令行美学。适用于 CLI 工具、IDE、代码平台。代表：GitHub、VSCode、Terminal。要素：深色 + 语法高亮色；JetBrains Mono / Fira Code；圆角 4~6px；等宽布局。

  7. 编辑排版：内容优先、阅读友好、文学感。适用于博客、文档、新闻。代表：Medium、The New York Times。要素：黑白为主 + 单一强调色；衬线字体（标题）+ 无衬线（正文）；圆角 0~4px；行高宽松；段落间距充足。

  8. Bento 网格：分块卡片、丰富色彩、模块化。适用于产品落地页、个人主页。代表：Apple 产品页、各种 Bento 风格站。要素：丰富色彩 + 大色块；圆角 16~24px；卡片化布局；不同尺寸混合。

  9. 新粗野（Neo-Brutalism）：大字体、对比强、未抛光感。适用于创意工具、个性化产品、年轻向。代表：部分 Web3、设计师工具。要素：高饱和、对比色；粗体大字；圆角 0px；黑色描边；偏移阴影（4px 4px 0 黑色）。

  10. 温暖人文：圆润、柔色、亲和。适用于教育、健康、儿童、生活。代表：Headspace、Duolingo。要素：柔和的暖色；圆体；圆角 12~24px；插画为主；阴影柔和。

反 AI 化检查清单

必须避免的 AI 模板化效果：漂浮发光球（Glow Orbs）、假 3D 元素（粗糙的 3D 渲染）、通用 AI 插画（Memphis 风格滥用）、过度渐变（每个元素都渐变）、模板化大标题（“Build Better, Faster”）、网格背景 + 紫色渐变、玻璃拟态滥用（毛玻璃所有元素）、“AI / Magic / Smart”等空洞 buzzword、默认的 SaaS 配色（深紫 + 浅紫）、万能的“科技感”装饰。

需要克制使用：渐变（只用在主 CTA）、阴影（不要每个元素都有）、圆角（不要全部超大圆角）、动效（不要每个元素都飞入）。

提升独特性的做法：真实业务字段和状态、真实用户头像（不是默认 avatar）、真实数据（不是 Lorem Ipsum）、自定义图标（不是 Heroicons 默认）、品牌色（不是默认 indigo-600）、特定场景的小细节。

风格定义模板

模板结构包括：选用风格（风格名 + 理由）；风格要素（颜色：主色、辅助色、中性色灰阶 9 级、状态色 success / warning / danger / info；字体：西文、中文、等宽；圆角、阴影、间距规范，基础单位 4 / 8 / 16 / 24）；反 AI 化清单（明确不用、克制使用、突出独特）。

工作流程

  1. 识别产品场景和品类
  2. 从风格库选 1 个主风格
  3. 列出风格要素（颜色/字体/圆角…）
  4. 列出反 AI 化检查项
  5. 与产品方/用户研究对齐
  6. 输出风格定义文档
  7. 转交 design-tokens 实现

质量自检

  • 风格是否匹配产品场景
  • 是否避免了所有 AI 模板化效果
  • 是否克制使用了渐变 / 阴影 / 大圆角
  • 是否突出了独特性
  • 风格要素是否完整（颜色 / 字体 / 圆角 / 阴影 / 间距）
  • 是否能转化为 design tokens

常见坑

风格不匹配场景（B 端工具用消费类风格）；照搬模板（dribbble 上看到就抄）；AI 味太重（发光球 + 紫色渐变 + 玻璃拟态全上）；过度装饰（为了“好看”加了一堆动效和阴影）；多种风格混用（首页极简、内页粗野）；不考虑实现成本（复杂动效前端做不出）；缺乏独特性（和同类产品长得一样）。

配套模板

templates/visual-style-template.md — 风格定义模板 templates/anti-ai-style-checklist-template.md — 反 AI 化检查清单

与其他 skill 的协作

上游：product-manager 的 positioning → 产品定位。 平行：hig-principles → 平台原则约束。 下游：design-tokens → 风格转化为可执行 tokens；design-system-mapping → 选择参考系统；design-handoff → 风格指引交接前端。