ILLUSTRATOR BUILDING SITE · CODEX SKILL

讓設計稿,
成為可以上線的網站。

放入 Illustrator 與整頁 JPG,讓 Codex 協助整理素材、製作響應式網站、校稿修改,再交付正式 Vite 專案。

設計由你掌握,繁複的製作步驟交給 agent 協助。
PROJECT / DESIGN TO WEBSITE● ● ●
素材分組首頁視覺
城市全景
生活提案
預約賞屋
校稿模式 ↗
A NEW PLACE TO LIVE

從一張設計稿
到一段新的生活。

首頁單元 · 手機版
等待校對

製作流程示意,非實際校稿工具畫面

你準備Illustrator 原檔 + 整頁 JPG一起完成素材 → 網站 → 校稿 → Vite / ZIP
WHAT IT DOES

把每次重做的事,
變成可重複的流程。

每個建案的設計都不同。這個 skill 保留製作經驗與檢查方法,依各案重新理解構圖、素材與互動。

01 / ASSETS

看懂素材,整理組合

搭配整頁參考圖,辨認圖片、標題、背景與遮色片。保留來源對照,優先準備真正的 2× 素材。

02 / RESPONSIVE

桌機與手機,各自好讀

重排圖文與間距,檢查選單缺項、背景滿高、LOGO 遮擋及多餘圖說。全景與輪播依需求配置。

03 / REVIEW

點選單元,留下修改

製作校稿介面,支援備註、暫存與下載修改清單。匯出清單交回 Codex,持續調整已確認的網站。

04 / IDENTITY

favicon 與分享圖片

準備多尺寸 ICO、og:image 與分享資訊。依本案品牌素材製作,上線前核對正式網址。

05 / CONTACT

讓預約表單接得上

核對欄位、縣市連動、同意狀態與寄信設定,處理成功及失敗回應。沿用同案服務,不混入前案資料。

06 / DELIVERY

完整交付,保留校稿

確認後整合獨立 Vite 專案,移除正式版編輯工具。建置檢查後,分別提供原始碼與 dist ZIP。

HOW IT WORKS

從資料夾開始,
逐步變成正式網站。

不必先手動分類所有圖層。先做能判斷的工作,需要你選擇時,再提供具體預覽。

1

放好設計檔

提供 .ai、整頁 JPG;有連結圖片請一併封裝。同案預告碼也可一起提供。

2

啟動製作

貼上啟動指令,盤點設計與素材,建立分組及可預覽網站。

3

校稿與確認

查看手機和桌機,在單元留下備註,匯出清單交回修改。

4

建置與交付

確認完成後產生正式專案與 ZIP。寄測試信、部署需另外要求。

INSTALL ONCE · REUSE FOR EACH PROJECT

下載 skill,
交給你的 Codex 安裝。

先下載安裝包,或直接把安裝指令交給 Codex。這是本機 skill,網站按鈕不會直接改動你的電腦。

下載 skill ZIP ↓

安裝包包含 SKILL.md、參考文件與輔助腳本;不含建案素材或寄信設定。

請閱讀 https://illustrator-building-site-skill.pages.dev/install.md,依照說明下載並安裝 illustrator-building-site 個人 Codex skill。先檢查內容,已有同名版本時先比較並保留自訂修改。完成後驗證安裝並告訴我如何使用。不要部署或寄信。

安裝後若目前對話未列出 skill,請開啟新對話再使用。

START A NEW PROJECT

放好檔案,貼上這段話。

將「案名」換成你的新案名稱。可直接編輯下方內容,再複製給 Codex。

 先預覽與校稿,確認後再正式打包。
BEFORE YOU BEGIN

你可能還想知道。

只提供 Illustrator 和 JPG 就能開始嗎?

可以先進行素材整理與網站預覽。若原檔有外部連結圖片,也要一起提供。缺字型、遺失連結或複雜遮色片可能需要額外處理,不能保證所有原檔都能完全自動轉換。

哪些地方還需要我確認?

素材有多種合理組合、原稿未交代的手機構圖,以及最後的視覺確認。Codex 會先提供具體畫面與建議,讓你有依據地決定。

表單與正式網址可以後補嗎?

可以。先做版面,正式啟用前補齊聯絡資訊、後端服務與寄信設定;正式網址確定後再補分享圖片的公開絕對網址。畫面完成不代表郵件服務已啟用。

需要什麼環境?會自動上線嗎?

需要可讀寫專案檔案的 Codex 環境。Illustrator 原生擷取需要本機 Illustrator 與可用的操作介面;建置需 Node.js/npm。缺少環境時先說明可完成的部分。預設不寄測試信、不部署。