Park UI

難度:
前端框架
Park UI 效果預覽

效果預覽

設計規範

由官方品牌資料與該風格提示詞推導出的關鍵 token,可複製或搭配下方 DESIGN.md 使用。

顏色

  • primary提示詞

    主要操作與強調

  • on-primary推導

    主色上的文字

  • secondary提示詞

    標籤、徽章與次要強調

  • on-secondary推導

    輔色上的文字

  • neutral推導

    頁面底色

  • on-neutral推導

    底色上的文字

  • surface推導

    卡片、面板與浮層

  • on-surface推導

    表面上的文字

  • border推導

    邊框與分隔線

圓角與形狀

推導
sm · 4px
md · 8px
lg · 12px
full

間距

推導
  • sm8px
  • md12px
  • lg24px

陰影與層級

推導

層級以細邊框與色調分層表達。

字型

推導
  • Ag

    標題 32px · 粗體

    Inter

  • Ag

    內文 16px · 一般

    Inter

  • Ag

    標籤 13px · 中等

    Inter

Park UI 是 Ark UI 生態系裡的「shadcn/ui」:元件以 copy-paste 方式進入你的程式碼庫,底層是 Ark UI 的行為原語與 Panda CSS 的樣式引擎;WAI-ARIA 模式、鍵盤導覽預設達標,React、Vue、Solid 共用同一套元件,變體由 Panda 的 recipe 系統做型別安全定義,青綠主色(#1FA68C)。適合多框架團隊與喜歡掌控原始碼的前端工程師。

Park UI前端框架

提示詞範本

基礎範本
Design a Park UI-inspired interface. - Copy-paste component model similar to shadcn/ui but for Ark UI ecosystem; - Built on Ark UI primitives with Panda CSS styling; - Accessible by default: WAI-ARIA patterns, keyboard navigation; - Multi-framework: React, Vue, Solid support via Ark UI; - Type-safe variants with Panda CSS recipe system. Colors: #1FA68C, #10B981, #3B82F6, #8B5CF6 with #1FA68C accent. Typography: system-ui.

變體提示詞

📱 行動裝置
Design a mobile app with Park UI aesthetics. Use Park UI color identity with #1FA68C accents. Clean, touch-friendly, native feel.
💻 Web 端
Design a web application with Park UI style. Use Park UI color identity with #1FA68C accents. Professional, responsive layout.
📊 儀表板
Design a dashboard with Park UI design language. Use Park UI color identity with #1FA68C accents. Data-rich, organized, clear hierarchy.
📄 到達頁
Design a landing page with Park UI visual identity. Use Park UI color identity with #1FA68C accents. Compelling, conversion-focused.

使用範例

Park UI 元件庫

Web 端
Build a component library with Park UI design language, copy-paste components, and #1FA68C color system.

Park UI 儀表板

儀表板
Create a dashboard using Park UI style with Ark UI primitives and Panda CSS tokens.

✅ 適用情境

  • 框架生態系
  • 設計系統底座
  • Ark UI 生態系

❌ 不適用情境

  • 非 Panda CSS 技術堆疊
  • 需要完整執行時主題切換的重型應用

DESIGN.md 檔案

符合 design.md 開放格式的設計系統描述,可複製或下載後交給 AI 程式設計工具使用。

下載