esthersjw/esther-design-system

© 2026 ESTHER不二 (esthersjw) | CC BY-NC-SA 4.0 If you use this Skill, you must credit the original author. Commercial use is prohibited. Modifications must be shared under the same license.

Trigger conditions: This skill triggers when a user requests to create an HTML webpage, personal page, tutorial page, introduction page, landing page, event page, app-like page, portfolio, or any frontend design-related task. It also triggers when the user says "create a graphic card," "graphic card," "Xiaohongshu graphic," "convert article to card," "convert to graphic," or "create a card."

How to Use (7-Step Workflow)

Step 1: Clarify Requirements

Ask the user to confirm 5 questions:

1. Type — Tutorial/Introduction/Educational? Event Page/Landing? App-like/Functional? Graphic card? WeChat public account layout?
2. Audience — Who is it for? What is their technical level?
3. Number of Sections — Approximately how many screens of content?
4. Assets — What text/images/data are available?
5. Hard Constraints — What must be included? Are there any partner brand colors?

Step 2: Read the Specification

1. Mandatory: Read brand-dna.md — Confirm the underlying brand specification.
2. Depending on the type, optionally read the scene file:
   • Tutorial / Introduction / Educational → references/scene-tutorial.md
   • Event page / Sharing session / Landing → references/scene-landing.md
   • App-like / Functional (Dashboard / Bookshelf / Canvas) → references/scene-app.md
   • Graphic card / Xiaohongshu graphic / Convert article to card → references/scene-cards.md
   • WeChat public account layout / Distribution → references/scene-wechat.md

Step 3: Copy a Template

Select the appropriate template from assets/ as a starting point:

• Tutorial → assets/template-tutorial.html
• Event page / Landing → assets/template-landing.html
• App-like / Functional → assets/template-app.html
• Graphic card → assets/template-cards.html

Start from a template. Do not write from scratch.

Step 4: Select Layout Combinations

Choose 3–5 layout patterns from references/layouts.md. Assign a different layout to each section.

Each section must have a different layout.

(For graphic card mode: Refer to the recommended layout techniques in scene-cards.md, and choose a different technique for each page.)

Step 5: Select Components and Fill

Select components from references/components.md to fill each section.

Hard rule: Do not use any HTML default styles. All blockquotes, lists, tables, and cards must use the corresponding component code from components.md. Default <blockquote>, default border-left quotes, unstyled <ul>/<ol>, and default <table> are not allowed. If no suitable component is found in components.md, design one that conforms to the brand-dna specification, but never use browser default styles.

Step 6: Self-Check

Go through each item in references/checklist.md:

• P0 must all pass — If any P0 item fails, fix it.
• P1 should pass — Try to meet these.
• P2 optional — Nice-to-have improvements.

(For graphic card mode: Additionally check the Checklist at the bottom of scene-cards.md. For WeChat public account mode: Additionally check the Checklist at the bottom of scene-wechat.md, checking for non-semantic line breaks in headings or word breaks in English text.)

Step 7: Deliver

Output the final HTML file, ensuring it can be opened directly in a browser.

Scene Type Quick Reference

Type	Scene File	Template
Tutorial / Introduction / Educational	references/scene-tutorial.md	assets/template-tutorial.html
Event page / Sharing session / Landing	references/scene-landing.md	assets/template-landing.html
App-like / Functional	references/scene-app.md	assets/template-app.html
Graphic card / Xiaohongshu graphic	references/scene-cards.md	assets/template-cards.html
WeChat public account layout	references/scene-wechat.md	assets/template-wechat.html

Key Principles

• Start from a template. Do not write from scratch. — Templates already include brand variables and basic structure.
• Each section must have a different layout. — Avoid monotony by choosing different patterns from layouts.md.
• Always run the checklist when done. — All P0 items must pass before delivery.

Prohibitions

Strictly follow the prohibition list in brand-dna.md. The core bottom line: when a screenshot is posted on Twitter, it should not be recognizable as "AI-made."