Intent first
從使用者要完成的動作開始，而非從視覺風格開始。
A machine-readable layout library
版型不是圖片。
是可以推理的決策。
一套為 AI agent 設計的網頁 layout atlas。每個 pattern 都清楚描述適用情境、內容形狀、主要任務、避用條件與響應式策略。
- 108
- LAYOUTS
- 39
- CATEGORIES
- 07
- MCP TOOLS
STRUCTURE / 001
01
02
03
agent.select()
Explicit tradeoffs
每個推薦都附帶避用條件，讓 agent 能排除錯誤選擇。
One source
Gallery、REST API 與 MCP 共用同一份結構化規格。
The full pattern catalog
108 種結構，
留在需要它們的地方。
完整 catalog 已移到獨立工作區。可依 9 個 families、39 個 categories、任務 intent、資訊密度與內容形狀搜尋，並逐一查看 agent specification。
- 18 chart layouts
- 108 agent-ready specs
- Responsive + accessibility
Agent selection protocol
讓選版型變成
可重複的推理流程
不是丟給 agent 一堆 screenshot，而是讓它按照同一套決策順序查詢、比較並說明取捨。
- 01
Describe the job
先說清楚主要使用者、前三項任務、必要內容與裝置限制。
catalog_overview() - 02
Find candidates
以 intent 和 content shape 搜尋，而不是用「要一個漂亮頁面」。
recommend_layouts({ brief }) - 03
Challenge the choice
逐一檢查 avoidWhen、響應式行為與無障礙注意事項。
compare_layouts({ ids }) - 04
Adapt, don’t clone
保留資訊架構，依品牌、內容量與產品脈絡重做視覺。
get_layout({ id }) - 05
Close the loop — optionally
實作後經使用者同意，回報修改與原因；新結構可自願投稿，永不自動發布。
submit_layout_feedback({ ... })
Plug into your agent
一個 endpoint，
完整 layout intelligence。
支援 Streamable HTTP 與 stdio。啟動 Docker Compose 後，agent 可以直接探索、搜尋、推薦、比較與讀取完整規格。
{
"mcpServers": {
"layout-atlas": {
"url": "https://atlas.xylonstud.io/mcp"
}
}
}