Esther 设计系统

把个人审美写进规范，再用它制作网页、卡片和公众号稿

从品牌色、字体、布局到场景模板，给 AI 一套可以反复查阅的设计依据。适合非商业的个人内容制作；教程网页、图文卡片和公众号稿各有自己的交付与检查方式。

作者 ESTHER不二

安装与上手查看 GitHub
Esther 设计系统 项目图片
GitHub Star
544
资料核对
分类
设计与视频内容与知识

先把一篇小教程做完整

第一项任务已提供文案、受众和四段结构，不需要找图片。先确认它能把内容层次、个人风格和手机阅读同时处理好，再尝试图片导出与平台粘贴。

选一个任务，开始使用

先把完整仓库放到可读写的工作目录，完成品牌与身份设置。三个任务分别对应网页预览、图片导出和编辑器草稿；第一次可直接用第一项的内置文案。

选择要交付的内容

自带一份短文案，从教程模板做出四段单页，先验证内容组织与手机阅读。

  1. 获取完整仓库，让 AI 读到规则和模板

    采用作者的完整仓库方式：Fork 或克隆，保留规则、参考资料和模板，配置品牌与自己的身份，再让 AI 阅读文件并开始场景任务。

    查看作者安装说明

    先配置品牌，再开始制作

    按作者指南 Fork 或克隆完整仓库，在能读写本地文件的 AI 工具中打开其根目录。先让助手读 SKILL.md 与 brand-dna.md；告诉它自己的显示名，使用头像的任务再放入 assets/avatar.jpg。默认配色可直接保留；换色时同步修改所用模板的变量及硬编码色值，公众号则逐项修改内联颜色。替换示例中的作者身份，同时保留独立的设计系统来源与许可说明。随后发送下面的场景任务。

    查看作者的使用步骤

  2. 把这段话发给 AI

    以下为本站编写的任务示例。路径均为建议命名，方括号内容须替换成你的真实文件或身份资料。需要预览、导出或粘贴的步骤，只有实际完成后才能标为已验证。

    使用当前目录中的 esther-design-system，制作非商业分享用的中文教程页。先读 SKILL.md、brand-dna.md、references/scene-tutorial.md、references/layouts.md、references/components.md 和 references/checklist.md，从 assets/template-tutorial.html 改写。 需求：受众是刚开始做读书笔记的人；标题为“三步做一张读书笔记”；共四段：开场、三步方法、写法对比、完成检查。显示名用“练习笔记”（本次示例名称）；保留默认品牌色，不使用头像和外部图片。 文案： 1. 读完一小节，写一个你想解决的问题。 2. 记录支持答案的原句、书名和页码。 3. 用自己的话写答案，再写一项下一步行动。 对比：笼统记录是“这章很好”；可继续追问的写法是“我想弄清：作者给出了哪些理由？先摘录原句并标页码，再写自己的判断”。 检查项：问题明确；引用能找到出处；自己的判断与原句分开；下一步行动具体。 不要补造书名、引文、统计数字或专家背书。 先简述四段各自采用的布局和组件，再生成 output/tutorial.html。段落之间有布局变化，同类步骤保持统一；组件没有合适选项时说明自定义原因并遵守品牌规范。保留来源署名、许可链接和修改说明。 检查 390px 与 1280px 视口：内容是否齐全、是否横向溢出、字号是否可读，字体加载失败时能否正常阅读；关闭动效和脚本不可用时也不应隐藏正文。交付 HTML、需要的资源清单及按适用 P0/P1/P2 条目整理的检查结果。没有实际预览的项目写“待验证”，不要把代码检查当成截图验收。

  3. 检查你拿到的结果

    • 一份包含四段内容的 output/tutorial.html，以及所需资源和打开方式。
    • 一份布局与组件选择说明，明确哪些来自库、哪些做了适应性修改。
    • 两个视口的实际检查记录或明确的待验证项，另列字体回退、正文完整性和动效处理。
    查看这项任务的作者说明
进一步了解这个 Skill

Esther Design System 把作者 ESTHER不二的设计习惯拆成了 AI 可以读取的文件：SKILL.md 规定工作顺序，brand-dna.md 描述颜色、字体和气质，场景文档解释不同载体的要求，HTML 模板提供起点。它最适合已经有内容、希望连续做出的几篇作品看起来属于同一个人的使用者。

默认视觉由蓝色主色、黄色强调、少量红色点缀和暖色背景组成，标题与正文有意区分字体。你可以保留这套默认色，也可以换成自己的品牌；关键是同时修改规则和实际使用的模板。公众号模板采用内联样式，不能靠改一个 CSS 变量完成换色。自己的姓名和头像是内容身份，注明设计系统来源则是另一件事。

制作从五个具体问题开始：做什么载体、给谁看、分几段、有哪些材料、有什么硬约束。随后从相应模板出发，挑选适合内容的布局和组件。布局需要有节奏，但同类信息的组件应保持一致；库里没有合适的组件时，SKILL 也允许设计符合品牌规范的新组件，并非只能原样拼装。

五个场景交付的东西并不相同。教程和活动页是响应式网页；App 模板提供标签切换、弹窗等界面起点；卡片是固定 1080 × 1440 画布，靠浏览器中的导出脚本生成 PNG；公众号则用内联样式承载原文，之后还要复制到目标编辑器检查。选择场景，也是在选择真正需要完成的最后一步。

这套资料仍需要人和 AI 作判断。当前品牌规范禁止 3:4 卡片使用深色背景，但卡片旧示例还保留深色页；部分组件的动效也不符合当前品牌禁忌。应按所选场景和当前规范调整代码，再检查实际画面。清单中的“不像 AI”表达的是作者的审美目标，无法当作自动通过的客观保证。

本页把首次体验收敛为三个可检查的任务：做一页读书笔记教程，把已有文章转成四张卡片，再把原文排成公众号草稿。它们展示的是基于作者资料编写的操作流程；本站没有运行这些生成任务，也没有验证当前公众号对图片粘贴的处理。

来源与核验

资料核对

已核对固定提交中的 README、SKILL、品牌规范、五份场景、五份模板、布局、完整组件文档、清单和许可。本站仅做来源与代码静态阅读，未安装此 Skill、执行导出或测试公众号粘贴。

作者说明技能原文

先整理文章，再制作版式

如果原稿在 Obsidian 中，可先用 Obsidian Skills 整理 Markdown、链接和图片引用，再交给此系统排版；公众号任务尤其需要可找到的本地图片。

Obsidian Skills六项技能覆盖 Obsidian 笔记、Canvas、Bases、应用命令、网页正文提取和模板批量生成。萌粒风个人 IP 全套先确认一个属于你的角色，再把同一身份带进文章、信息图、照片、桌面图标和表情素材。Taste Skill让 AI 从品牌材料或业务数据出发，确定设计方向、实现网页，并用浏览器截图检查官网与应用界面。小黑手绘插画找出文章里值得图解的观点，让小黑用一个具体动作画出来，白底细线配少量中文批注。