maylogger/roc-aesthetic

華國美學 UIUX 技能

roc-aesthetic 是內部的技能 ID，用於路由與安裝。

使用此技能作為生成、修改、審查與診斷 ROC 時代台灣「華國美學」前端 UIUX 的單一入口點。

此技能適用於需要建立下列風格的代理：台灣公共資訊系統、老式入口網站、低預算公告頁面、廠商維護的修補儀表板，以及臨時搭建的公共視覺層。

這不是懷舊濾鏡、搞笑生成器，也不是隨機毀壞 UI 的機器。這是一套設計規範：

• 保留密集、可操作的資訊結構
• 在簡潔卡片之前，優先選擇表格、框架、側邊欄與有邊框的區塊
• 引入微小、累積的不一致性，但不損害可用性
• 在需要 UI 文案時，使用真誠的官僚式繁體中文
• 除非使用者明確要求，否則拒絕現代 SaaS 的拋光感

意圖路由

首先分類使用者的請求，然後開啟並遵循最小且有用的規則檔案集合。使用 Glob 解析檔案，以便無論技能是全域安裝還是從此儲存庫使用都能正常運作。不要假設絕對路徑。

核心入口檔案：

• 任何前端 UI 生成、修改或審查 -> Glob **/SYSTEM_PROMPT.md，然後 Glob **/prompts/style.md
• 設計哲學 / 為何這不該變成搞笑 -> Glob **/rules/philosophy.md
• 反現代主義 / 負面提示詞 / 移除 SaaS 拋光感 -> Glob **/rules/anti-modernism.md

視覺與互動維度：

• 版面 / 頁面結構 / 儀表板 / 入口網站 / 導航 -> Glob **/rules/layout.md
• 間距 / 密度 / 尷尬的節奏 / 不一致的間隙 -> Glob **/rules/spacing.md
• 微缺陷 / 1px 偏移 / 修補的遺留感 -> Glob **/rules/micro-imperfections.md
• 排版 / 字型堆疊 / 鋸齒文字 / WordArt 標題 -> Glob **/rules/typography.md
• 色盤 / 中華民國藍 / 警告黃 / 同色調偏移 -> Glob **/rules/colors.md
• 按鈕 / 光澤 / 斜角 / 舊系統控制項 -> Glob **/rules/buttons.md
• 表格 / 行政表格 / 密集行 -> Glob **/rules/tables.md
• 橫幅 / 公告條 / 跑馬燈 / 行銷標頭 -> Glob **/rules/banners.md
• 圖像 / 低解析度 / 壓縮 / 尷尬裁切 -> Glob **/rules/imagery.md

文案寫作：

• 任何 UI 文字、在地化、標籤、標語、通知、CTA 用語，或繁體中文文案 -> Glob **/rules/copywriting.md

路由規則

1. 當存在相符的規則檔案時，不要僅從此檔案回答。
2. 在進行實質性的前端 UI 工作前，開啟 SYSTEM_PROMPT.md 和 prompts/style.md。
3. 每當生成、翻譯或重寫可見的 UI 文字時，開啟 rules/copywriting.md。
4. 對於複合型 UI 任務，僅閱讀所請求表面所需的規則檔案。例如：一個包含表單的政府入口網站登陸頁面應使用版面、間距、排版、色彩、按鈕、表格、橫幅和文案寫作規則。
5. 如果使用者要求審查，在提出修改建議前，診斷 UI 何處變得太現代化、太空洞、太一致或太諷刺。
6. 如果使用者要求讓東西變得「更乾淨」，請保留華國美學，除非他們明確要求脫離此風格。更乾淨意味著更易讀、更實用，而不是更像 Vercel/Stripe/Linear。
7. 如果使用者提供了現有 UI，則就地修改，並透過在地選擇強化風格：更密集的分組、更多的行政標籤、類似表格的結構、微妙的對齊錯位、遺留色彩處理，以及真誠的官僚式文案。
8. 不要建立故意無法使用的 UI。「糙但能用」勝過隨機破壞。
9. 不要將美學變成網路懷舊搞笑、迷因台灣政府角色扮演或玩笑文案。語氣必須保持真誠。

工作檔案

在當前工作目錄中尋找下列檔案：

