Esther Design System
Give your AI a written visual style for pages, cards and WeChat articles
A set of brand rules, layout patterns, code examples and HTML templates for consistent personal content. Intended here for noncommercial use, with separate workflows for a tutorial page, image cards and a WeChat draft.
- GitHub stars
- 544
- Checked
- Categories
- Design & VideoContent & Knowledge
Finish one small tutorial first
The first task includes copy, an audience and four sections, with no images to source. Use it to check content hierarchy, visual consistency and phone readability before trying image export or editor paste.
Pick a task and get started
Place the complete repository in a writable workspace and configure your brand and identity. The three tasks end with a page preview, an image export or an editor draft. The first includes all the copy needed to begin.
Use the supplied short copy to make a four-section page, then check its structure and phone readability.
Get the complete repository and make it available to your AI
Use the author’s full-repository setup: fork or clone it, keep the rules, references and templates together, configure your brand and identity, then ask your AI to read the files and start a scene task.
Read the author’s setup guideSet up the brand before making a piece
Follow the author’s guide to fork or clone the full repository, then open its root directory in an AI tool that can read and write local files. Start with SKILL.md and brand-dna.md. Provide your display name and add your own assets/avatar.jpg for tasks that use an avatar. Keep the default palette or update both variables and hard-coded colors in the templates you use; WeChat colors must be changed in inline styles. Replace the example author identity while retaining separate source and license credit. Then send a scene task below.
Read the author’s setup stepsGive your AI this first task
These are editorial task examples. Output paths are suggested names; replace bracketed fields with your actual files and identity details. Mark previews, exports and editor checks as verified only after they have happened.
Use esther-design-system in the current directory to make a Chinese tutorial page for noncommercial sharing. Read SKILL.md, brand-dna.md, references/scene-tutorial.md, references/layouts.md, references/components.md and references/checklist.md. Adapt assets/template-tutorial.html. Audience: people new to taking reading notes. Title: 三步做一张读书笔记. Four sections: opening, three-step method, a writing comparison, and a completion checklist. Use 练习笔记 as the sample display name. Keep the default brand colors. Use no avatar or external images. Use this copy: 1. 读完一小节，写一个你想解决的问题。 2. 记录支持答案的原句、书名和页码。 3. 用自己的话写答案，再写一项下一步行动。 Comparison: the vague note is 这章很好; the more useful question is 我想弄清：作者给出了哪些理由？先摘录原句并标页码，再写自己的判断。 Checklist: 问题明确；引用能找到出处；自己的判断与原句分开；下一步行动具体。 Do not invent book titles, quotations, statistics or expert endorsements. Briefly map the four sections to layouts and components, then create output/tutorial.html. Vary the section layouts while keeping similar steps consistent. Explain any custom component and keep it within the brand rules. Retain source attribution, a license link and a note of changes. Check the page at 390px and 1280px: complete content, horizontal overflow, readable text and a usable font fallback. The body text should remain visible with reduced motion and when scripts are unavailable. Deliver the HTML, a required-assets list and a record of applicable P0/P1/P2 checks. Mark anything not previewed as pending; code inspection is not visual verification.
Check what you receive
- output/tutorial.html with four content sections, an assets list and instructions for opening it.
- A layout and component map that identifies reused patterns and adaptations.
- Actual checks at two viewport widths, or clearly pending checks, covering font fallback, complete text and motion handling.
More about this skill
Esther Design System turns ESTHER不二’s design habits into files an AI can consult. SKILL.md defines the workflow, brand-dna.md sets the colors, typography and character, scene guides explain the requirements of each format, and HTML templates provide a starting point. It is most useful when you already have content and want successive pieces to feel like they came from the same person.
The default style combines a blue primary color, yellow emphasis, small red accents and warm backgrounds, with distinct typography for headings and body text. You can keep it or introduce your own brand, but the rules and the templates you use must change together. The WeChat template uses inline styles, so changing one CSS variable will not recolor it. Your identity in the finished work and credit for the design system serve different purposes.
Work starts with five questions: the format, audience, number of sections, available materials and constraints. The AI then adapts the matching template and selects layouts and components for the content. Sections should have visual rhythm, while similar information should use consistent components. If no component fits, SKILL.md explicitly permits a new one that follows the brand rules.
The five scenes lead to different deliverables. Tutorial and landing pages are responsive HTML. The app template offers interface examples such as tabs and a modal. Cards use a fixed 1080 × 1440 canvas and a browser export script. WeChat articles preserve the original text in inline styling, followed by a separate paste and preview step. Choosing a scene also determines what must happen before the work is finished.
The files still require judgment. The current brand rules prohibit dark backgrounds on 3:4 cards, although an older card example retains one; some component animations also conflict with the current restrictions. Adapt the code to the chosen scene and current rules, then inspect the result. The author’s ambition to avoid an “AI-generated look” is an aesthetic preference, not an objective test that a tool can guarantee.
This guide offers three concrete starting points: a reading-note tutorial, four cards from an existing article, and a WeChat layout that preserves the original text. They are editorial workflows based on the source files. We have not run these generation tasks or tested image paste in the current WeChat editor.
Sources and verification
Sources checked
Reviewed the pinned README, SKILL, brand rules, all five scene guides and templates, layouts, the full component document, checklist and license. This was source and code inspection only; we did not install the skill, run exports or test WeChat paste.