一天一个开源项目

一天一个开源项目（第257篇）：AI Design Skills —— 把设计规范写成 AI 能执行的规则，落地页与 Figma 两套 Skill

AI Design Skills 是 elayadesign 开源的一组设计类 Skill，每个 Skill 是一个自包含的文件夹，目前有 landing-page-design（从策略、文案到视觉系统的落地页全流程）和 figma-designer（在 Figma 里用变量、文本样式、自动布局和组件状态做出有结构的设计）。规则细到字体白名单、间距阶梯、缓动曲线和禁用词，支持 Claude Code、Cursor、Codex、Windsurf 等。MIT 协议，约 1.4 万 Stars。

·约 10 分钟阅读·AI 工程
开源项目AI Design SkillsAgent Skill落地页Figma设计系统Claude Code开源

引言

「一个报价 → 一类受众 → 一个主要行动。」

这是「一天一个开源项目」系列的第 257 篇。今天的项目是 elayadesign 的 AI Design Skills。

让 AI 做设计，最常见的抱怨是「平庸」：同样的字体、同样的渐变、同样的三栏卡片。解决办法有两种：给 AI 更多审美灵感，或者把设计决定直接写成可以逐条执行、逐条检查的规则。这个项目走的是后一条路。

每个 Skill 都是 skills/<skill-name>/ 下的一个文件夹，里面一份 SKILL.md。你只装需要的。设计取值（字体、颜色、间距、动效）集中在文件靠后的一个小节里，想换风格就 fork 后改这一节，其余部分会跟着适配。

你将学到什么

  • landing-page-design 如何把「策略」和「视觉」分成两部分，并规定先后顺序
  • figma-designer 怎样让 AI 在 Figma 里「绑定变量，而不是手填数值」
  • 两个 Skill 共用的一套设计取值：字体、间距、圆角、动效
  • 怎么安装到不同工具里，以及怎么按自己的品牌定制
  • 这种「规则型 Skill」的优点和代价

前置知识

  • 用过 Claude Code、Cursor 或类似工具，了解 SKILL.md
  • 对前端或 Figma 有基本了解
  • 可选：知道 Tailwind 的字号与圆角刻度

项目背景

项目简介

一组面向 AI 编码工具（Claude Code、Cursor、Codex、Windsurf，以及任何能读 Markdown 规则文件的工具）的设计 Skill。目前有两个，README 说「后续还会增加」：

  • landing-page-design：从零做一个落地页，涵盖访谈提问、页面结构、转化文案和完整视觉系统
  • figma-designer：在 Figma 里做出有真实结构的设计

另有一个独立仓库 elayadesign/redesign-skill，用来改造已有网站，它比这个合集更早出现。README 还推荐了 SlopScan，一个按同样规则检查线上站点并生成修复提示词的工具。

项目数据

  • ⭐ GitHub Stars：约 14,480
  • 🍴 Forks：约 1,090
  • 💻 语言：Python（仓库本身主要是 Markdown 规则）
  • 📅 创建时间：2026-07-29
  • 📄 许可证：MIT，无需署名
  • 👤 作者：README 未具名，仓库归属 GitHub 账号 elayadesign
  • 🤝 landing-page-design 借鉴了 Leonxlnx/taste-skill（Leon Lin，MIT）里关于内容真实感和动效的想法

主要功能

核心作用

没有规则时：
  AI 凭默认值做设计 → Inter 字体、渐变背景、三个等宽卡片
  ↑ 不同次生成的结果也不一致
 
Skill 的做法：
  把设计决定写成清单：能用什么、不能用什么、数值是多少
  ↓ AI 按规则生成，再按清单自检
  ↑ 想换风格，只改一节设计取值

快速开始

需要 Node.js（走 skills CLI 路线时）：

# 交互式安装
npx skills add elayadesign/ai-design-skills
 
# 只装某一个
npx skills add elayadesign/ai-design-skills --skill landing-page-design
 
