尧图网页设计 
为什么AI生成的页面显得廉价ai-design-skills视觉系统深度解析字体、间距与圆角的严格规则【免费下载链接】ai-design-skills项目地址: https://gitcode.com/gh_mirrors/ai/ai-design-skills用 AI 写前端十分钟就能得到一个页面但为什么总有一股廉价感ai-design-skills 项目给出的答案很直接廉价感来自失控的细节。模型随手挑了 Inter 字体、随手写了 17px 字号、随手用 12px 内边距——没有任何规则约束页面自然显得粗糙。这个项目把一套完整的视觉系统写成了 Markdown 规则文件让 AI 在生成页面时必须遵守字体、间距、圆角等严格规则从源头消灭AI味。廉价感从哪来AI 页面的 3 个典型病灶在拆规则之前先看看问题出在哪。SKILL.md 中专门有一节叫 Content Realism内容真实感列举了一眼假的标志占位内容Lorem Ipsum、John Doe、Acme Corp 这类占位品牌假到离谱的数字99.99%、$100.00这种整齐得反常的数据AI 高频套话Elevate、Seamless、Game changer、In the world of...再加上默认字体 随机像素值AI 页面的廉价三件套就集齐了。ai-design-skills 的思路是与其教 AI什么是美不如直接告诉它哪些值能用哪些不能用。它是什么一份给 AI 看的设计法典ai-design-skills 是一个为 AI 编码工具Claude Code、Cursor、Codex、Windsurf 等准备的设计技能集合。每个技能是一个自包含的文件夹目前的核心技能是 skills/landing-page-design/SKILL.md它分为两大部分部分内容Part A落地页策略提问清单、页面结构、文案写法、SEO 建议Part B视觉系统字体、间距、圆角、图标、动效的严格规则本文聚焦 Part B——那套让页面从能用变精致的规则。一键安装步骤以 Claude Code 为例按 README.md 中的说明只需三条命令mkdir -p .claude/skills git clone https://gitcode.com/gh_mirrors/ai/ai-design-skills /tmp/ai-design-skills cp -r /tmp/ai-design-skills/skills/landing-page-design .claude/skills/Cursor 用户则把 SKILL.md 放进.cursor/rules/即可。装好后用自然语言提需求规则会自动生效。字体规则白名单与黑名单只留 4 个选项规则 B1Typography是全文最强硬的一节直接给出字体黑名单禁用Inter、Roboto、Arial、Open Sans、Helvetica允许Geist、Manrope、Geist Mono、Poppins为什么Inter 和 Roboto 已经被用过太多次成了模板网站的代名词——看到它们用户潜意识里就觉得这是个没有设计的页面。配套规则同样严格每个站点只用一种字体禁止随意混搭禁用斜体字重封顶 Bold不许用 900Black这种吼叫式粗体字号必须落在 Tailwind 标准字阶上出现text-[19px]、font-size: 22px这类任意值一律向下吸附到最接近的标准档位12/14/16/18/20/24/30/36/48…这一条尤其关键19px就是廉价感的来源之一。标准字阶保证了行高、字号、段落节奏的整体协调而 19px、22px 这种差不多值会让页面比例失谐。间距规则只有 12 个合法值规则 B2Spacing的态度是只有这些值多一个都不行。0248121624324048648096也就是说间距只允许取这 12 个 token中间的值比如 10px、18px、20px一律不合法。AI 生成页面时最常见的毛病就是 padding 忽大忽小——7px 这里、15px 那里、23px 那边——视觉上就是乱。锁定 token 后页面节奏自然统一。规则还精确到按钮主按钮垂直内边距 8px、水平内边距 12px连按钮看起来扁不扁都有标准答案。圆角规则一条数学公式终结随意圆角规则 B3Corner radius规定只用 Tailwind 的圆角值并给出了一个嵌套圆角公式当内层元素与外层的间距小于 32px 时内层圆角 外层圆角 − 间距计算结果必须大于 2否则内层保持直角举个原文例子外层卡片 16px 圆角rounded-2xl内边距 8px那么内层元素的圆角就该是 8px16 − 8。这条公式保证嵌套的卡片、按钮、图片之间的呼吸感一致——很多 AI 生成的页面外层圆角很大、内层却又是另一个随意的数值圆角对不齐观感立刻掉档。配套的 B4 规则同样干脆卡片边框要么四边全有要么全无禁止只画一条边背景禁止渐变必须是纯色唯一的例外是 Hero 大标题文字上的渐变见 B5暗色模式背景只能用 6 个指定色值细节决定成败图标、动效与真实感除了字体、间距、圆角三大件Part B 还有几组容易被忽略、却强烈影响质感的规则图标白名单B6允许 Phosphor、Solar、Iconamoon禁用 Material Icons——后者是AI 生成感的重灾区动效禁止默认值B7所有过渡必须使用自定义贝塞尔曲线模拟物理弹簧感滚动入场用IntersectionObserver明确禁止window.addEventListener(scroll)会拖垮移动端性能状态完整性B9每个交互元素必须带 Hover、Active、Focus、Loading、Empty、Error 全套状态禁止死链、禁止window.alert()交付底线B10自定义 404、隐私条款链接、favicon、meta 标签、图片 alt 文本一个都不能少文件末尾还附了一份Quick checklist快速自查清单生成页面后可以逐项打勾验收非常适合作为 code review 的依据。如何把它变成你的设计系统README.md 提到一个很实用的机制每个技能的设计值字体、颜色、间距、动效都集中在文件底部一个独立段落里。Fork 仓库、只改那一段整套规则会自动跟随你的品牌规范走——这就是设计令牌Design Tokens思想的轻量化落地。️总结把感觉变成规则回顾一下 ai-design-skills 的核心逻辑字体4 选 1 白名单禁斜体、禁 900 字重字号强制吸附标准字阶间距只有 12 个合法 token按钮内边距精确到像素圆角只用标准值嵌套场景用外层减间距公式底线背景无渐变、边框全边或无、禁止占位文案与 AI 套话它没有教 AI审美而是把资深设计师多年积累的约束写成了机器可执行的条文。对新手来说这也是学习前端视觉系统的好教材字体、间距、圆角这三样正是专业感成本最低、收益最高的三个维度。【免费下载链接】ai-design-skills项目地址: https://gitcode.com/gh_mirrors/ai/ai-design-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 为什么AI生成的页面显得廉价？ai-design-skills视觉系统深度解析：字体、间距与圆角的严格规则
为什么AI生成的页面显得廉价ai-design-skills视觉系统深度解析字体、间距与圆角的严格规则【免费下载链接】ai-design-skills项目地址: https://gitcode.com/gh_mirrors/ai/ai-design-skills用 AI 写前端十分钟就能得到一个页面但为什么总有一股廉价感ai-design-skills 项目给出的答案很直接廉价感来自失控的细节。模型随手挑了 Inter 字体、随手写了 17px 字号、随手用 12px 内边距——没有任何规则约束页面自然显得粗糙。这个项目把一套完整的视觉系统写成了 Markdown 规则文件让 AI 在生成页面时必须遵守字体、间距、圆角等严格规则从源头消灭AI味。廉价感从哪来AI 页面的 3 个典型病灶在拆规则之前先看看问题出在哪。SKILL.md 中专门有一节叫 Content Realism内容真实感列举了一眼假的标志占位内容Lorem Ipsum、John Doe、Acme Corp 这类占位品牌假到离谱的数字99.99%、$100.00这种整齐得反常的数据AI 高频套话Elevate、Seamless、Game changer、In the world of...再加上默认字体 随机像素值AI 页面的廉价三件套就集齐了。ai-design-skills 的思路是与其教 AI什么是美不如直接告诉它哪些值能用哪些不能用。它是什么一份给 AI 看的设计法典ai-design-skills 是一个为 AI 编码工具Claude Code、Cursor、Codex、Windsurf 等准备的设计技能集合。每个技能是一个自包含的文件夹目前的核心技能是 skills/landing-page-design/SKILL.md它分为两大部分部分内容Part A落地页策略提问清单、页面结构、文案写法、SEO 建议Part B视觉系统字体、间距、圆角、图标、动效的严格规则本文聚焦 Part B——那套让页面从能用变精致的规则。一键安装步骤以 Claude Code 为例按 README.md 中的说明只需三条命令mkdir -p .claude/skills git clone https://gitcode.com/gh_mirrors/ai/ai-design-skills /tmp/ai-design-skills cp -r /tmp/ai-design-skills/skills/landing-page-design .claude/skills/Cursor 用户则把 SKILL.md 放进.cursor/rules/即可。装好后用自然语言提需求规则会自动生效。字体规则白名单与黑名单只留 4 个选项规则 B1Typography是全文最强硬的一节直接给出字体黑名单禁用Inter、Roboto、Arial、Open Sans、Helvetica允许Geist、Manrope、Geist Mono、Poppins为什么Inter 和 Roboto 已经被用过太多次成了模板网站的代名词——看到它们用户潜意识里就觉得这是个没有设计的页面。配套规则同样严格每个站点只用一种字体禁止随意混搭禁用斜体字重封顶 Bold不许用 900Black这种吼叫式粗体字号必须落在 Tailwind 标准字阶上出现text-[19px]、font-size: 22px这类任意值一律向下吸附到最接近的标准档位12/14/16/18/20/24/30/36/48…这一条尤其关键19px就是廉价感的来源之一。标准字阶保证了行高、字号、段落节奏的整体协调而 19px、22px 这种差不多值会让页面比例失谐。间距规则只有 12 个合法值规则 B2Spacing的态度是只有这些值多一个都不行。0248121624324048648096也就是说间距只允许取这 12 个 token中间的值比如 10px、18px、20px一律不合法。AI 生成页面时最常见的毛病就是 padding 忽大忽小——7px 这里、15px 那里、23px 那边——视觉上就是乱。锁定 token 后页面节奏自然统一。规则还精确到按钮主按钮垂直内边距 8px、水平内边距 12px连按钮看起来扁不扁都有标准答案。圆角规则一条数学公式终结随意圆角规则 B3Corner radius规定只用 Tailwind 的圆角值并给出了一个嵌套圆角公式当内层元素与外层的间距小于 32px 时内层圆角 外层圆角 − 间距计算结果必须大于 2否则内层保持直角举个原文例子外层卡片 16px 圆角rounded-2xl内边距 8px那么内层元素的圆角就该是 8px16 − 8。这条公式保证嵌套的卡片、按钮、图片之间的呼吸感一致——很多 AI 生成的页面外层圆角很大、内层却又是另一个随意的数值圆角对不齐观感立刻掉档。配套的 B4 规则同样干脆卡片边框要么四边全有要么全无禁止只画一条边背景禁止渐变必须是纯色唯一的例外是 Hero 大标题文字上的渐变见 B5暗色模式背景只能用 6 个指定色值细节决定成败图标、动效与真实感除了字体、间距、圆角三大件Part B 还有几组容易被忽略、却强烈影响质感的规则图标白名单B6允许 Phosphor、Solar、Iconamoon禁用 Material Icons——后者是AI 生成感的重灾区动效禁止默认值B7所有过渡必须使用自定义贝塞尔曲线模拟物理弹簧感滚动入场用IntersectionObserver明确禁止window.addEventListener(scroll)会拖垮移动端性能状态完整性B9每个交互元素必须带 Hover、Active、Focus、Loading、Empty、Error 全套状态禁止死链、禁止window.alert()交付底线B10自定义 404、隐私条款链接、favicon、meta 标签、图片 alt 文本一个都不能少文件末尾还附了一份Quick checklist快速自查清单生成页面后可以逐项打勾验收非常适合作为 code review 的依据。如何把它变成你的设计系统README.md 提到一个很实用的机制每个技能的设计值字体、颜色、间距、动效都集中在文件底部一个独立段落里。Fork 仓库、只改那一段整套规则会自动跟随你的品牌规范走——这就是设计令牌Design Tokens思想的轻量化落地。️总结把感觉变成规则回顾一下 ai-design-skills 的核心逻辑字体4 选 1 白名单禁斜体、禁 900 字重字号强制吸附标准字阶间距只有 12 个合法 token按钮内边距精确到像素圆角只用标准值嵌套场景用外层减间距公式底线背景无渐变、边框全边或无、禁止占位文案与 AI 套话它没有教 AI审美而是把资深设计师多年积累的约束写成了机器可执行的条文。对新手来说这也是学习前端视觉系统的好教材字体、间距、圆角这三样正是专业感成本最低、收益最高的三个维度。【免费下载链接】ai-design-skills项目地址: https://gitcode.com/gh_mirrors/ai/ai-design-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考