designdifferently/design-differently

Design Differently (免費版)

你正在審查一個很可能由 AI 代理建立的前端。你的工作是找出讓它看起來和感覺像是被生成的地方，並在程式碼中修正。你修改的是呈現、文案和互動。你「不」改變商業邏輯、資料、路由或後端。

目錄

1. 工作流程：步驟 1 到 6
2. 規則：排版、文案、視覺、動畫與效果、疊加層、工具提示、鍵盤、元件、圖片、登陸頁面、給業主的建議、點擊目標
3. 檢測模式
4. 注意事項
5. 報告

對每個部分的遵守程度：

• 嚴格： 檢測模式、步驟 3 中的問題、報告格式及其頁尾。請勿更改。
• 確實： 規則。請按書面規則套用；僅在規則不適用於該專案時跳過一項，並在報告中說明原因。
• 自行判斷： 替換字型的選擇、輕微文案修改的措辭、保留哪些動畫。

將此檢查清單複製到你的回覆中，並在進行時勾選：

- [ ] 1. 了解專案
- [ ] 2. 掃描並擷取「之前」的畫面
- [ ] 3. 列出修正項目並讓使用者選擇
- [ ] 4. 修正被選中的項目
- [ ] 5. 驗證並擷取「之後」的畫面
- [ ] 6. 將規則鎖定至儲存庫並撰寫報告

---

1. 了解專案

在觸碰任何東西之前，先找出：

• 框架與樣式方法（Tailwind、CSS Modules、styled-components、純 CSS、像是 shadcn 或 MUI 的 UI kit）。
• 設計符記（design tokens）的位置（CSS 變數、Tailwind 設定、主題檔案）。如果沒有，請註明。
• 共享元件的位置（Button、Dialog、Tooltip、Dropdown、Badge、Banner）。列出你注意到的重複項。
• 該專案是一個應用程式（工具、儀表板、編輯器）還是一個網站（登陸頁面、行銷頁面、部落格）。某些規則只適用於其中之一。
• 如何執行它以及如何執行其檢查（lint、typecheck、tests）。
• 你是否可以在這裡截圖（Playwright、瀏覽器工具、預覽面板）以及你是否可以在這個對話中顯示圖片。

使用專案已有的東西，並比對其程式碼風格。在此版本中，不要添加函式庫，字型檔案除外。

2. 掃描並擷取「之前」的畫面

執行檢測模式中的搜尋，並閱讀主要畫面。如果你的環境無法執行 shell 指令（例如 Lovable、v0、Bolt 等託管建置器），請開啟檔案並透過閱讀來尋找相同的模式。對於每個命中結果，記錄檔案、行號以及它違反了哪條規則。命中結果只是一個候選，而非最終判定：在計數之前，請先閱讀上下文。

如果你可以截圖，請在進行任何更改之前，立即擷取主要畫面的「之前」狀態：首頁或登陸頁面、最繁忙的應用程式畫面、一個對話框、一個表單。使用 1440×900 和 375×812 尺寸。將它們儲存到 .design-differently/before/，並命名為 home-1440.png 之類的名稱。記下每個畫面的確切路由和狀態，以便之後可以重現。不要提交此資料夾。

3. 列出修正項目並讓使用者選擇

在此步驟得到回覆之前，不要更改任何檔案。

將發現的結果顯示為一個編號清單，並按區域標題分組（排版、文案、視覺、動畫、疊加層、工具提示、鍵盤、元件、圖片、登陸頁面）。編號在整個群組中連續。每個項目一行：什麼地方有問題、在哪裡、以及你將要更改什麼。省略沒有發現結果的區域。

### 排版
1. Inter 是唯一的字型 (app/layout.tsx)。替換成較不常見的無襯線字型。
### 文案
2. 登陸頁面文案中有 14 個破折號 (components/Hero.tsx, Features.tsx)。替換成句號、逗號或冒號。
3. 英雄區中的分隔線「快速 · 私密 · 開源」(components/Hero.tsx)。轉換成帶有圖示的 FUD 行。
4. 設定中選項描述重複了其標籤 (settings/page.tsx)。移除。

在清單結尾，加上以下問題：

回覆「全部」以套用所有修正，或列出您想要的編號（例如 1, 3, 5-9）。

然後停止並等待回覆。

4. 修正被選中的項目

僅套用使用者選擇的項目，一次一個區域，按以下順序：元件、疊加層、排版、視覺、動畫、工具提示、鍵盤、圖片、文案、登陸頁面。

先更改共享元件和符記，這樣一個修正就能修復使用它們的每個畫面。

在每個區域之後，執行專案的檢查（lint、typecheck、tests、build）。如果檢查失敗，請在移至下一個區域之前修正它。如果修正需要更改後端或邏輯，請復原該項目並將其標記為已跳過。

5. 驗證並擷取「之後」的畫面

你的第一次通過是草稿。根據外部證據進行驗證，而不是根據你對所做更改的記憶：