# 指定 Agent，用户级安装
npx skills add elayadesign/ai-design-skills -a claude-code -a cursor -g
 
# 只列出、跳过确认、后续更新
npx skills add elayadesign/ai-design-skills --list
npx skills add elayadesign/ai-design-skills -y
npx skills update

安装位置：Claude Code 为 .claude/skills/，Cursor、Codex 等为 .agents/skills/。

手动安装

工具做法
Claude Codeclone 仓库，把 Skill 文件夹拷进 .claude/skills/
Cursor把 SKILL.md 放进 .cursor/rules/，或粘贴到 Settings → Rules for AI
Codex / Windsurf / Cline拷进 AGENTS.md / .windsurfrules / .clinerules
Claude.ai把 SKILL.md 上传到 Project，或附在对话里让它照着做

装好后直接用自然语言说你要什么，比如「帮我做一个 SaaS 产品的落地页」。

项目详细剖析

landing-page-design：先策略，后视觉

这个 Skill 分两部分，A（策略与结构）在 B（视觉系统）之前。如果用户的明确指令与规则冲突，以用户为准；否则 Skill 优先于框架默认值。

A1 访谈：缺什么一次性问完，用户不答就写下假设、一句话说明后继续。内容包括主要行动与转化口径、目标受众与前三个异议、已有的证明素材（logo、评价、数字、案例、保证与退款条款）、品牌与移动端优先级等。

A2 页面结构

  • 首屏：标题（结果 + 受众）、副标题、主 CTA（动词 + 得到什么）、一个证明信号、主视觉
  • 中段：问题到方案、3 到 5 条收益、3 步工作方式、社会证明
  • 底部：FAQ（6 到 12 个问题）、风险消除、与顶部一致的最终 CTA

A4 转化规则：消息匹配流量来源；首屏只有一个主 CTA；先收益后功能；要具体（例如「把报表从 4 小时缩到 15 分钟」）；至少一个降低风险的手段；证明放在对应主张旁边。CTA 不能写「了解更多」或「提交」。

视觉系统：数值写死，可检查

项目规则
字体只允许 Geist、Manrope、Geist Mono、Poppins；禁止 Inter、Roboto、Arial、Open Sans、Helvetica
样式不用斜体和 900 字重，整站一种字体；文案中不使用连字符，不留孤字
字号吸附到 Tailwind 刻度；命名样式 Heading 1–6、Title 1–5、Body 1–6、Button、Caption，各定义一次
间距仅 0、2、4、8、12、16、24、32、40、48、64、80、96px
圆角只用 Tailwind 值；嵌套时内圆角 = 外圆角 − 间距，且结果大于 2 才应用
背景不用渐变；深色限于 #000000、#181818、#1F1F1F、#272727、#313131、#131209
图标Phosphor、Solar 或 Iconamoon，不用 Material

动效也有具体数值：曲线 cubic-bezier(0.22,1,0.36,1)，布局过渡 duration-500，悬停颜色或透明度 300ms 且不低于 200ms；只动画 transform 和 opacity，并尊重 prefers-reduced-motion；滚动出现上升 32px、淡入 600 到 800ms、只触发一次，用 IntersectionObserver，不用不节流的滚动监听。

内容真实感方面，禁止 revolutionize、supercharge、cutting edge、effortless、world class 这类套话；示例数字不用整数；对真实产品不编造事实，用 {{price}} 这样的占位符。状态要齐：悬停、按下（scale(0.98)）、可见焦点、骨架屏、空状态、行内错误提示，不用 window.alert()，不留 # 空链接。

必选的「标语逐词显现」：页面下方单独一节，至少两行，字体用 Heading 3 到 1，词语起始透明度约 25% 到 35%，滚动到触发线时逐词点亮；减少动态效果时直接显示完整颜色。

figma-designer：绑定，而不是手填

