For growing teams
++ ${price} + /month +
+ + """, "price"), + new(""" +$24
\n", "price"), + new DesignToCodeSimulationPart(" );\n}\n"), + ], + Model = new AgentModel("Your model"), + FileName = "PricingCard.tsx", +}; +``` + +A design can also be drawn in code instead of shipped as an image: give the source a `Sketch` (a `DesignToCodeSketch` +that draws into the design's rectangle with the card's `DesignToCodeSketchPalette`, so it follows light and dark) and +its `SketchSize`. The demos on this page draw a small pricing card that way and take everything from +`DesignToCodeDemoData`; the model credited is a real one (checked on 2026-10-29), the plan and prices are invented. + +### Anatomy + +1. **Design pane**: a header with the design's name, a "Sample" or "Design file" tag and Remove; under it the + screenshot with its region boxes and tags, or the drop zone when there is no design. +2. **Region boxes and tags**: a 1px accent outline per region and a small tag level with its top, in the margin to its + left (inside the box when there is no room). A tag is a button named "Price: show its code". +3. **Output pane**: a header with the file name, the model's mark and name, the Code and Preview toggle and Copy; under + it the code with line numbers, or the live preview. +4. **Footer**: the status (an icon, a short label, the file and meta text such as "52 lines in 3.4s"), Import design + file and the main action, which reads Generate code, Stop, Regenerate or Try again. + +### The run + +`Phase` follows the run: `Empty` without a design, `Ready` with one, then `Analyzing`, `Writing` and `Done`, or +`Stopped` and `Error`. Generate code (or `Generate()`) starts a run and returns the output to Code. Stop, Escape or +`Stop()` ends a run that is analyzing or writing; the code written so far is kept. `Code` holds the code on screen and +`Completed` reports the finished code with its line count and time. + +| Phase | Status | Main action | +|---|---|---| +| Empty | Add a design to start | Generate code (off) | +| Ready | Ready pricing-card.png | Generate code | +| Analyzing | Analyzing layout pricing-card.png · 3 regions | Stop | +| Writing | Writing PricingCard.tsx · 5 regions | Stop | +| Done | Done PricingCard.tsx · 52 lines in 3.4s | Regenerate | +| Stopped | Stopped PricingCard.tsx · Partial code kept | Regenerate | +| Error | Generation failed: the model timed out. Try again. | Try again | + +### Your model + +Give the card a `Generator`: an async delegate that receives the design and a `DesignToCodeContext`. Call `AddRegion` +for each layout region as it is detected (its box in percent of the design), then `Write` code chunks as they stream, +passing the id of the region a chunk implements so its lines link to the box. Complete the task when done, throw to show +the error, and stop when the context's token is cancelled. Chunks can be any size: the card paces them into whole words. + +$24
\n", "price"), + new DesignToCodeSimulationPart(" );\n}\n"), + ], + Model = new AgentModel("Your model"), + FileName = "PricingCard.tsx", +}; +``` + +设计也可以用代码绘制，而不是提供图像：给来源设置 `Sketch`（一个 `DesignToCodeSketch`，用卡片的 `DesignToCodeSketchPalette` +在设计的矩形中绘制，因此会跟随浅色和深色主题）以及它的 `SketchSize`。本页的演示就是这样绘制一张小型价格卡片，所有内容都来自 +`DesignToCodeDemoData`；署名的模型是真实的（核对于 2026-10-29），方案和价格是虚构的。 + +### 结构 + +1. **设计面板**：标题栏显示设计的名称、“Sample”或“Design file”标签以及“移除”按钮；下方是带区域方框和标签的截图， + 没有设计时则是拖放区。 +2. **区域方框与标签**：每个区域一个 1px 的强调色轮廓，以及一个与其顶边对齐、位于其左侧留白中的小标签（没有空间时放在方框内）。 + 标签是一个按钮，名称类似“Price: show its code”。 +3. **输出面板**：标题栏显示文件名、模型的标记与名称、“代码 / 预览”切换以及“复制”；下方是带行号的代码，或实时预览。 +4. **底栏**：状态（图标、简短标签、文件以及类似“52 lines in 3.4s”的附加信息）、“导入设计文件”以及主操作， + 主操作依次显示 Generate code、Stop、Regenerate 或 Try again。 + +### 一次运行 + +`Phase` 跟随运行进度：没有设计时为 `Empty`，有设计时为 `Ready`，然后是 `Analyzing`、`Writing` 和 `Done`，或者 +`Stopped` 与 `Error`。Generate code（或 `Generate()`）开始一次运行，并把输出切回“代码”。Stop、Escape 或 `Stop()` +结束正在分析或编写的运行；已经写出的代码会保留。`Code` 保存屏幕上的代码，`Completed` 报告完成的代码以及行数和用时。 + +| 阶段 | 状态 | 主操作 | +|---|---|---| +| Empty | Add a design to start | Generate code（不可用） | +| Ready | Ready pricing-card.png | Generate code | +| Analyzing | Analyzing layout pricing-card.png · 3 regions | Stop | +| Writing | Writing PricingCard.tsx · 5 regions | Stop | +| Done | Done PricingCard.tsx · 52 lines in 3.4s | Regenerate | +| Stopped | Stopped PricingCard.tsx · Partial code kept | Regenerate | +| Error | Generation failed: the model timed out. Try again. | Try again | + +### 接入你的模型 + +为卡片提供 `Generator`：一个接收设计与 `DesignToCodeContext` 的异步委托。每识别出一个布局区域就调用 `AddRegion` +（方框以设计尺寸的百分比表示），然后在代码流式到达时调用 `Write`，并传入该代码块所实现区域的 id，让这些行与方框关联。 +完成时结束任务，抛出异常以显示错误，并在上下文的令牌取消时停止。代码块可以是任意大小：卡片会把它们整理成完整的单词逐批显示。 + +$24
\n", "price"), + new DesignToCodeSimulationPart(" );\n}\n"), + ], + Model = new AgentModel("Your model"), + FileName = "PricingCard.tsx", +}; +``` + +設計也可以用程式碼繪製，而不是提供影像：為來源設定 `Sketch`（一個 `DesignToCodeSketch`，以卡片的 `DesignToCodeSketchPalette` +在設計的矩形中繪製，因此會跟隨淺色與深色主題）以及它的 `SketchSize`。本頁的示範就是這樣繪製一張小型價格卡片，所有內容都來自 +`DesignToCodeDemoData`；署名的模型是真實的（核對於 2026-10-29），方案與價格是虛構的。 + +### 結構 + +1. **設計面板**：標題列顯示設計的名稱、「Sample」或「Design file」標籤以及「移除」按鈕；下方是帶區域方框與標籤的截圖， + 沒有設計時則是拖放區。 +2. **區域方框與標籤**：每個區域一個 1px 的強調色外框，以及一個與其頂邊對齊、位於其左側留白中的小標籤（沒有空間時放在方框內）。 + 標籤是一個按鈕，名稱類似「Price: show its code」。 +3. **輸出面板**：標題列顯示檔名、模型的標誌與名稱、「程式碼 / 預覽」切換以及「複製」；下方是帶行號的程式碼，或即時預覽。 +4. **底列**：狀態（圖示、簡短標籤、檔案以及類似「52 lines in 3.4s」的附加資訊）、「匯入設計檔」以及主要操作， + 主要操作依序顯示 Generate code、Stop、Regenerate 或 Try again。 + +### 一次執行 + +`Phase` 跟著執行進度：沒有設計時為 `Empty`，有設計時為 `Ready`，接著是 `Analyzing`、`Writing` 與 `Done`，或是 +`Stopped` 與 `Error`。Generate code（或 `Generate()`）開始一次執行，並把輸出切回「程式碼」。Stop、Escape 或 `Stop()` +結束正在分析或撰寫的執行；已經寫出的程式碼會保留。`Code` 保存畫面上的程式碼，`Completed` 回報完成的程式碼以及行數與耗時。 + +| 階段 | 狀態 | 主要操作 | +|---|---|---| +| Empty | Add a design to start | Generate code（無法使用） | +| Ready | Ready pricing-card.png | Generate code | +| Analyzing | Analyzing layout pricing-card.png · 3 regions | Stop | +| Writing | Writing PricingCard.tsx · 5 regions | Stop | +| Done | Done PricingCard.tsx · 52 lines in 3.4s | Regenerate | +| Stopped | Stopped PricingCard.tsx · Partial code kept | Regenerate | +| Error | Generation failed: the model timed out. Try again. | Try again | + +### 接上你的模型 + +為卡片提供 `Generator`：一個接收設計與 `DesignToCodeContext` 的非同步委派。每辨識出一個版面區域就呼叫 `AddRegion` +（方框以設計尺寸的百分比表示），接著在程式碼串流抵達時呼叫 `Write`，並傳入該程式碼片段所實作區域的 id，讓這些行與方框連結。 +完成時結束工作，擲出例外以顯示錯誤，並在內容的權杖取消時停止。程式碼片段可以是任意大小：卡片會把它們整理成完整的單字逐批顯示。 + +