Annie's Notes

Appearance

UI 設計 / 切版 會用到的產生器 ​

tags: 設計 UI CSS ​

字型與排版 ​

  • CSS 建議使用的電腦預設字型

    • 連結: https://systemfontstack.com/
    • 特色: 提供跨平台安全的字型堆疊
    • 範例:
      • Sans-serif: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif
      • Serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
      • Mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace

  • Fluid Type Scale Calculator

  • Type Scale (Blob 產生器)

    • 連結: https://type-scale.com/
    • 特色: 簡單生成字型大小比例，提供預覽和 CSS 程式碼
    • 用途: 快速設計排版層次

陰影與視覺效果 ​

  • Neumorphism.io

    • 連結: https://neumorphism.io/#55b9f3
    • 特色: 生成新擬態風格的陰影效果，支援自訂顏色和 CSS 程式碼
    • 用途: 打造柔和的 UI 設計

  • Shadow 產生器

  • CSS Box-Shadow 產生器

    • 連結: https://shadows.brumm.af/
    • 特色: 進階版陰影工具，提供即時預覽和程式碼
    • 用途: 精細調整陰影效果

  • CSS 陰影漸層

  • CSS 背景玻璃霧化產生器

佈局與排版 ​

  • Grid/Flex 排版產生器

    • 連結: https://layout.bradwoods.io/
    • 特色: 視覺化生成 CSS Grid 和 Flexbox 佈局，提供程式碼
    • 用途: 快速設計網格或彈性佈局

  • 切版尺寸轉換 Clamp

  • CSS Grid Generator

    • 連結: https://cssgrid-generator.netlify.app/
    • 特色: 輸入行列數量，自動生成 CSS Grid 程式碼，支援自訂間距和命名區域
    • 優點: 簡單易用，生成的程式碼乾淨且可直接使用
    • 適用場景: 需要快速生成網格佈局的切版工作

  • Flexbox Froggy

    • 連結: https://flexboxfroggy.com/
    • 特色: 互動式遊戲，邊玩邊學 Flexbox，順便熟悉屬性並應用到切版中
    • 優點: 學習與實用兼顧，適合新手快速上手 Flexbox
    • 適用場景: 學習階段或需要靈活調整元素排列時

形狀與圖形 ​

設計系統與工具 ​

無障礙與測試 ​

設計轉程式碼工具 ​

  • Figma (搭配插件)

    • 連結: https://www.figma.com/
    • 特色: 設計工具，但透過插件如 "Figma to HTML" 或 "Anima" 可直接輸出 CSS 和 HTML
    • 優點: 從設計稿直接生成程式碼，減少手動轉換的麻煩
    • 適用場景: 設計師與前端協作，將 UI 稿轉為可用的切版程式碼
    • 備註: 基本版免費，進階功能需付費 (約 $12/月)

  • Teleporthq

    • 連結: https://teleporthq.io/
    • 特色: AI 驅動的設計轉程式碼工具，上傳設計稿後生成 HTML、CSS，甚至 React 程式碼
    • 優點: 支援多框架輸出，生成的程式碼結構清晰
    • 適用場景: 快速將設計稿轉為前端程式碼，適合個人或小團隊

  • Locofy

    • 連結: https://www.locofy.ai/
    • 特色: 將 Figma 或 Adobe XD 設計稿轉為前端程式碼 (React、Vue、HTML 等)
    • 優點: 支援響應式設計，輸出程式碼可直接調整使用
    • 適用場景: 大型專案切版，需快速生成跨平台程式碼