Sharpen the English demo and README workflow

CHANGELOG.md

@@ -4,8 +4,15 @@ All notable changes to WebMeld are documented here.
 
 ## [Unreleased]
 
-- Prepare the project for its first public GitHub release.
-- Add the WebMeld visual identity, repository documentation, validation, and packaging.
+## [0.1.1] - 2026-08-12
+
+### Changed
+
+- Show the WebMeld interface in English on non-Chinese pages and Chinese on Chinese pages.
+- Add English support to the built-in local styling rules.
+- Replace the GitHub Mermaid workflow with a dedicated responsive SVG so diagram controls cannot cover the final step.
+- Replace the launch demo with a sharper English 1080p walkthrough and a 1440 × 810 animated preview.
+- Remove the temporary pre-release badge and include Agent configuration in the launch walkthrough.
 
 ## [0.1.0] - 2026-08-12
 

README.md

@@ -15,13 +15,13 @@
   </p>
 </div>
 
-![WebMeld selecting an element and verifying a CSS preview](assets/demo/webmeld-demo.gif)
+![WebMeld configuring an Agent, selecting an element, and verifying a CSS preview](assets/demo/webmeld-demo.gif)
 
 WebMeld is a lightweight Chromium extension for personalizing the web with natural language. Point at a real DOM element, describe the result you want, and WebMeld turns the request into a constrained CSS patch. Every patch is previewed against the live page, checked against its computed styles, and saved only after you approve it.
 
 It works without Stylus, without an account, and without a WebMeld backend.
 
-> [Watch the full-resolution MP4 demo](assets/demo/webmeld-demo.mp4)
+> [Watch the 1080p Agent setup and editing demo](assets/demo/webmeld-demo.mp4)
 
 ## Why WebMeld
 
@@ -36,15 +36,9 @@ It works without Stylus, without an account, and without a WebMeld backend.
 
 ## How it works
 
-```mermaid
-flowchart LR
-  A["Select a page element"] --> B["Describe the change"]
-  B --> C["Local rules or your LLM"]
-  C --> D["Constrained CSS declarations"]
-  D --> E["Live preview + computed-style verification"]
-  E -->|Approve| F["Save locally"]
-  E -->|Reject / fail| G["Automatic rollback"]
-```
+<p align="center">
+  <img src="assets/demo/how-it-works.svg" width="1000" alt="WebMeld workflow: select, describe, verify, then save locally or roll back">
+</p>
 
 The model never receives permission to execute JavaScript or directly edit the DOM. It may only propose CSS declarations. WebMeld owns selector generation, sanitization, preview, verification, persistence, and rollback.
 
@@ -123,7 +117,7 @@ The package command creates a review-ready ZIP under `dist/` and excludes reposi
 
 ## Status and direction
 
-WebMeld `0.1.0` is an early public preview. The core editing loop is complete: select → describe → preview → verify → apply → undo → persist.
+WebMeld `0.1.1` is an early public preview. The core editing loop is complete: select → describe → preview → verify → apply → undo → persist.
 
 The next exploration is not a larger pile of CSS commands. It is using this verified live-page editing layer to bridge design intent and production interfaces.
 

README.zh-CN.md

@@ -10,13 +10,13 @@
   <p><a href="README.md">English</a> · <a href="PRIVACY.md">隐私</a> · <a href="CONTRIBUTING.md">参与贡献</a></p>
 </div>
 
-![WebMeld 在真实网页上选择元素并验证 CSS 预览](assets/demo/webmeld-demo.gif)
+![WebMeld 配置 Agent、在真实网页上选择元素并验证 CSS 预览](assets/demo/webmeld-demo.gif)
 
 WebMeld 是一个轻量的 Chromium 浏览器扩展。你可以直接在真实网页上选择 DOM 元素，用自然语言描述想要的效果，再由 WebMeld 生成受约束的 CSS 修改。每次修改都会先在页面上预览、读取修改前后的计算样式进行验证，只有经过你的确认才会保存。
 
 它不依赖 Stylus，不要求注册账号，也没有 WebMeld 中转服务器。
 
-> [查看高清 MP4 演示](assets/demo/webmeld-demo.mp4)
+> [查看 Agent 配置与页面修改的高清 MP4 演示](assets/demo/webmeld-demo.mp4)
 
 ## 它解决什么问题
 
@@ -31,15 +31,9 @@ WebMeld 是一个轻量的 Chromium 浏览器扩展。你可以直接在真实
 
 ## 工作流程
 
-```mermaid
-flowchart LR
-  A["选择页面元素"] --> B["描述修改意图"]
-  B --> C["本地规则或你的 LLM"]
-  C --> D["受约束的 CSS 声明"]
-  D --> E["实时预览 + 计算样式验证"]
-  E -->|确认| F["保存到浏览器本地"]
-  E -->|失败或放弃| G["自动回滚"]
-```
+<p align="center">
+  <img src="assets/demo/how-it-works.svg" width="1000" alt="WebMeld 工作流程：选择、描述、验证，然后保存到本地或自动回滚">
+</p>
 
 模型不会获得执行 JavaScript 或直接操作 DOM 的权限。模型只能提出 CSS 声明；选择器生成、安全过滤、预览、验证、保存和回滚都由扩展负责。
 
@@ -104,7 +98,7 @@ npm run package
 
 ## 当前状态
 
-`0.1.0` 是早期公开预览版，核心链路已经完成：选择 → 描述 → 预览 → 验证 → 应用 → 撤销 → 持久化。
+`0.1.1` 是早期公开预览版，核心链路已经完成：选择 → 描述 → 预览 → 验证 → 应用 → 撤销 → 持久化。
 
 下一阶段不会继续堆叠 CSS 指令，而会探索如何利用这层可验证的真实页面修改能力，连接设计意图与生产界面。
 

background.js

@@ -138,7 +138,8 @@ async function requestAgentWithConfig(config, message) {
               "Return JSON only, with this exact shape: {\"declarations\":[\"property: value;\"],\"reason\":\"short explanation\"}.",
               "Return declarations only, never a selector, <style> tag, JavaScript, url(), @import, or markdown.",
               "Respect the user's intent and preserve the target's existing layout unless asked to change it.",
-              "For size changes, inspect the supplied computed style and use a concrete px value when possible."
+              "For size changes, inspect the supplied computed style and use a concrete px value when possible.",
+              "Write the reason in the language indicated by uiLanguage, or match the user's instruction when uiLanguage is absent."
             ].join(" ")
           },
           {