TypingMindTypingMindThe best frontend for AI
Zack Anti Ai Look logo

Zack Anti Ai Look

Community
yckonnnnn
zack-anti-ai-look

诊断并消灭界面的「AI 味」——那种一眼就能看出是模板生成、廉价、没有判断的观感。包含一套可执行的扫描清单、严重度分级、修复优先级和前后对照。当用户说「看起来像 AI 做的」「很土」「不高级」「廉价」「一眼假」，或要求新建落地页/官网/作品集时使用。这是设计类任务的起点技能。

Overview

Publisheryckonnnnn
Repositoryzack-design-skills
Skill namezack-anti-ai-look
Stars
7
Forks
0
Bundled files
3
LicenseMIT
Links
Skill sourceRepositoryHomepage
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 3 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by yckonnnnn on GitHub. Read the source before you install it.

Installation

Install the Zack Anti Ai Look AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/yckonnnnn/zack-design-skills/tree/main/skills/zack-anti-ai-look
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/yckonnnnn/zack-design-skills.git /tmp/zack-design-skills
mkdir -p .claude/skills
cp -r /tmp/zack-design-skills/skills/zack-anti-ai-look .claude/skills/zack-anti-ai-look
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Zack Anti Ai Look in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Zack Anti Ai Look on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Zack Anti Ai Look is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

消灭 AI 味

核心判断

「AI 味」不是风格问题，是统计回归问题。

模型在生成界面时会回到训练数据里最高频的那个解：居中的 hero、紫蓝渐变、三张等宽卡片、rounded-2xl、shadow-lg、"赋能企业级智能体"、Inter 字体。每一项单独看都不算错，叠在一起就成了一种可以一眼识别的平均值。

所以修复方向不是「做得更花」，而是三条：

  1. 打破均匀 —— 平均值之所以是平均值，因为处处等量。制造不等量：大小、疏密、轻重。
  2. 建立判断 —— 每一个选择都要能回答「为什么是这个值，不是别的」。答不上来就是默认值，默认值就是 AI 味。
  3. 说人话 —— 空话是 AI 味最便宜的信号，也是最容易修的。

关键洞察：AI 味不能靠「加东西」修掉。 加更多动效、更多渐变、更多图标，只会变成「花哨的 AI 味」。真正的修法是删掉默认值，让每一个留存的元素都有理由。

第一步：60 秒扫描

在动任何代码之前，先按这个顺序看。前 3 项命中任意一条，优先级高于后面全部。

顺序看什么一眼判死
1首屏标题在桌面端占几行≥ 3 行 → 容器太窄或字号没设计
2有没有渐变文字或紫蓝渐变背景有 → 2024 年模板签名
3首屏第一句话在说什么说不出「你是干嘛的、给谁用」→ 直接劝退
4数一下页面上有几个字号> 6 个 → 没有系统
5数一下有几种颜色在承担强调> 1 种 → 没有重点
6每一屏的上下留白是否一样是 → 没有节奏
7三张卡片是否等宽等高是 → 没有层级
8有没有 transition: all 0.3s ease有 → 动效没想过

完整诊断清单

P0 = 直接劝退访客 ｜ P1 = 明显廉价 ｜ P2 = 可以更好

完整 60 条可执行清单见 references/checklist.md。以下是最高频的 24 条。

排版

严重度症状修法
P0用 Inter / Roboto / Arial / Open Sans / 默认 sans换一个有个性的字：正文用一套可靠的人文 sans 或衬线，展示字用一个有明确骨架的 display 字。只准用一到两套。
P0标题在 1440px 下超过 2 行（正文列太窄导致）给标题单独的最大宽度约束（max-width: 18ch 级别），或降字号。标题换行是容器问题，不是字号问题。
P0字号阶梯是等差：16/18/20/22/24改成比例阶梯（约 1.25–1.33 倍进一级），拉开极端对比：正文 16–18px，展示字 48–80px，中间甚至可以有断层。
P1显示级大字号没有做负字距letter-spacing: -0.02em 到 -0.04em，字号越大收紧越多。
P1标题行高 1.5、正文行高 1.3反过来：标题 0.98–1.12，正文 1.55–1.7。
P1正文行长超出 75–80 字符max-width: 62ch 左右。手机端卡片内也需要限制。
P1价格/数据表格数字不齐font-variant-numeric: tabular-nums。
P2中英混排字重、标点没处理中文用 500 而不是 600 冒充粗体；中西文间留四分之一空隙；标点用全角。

