場景集
對話分享
複製連結
下一個
：
文字生圖
Canvas 寫程式給你看
想要
Mermaid 流程圖
、
React 元件
、
Chart.js 圖表
還是
HTML 表格
？描述需求 — Canvas 邊寫程式邊渲染，每個 artifact 都可編輯、迭代、匯出。
Claude 4.7 Opus
(Bedrock)
選擇知識庫
瀏覽組織分享
🎨
描述你要的圖、表格、元件 — Canvas 會寫程式給你看
Mermaid
React
Chart
HTML Table
幫我畫一張 Q1 客戶旅程的流程圖，從用戶來訪到付費轉換
Claude 4.7 Opus
(Bedrock)
選擇知識庫
瀏覽組織分享
分享
幫我畫一張 Q1 客戶旅程的流程圖，從用戶來訪到付費轉換
用 Mermaid 寫流程圖中...
我用 Mermaid 流程圖呈現 — 5 個關鍵節點 + 2 個分支，右側 Canvas 邊寫邊渲染。
流程圖已在右側畫布顯示
繼續對話...
Q1 客戶旅程流程圖
是
是
否
離開
否
需登入
用戶來訪
瀏覽產品頁
感興趣？
加入購物車
已登入？
填寫付款資料
付費轉換
✓
Claude 4.7 Opus
(Bedrock)
選擇知識庫
瀏覽組織分享
分享
再幫我做：onboarding 步驟條的 React 元件 + Q1 轉換漏斗 chart + 競品比較表
並行生成 3 個 artifact 中...
已開三個新分頁，全都可以點 Code / Preview 切換看程式碼或畫面。
Onboarding.tsx
conversion.chart.js
competitors.html
繼續對話...
Onboarding 步驟條 React 元件
歡迎使用
完成以下步驟即可開始使用所有功能
註冊
驗證
個人化
完成
進度：1 / 4
重設
上一步
下一步
Claude 4.7 Opus
(Bedrock)
選擇知識庫
瀏覽組織分享
分享
再幫我做：onboarding 步驟條的 React 元件 + Q1 轉換漏斗 chart + 競品比較表
並行生成 3 個 artifact 中...
已開三個新分頁，全都可以點 Code / Preview 切換看程式碼或畫面。
Onboarding.tsx
conversion.chart.js
competitors.html
繼續對話...
Onboarding 步驟條 React 元件
Onboarding.tsx
export function
Onboarding
({ step }: { step:
number
}) {
const
steps = [
'註冊'
,
'驗證'
,
'個人化'
,
'完成'
];
return
( <
div
className
=
"flex gap-2"
> {steps.
map
((s, i) => ( <
div
key
={i}
className
={
cn
(
'flex-1 px-3 py-2 rounded-lg text-sm'
, i < step ?
'bg-blue-600 text-white'
: i === step ?
'border-2 border-blue-600'
:
'bg-slate-100'
)} > {s} </
div
> ))} </
div
> ); }
核心流程
1
用文字描述需求
「畫個流程圖」「做個 React 步驟條」「整理成表格」— Canvas 自動挑合適的格式。
2
看 AI 邊寫程式邊渲染
右側 Canvas 同時顯示
Code
與
Preview
— Mermaid / React / Chart.js / HTML 都即時可見。
3
多 artifact + 匯出 / 推 Repo
同一個對話可生成多個分頁 artifact，一鍵匯出 PNG / PDF / MD，或直接 commit 到 GitHub。
4
切換 Code 查看程式碼
點擊右上角
</>
圖示切換到原始碼檢視 — 可直接在 Canvas 裡編輯，改完立即重新渲染。