華國美學 UIUX Skill

給 AI 程式代理使用的台灣「華國美學」前端介面生成、修改與評審技能。

這個 Skill 它的目標是把一個正常網站，硬生生改成台灣老舊國民黨時代公共資訊系統、舊式入口網站、低預算宣導頁、行政公告介面與城市臨時視覺系統混在一起時，那種真誠、堆疊、可操作但不精緻的視覺語言，整理成可被代理遵循的規則。

它要產生的是「維運多年但仍然能用」的介面：資訊很滿、框線很多、文案很正式、色彩有點過飽和、區塊像不同年代的外包廠商陸續補上去，但使用者仍然可以讀、可以點、隨便就好但仍可以完成事情。

這是什麼

roc-aesthetic 是一套 AI coding agent 的 UIUX 風格技能。它提供：

• SKILL.md：主要技能入口，負責說明何時使用、如何選讀規則檔，以及整體設計不變量。
• AGENTS.md：給一般代理讀取的低 token 路由檔，協助依照任務挑選對應規則。
• CLAUDE.md：給 Claude 類代理使用的簡短專案指令。
• prompts/style.md：單一綜合風格 brief，可直接作為生成前端 UI 的提示基底。
• rules/*.md：依照版面、色彩、字體、表格、按鈕、文案、微瑕疵等面向拆分的規則卡。
• README.md：本專案的說明文件。

適用情境

適合用在下列任務：

• 把太乾淨、太現代、太像 SaaS 的 UI 改成更有台灣舊式入口網站感。
• 評審一個畫面是否符合「華國美學」：是否夠密、夠行政、夠修補感、夠真誠偽善。
• 撰寫正式、過度分類、資訊很多、帶有服務窗口感的繁體中文 UI 文案。
• 設計需要「糙但能用」且會被網友酸死的介面。

不適合用在下列任務：

• 精品品牌、現代 fintech、極簡 landing page、Apple / Stripe / Linear / Vercel 風格介面。
• 需要高度精緻、完全一致、留白充足、排版優雅的產品設計。

核心姿態

華國美學不是「把網頁做醜」而已。它的重點是歷史堆疊與行政生存感。

介面應該優先考慮：

• 資訊密集，而不是大片留白。
• 表格、框線、欄位、公告帶與側欄，而不是乾淨卡片。
• 多層導覽、重複分類、附件下載區、最新消息列表與服務窗口。
• ROC blue、飽和紅、警示黃、銀灰漸層、亮青色連結、廉價金色點綴。
• MingLiU、PMingLiU、DFKai-SB、Microsoft JhengHei、Arial、Tahoma 等老系統字體混用。
• 1px 左右的輕微錯位、不同區塊略有不同的 padding、border、hover 狀態。
• 正式、過度禮貌、反覆提醒、害怕資訊不足的繁體中文文案。

規則檔導覽

依照任務選讀最相關的規則檔即可，最好每次都讀完整套套用！

• rules/philosophy.md：說明這個美學的歷史姿態與非迷因邊界。
• rules/anti-modernism.md：列出應避免的現代 SaaS、精品、極簡與新創套路。
• rules/layout.md：處理多欄、側欄、框架、巢狀區塊、入口網站式版面。
• rules/spacing.md：控制密度、擁擠感與略不一致的間距。
• rules/micro-imperfections.md：加入不破壞可用性的 0.1px 到 1px 微瑕疵。
• rules/colors.md：定義 ROC blue、飽和紅、警示黃、銀灰、亮青色與同色微差。
• rules/typography.md：處理老系統字體、鋸齒感、字重不一致與 WordArt 式標題。
• rules/banners.md：處理公告帶、跑馬燈、宣導橫幅與活動標語。
• rules/buttons.md：處理亮面、浮雕、老 Windows 控制項感的按鈕。
• rules/tables.md：處理行政表格、資料列、欄位與查詢結果。
• rules/imagery.md：處理壓縮圖片、裁切不完美、宣導素材拼貼感。
• rules/copywriting.md：處理繁體中文 UI 文案、公告語氣、官腔與服務窗口表述。

使用方式

在 Cursor / coding agent 中

讓代理先讀 AGENTS.md 或 SKILL.md，再依照任務讀取對應規則檔。

常見工作流程：

1. 判斷任務是生成、修改、評審或撰寫文案。
2. 讀取 prompts/style.md 作為整體風格基底。
3. 依需求讀取對應的 rules/*.md。
4. 在既有前端框架中實作，不重寫不必要的架構。
5. 檢查是否過於現代、過於乾淨、過於一致或過於像反串。

直接作為提示詞素材

可以把 prompts/style.md 與相關規則檔組合進提示中，例如：

請依照 roc-aesthetic 的 style brief 生成一個台灣區公所活動報名頁。
版面要密集，優先使用表格、公告帶、側欄、附件下載區與正式繁體中文文案。
避免現代 SaaS、乾淨卡片與大量留白。

評審既有畫面

評審時優先檢查：

• 是否太乾淨、太現代、太像新創 landing page。
• 是否缺少表格、框線、公告、側欄、查詢列、附件區等行政結構。
• 是否文字太精緻、層級太完美、留白太舒服。
• 是否有足夠但可控的修補感與微瑕疵。

文案方向

本技能預設使用繁體中文，並偏好正式、宣導感、服務窗口感強的說法。

例如：

• 「登入」可改為「會員身分驗證登入系統」。
• 「最新消息」可改為「最新公告資訊瀏覽專區」。
• 「下載」可改為「相關附件下載區」。
• 「聯絡我們」可改為「聯絡資訊與服務窗口」。

文案可以重複提醒、重複分類、過度說明，但不能變成嘲諷。它應該像真的有人擔心民眾看不懂，所以多貼了兩段說明。

視覺邊界

刻意拒絕：

• Apple 式極簡主義。
• Stripe / Linear / Vercel 式現代 SaaS 美學。
• 現代 fintech landing page。
• 大量留白與三張 feature card 的新創模板。
• 完美 4px / 8px 間距系統。
• 精品感字體排印。
• 乾淨、統一、像剛整理過的 design system。
• 網路迷因式復古、反串、故意做壞。

應該偏好：

• 官僚堆疊。
• 長期維運。
• 實用優先。
• 歷史累積。
• 不同年代視覺片段共存。
• 真誠偽善尷尬的公共服務語氣。

設計品質標準

合格的華國美學 UI 應該看起來像：

• 已經存在 15 到 20 年。
• 經歷過多次改版，但沒有完全重做。
• 有些區塊像 Bootstrap 3，有些區塊像早期入口網站，有些區塊像公文公告。
• 資訊多、分類多、提醒多，但不是不可理解。
• 視覺上有壓迫感，操作上仍然誠實可靠。

不合格的版本通常會變成：

• 太漂亮：看起來像現代新創或設計師作品集。
• 太空：留白過多，沒有行政資訊密度。
• 太亂：看不懂、不能點、不能完成任務。
• 太好笑：像在嘲諷公部門，而不是真誠重現。

授權

請參考 LICENSE。