• SYSTEM_PROMPT.md - 標準系統提示與品質標準
• prompts/style.md - 單一精簡風格簡報
• rules/philosophy.md - 設計哲學與歷史定位
• rules/anti-modernism.md - 針對現代拋光感的負面提示詞
• rules/layout.md - 多欄、框架、公告密集的版面指引
• rules/spacing.md - 密集、不一致、廠商修補的間距指引
• rules/micro-imperfections.md - 受控的 0.1px-1px 缺陷指引
• rules/typography.md - 舊系統字型堆疊、鋸齒文字、WordArt 標題指引
• rules/colors.md - 中華民國藍、飽和紅、黃、銀、廉價金、同色調偏移
• rules/buttons.md - 光澤、斜角、Windows-XP 風格的按鈕處理
• rules/tables.md - 行政表格與網格處理
• rules/banners.md - 堆疊橫幅、公告條、跑馬燈式表面
• rules/imagery.md - 壓縮、尷尬裁切、低預算的圖片處理
• rules/copywriting.md - 繁體中文官僚式 UI 文案指引
• README.md - 儲存庫層級摘要
• .cursorrules 和 CLAUDE.md - 工作區整合筆記

如果某個檔案遺失，則使用最接近的可用規則檔案，並在結果受到實質影響時，說明哪些指引不可用。

風格不變量

每個華國美學 UI 都應保留以下不變量：

• 密度優先於留白。
• 表格優先於卡片。
• 行政邊框、灰色分隔線、巢狀框線，以及可見的區塊框架。
• 多欄版面、側邊欄、重複導航，以及公告密集的結構。
• 中華民國藍、飽和紅、警告黃、銀色漸層、深灰、亮青色連結，以及偶爾出現的廉價金。
• 混合的舊系統字型堆疊：MingLiU, PMingLiU, DFKai-SB, Microsoft JhengHei, Arial, Tahoma。
• 內距、外距、邊框粗細、懸停狀態、字型強調與對齊上略有不一致。
• 感覺正式、重複、過度解釋且真誠服務導向的 UI 文案。
• 操作清晰度：使用者仍能閱讀、點擊、掃視、送出並完成任務。

禁止的預設值

除非使用者明確要求，否則不要生成：

• Apple 風格的極簡主義
• Stripe、Linear、Vercel、金融科技或現代 SaaS 登陸頁面美學
• 過大的留白、通風的英雄區塊以及三卡功能排版
• 高級排版、奢華編輯藝術指導或完美無瑕的設計系統
• 看起來最近剛獲得融資的流暢單色儀表板
• 隨機破壞的 UX、無法閱讀的對比度，或偽造停用的互動
• 搞笑文案、迷因參考或諷刺性的復古笑話

如有疑問，請選擇「醜一點但真誠的官僚維運系統」，而非「漂亮但現代的新創介面」。

工具表面

此主要的 SKILL.md 僅宣告其所使用的唯讀工具：

• Read 用於開啟相符的提示與規則檔案
• Glob 用於在全局技能安裝與儲存庫副本之間解析檔案位置
• Grep 用於在使用者詢問特定設計維度時，定位特定規則或術語

此技能本身不需要寫入權限。主機編碼代理在執行使用者任務時仍可編輯專案檔案，但此技能自己的路由與規則選擇是唯讀的。

產出紀律

在應用此技能時：

1. 將建議基於規則檔案，而非個人品味。
2. 偏好具體的 UI 變更，而非抽象的形容詞。
3. 在適當情況下，對註解和使用者面向的解釋使用繁體中文。
4. 如果撰寫程式碼，保留現有框架與元件樣式；透過版面、CSS、標記密度、文案以及受控的微小不一致性來注入華國美學。
5. 如果使用設計函式庫，抵抗其預設的高級潔淨感。覆寫間距、邊框、排版、色彩與元件節奏。
6. 即使在使介面看起來視覺上尷尬的同時，也要保持可及性與基本可用性。

優先順序與衝突

當指引發生衝突時，請依此順序處理：

1. 此主要 SKILL.md - 路由、不變量與全域紀律
2. SYSTEM_PROMPT.md - 標準美學姿態與品質標準
3. prompts/style.md - 實際 UI 工作的精簡生成簡報
4. rules/copywriting.md - 可見的 UI 文字與繁體中文文案
5. rules/*.md - 特定維度的視覺與版面規則
6. .cursorrules、CLAUDE.md 與儲存庫 README - 工作區與專案層級提醒

如果某條規則會使 UI 無法使用，則優先保留可用性，並改為應用較溫和的華國美學處理。如果現代元件的預設值與此技能衝突，則此技能優先，除非使用者明確要求現代風格。