---
title: "RAR 設計攻略"
url: https://rar.design
---

# RAR 設計攻略

> 設計師 Riven 的設計攻略｜線上課程｜設計方法｜軟體教學

## Courses

- [100 種 Figma 設計的方法｜UI/UX 線上課程](https://rar.design/courses/figma): 今年最新數位產品 Figma 設計線上課程，從零到一百學會 UI/UX 使用者介面與體驗設計。
- [Framer 網站設計課：從零開始](https://rar.design/courses/framer): Framer : No-Code Design, Zero to Website
- [100 種 Adobe Illustrator 設計的技巧](https://rar.design/courses/ai): 今年最新平面設計技能線上課程，完整學會 Ai 設計軟體的實戰應用功能。
- [100 種 Photoshop 設計的風格](https://rar.design/courses/ps): 今年最新視覺設計技能線上課程，完整學會 Ps 軟體的一百種設計風格。
- [自媒體設計學：用設計思維打造內容變現策略](https://rar.design/courses/contentstrategy): 從社群創作到商業價值，讓內容設計成為你的最佳收入策略！
- [↗↗跟著設計師↘↘ 一起學 Canva](https://rar.design/courses/canva): 今年最新 Canva 設計線上課程｜自媒體、社群經營、行銷必學
- [AI 覺醒設計應用攻略【訂閱制】](https://rar.design/courses/aiwaken): 將 AI 變成你的設計外掛：網頁、繪畫、動畫、影片，一套工作流、一台電腦、一人全開通

## Posts

- [Claude Plugins 是什麼？設計師先裝這三個，讓 Claude 變成你的設計團隊](https://rar.design/posts/claude-plugins-designer-guide): 官方外掛上線半年，多數人連入口都沒找到——Design、Marketing、Productivity 三顆裝起來，評圖、文案、待辦都有人接
- [Photoshop 影像延伸效果怎麼做？一個變形拉出液態線條的完整教學](https://rar.design/posts/photoshop-pixel-stretch-effect-tutorial): 兩次複製加一個彎曲，把雪山上的熱氣球拉成流動的視覺符號
- [Claude Code 怎麼做出沒有 AI 感的網站？三步驟把 AI 調教成懂品味的設計師](https://rar.design/posts/claude-code-design-taste-workflow): 品味庫、skill 與 MCP、永不 one-shot——完整工作流與四段式 prompt 公式一次拆解
- [Photoshop 水霧玻璃效果怎麼做？兩個濾鏡做出雨天起霧的窗](https://rar.design/posts/photoshop-frosted-glass-effect-tutorial): 高斯模糊疊玻璃濾鏡的兩層原理，從擦出視野到在霧上寫手寫字一次教會
- [Seedance 2.5 是什麼？30 秒一鏡到底的 AI 影片模型完整介紹](https://rar.design/posts/seedance-2-5-complete-guide): ByteDance 新一代影片模型：50 個多模態參考、白模分鏡、時間戳編輯，AI 影片從抽卡走向拍片
- [Figma Projects 改名 Folders 了？巢狀資料夾、10 層結構與權限大改完整解析](https://rar.design/posts/figma-projects-now-folders-guide): 一個吵了五年的功能，Figma 花一整年重寫內容與權限模型才交出來
- [Figma Agent 是什麼？直接在 canvas 上動手的設計 AI 完整解析與用法](https://rar.design/posts/figma-agent-complete-guide): 開放 beta 上線，它讀你的元件與變數、能被 @ 指定，還能把你的判斷變成 slash command
- [Photoshop 移置濾鏡怎麼用？讓文字跟著材質起伏的氣泡水文字教學](https://rar.design/posts/photoshop-displace-filter-text-tutorial): 關掉文字、多存一次檔，剩下的交給濾鏡
- [Figma Code Layers 是什麼？程式碼變成設計素材的完整教學](https://rar.design/posts/figma-code-layers-guide): Config 2026 最重磅更新：設計一鍵轉 code、GitHub repo 攤上畫布、Extract designs 雙向互轉，設計與工程的翻譯成本正在消失
- [Photoshop 符合顏色怎麼用？一張參考圖複製電影感色調的完整教學](https://rar.design/posts/photoshop-match-color-tutorial): 不用預設集、不用 LUT，讓 Photoshop 直接讀懂你喜歡的那張照片
- [Kimi K3 是什麼？前端設計評測拿下第一的開源模型，設計師實用指南](https://rar.design/posts/kimi-k3-designer-guide): 2.8 兆參數、100 萬 Token、權重全開——但它真正改變的不是你的電腦，是你的帳單
- [Claude Design 怎麼用？從一句話做出互動網頁的完整教學](https://rar.design/posts/claude-design-web-guide): Anthropic Labs 的 AI 設計工具實戰：設計系統匯入、四種修改管道、一路接到 Claude Code
- [Framer CMS 怎麼用？Collection、動態頁面到 SEO 的完整教學](https://rar.design/posts/framer-cms-complete-guide): 讓客戶自己發文章，你不用再當免費工讀生
- [Claude Opus 5 是什麼？跑分、Effort 旋鈕與設計師的實際用法](https://rar.design/posts/claude-opus-5-guide): 接近 Fable 5 的智慧、一半的價格——這代真正改變工作方式的，是它開始自己驗貨
- [Photoshop 包裝 Mockup 怎麼做？平面稿直接貼上瓶身的擬真合成教學](https://rar.design/posts/photoshop-packaging-mockup-tutorial): 不用買模板——用物件選取、智慧型物件、彎曲變形加混合範圍，任何一張產品照都是你的提案模板
- [去 AI 味怎麼做才有效？別抄 Prompt，建一套會自我更新的寫作 Skill](https://rar.design/posts/de-ai-flavor-writing-skill-guide): 禁止層、語氣層、審核層，加一條把校稿變成資產的回饋迴圈
- [Claude Cowork 的 Record a skill 是什麼？錄一次操作就能教 AI 幫你重複做](https://rar.design/posts/claude-cowork-record-a-skill-guide): 不用寫程式、不用寫 prompt，示範一次，Claude 就把它變成能一鍵重跑的技能
- [Photoshop 點陣漸變文字怎麼做？彩色網屏＋錯位效果的東京霓虹感教學](https://rar.design/posts/photoshop-halftone-gradient-text-tutorial): 一個濾鏡、一個選取、兩層顏色覆蓋，做出都市街機的復古氛圍
- [Claude 能拿來做什麼？官方 90 個 Use Cases 一次看懂，設計師先看這 5 個](https://rar.design/posts/claude-use-cases-designer-guide): Anthropic 把 90 種用法做成一座官方案例庫，真正值得抄的是它們共用的那份 brief 結構
- [行銷 7.0 讀後感：Kotler 新書的三道閘門，其實是設計師的必修課](https://rar.design/posts/marketing-7-0-designer-notes): AI 把規模化、個人化都做完了，會思考的創作者才剛開始
- [《北歐時間》讀後感：把「剛剛好」當成一種設計決定](https://rar.design/posts/nordic-time-book-reflection): 一個「廢柴 OL」逃去北歐念設計，把「時間」重新設計了一遍
- [Claude Desktop 是什麼？三個分頁、跟網頁版差在哪、設計師值不值得裝](https://rar.design/posts/claude-desktop-guide): Chat、Cowork、Code 一次看懂，以及 native 桌面版才有的本機能力
- [AI 覺醒設計應用攻略是什麼？99 篇攻略、6 條變現路徑完整解析](https://rar.design/posts/aiwaken-subscription-guide): 把 AI 變成你的設計外掛：內容地圖、適合對象、第一晚怎麼用，訂閱前該知道的都在這
- [Harness Engineering 實戰：設計師怎麼幫 AI 蓋一個不會重複犯錯的工作環境？](https://rar.design/posts/harness-engineering-for-designers): 不用寫程式的四個步驟——守則檔、錯誤反射、自驗迴圈、每月除草，把 AI 協作從碰運氣變成系統
- [Loop Engineering 是什麼？為什麼矽谷都在說：別再 prompt 你的 AI](https://rar.design/posts/loop-engineering-complete-guide): Claude Code 之父說他不再 prompt Claude 了。從 Prompt、Context、Harness 到 Loop，槓桿點的第四次搬家
- [用 Claude 投放 Meta 廣告怎麼做？官方 MCP 連接器完整教學](https://rar.design/posts/claude-meta-ads-mcp-guide): Meta 在自家圍牆上開了第二扇門——從接上、跑起來到別踩的雷，設計師自己下廣告的完整路線
- [Codex 為什麼突然紅了？500 萬週活、併入 ChatGPT 桌面版與 7 月最新更新全解析](https://rar.design/posts/codex-why-popular-2026): 四個月成長六倍，跑最快的那群人不寫程式——這條曲線在說什麼
- [ChatGPT Live 是什麼？GPT-Live 全雙工語音、跟 Advanced 差在哪、設計師怎麼用](https://rar.design/posts/chatgpt-live-gpt-live-guide): AI 第一次學會邊聽邊講——全雙工架構、後台委派，與設計師該從中偷走的東西
- [設計師可以用 Codex 做什麼？Codex × Figma 雙向工作流完整解析](https://rar.design/posts/openai-codex-figma-designer-guide): 貼一條 frame 連結，設計稿變成程式碼；跑起來的介面，再走回你的畫布
- [當 Claude 額度還有剩，可以拿來幹嘛？設計師的 7 種高價值用法](https://rar.design/posts/claude-leftover-quota-ideas): 額度每週歸零、剩下不退——與其省著用，不如把它變成會複利的資產
- [ChatGPT Work 是什麼？GPT-5.6 上線、能做什麼、跟 Claude Cowork 差在哪](https://rar.design/posts/chatgpt-work-gpt-5-6-guide): OpenAI 把 Chat、Codex 與代理人合併成一個超級 App，同一週撞上 Claude Cowork——設計師該怎麼看這場工作流重組
- [ChatGPT 5.6 是什麼？Sol、Terra、Luna 三模型與設計判斷力全解析](https://rar.design/posts/chatgpt-5-6-sol-terra-luna-guide): OpenAI 今天推出 GPT-5.6 三兄弟，設計能力大躍進——但它到底是不是設計師的新標配？
- [設計課程怎麼選？設計師的技能樹：RAR 七套課程完整指南](https://rar.design/posts/designer-skill-tree-course-guide): 從 Figma 到 AI 覺醒，把七套課程排成三條路線：先選角色，再選工具
- [Spline Omma 是什麼？一句話生成 3D 網站與互動體驗的 AI canvas 完全解析](https://rar.design/posts/spline-omma-ai-complete-guide): 多代理並行生成，把 3D、動態與 UI 揉進同一個對話框——設計工具長出來的 AI，跟 v0 走的是兩條路
- [ElevenLabs 怎麼用？10 分鐘做出第一段 AI 配音的完整教學](https://rar.design/posts/elevenlabs-tutorial): 從免費註冊、挑聲音到音訊標籤實戰，五步驟加常見錯誤一次講完
- [MiniMax Audio 是什麼？Speech 2.8 語音模型完整介紹與設計師實戰](https://rar.design/posts/minimax-audio-speech-2-8-guide): 一顆會停頓、會換氣的 AI 語音模型，十秒克隆、中日雙語，把配音這件事重新定義
- [ElevenLabs 是什麼？AI 語音龍頭完整解析：Eleven v3、音樂、配音怎麼用](https://rar.design/posts/elevenlabs-complete-guide): 從文字轉語音到 AI 音樂與多語配音，一次看懂創作者可以怎麼用
- [Figma Motion 怎麼用？核心能力、製作流程與把動效做好看的實戰原則](https://rar.design/posts/figma-motion-how-to-use): 從 Timeline、Keyframes 到四個實戰原則，設計師在原生 canvas 上把動效做對的完整上手指南
- [Claude Code Artifacts 開放 Pro／Max 了嗎？設計師該怎麼用完整解析](https://rar.design/posts/claude-code-artifacts-pro-max): 一段對話變成一頁 live 網頁——從 6/18 Team beta 到 7/2 個人方案，這功能對設計師的真正用途
- [Claude Fable 5 怎麼用？設計師的四個實戰工作流與 Brief 模板](https://rar.design/posts/claude-fable-5-workflow-tutorial): 從截圖重建自我校對到一份 brief 蓋一個網站，把專案級任務外包給模型的完整教學
- [Figma Weave 工具是什麼？20+ AI 圖像工作流一鍵進 Figma 的完整解析](https://rar.design/posts/figma-weave-tools-guide): Config 2026 把節點工作流包成一鍵工具：風格轉換、換背景、品牌 icon 量產，不用寫 prompt
- [Figma Shaders 是什麼？一句話生成全息箔、噪點質感的 AI 材質完整教學](https://rar.design/posts/figma-shaders-guide): Config 2026 材質革命：fill 與 effect 兩型態、官方 Prompt 四技巧、設計系統整合一次看懂
- [Claude Fable 5 可以做什麼？設計師的完整應用指南](https://rar.design/posts/claude-fable-5-guide): 被政府下架又放行的最強公開模型，回來後能幫設計師做的三件事
- [平面設計 vs UI 設計：差在哪、薪水差多少、轉職難不難？](https://rar.design/posts/graphic-design-vs-ui-design): 從 Photoshop 跳 Figma 不難，難的是換一顆系統腦——一篇看懂該不該轉
- [Adobe 收購 Topaz Labs 是真的嗎？AI 放大龍頭被買走，設計師該注意什麼](https://rar.design/posts/adobe-acquires-topaz-labs): 最後一個獨立的 AI 影像增強工具被收編。這篇拆交易內容、Adobe 的真正盤算，以及你的工作流會不會被影響
- [Framer vs Figma Sites 怎麼選？2026 設計師建站工具完整對比](https://rar.design/posts/framer-vs-figma-sites): 從 AI agent、CMS、上線速度到價格，一篇看懂兩個工具差在哪、你該用哪個
- [Framer vs Webflow 2026：設計師到底該選哪一個？完整比較與選擇建議](https://rar.design/posts/framer-vs-webflow-2026): 分水嶺不是難易度，是你想對著成品工作、還是對著系統工作
- [Figma Config 2026 重點懶人包：六大發布、上線時間、設計師先學哪個？](https://rar.design/posts/figma-config-2026-highlights): 一篇看完 Code Layers、Motion、Shader、生成式 plugin、Weave 與 agent，附該先學哪個
- [Figma Config 2026 發表了什麼？Code Layers、Motion 與六種材料上 canvas 全解析](https://rar.design/posts/figma-config-2026-recap): Dylan Field 說 code 是設計的材料——這場大會其實在重畫設計師的職業邊界
- [Figma Motion 是什麼？Config 2026 原生動效完整解析與設計師實戰](https://rar.design/posts/figma-motion-config-2026-complete-guide): 時間軸進駐 canvas，動效成了設計系統的一個原件——從 After Effects 到 Dev Mode 出 code 一次看懂

## Lecturers

- [設計師 Riven](https://rar.design/@riven): 資深數位產品設計師｜知名線上課程講師

---

## Using this site programmatically

All page URLs listed above support HTTP content negotiation. To get a clean markdown version of any page, send a request with:

```
Accept: text/markdown
```

The server will return structured markdown with YAML frontmatter instead of HTML. Supported paths:

- `/` (homepage)
- `/faq`
- `/lecturers` (lecturer index)
- `/@:slug` (lecturer profile)
- `/courses/:slug`
- `/posts/:slug`
- `/plans/:slug`
- `/events/:slug`
- `/digital-downloads/:slug`
- `/categories/:slug`

For a single-document content bundle covering courses, posts, and digital downloads, fetch [rar.design/llms-full.txt](https://rar.design/llms-full.txt).

## Platform

This site runs on [Loopwise](https://loopwise.com) (formerly Teachify) — a course, event, and digital-product platform for creators.