wechat-miniprogram-designlisted

# WeChat Mini-Program Design Create multi-screen, capsule-aware, finger-ergonomic mini-program UI that looks like a real product running on a real iPhone — not a marketing mock. ## The prototype is NOT the mini-program (read this first) This is the single most important framing for the skill. The AI burns the most tokens when it forgets it. You are producing an **HTML React prototype that looks like a running mini-program**, viewed in Chrome. It is for design review, not for shipping to WeChat. Engineering converts the design into wxml/wxss/js later — they are a downstream consumer, not your runtime. What this means for your decisions while generating: - **Use modern CSS freely in the prototype.** `clip-path`, `backdrop-filter`, `:has()`, `mask-image`, view transitions, container queries, scroll-driven animations — all work in the Chrome that renders the prototype. Do not refuse a design choice because "WeChat WebView doesn't support it." That is a handoff concern, not a generation concern. - **Wire AI features through a single `aiComplete(prompt)` async hook.** The prototype's React component declares one such hook at the top; the body just calls it. The hook has two runtimes: in the prototype (Chrome) it mocks with realistic timing or, when available, calls `window.claude.complete`; in the production mini-program it calls `wx.cloud.extend.AI` directly — **no cloud function proxy needed**, the AI extension is the transport. The UI never changes between the two; only th