Esther Design System 是一套面向 AI 智能体的约束式设计系统，用途是把内容转换为风格统一、符合品牌规范的 HTML 页面。它覆盖四类场景：教程、落地页、应用界面和社交卡片。核心思路是用严格约束换取一致质量，AI 只能使用预先批准的颜色、字体、布局与组件，不允许自由发挥。
主要能力包括：内置品牌配色（主色 #2B7FD8 占 60%、辅色 #F4D758 占 30%、强调色 #E84A5F 占 10%）、指定字体组合（Noto Serif SC、Noto Sans SC、Fraunces、Caveat、Fira Code）、15 种获批布局、组件库，以及 P0/P1/P2 质量检查清单。系统禁止玻璃拟态、渐变、霓虹色、bounce 动画、Inter/Roboto 字体和默认 HTML 元素样式，以规避常见的“AI 生成感”。
使用方式：先将仓库克隆到 AI 智能体上下文中，命令为 git clone https://github.com/esthersjw/esther-design-system.git，随后按载体放入对应位置，例如 Cola Skill 放入 ~/Cola/skills/esther-design-system/，Claude Projects 上传整个文件夹，Cursor 添加到工作区根目录并在 .cursorrules 中引用。设计任务开始前需让智能体读取 SKILL.md，并遵循七步工作流：收集需求、加载品牌规则、复制基础模板、选择 3–5 个不同布局、使用预置组件构建、对照检查清单自检、输出单个可直接在浏览器打开的 .html 文件。
限制方面：该系统刻意牺牲灵活性以换取品牌一致性，所有规则均为强制；输出除字体 CDN 外不应有外部依赖。资料未说明收费、价格或许可细节，暂未提供。