它叠加在官方的 figma-use、figma-generate-design、figma-generate-library 之上，调用 use_figma 前必须先加载 figma-use。六步流程：

  1. 检查文件：列出本地变量和文本样式，在库里搜索并复用
  2. 缺什么建什么：spacing、radius 变量，Core Colors、Color System（明暗两种 Mode）和文本样式
  3. 逐段构建，每段完成后截图修正
  4. 处处使用自动布局，padding 与 gap 绑定间距变量
  5. 绑定，不要手填：填充、描边、圆角、间距绑定变量，文字用文本样式；设计只使用 Color System，不直接用 Core Colors
  6. 跑检查清单，修复失败项，再汇报做了什么、跳过了什么

几个设计取舍值得注意：

  • 颜色分两层：Core Colors 是调色板（每个至少 10 个色阶），Color System 全部是别名，按 Border、Surface、Action、Text、Icon、Overlay 分组，名字描述「角色」而不是颜色，明暗是 Mode 而不是两套硬编码色
  • Foundations 页：每个变量集合一个自动布局区块，示例全部绑定变量，改 token 时会同步更新；标签文字（如 Surface/Primary → Grayscale/870）需要手动重新同步
  • 组件：任何会复用的都是组件；按钮是一套组件，Type（Primary、Secondary、Tertiary、Error、Warning）× State，每个尺寸 25 个变体，聚焦态外加 2px 外环；数据视图要有加载、空和错误三种状态
  • 可访问性：正文对比度 4.5:1，大字与 UI 部件 3:1，不只靠颜色传达信息，移动端触控目标不小于 44×44
  • 卫生：图层命名要有意义（如 Pricing / Card / Pro），不留 Frame 427；页面分 Foundations、Components、Screens；除非用户要求，不删除或移动已有图层

最后有 12 项检查清单，覆盖变量绑定、双模式颜色、状态变体、图标来源和占位文案等。

优点与代价

优点：规则可检查，结果更一致；每个 Skill 独立，按需安装；设计取值集中一节，易于定制；跨工具通用。

代价：规则很强硬，不同品牌会觉得「撞脸」：字体白名单只有四个，且禁用 Inter；强制标语显现和统一的渐变标题，适合某类风格，不一定适合你的品牌。所以更像一套「有主见的默认值」，而不是中性工具。README 没有描述更多局限，也没有写 Python 脚本相关内容，仓库语言标记为 Python 可能只是统计上的偏差。

项目地址与资源

  • 🌟 GitHub：https://github.com/elayadesign/ai-design-skills
  • 🔁 改造已有网站：elayadesign/redesign-skill
  • 🔍 站点审计：SlopScan
  • 🎨 灵感来源之一：Leonxlnx/taste-skill（本系列第 125 篇）
  • 📄 许可证：MIT

总结与展望

核心要点回顾

  1. 规则型 Skill：设计决定写成可执行、可检查的清单
  2. 落地页分两部分：先策略与结构，再视觉系统，且用户指令优先
  3. Figma 里绑定而非手填：变量、文本样式、自动布局、组件状态一应俱全
  4. 取值集中一节：fork 后改一处即可换风格
  5. 有主见：字体白名单与强制的标语动效不适合所有品牌

适用人群

  • 想让 AI 稳定产出风格一致落地页的独立开发者和小团队
  • 用 Figma MCP 做设计、想让 AI 遵守设计系统的设计师
  • 想学习如何把「设计规范」写成 Skill 的开发者

学习建议

先装 landing-page-design，让它给一个你熟悉的产品做一个落地页，对着清单检查哪些规则产生了你喜欢的效果、哪些不合你的品牌。再 fork 仓库，只改设计取值那一节，看看风格是否跟着变。Figma 一侧需要先配好 Figma MCP 和官方的 figma-use。

欢迎访问 PrimeSkills —— 一个精心策划的 AI Agent 与技能市场，所有内容均经过真实企业级工作流验证。没有噱头，只有真正有效的东西。

更多实用知识和有趣产品，欢迎访问我的个人主页

← 返回博客列表