颜色与表面

严重度症状修法
P0紫→蓝（→粉）渐变 hero 背景删掉。大面积表面用中性色，颜色留给一个点。
P0渐变文字标题删掉。渐变文字会让小字号可读性塌掉，且是模板签名。
P0三处以上颜色在抢「强调」的位置只留一个强调色，其余降为中性层级。
P1只有白 + 一个灰，没有中性阶梯建 4–6 级中性色阶（例如近白 / 浅 / 中 / 深 / 近黑），用层级代替边框去分隔。
P1直接使用框架默认调色板（indigo-500、slate-600 原值）至少把中性色的色相往主色偏 3–8 度，让它有温度而不是死灰。
P1正文 14px + #6B7280 on 白正文 ≥ 16px，对比度 ≥ 4.5:1。小字浅灰是最常见的廉价信号。
P1大面积纯 #000 / #FFF用近黑（如 L* ≈ 12–18 的暖黑）和近白（偏暖的 off-white）。纯黑白让页面像打印错版。
P2玻璃拟态、霓虹辉光、3D 球体装饰除非有明确理由，删。深度靠极低透明度的发丝边框和超扩散阴影建立。

布局与节奏

严重度症状修法
P0每一屏都居中至少让一半的屏左对齐。左对齐是「有观点」的心智捷径。
P0每一屏 padding: 80px 0 完全一致制造节奏：密 48px、常规 96px、疏 160px，按信息重要性分配。
P1三张等宽等高卡片改 bento：不等跨、不等高、内容类型不同（一个数字、一个图表、一句引用、一段代码）。
P1bento 网格出现空洞（某格空着）每一格必须被填满，或把 span 改到刚好。空洞比拥挤更廉价。
P1卡片套卡片套卡片最多两层。第三层改用分隔线或背景色差。
P1全宽 sticky navbar 无条件贴顶要么给理由（长页面导航），要么做成悬浮胶囊并带滚动状态变化。
P1「巨型数字 + 小标签 + 渐变强调」当首屏这是默认解。除非它确实是最适合这个主题的形式，否则换：真图、真界面、真数据、一句话。
P1左右交替（图左文右 → 文左图右）反复出现换成不同形式的区块，不是同一形式镜像翻转。
P2100vh 当 hero 高度用 100svh / 100dvh，否则移动端地址栏会截内容。

组件与状态

严重度症状修法
P1所有按钮/卡片都是 rounded-full 药丸药丸只给真胶囊语义的东西。容器和卡片用 4–12px 的小圆角。
P1默认重阴影 shadow-md/lg/xl阴影透明度 < 0.06、模糊半径大幅扩散；或干脆用边框和色阶表达层级。
P1到处是 1px 灰实线边框换成背景色阶差 + 只在需要分隔处用极低透明度发丝线。
P1缺 hover / active / focus-visible / disabled / loading / empty / error状态是「有没有想过」的试纸。至少要齐 hover、focus-visible、disabled。
P0没有 :focus-visible 样式键盘用户完全不可用。这是缺陷不是风格。
P1transition: all 0.3s ease-in-out见 zack-motion-taste。至少指定属性、改缓动曲线。

文案

严重度症状修法
P0「赋能」「触手可及」「开启新时代」「引领变革」「让 X 更简单」删。换成「你是谁、给谁、解决什么具体问题、凭什么」。
P0首屏读完不知道你是干嘛的用「为 [谁] 提供 [什么]，让他们 [得到什么结果]」重写。
P1没有任何具体数字有据可查的数字全放上去：价格、延迟、可用性、条数、期限。
P1一次列 8 个卖点只留 3 个最硬的，其余降级到次级区块。卖点数量与说服力成反比。
P1「已被 1000+ 企业信赖」无出处要么给出真实的客户名/行业，要么删。编造的社会证明是负资产。
P2五条结构相同的五星好评换成 2–3 条有具体细节的，带真实身份。
P1FEATURE 01 / SECTION 02 这类元标签删。它是填充物，不提供信息。

修复顺序（不要跳）

  1. 先说人话。 改首屏那句标题和文案。这一步零成本，收益最大。
  2. 删默认值。 渐变、重阴影、药丸、emoji、元标签。只删不加。
  3. 建系统。 字号阶梯、中性色阶、间距尺度。三张表定下来，后面才有依据。
  4. 造对比。 打破居中、打破等宽、拉开字号极端对比和留白节奏。
  5. 补状态。 hover / focus / disabled / loading / empty。
  6. 最后才动效。 动效是锦上添花，前面没做完时加动效只会放大廉价感。

