快速入門

The tool gallery - every tool as a card, grouped by category

Lolly 會把你的規則——色彩、字體、版面、邏輯——轉換成任何人都能使用的工具,只要填入幾個欄位,就能做出最終檔案:圖片、PDF、社群卡片、影片。不需要學習,也不需要上傳:一切都在你的裝置上執行,不論連線與否。

這是你應該最先讀的一頁。兩件事能讓你立刻上手:讓 Lolly 成為你的(把它指向你的品牌),以及帶入你已經擁有的東西(你的設計檔案與權杖)。其餘內容,一個連結就能到達。

剛接觸 Lolly,只想做點東西?打開應用程式,從工具庫中選一個工具,填好空格,按下渲染即可。等你想讓它穿上你自己的品牌時,再回來這裡。

1. 讓它成為你的——設定你的品牌

在 Lolly 中,你的品牌是一份小小的設計權杖文件——色彩、字體,以及少數幾項規則——每個工具都會依此渲染。只要設定一次,你做出來的一切就會因為建構方式而自然符合品牌,而不是靠事後審查。有三種方式可以匯入,挑一個最符合你品牌目前所在之處的方式。

從零開始(精靈工具)

The Brand Studio start screen - name, primary colour, and a derived palette

第一次執行時,你會進入起始畫面(#/start)。輸入名稱和主色,Lolly 就會推導出一套完整、無障礙的調色盤——涵蓋亮/暗背景色、文字色、強調色——所用的正是引擎在其他地方使用的同一套色彩運算。選一款字體,不到一分鐘就有一個可運作的品牌。之後你隨時可以再調整任何細節。

匯入你已經擁有的品牌

如果你的品牌已經以設計權杖的形式存在——來自 PenpotTokens Studio(Figma),或任何純 DTCG 檔案——直接整批匯入,不必重新輸入一遍。有兩種途徑:

# a monolithic tokens.json, a one-file-per-set directory, or a Penpot project archive
npm run ingest:brand -- ./my-tokens.json --name acme --label "Acme" --activate

ingest:brand 支援 Penpot / Tokens Studio 匯出同一份文件時所用的所有三種容器格式——單一的 tokens.json、一個目錄($metadata.json 加上各組別檔案),或一個 project.penpot 封存檔。加上 --activate 後,它會把這個品牌註冊為一個設定檔、切換過去,並重建目錄。品牌包與設定檔如何搭配運作,請見設定

在應用程式中微調

The Dashboard's Design-system tab - the active brand shown read-only

品牌啟用後,儀表板的你的品牌編輯器(#/d)是即時編輯器——修改一個色彩或角色,頁面上所有預覽都會隨你輸入即時更新。同一個品牌也會摘要顯示在個人檔案 → 你的品牌卡片上。字體是真實的:從 Google Fonts 中挑選,Lolly 會把檔案當作品牌資產儲存在你的裝置上,讓你的字體排印能離線使用,渲染時也完全不需要向外抓取。

滿意之後,把品牌匯出成一個 LollyBrand——一個單一檔案,同事匯入後就能得到完全相同的調色盤、字體與規則。品牌就是這樣在人與機器之間流通,中間不需要伺服器。

品牌權杖可以雙向往返。因為 Lolly 的品牌本身就是 DTCG 權杖——這正是 Penpot 原生讀寫、Tokens Studio 帶進 Figma 的格式——你用來設計的調色盤,和 Lolly 強制執行的調色盤,是同一份文件,而不是兩份需要手動同步的清單。詳見設計權杖

2. 帶入你已經擁有的東西

你不需要從空白頁面開始。Lolly 會開啟你已經完成的設計成果,以及你已經擁有的開放格式檔案。

開放格式的設計檔案

Figma、Penpot、Illustrator、InDesign,或任何 SVG 應用程式中完成的作品,不必被鎖在你當初繪製它的那個應用程式裡。打開版面工作室,點選匯入設計,檔案就會以可編輯版面的形式開啟——而不是一張攤平的圖片。每個圖層都會變成一個可編輯的方塊:文字仍可重新輸入、形狀仍是形狀、圖片會進入你的資料庫,複雜的向量圖稿也會忠實保留。它抵達時就已經套用你的品牌字體與色彩規則。

你擁有的匯入方式
一個 Figma 頁框(frame)原生 .fig(File → Save local copy),或匯出 SVG
一個 Penpot 設計.penpot 匯出檔,或任何 SVG
一個 Illustrator 檔案原生 .ai(相容 PDF)或 .pdf——可直接開啟
一個 InDesign 版面.idml(File → Export → InDesign Markup)
其他任何東西任何 SVG——通用的匯入之門

整個匯入過程都在你的裝置上完成——檔案在你的瀏覽器中解析,不會上傳任何東西。完整細節,以及究竟哪些內容會被保留,請見匯入設計

從一次性設計到範本

回報就在這裡:匯入的版面就是一個普通的版面工作室工作階段,所以只要你儲存它,它就會擁有自己的網址。任何擁有 Lolly 的人都能打開那個網址,修改文字、換一張圖片,並渲染出屬於自己的版本——不需要設計應用程式,而且鎖定的部分依然保持鎖定。一次性的設計就這樣變成可重複使用的工具。這就是整個構想,而且不需要寫一行設定就能達成。

開放資料與開放工具

社群工具集是開源、與品牌無關的——QR code、街道地圖、濾鏡、隱私工具——一旦你啟用品牌,它就會依你的品牌渲染。

The Utilities view - the on-device workhorses like Strip Hidden Data, Compress PDF and Convert Image, all in one place

你也可以餵給工具你自己的開放資料:貼上或拖放一份 CSVJSON 表格,工具的重複欄位就會依此填入,每一列產生一個完成的檔案。

3. 做點東西,然後分享或自動化它

「一個網址就是 API」這句話是字面意思。下面這張圖表並不是誰畫出來的,它的類型、標題以及整張資料表都是在網址欄裡打進去的,而同一個連結在任何裝置上都會渲染出同一張圖表。

An area chart of monthly signups, every value of which arrived as a query parameter rather than a click

品牌啟用、素材備妥後,每個工具都能產出一個完成的檔案:

接下來該去哪裡

三條路徑,取決於你來這裡的目的: