Skip to content

Commit d9b823a

Browse files
hqhq1025hqhq1025
committed
docs: restructure README + site for clearer visual rhythm
- README hero stays as product-hero.png; the single big GIF (generate-from-scratch) now owns its own 'Watch a design come to life' section, followed by 4 static Highlights and the Claude Code / Codex import GIF just before Quickstart — alternating static/motion instead of back-to-back autoplay. - Website hero video replaced by the same product-hero.png for faster first paint; added a 2x3 'Take a closer look' gallery of six screenshots between 'How it works' and the full demo video. - New .codesign-hero-shot and .codesign-gallery styles. - Claude Code copy now calls out Codex too (both are supported).
1 parent 03bb331 commit d9b823a

5 files changed

Lines changed: 226 additions & 17 deletions

File tree

‎README.md‎

Lines changed: 45 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
[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)
88

99
<p align="center">
10-
<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" />
10+
<img src="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/screenshots/product-hero.png" alt="Open CoDesign — prompt on the left, live artifact on the right" width="1000" />
1111
</p>
1212

1313
<p align="center">
@@ -29,15 +29,46 @@ Open CoDesign turns a natural-language prompt into a polished HTML prototype, sl
2929

3030
---
3131

32-
## Quick demo
32+
## Watch a design come to life
3333

34-
Already using Claude Code? Your providers, models, and API keys import in one click:
34+
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:
3535

36-
![Import from Claude Code in one click](https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/demos/claude-code-import.gif)
36+
![Generate a design from scratch](https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/demos/generate-from-scratch.gif)
3737

38-
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:
38+
---
3939

40-
![Generate a design from scratch](https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/demos/generate-from-scratch.gif)
40+
## Highlights
41+
42+
<table>
43+
<tr>
44+
<td width="50%">
45+
<a href="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/screenshots/comment-mode.png">
46+
<img src="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/screenshots/comment-mode.png" alt="Click any element, leave a pin, let the model rewrite that region" />
47+
</a>
48+
<p><b>Comment, don't retype.</b><br/>Click any element, drop a pin, the model rewrites only that region.</p>
49+
</td>
50+
<td width="50%">
51+
<a href="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/screenshots/tweaks-sliders.png">
52+
<img src="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/screenshots/tweaks-sliders.png" alt="AI-emitted tweaks panel with color pickers and RGB inputs" />
53+
</a>
54+
<p><b>AI-tuned sliders.</b><br/>The model emits the parameters worth tweaking — drag to refine without a round trip.</p>
55+
</td>
56+
</tr>
57+
<tr>
58+
<td width="50%">
59+
<a href="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/screenshots/hub-your-designs.png">
60+
<img src="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/screenshots/hub-your-designs.png" alt="Your Designs hub, filled with real generated artifacts" />
61+
</a>
62+
<p><b>Every iteration, kept.</b><br/>Designs live on disk as SQLite snapshots. Hop between the last five with zero delay.</p>
63+
</td>
64+
<td width="50%">
65+
<a href="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/screenshots/agent-panel.png">
66+
<img src="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/screenshots/agent-panel.png" alt="Live agent panel showing todos and streaming tool calls" />
67+
</a>
68+
<p><b>Watch the agent work.</b><br/>Todos, tool calls, and streamed reasoning — fully visible, fully interruptible.</p>
69+
</td>
70+
</tr>
71+
</table>
4172

4273
---
4374

@@ -56,6 +87,14 @@ From a blank prompt to a finished design — watch the agent plan, write, and se
5687

5788
---
5889

90+
## Already using Claude Code or Codex?
91+
92+
Your providers, models, and API keys import in one click — no copy-paste, no re-entering settings:
93+
94+
![Import from Claude Code or Codex in one click](https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/demos/claude-code-import.gif)
95+
96+
---
97+
5998
## Quickstart
6099

61100
### 1. Install

‎README.zh-CN.md‎