自检问题：如果把你页面上的 logo 换掉，能认出这是谁做的吗？认不出，就还是一眼 AI。

前后对照（真实改法）

改前

紫蓝渐变全屏 hero，居中，标题「赋能企业级智能体，让 AI 触手可及」占 4 行，副标题「开启智能新时代」，两个药丸按钮「了解更多」「立即体验」，下方三张等宽卡片带 🚀✨🔥 图标，rounded-2xl shadow-lg。

改后

暖白底，左对齐。标题两行：「把你的模型调用，统一成一个接口。」副标题一句实话：「一个 key 接 40+ 模型，用量、额度、账单在一张表里对齐。免费额度 200 万 token。」右侧是真实的用量面板（SVG 画的面积图 + 密钥表 + 延迟折线），不是插画。强调色只有一个琥珀色，用在「200 万 token」和主按钮上。下面不是三张等宽卡片，是 bento：一个大格放实时延迟图，一个小格放一个数字「平均 P95 延迟 380ms」，一个窄格放一段可直接复制的 curl 代码，一个横格放一句客户原话。

差异清单

维度改前改后
对齐全部居中左对齐为主
颜色渐变 + 3 个强调色中性 + 1 个强调色
标题4 行、含糊2 行、具体
视觉插画/空真实产品界面
布局3 张等宽卡bento 不等跨
文案抽象名词具体数字与动作
深度shadow-lg发丝线 + 色阶

绝对禁止清单

违反任意一条，产出即不合格：

  • ❌ 渐变文字（background-clip: text）
  • ❌ 紫→蓝 / 紫→粉的大面积渐变背景
  • ❌ Inter / Roboto / Arial / Open Sans 作为唯一字体
  • ❌ emoji 当图标
  • ❌ FEATURE 01 / SECTION 02 / STEP 03 元标签
  • ❌ 三张完全等宽等高的卡片当唯一版式
  • ❌ 编造客户名、编造数据、编造评价
  • ❌ 只交付 hover，没有 :focus-visible
  • ❌ 用 transition: all
  • ❌ 交付时不说自己改了什么

相关

  • 首屏与价格页的具体做法 → zack-hero-and-pricing
  • 字号阶梯、色阶的具体数值 → zack-typography-and-color
  • 留白与网格的具体数值 → zack-layout-and-rhythm
  • 改版任务的完整流程 → zack-redesign-audit
  • 文案重写模板 → references/copy-rewrite.md
  • 8 个基础状态 + 10 个进阶状态的补法 → references/state-design.md

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Zack Anti Ai Look AI skill do?

诊断并消灭界面的「AI 味」——那种一眼就能看出是模板生成、廉价、没有判断的观感。包含一套可执行的扫描清单、严重度分级、修复优先级和前后对照。当用户说「看起来像 AI 做的」「很土」「不高级」「廉价」「一眼假」，或要求新建落地页/官网/作品集时使用。这是设计类任务的起点技能。

Why use Zack Anti Ai Look on TypingMind?

Because you install it once and use it with any model. Zack Anti Ai Look is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Zack Anti Ai Look in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/yckonnnnn/zack-design-skills/tree/main/skills/zack-anti-ai-look. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Zack Anti Ai Look?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Zack Anti Ai Look?

As many as you like. As long as a model supports skills, you can use Zack Anti Ai Look with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Zack Anti Ai Look AI skill free?

Yes. It is published on GitHub by yckonnnnn under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Related AI Skills

View all
openclaw logo

Block Kit

openclaw
OrganizationPopular

Use proactively for structured or interactive Slack replies, and when asked to author or validate native Slack Block Kit JSON.

82.2K
391K
2 files
View
openclaw logo

1password

openclaw
OrganizationPopular

Set up and use 1Password CLI for sign-in, desktop integration, and reading or injecting secrets.

82.2K
391K
2 files
View
openclaw logo

Apple Reminders

openclaw
OrganizationPopular

List, add, edit, complete, or delete Apple Reminders and reminder lists via remindctl.

82.2K
391K
Instructions
View
openclaw logo

Clawhub

openclaw
OrganizationPopular

Search ClawHub for skills when a requested capability is not already available; install, verify, update, uninstall, publish, or sync skills.

82.2K
391K
Instructions
View

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