• 如果你可以截圖，請使用相同的路由、狀態和尺寸重複拍攝每一張「之前」的畫面，並將其儲存到 .design-differently/after/，使用相同的名稱。另外，拍攝任何你觸碰過的其他畫面。逐一檢查。如果有任何東西被裁剪、重疊、無法閱讀或跳動，請回到步驟 4 處理該區域。
• 再次執行檢測模式。如果某個模式仍在允許的例外情況之外命中，請回到步驟 4。
• 根據文案規則重新閱讀你編輯過的每個字串。如果仍有違反規則的情況，或者你更改的內容超出了規則要求，請回到步驟 4。

6. 將規則鎖定至儲存庫並撰寫報告

這些修正必須在未來的 vibecoding 中存活。任何在之後編輯此專案的代理，在撰寫程式碼之前都必須先看到這些規則，否則它會將那些痕跡帶回來。

1. 在專案根目錄建立 DESIGN_RULES.md。為 AI 代理撰寫，簡短且命令式，少於 150 行。僅包含適用於此專案的內容：
   • 所選字型、它們的檔案以及宣告位置，以及適用時的標誌字型路徑（A 或 B）。
   • 符記的位置，以及顏色、圓角半徑、間距、陰影和字型大小僅來自於它們的規則。按符記名稱列出的主要、次要和可選強調色，以及破壞性和成功顏色僅用於那些狀態的規則。
   • 共享元件（Button、Dialog、Tooltip、Dropdown、Badge、Banner）的位置，以及重複使用它們，絕不複製它們的規則。
   • 你從此技能中套用的每一條規則，各一行，並附上此專案的具體細節（例如「工具提示：使用 components/ui/Tooltip.tsx，2 或 3 個詞加上快捷鍵」）。
   • 禁用列表：字型、表情符號、破折號、裝飾分隔線、用於強調的引號、大面積的毛玻璃效果、預設的淡入和模糊進入、色調圖示方塊、強調色條呼叫、間隔大寫眉毛、即時狀態點、瀏覽器預設控制項和滾動條。
   • 最後一行：「在完成任何 UI 更改之前，根據此檔案進行檢查。」
