docs: embed real demo videos in README + website

Drops the last placehold.co stand-ins. Four real demos shipping:

- app-showcase — multi-view app tour, hero loop
- claude-code-import — one-click config import, most differentiated feature
- generate-from-scratch — full flow from blank prompt to finished artifact
- artifact-walkthrough — section / tab / hover interactions

README hero uses the app-showcase loop; README Quick Demo section
pairs claude-code-import (differentiation) + generate-from-scratch
(full story). Both English and 简体中文 mirrored.

Website: DemoVideo component wraps the public-folder URL through
VitePress's `useData().site.base` at runtime, because raw <source
src="/demos/..."> triggered Rollup to resolve the path as a module
import and `$withBase` is not a global. The hero slot autoplays
muted; the body slot ships with user controls so visitors can pause
the 86-second walkthrough.

All four GIFs fit under GitHub's 10 MB README embed limit. MP4
encoded at CRF 23 / preset slow; 2.5–3× speed-up on the static demos,
5× on the generation demo where LLM wait time dominated.

Author: hqhq1025

README.md

@@ -7,8 +7,7 @@
 [Website](https://opencoworkai.github.io/open-codesign/) · [Quickstart](#quickstart) · [vs Claude Design](https://opencoworkai.github.io/open-codesign/claude-design-alternative) · [Docs](https://opencoworkai.github.io/open-codesign/quickstart) · [Contributing](./CONTRIBUTING.md) · [Security](./SECURITY.md)
 
 <p align="center">
-  <img src="https://placehold.co/1200x600/E8E5DE/0E0E10?text=open-codesign+demo" alt="Open CoDesign — prompt to prototype (demo coming soon)" width="900" />
-  <!-- Hero placeholder via placehold.co — real screenshot coming before launch -->
+  <img src="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/demos/app-showcase.gif" alt="Open CoDesign — multi-view app tour" width="900" />
 </p>
 
 <p align="center">
@@ -30,12 +29,15 @@ Open CoDesign turns a natural-language prompt into a polished HTML prototype, sl
 
 ---
 
-## Quick demo (60 s)
+## Quick demo
 
-_Demo video coming soon._
+Already using Claude Code? Your providers, models, and API keys import in one click:
 
-![Prompt to prototype in seconds](https://placehold.co/800x450/f5f0eb/c96442?text=Demo+GIF+coming+soon)
-<!-- Replace with real demo GIF before launch -->
+![Import from Claude Code in one click](https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/demos/claude-code-import.gif)
+
+From a blank prompt to a finished design — watch the agent plan, write, and self-check, then hand you back an artifact that already has hover states, tabs, and empty states wired up:
+
+![Generate a design from scratch](https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/demos/generate-from-scratch.gif)
 
 ---
 

README.zh-CN.md

@@ -7,8 +7,7 @@
 [官网](https://opencoworkai.github.io/open-codesign/) · [快速开始](#快速开始) · [对比 Claude Design](https://opencoworkai.github.io/open-codesign/zh/claude-design-alternative) · [贡献指南](./CONTRIBUTING.md) · [安全政策](./SECURITY.md)
 
 <p align="center">
-  <img src="https://placehold.co/1200x600/E8E5DE/0E0E10?text=open-codesign+demo" alt="Open CoDesign — 提示词到原型（演示即将上线）" width="900" />
-  <!-- Hero 占位（placehold.co）— 正式发布前替换为真实截图 -->
+  <img src="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/demos/app-showcase.gif" alt="Open CoDesign — 多视图应用展示" width="900" />
 </p>
 
 <p align="center">
@@ -30,12 +29,15 @@ Open CoDesign 把自然语言提示词变成精美的 HTML 原型、幻灯片或
 
 ---
 
-## 快速演示（60 秒）
+## 快速演示
 
-_演示视频即将上线。_
+已经在用 Claude Code？一键把 providers、模型、API key 全部导进来：
 
-![几秒内从提示词到原型](https://placehold.co/800x450/f5f0eb/c96442?text=演示+GIF+即将上线)
-<!-- 发布前替换为真实 GIF -->
+![一键导入 Claude Code 配置](https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/demos/claude-code-import.gif)
+
+从一条 prompt 到完整 design——看 agent 规划、写代码、自检，最后交回一个 hover / tab / 空状态都已接好的交互式 artifact：
+
+![从零生成一个 design](https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/demos/generate-from-scratch.gif)
 
 ---
 

website/.vitepress/theme/DemoVideo.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useData } from 'vitepress';
+import { computed } from 'vue';
+
+/**
+ * Thin wrapper around <video> that resolves a public-folder URL through
+ * VitePress's `base` config at runtime. Using `<source src="/demos/foo.mp4">`
+ * directly in markdown triggers Rollup to resolve it as a module import,
+ * which fails with the site's `/open-codesign/` base prefix.
+ */
+const props = defineProps<{
+  /** Path under `website/public`, e.g. `/demos/app-showcase.mp4`. */
+  src: string;
+  /** Poster image, also public-folder relative. */
+  poster?: string;
+  /** Autoplay loop muted (hero variant); otherwise show controls. */
+  hero?: boolean;
+  /** Label read by screen readers / UA. */
+  label?: string;
+}>();
+
+const { site } = useData();
+
+const base = computed(() => site.value.base.replace(/\/$/, ''));
+const url = computed(() => `${base.value}${props.src}`);
+const posterUrl = computed(() =>
+  props.poster ? `${base.value}${props.poster}` : undefined,
+);
+</script>
+
+<template>
+  <video
+    v-if="hero"
+    autoplay
+    loop
+    muted
+    playsinline
+    preload="metadata"
+    :poster="posterUrl"
+    :aria-label="label"
+  >
+    <source :src="url" type="video/mp4" />
+  </video>
+  <video
+    v-else
+    controls
+    preload="metadata"
+    :poster="posterUrl"
+    :aria-label="label"
+  >
+    <source :src="url" type="video/mp4" />
+  </video>
+</template>

website/.vitepress/theme/index.ts

@@ -1,10 +1,12 @@
 import DefaultTheme from 'vitepress/theme';
+import DemoVideo from './DemoVideo.vue';
 import SmartDownload from './SmartDownload.vue';
 import './style.css';
 
 export default {
   extends: DefaultTheme,
   enhanceApp({ app }: { app: import('vue').App }) {
     app.component('SmartDownload', SmartDownload);
+    app.component('DemoVideo', DemoVideo);
   },
 };

website/.vitepress/theme/style.css

@@ -283,3 +283,30 @@ body {
   background: var(--color-accent-hover);
   transform: translateY(-1px);
 }
+
+/* ── Demo video blocks ──────────────────────────────────────────────────── */
+
+/* Hero autoplay loop — sits between the VitePress hero and SmartDownload. */
+.codesign-hero-video {
+  max-width: 1080px;
+  margin: 2rem auto 0.5rem;
+  padding: 0 1.5rem;
+}
+.codesign-hero-video video {
+  width: 100%;
+  border-radius: 14px;
+  display: block;
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04), 0 16px 40px -16px rgba(26, 26, 26, 0.28);
+}
+
+/* Full-length demo with controls (generate-from-scratch walkthrough). */
+.codesign-demo-video {
+  max-width: 960px;
+  margin: 1.5rem auto 0;
+}
+.codesign-demo-video video {
+  width: 100%;
+  border-radius: 12px;
+  display: block;
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04), 0 12px 32px -12px rgba(26, 26, 26, 0.24);
+}

website/index.md

@@ -61,6 +61,10 @@ features:
     details: HTML (inlined CSS), PDF (via your local Chrome), PPTX, ZIP, and Markdown — all generated on-device. No Canva detour.
 ---
 
+<div class="codesign-hero-video">
+  <DemoVideo hero src="/demos/app-showcase.mp4" label="Open CoDesign multi-view app tour" />
+</div>
+
 <SmartDownload />
 
 <div class="codesign-section">
@@ -89,6 +93,18 @@ features:
 
 <div class="codesign-section">
 
+## Watch a design come to life
+
+<p class="lede">From a blank prompt to a finished artifact — the agent plans, writes, self-checks, and hands you something with hover states, tabs, and empty states already wired up.</p>
+
+<div class="codesign-demo-video">
+  <DemoVideo src="/demos/generate-from-scratch.mp4" label="Generate a design from scratch" />
+</div>
+
+</div>
+
+<div class="codesign-section">
+
 ## How it compares
 
 <p class="lede">We are not faster than Claude Design. We are different — open, multi-model, and local-first. The open-source alternative for teams that can't afford subscription lock-in or cloud data exposure.</p>