Lines changed: 45 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
[官网](https://opencoworkai.github.io/open-codesign/) · [快速开始](#快速开始) · [对比 Claude Design](https://opencoworkai.github.io/open-codesign/zh/claude-design-alternative) · [贡献指南](./CONTRIBUTING.md) · [安全政策](./SECURITY.md)
88

99
<p align="center">
10-
<img src="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/demos/app-showcase.gif" alt="Open CoDesign — 多视图应用展示" width="900" />
10+
<img src="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/screenshots/product-hero.png" alt="Open CoDesign — 左边对话，右边成品" width="1000" />
1111
</p>
1212

1313
<p align="center">
@@ -29,15 +29,54 @@ Open CoDesign 把自然语言提示词变成精美的 HTML 原型、幻灯片或
2929

3030
---
3131

32-
## 快速演示
32+
## 一份 design 从无到有
3333

34-
已经在用 Claude Code？一键把 providers、模型、API key 全部导进来：
34+
从一条 prompt 到完整 artifact——agent 规划、写代码、自检，最后交回一个 hover / tab / 空状态都已接好的交互式产物：
3535

36-
![一键导入 Claude Code 配置](https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/demos/claude-code-import.gif)
36+
![从零生成一个 design](https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/demos/generate-from-scratch.gif)
37+
38+
---
3739

38-
从一条 prompt 到完整 design——看 agent 规划、写代码、自检，最后交回一个 hover / tab / 空状态都已接好的交互式 artifact：
40+
## 亮点
41+
42+
<table>
43+
<tr>
44+
<td width="50%">
45+
<a href="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/screenshots/comment-mode.png">
46+
<img src="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/screenshots/comment-mode.png" alt="点击任意元素落 pin，模型只重写该区域" />
47+
</a>
48+
<p><b>评论别重写。</b><br/>在预览里点任意元素落 pin，模型只改那一块。</p>
49+
</td>
50+
<td width="50%">
51+
<a href="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/screenshots/tweaks-sliders.png">
52+
<img src="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/screenshots/tweaks-sliders.png" alt="AI 生成的调节面板——色板 + RGB 输入" />
53+
</a>
54+
<p><b>AI 调的滑块。</b><br/>模型主动给出值得调的参数，拖动就能微调。</p>
55+
</td>
56+
</tr>
57+
<tr>
58+
<td width="50%">
59+
<a href="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/screenshots/hub-your-designs.png">
60+
<img src="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/screenshots/hub-your-designs.png" alt="设计主页 — 所有生成过的 artifact" />
61+
</a>
62+
<p><b>每次迭代都在。</b><br/>Design 以 SQLite 快照存在磁盘，最近 5 个零延迟切换。</p>
63+
</td>
64+
<td width="50%">
65+
<a href="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/screenshots/agent-panel.png">
66+
<img src="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/screenshots/agent-panel.png" alt="Agent 面板——实时 todos 与流式 tool call" />
67+
</a>
68+
<p><b>看 agent 干活。</b><br/>Todos、tool call、流式推理全部可见，随时可打断。</p>
69+
</td>
70+
</tr>
71+
</table>
3972

40-
![从零生成一个 design](https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/demos/generate-from-scratch.gif)
73+
---
74+
75+
## 已经在用 Claude Code 或 Codex？
76+
77+
一键把 providers、models、API keys 全部导入——不用复制粘贴，不用重配设置：
78+
79+
![一键导入 Claude Code 或 Codex 配置](https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/demos/claude-code-import.gif)
4180

4281
---
4382

‎website/.vitepress/theme/style.css‎

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -286,7 +286,60 @@ body {
286286

287287
/* ── Demo video blocks ──────────────────────────────────────────────────── */
288288

289-
/* Hero autoplay loop — sits between the VitePress hero and SmartDownload. */
289+
/* Static hero shot — sits between VitePress hero and SmartDownload. */
290+
.codesign-hero-shot {
291+
max-width: 1080px;
292+
margin: 2rem auto 0.5rem;
293+
padding: 0 1.5rem;
294+
}
295+
.codesign-hero-shot img {
296+
width: 100%;
297+
border-radius: 14px;
298+
display: block;
299+
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04), 0 16px 40px -16px rgba(26, 26, 26, 0.28);
300+
}
301+
302+
/* Screenshot gallery — 2×3 grid on desktop, 1 column on mobile. */
303+
.codesign-gallery {
304+
display: grid;
305+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
306+
gap: 20px;
307+
}
308+
.codesign-gallery figure {
309+
margin: 0;
310+
background: var(--color-surface);
311+
border: 1px solid var(--color-border-muted);
312+
border-radius: var(--radius-xl);
313+
overflow: hidden;
314+
box-shadow: var(--shadow-soft);
315+
transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, border-color
316+
0.18s ease;
317+
}
318+
.codesign-gallery figure:hover {
319+
transform: translateY(-2px);
320+
border-color: var(--color-accent-muted);
321+
box-shadow: var(--shadow-card);
322+
}
323+
.codesign-gallery img {
324+
width: 100%;
325+
display: block;
326+
aspect-ratio: 16 / 10;
327+
object-fit: cover;
328+
object-position: center top;
329+
border-bottom: 1px solid var(--color-border-subtle);
330+
}
331+
.codesign-gallery figcaption {
332+
padding: 14px 18px 18px;
333+
color: var(--color-text-secondary);
334+
font-size: 0.92rem;
335+
line-height: 1.5;
336+
}
337+
.codesign-gallery figcaption b {
338+
color: var(--color-text-primary);
339+
font-weight: 600;
340+
}
341+
342+
/* Hero autoplay loop — legacy, kept for pages that still use DemoVideo hero. */
290343
.codesign-hero-video {
291344
max-width: 1080px;
292345
margin: 2rem auto 0.5rem;

‎website/index.md‎

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,12 @@ features:
6161
details: HTML (inlined CSS), PDF (via your local Chrome), PPTX, ZIP, and Markdown — all generated on-device. No Canva detour.
6262
---
6363

64-
<div class="codesign-hero-video">
65-
<DemoVideo hero src="/demos/app-showcase.mp4" label="Open CoDesign multi-view app tour" />
64+
<script setup>
65+
import { withBase } from 'vitepress'
66+
</script>
67+
68+
<div class="codesign-hero-shot">
69+
<img :src="withBase('/screenshots/product-hero.png')" alt="Open CoDesign — prompt on the left, live artifact on the right" />
6670
</div>
6771

6872
<SmartDownload />
@@ -93,6 +97,41 @@ features:
9397

9498
<div class="codesign-section">
9599

100+
## Take a closer look
101+
102+
<p class="lede">Six moments from the app — from first launch to region-level rewrites.</p>
103+
104+
<div class="codesign-gallery">
105+
<figure>
106+
<img :src="withBase('/screenshots/comment-mode.png')" alt="Comment mode — click any element, drop a pin, the model rewrites only that region" />
107+
<figcaption><b>Comment, don't retype.</b> Drop pins on the preview; the model rewrites just that region.</figcaption>
108+
</figure>
109+
<figure>
110+
<img :src="withBase('/screenshots/tweaks-sliders.png')" alt="AI-emitted tweaks panel — color pickers and RGB inputs" />
111+
<figcaption><b>AI-tuned sliders.</b> The model emits the parameters worth tweaking. Drag, don't re-prompt.</figcaption>
112+
</figure>
113+
<figure>
114+
<img :src="withBase('/screenshots/agent-panel.png')" alt="Live agent panel showing todos and streaming tool calls" />
115+
<figcaption><b>Watch the agent work.</b> Todos, tool calls, and streamed reasoning — always visible, always interruptible.</figcaption>
116+
</figure>
117+
<figure>
118+
<img :src="withBase('/screenshots/hub-your-designs.png')" alt="Your Designs hub, filled with real generated artifacts" />
119+
<figcaption><b>Every iteration, kept.</b> Designs live on disk as SQLite snapshots; switch between five in zero ms.</figcaption>
120+
</figure>
121+
<figure>
122+
<img :src="withBase('/screenshots/hub-examples.png')" alt="Built-in example library — fifteen ready-to-run design briefs" />
123+
<figcaption><b>Fifteen demo briefs.</b> Landing, dashboard, pricing, pitch deck, chat UI — one click to see Open CoDesign in action.</figcaption>
124+
</figure>
125+
<figure>
126+
<img :src="withBase('/screenshots/add-provider-menu.png')" alt="Add provider menu — Claude Code, Codex, custom, and presets" />
127+
<figcaption><b>Bring your own model.</b> Import Claude Code / Codex configs, or pick any OpenAI-compatible provider.</figcaption>
128+
</figure>
129+
</div>
130+
131+
</div>
132+
133+
<div class="codesign-section">
134+
96135
## Watch a design come to life
97136

98137
<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>

‎website/zh/index.md‎

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,12 @@ features:
6161
details: HTML（内联 CSS）、PDF（本机 Chrome）、PPTX、ZIP、Markdown——全部本地生成，无需绕道 Canva。
6262
---
6363

64-
<div class="codesign-hero-video">
65-
<DemoVideo hero src="/demos/app-showcase.mp4" label="Open CoDesign 多视图应用展示" />
64+
<script setup>
65+
import { withBase } from 'vitepress'
66+
</script>
67+
68+
<div class="codesign-hero-shot">
69+
<img :src="withBase('/screenshots/product-hero.png')" alt="Open CoDesign — 左侧 chat，右侧 artifact 实时渲染" />
6670
</div>
6771

6872
<SmartDownload />
@@ -93,6 +97,41 @@ features:
9397

9498
<div class="codesign-section">
9599

100+
## 深入看一看
101+
102+
<p class="lede">从首次启动到局部重写——6 个你会真实遇到的画面。</p>
103+
104+
<div class="codesign-gallery">
105+
<figure>
106+
<img :src="withBase('/screenshots/comment-mode.png')" alt="评论模式 — 点击任意元素落 pin，模型只重写该区域" />
107+
<figcaption><b>评论别重写。</b>在预览落 pin，模型只改那一块。</figcaption>
108+
</figure>
109+
<figure>
110+
<img :src="withBase('/screenshots/tweaks-sliders.png')" alt="AI 生成的调节面板——色板 + RGB 输入" />
111+
<figcaption><b>AI 调的滑块。</b>模型主动给出值得调的参数，拖动就能微调。</figcaption>
112+
</figure>
113+
<figure>
114+
<img :src="withBase('/screenshots/agent-panel.png')" alt="Agent 面板——实时 todos 与流式 tool call" />
115+
<figcaption><b>看 agent 干活。</b>Todos、tool call、流式推理全部可见。</figcaption>
116+
</figure>
117+
<figure>
118+
<img :src="withBase('/screenshots/hub-your-designs.png')" alt="设计主页 — 所有生成过的 artifact" />
119+
<figcaption><b>每次迭代都在。</b>本地 SQLite 快照，最近 5 个零延迟切换。</figcaption>
120+
</figure>
121+
<figure>
122+
<img :src="withBase('/screenshots/hub-examples.png')" alt="内置示例库 — 15 个即可运行的设计命题" />
123+
<figcaption><b>15 个 demo brief。</b>落地页、仪表盘、定价、聊天 UI 一键体验。</figcaption>
124+
</figure>
125+
<figure>
126+
<img :src="withBase('/screenshots/add-provider-menu.png')" alt="添加 provider 菜单——Claude Code、Codex、自定义、预设" />
127+
<figcaption><b>自带模型。</b>导入 Claude Code / Codex 配置，或任何 OpenAI 兼容 provider。</figcaption>
128+
</figure>
129+
</div>
130+
131+
</div>
132+
133+
<div class="codesign-section">
134+
96135
## 一份 design 从无到有
97136

98137
<p class="lede">从空白 prompt 到完整 artifact——agent 规划、写代码、自检，最后交回一个 hover / tab / 空状态都已接好的交互式设计。</p>

0 commit comments

Comments
 (0)