2. 將專案中的每個代理指令檔案指向它。在每個存在的檔案中添加一行：在進行任何 UI、文案或樣式更改時，請遵循 DESIGN_RULES.md。，這些檔案包括：CLAUDE.md、AGENTS.md、.cursorrules、.cursor/rules/*.mdc、.windsurfrules、.github/copilot-instructions.md、replit.md。如果都不存在，請建立 AGENTS.md 和 CLAUDE.md 並包含該行。不要更改這些檔案中的其他任何內容。
3. 如果 DESIGN_RULES.md 已存在於先前的執行中，請更新它而不是建立新的。保留使用者手動添加的規則。

然後將報告中的內容作為你的最終聊天訊息發布。

如果使用者在此工作階段中修正了你的一個修復，請在此檔案的注意事項中添加一行描述該修正，以便下一次執行時不會重複。

---

規則

排版

AI 工具傾向於使用相同的一小撮字型，因此僅憑這些字型就能讓一個專案看起來像是被生成的。請勿使用此清單中的任何字型，無論用於何種角色，除非它是使用者給你的品牌指南的一部分，或下列標誌字型規則適用：

角色	禁用字型
無襯線	Inter, Inter Tight, Geist, Roboto, Open Sans, Poppins, Montserrat, Lato, Manrope, DM Sans, Plus Jakarta Sans, Outfit, Figtree, Urbanist, Sora, Lexend, Nunito, Nunito Sans, Raleway, Work Sans, Rubik, Onest, Space Grotesk, Satoshi, General Sans, Cal Sans, Bricolage Grotesque, Syne, IBM Plex Sans, Source Sans 3, Arial, Helvetica 作為所選字體
襯線	Playfair Display, Instrument Serif, Fraunces, DM Serif Display, Lora, Merriweather, Cormorant Garamond, EB Garamond, Libre Baskerville
等寬	JetBrains Mono, Geist Mono, Fira Code, Fira Mono, Space Mono, Roboto Mono, IBM Plex Mono, Source Code Pro, Ubuntu Mono
預設	因未選擇任何字型而使用的純 system-ui 或 Tailwind 預設堆疊

主要字型。 主要字型是在標誌中設定的字型，或是使用者定義的字型。排版系統的其餘部分將遵循它。

標誌字型。 如果標誌是以某種字型設定的（文字標誌、文字標記元件，或在標誌的 CSS 或 SVG 中命名的字型），即使它在禁用清單上，該字型也會保留在標誌中。然後選擇下列兩條路徑之一，並在報告中說明選擇了哪一條：

• A. 遵循標誌。 標誌字型成為網站的主要字型，你必須使用該確切字型。
  • 標誌是襯線字型：標題使用完全相同的襯線字型。內文使用無襯線字型。
  • 標誌是無襯線字型：只有在品牌特性明顯適合使用襯線字型時，標題才能使用襯線字型，這是個風險選項。否則，標題保持使用無襯線字型，理想情況是使用與標誌完全相同的字型或非常接近的字型。
• B. 僅限標誌。 標誌字型僅保留在標誌中，你為其餘部分選擇字型。標誌字型仍計入以下字型數量限制。

標誌字型規則僅適用於有刻意設計的標誌。如果標誌是程式碼生成的（參見給業主的建議），其文字僅是預設字型，因此為其指定你新的標題字型，並將標誌添加到「給你的」部分。

搭配規則。

• 整個網站使用一或兩種字型，包括標誌。絕不超過兩種。
• 絕不使用兩種襯線字型。
• 主要字型是襯線字型：網站上的每個襯線字型都是同一種，而內文使用一種無襯線字型。最多兩種字型。
• 主要字型是無襯線字型：網站上的每個文字都使用同一種無襯線字型。你只能為了區分某些標題而添加第二種無襯線字型。
• 如果產品有程式碼區塊，則使用系統等寬字型堆疊（ui-monospace, SFMono-Regular, Menlo, monospace），這不計入所選字型。

選擇字型。 當沒有標誌字型也沒有使用者提供的字型時，請自行選擇主要字型並套用搭配規則：

• 首先閱讀產品：它的功能、使用者是誰、文案的語氣。選擇一個風格契合的字體，並在報告中用一句話說明原因。
• 避免顯而易見的第二選擇。如果一個字體是你想到的第一個適合此類產品的字體，它可能即將被列入禁用清單。選擇一個功能相同但較不常見的字體。
• 授權必須允許在網路上免費商業使用（SIL 開放字型授權或類似授權）。來源：Google Fonts（超出熱門結果的部分）、Fontshare、Velvetyne、Collletttivo、The League of Moveable Type、字體廠商的免費系列。

網站上的每個字型：

• 每個系列最多三種字重。
• 字型檔案存在儲存庫中。 將 woff2 檔案下載到專案中（例如 public/fonts/），並使用 @font-face、next/font/local 或 @fontsource/* 套件在建置時捆綁載入。絕對不要在執行時期從 Google Fonts、Adobe Fonts、Bunny 或任何其他外部主機載入字型，因為每次頁面瀏覽都會將訪客資料發送到該主機。移除每個 fonts.googleapis.com、fonts.gstatic.com、use.typekit.net 連結、@import 和 next/font/google 導入，包括你保留的字型。使用 font-display: swap。
• 在選擇的字型之後保留一個合理的備用字型堆疊。
• 在一個地方設定字型（符記、Tailwind fontFamily、根 CSS），並移除所有其他字型宣告。

文案

輕巧地編輯文案。不要重寫文字、改變它們的含義、語氣或長度，或添加新的句子。移除下面列出的 AI 標記，並僅在移除後語法不連貫的情況下平滑語法。如果一個句子在移除標記後讀起來沒問題，就到此為止。

要移除的內容：

• 破折號和帶間隔的 en 破折號（—, –）。替換成句號、逗號或冒號，以保持句子最接近原文。
• 用於強調、諷刺或改寫的引號。移除引號並保留詞語。引號僅保留在逐字逐句的引用周圍。
• 裝飾分隔線，例如 ·、•、| 或 / 用於串聯短語。完全移除它們。絕不要用句號或其他標點符號替換它們。短語的處理方式取決於它們的位置：
  • 英雄區、定價卡片、關鍵銷售文字： 將短語轉換成 FUD 行，一個水平行，包含多個短項目，每個項目在其標籤前有一個小圖示。使用專案的圖示集，如果沒有則使用內聯 SVG。所有圖示使用一種尺寸和一種純色，它們後面沒有背景框（參見視覺規則）。該行在手機上能整齊換行。
  • 次要段落、輔助文字、說明、頁尾： 刪除分隔線。僅在短語在沒有分隔線的情況下讀起來仍然像純文字時才保留它們；否則，保留最重要的短語並刪除其餘部分。
• 「不只是 X，更是 Y」的結構 及其同類：「它不是 X，它是 Y」、「超越 X」、「X，沒有 Y」。保留正向的一半。
• 重複標籤的描述，以及不需要描述的選項下方的描述。移除它們。
• 功能性 UI 上的銷售性或暗示性描述。使其簡短且中性，就像 macOS 或 Photoshop 中那樣：說明它是什麼或做什麼。

範例：

修改前	修改後
Built for teams — not just individuals.	Built for teams.
英雄區：Fast · Private · Open source	三個項目的 FUD 行：閃電圖示 + Fast、鎖頭圖示 + Private、程式碼圖示 + Open source。來自專案集的 SVG 圖示，絕不使用表情符號
輔助文字：Updated daily · 2 min read	Updated daily
Your "second brain" for notes	Your second brain for notes
It's not a to-do app, it's a system.	A system for your tasks.
Dark mode — Switch to a darker theme that's easier on your eyes at night.	Dark mode 無描述
Auto-save: Never lose your work again with seamless automatic saving!	Auto-save: Saves changes as you type.

...