#Figma

1周前

再見了 Figma ? Tailwind CSS 的設計師 Steve Schoger 最近發了一支一小時的影片，展示他怎麼用 Claude Code 從零建出一個金融 App 的行銷首頁。影片開頭他就先打了預防針：「我對命令列還是非常新手，這些東西對我來說都很陌生。Adam Wathan 幫我做了初始設定，現在我就是有一個 Vite 專案模板，每次開新專案就複製一份。」他說自己大概只會兩件事，換目錄和啟動 Claude。但用 Claude Code 當主要設計工具一個多月以來，他做出了三層式定價頁面（含比較表、testimonial、FAQ）、Tailwind Labs 內部用的金融 dashboard，而且整個過程沒有用任何 skills 或 CLAUDE.md，就是從空白畫面開始對 Claude 講話。這支影片最有價值的部分，是他在一小時的操作過程中不斷穿插實戰設計技巧，從字型選擇、邊框處理、按鈕細節到整頁裝飾，每一個都是他身為專業設計師多年累積的判斷。以下是完整的 16 條技巧拆解。 Steve Schoger 是誰 Steve Schoger 是 Tailwind Labs 的設計師，跟 Tailwind CSS 的創辦人 Adam Wathan 長期合作。他目前正在開發一款叫的工具，是給 Claude Code、Cursor、Amp 這些 AI coding agent 使用的 skills 套件，讓 AI 在寫前端程式碼的時候能套用專業級的設計標準。他的工作流程很簡單，左邊是瀏覽器顯示 localhost 的即時預覽，右邊是 Claude Code 的終端，中間沒有 Figma。他說現在開 Figma 的唯一理由是做向量圖形（SVG logo 之類的），其他全部在 Claude Code 裡完成。他用的技術棧是 Vite + Tailwind CSS + React，但他自己不寫 CSS，所有樣式都是用自然語言告訴 Claude 要什麼效果。他的起手 prompt 大意是：「幫一個金融 app 設計一個簡單的行銷首頁，這個 app 把所有收入來源整合到一個 dashboard 裡。頁面要包含導覽列、hero 區塊、logo 列、功能介紹、數據統計、使用者推薦、CTA 區塊和頁尾。」Claude 生成初版之後，他花了大約 50 次迭代式的對話，一步步把它從「AI 預設輸出」調整成專業水準的成品。邊框與陰影：讓元素看起來乾淨的關鍵 📷 1. 用 outer ring 取代 solid border 這是 Schoger 在影片中反覆強調的核心技巧。當一個元素同時有陰影（shadow）和實色邊框（border）的時候，陰影和邊框之間會產生一種「muddy」（混濁）的效果，視覺上很髒。他的做法是完全不用 border，改用 outer ring，顏色設為 gray-950、opacity 10%，放在元素外側。這樣陰影和邊緣之間的過渡更銳利、更乾淨。這個技巧他套用在截圖容器、按鈕、navbar、feature card 上，幾乎所有有陰影的元素都適用。 2. Concentric radius（同心圓角）當一個圓角容器裡面放了另一個圓角元素（比如截圖放在卡片裡），內層的 border-radius 應該等於外層的 radius 減去 padding。這樣兩層圓角會形成同心圓，視覺上才和諧。如果內外層用同樣的 radius 值，間距小的時候看起來會很彆扭。 3. Inset ring 做邊緣定義在淡色背景的容器上，用 inset ring（5% opacity）做邊緣定義，取代傳統的 border。這個方式比 border 更微妙，不會搶走容器內容的視覺焦點。 Typography：字型的細節決定專業感 📷 4. 用 Inter variable 的 display 版本 Schoger 推薦從下載 Inter 的 variable 版本，而非 Google Fonts 上的標準版。variable font 的好處是可以用「中間」字重，比如 550（介於 medium 500 和 semi-bold 600 之間），這在標準版是做不到的。他還特別關閉了一個 OpenType 特性：帶尾巴的小寫 L 變體（stylistic set ss02），因為這個變體在某些情境下會讓字看起來怪怪的。 5. 大字體要收緊 tracking 24px 以上的大字體，字距（tracking / letter-spacing）要比預設值再緊一點。字越大，字母之間的空隙在視覺上會被放大，收緊 tracking 可以讓標題更有衝擊力、更緊湊。他在 Tailwind 裡用 tracking-tight 甚至更緊的值。 6. Eyebrow 文字用 monospace section 標題上方的小標籤（eyebrow text，像是「你需要的一切」「立即開始」這類），Schoger 有一套固定公式：用 Geist Mono 字型、全大寫（uppercase）、加寬字距（tracking-wider）、小字體（text-xs）、灰色（gray-600）。monospace 字型讓這些短文字看起來更技術感、更精緻。 7. text-pretty vs text-balance Tailwind CSS 有兩個文字排版 utility：text-pretty 避免段末出現孤字（orphan word），text-balance 讓文字行更均勻分布。兩者效果不同，需要根據具體情況選用。Schoger 在不同的文字區塊之間會來回切換測試哪個效果更好。 8. 小字體行高可以翻倍 14px（text-sm）的文字，行高可以設為 28px（字體大小的兩倍）。這聽起來很誇張，但對於副標題或說明文字來說，更大的行距讓文字有更多呼吸空間，閱讀起來更舒服。版面佈局：打破 AI 的置中預設 📷 9. 左對齊取代置中 AI 生成的網頁幾乎都是置中對齊，Schoger 第一件事就是把 hero 改成左對齊。他參考的是 Tailwind Plus 網站的 split headline 佈局：標題放左側（約 3/5 寬），副標和描述文字放右側（約 2/5 寬），頂部對齊。這種佈局比全部置中更有設計感，也更容易閱讀。 10. Inline section heading feature section 的標題，Schoger 不用傳統的「大標題 + 換行 + 副標」結構，而是把標題和副標放在同一行，用不同的顏色和字重區分。標題用深色粗體（neutral-950），副標接在後面用灰色中等字重（neutral-600, medium）。他說這個風格的靈感來自 Apple、Linear、Stripe、Adio，需要比較長的副標文案才能撐起這個效果。 11. max-width 用 ch 單位控制文字區塊的最大寬度，Schoger 不用固定像素，而是用 ch 單位（基於字型中 0 字元的寬度）。比如 max-w-[40ch] 大約等於 40 個字元寬。好處是不管字體大小怎麼變，閱讀寬度都維持在舒適的範圍。他在調的時候自嘲：「有時候就是要一個一個試，找到剛剛好的那個。」試了 45、40、35，最後選了 40。元素設計：按鈕、容器、截圖 📷 12. 按鈕的高度和形狀 Schoger 偏好 36 到 38px 的按鈕高度，用 padding 控制而非固定 height。形狀是 pill-shaped（全圓角），字體 14px（text-sm）。他會把 AI 預設加在按鈕裡的 icon 拿掉，保持乾淨。 13. 兩個按鈕高度差 2px 怎麼辦這是影片裡最令人印象深刻的細節之一，當一個按鈕有 ring（外框），另一個沒有的時候，有 ring 的按鈕會比沒有的高 2px。Schoger 說：「這就是我失眠的原因。」Adam Wathan 的解法是用一個 span 包裹有 border 的按鈕，設定 inline-flex + p-px，再用 calc 計算，讓兩個按鈕視覺上完全等高。Schoger 坦承：「老實說這個我自己想不出來，這是 Adam Wathan 的魔法。」 14. Well-styled container（凹陷容器） feature section 裡的截圖容器，Schoger 給它一個極淡的背景色（gray-950 at 2.5% 到 5% opacity），移除邊框，讓截圖本身更突出。截圖從底部裁切（底部零 padding、無底部圓角），製造一種截圖「坐在容器底部」的效果。再加上 inset ring（5% opacity）做邊緣定義。 15. 截圖是最好的視覺元素如果你沒有自訂圖形或插畫，在首頁放一張 app 的高解析度截圖，是讓頁面瞬間有視覺焦點的最簡單方法。Schoger 特別要求 Claude 用 3x 解析度擷取截圖，確保在高 DPI 螢幕上也是清晰的。裝飾與細節：讓網站看起來不像模板 📷 16. Canvas grid（裝飾性邊框網格）這是影片最後加的收尾裝飾，在整個網站的各個 section 之間加上裝飾性的線條邊框。水平線延伸到 viewport 全寬，垂直線保持在 page container 寬度內，形成一種精緻的網格框架。Schoger 說靈感來自 Stripe、Adio 和 Tailwind 官網。如果你沒有自訂圖形資源，這是讓網站瞬間脫離「模板感」的好技巧。 17. 背景圖片 testimonial card testimonial 區塊不用傳統的頭像 + 引言結構，而是用 AI 生成的人像照片當卡片背景，底部加暗色漸層（gradient shim），讓白色引言文字在照片上清晰可讀。這種風格比標準的圓形頭像有視覺衝擊力得多。 18. Logo cloud 處理 partner logo 列不需要標題，直接放 logo 就很清楚。用真實的 SVG logo 而非文字，移除 opacity（直接用 gray-950），佈滿容器寬度。簡單但很多人會過度設計這個區塊。 Claude Code 的 prompt 策略：設計師怎麼跟 AI 說話 Schoger 跟 Claude Code 的對話方式，跟工程師完全不同。他不寫程式碼，不指定 CSS 屬性，他用的是設計語言。具體的值他會直接說，像是「改成 38 像素」「改成 gray-950」。模糊的方向也能用，像是「再大一點點」「再緊一點」。他甚至自嘲：「我覺得我寫的這些句子根本不太合理，但它每次都聽得懂。」有幾個特別有效的 prompt 模式，第一個是問「這個是怎麼做的？」，用來檢查 Claude 的實作方式，發現問題再指出修正。第二個是全站同步，叫 Claude「把這個樣式套用到下面所有區塊」，一次統一風格。第三個是建立臨時工具，他要求 Claude 做了一個拖曳定位工具，讓他可以視覺化地調整截圖位置，調好後複製座標值寫進程式碼，再移除工具。最讓他驚訝的是 Claude 會自己學習風格一致性。「它就是一邊做一邊學，這還蠻好的，我不需要再額外更新。」後面新增的按鈕自動套用了他之前定義的 ring 樣式，不需要額外指示。整個過程他沒有用任何 skills 或 CLAUDE.md，也沒有寫任何程式碼。他用的是二十年設計經驗累積的眼光，Claude Code 負責把這些設計意圖轉成 Tailwind CSS。和設計師的下一步影片最後，Schoger 推廣了他和 Adam Wathan 正在開發的。這是一套給 AI coding agent 用的 skills 套件，目標是把他在影片裡手動教 Claude 的那些設計原則，預先打包成 agent 可以直接引用的設計標準。支援 Claude Code、Cursor、Amp。這個方向很有意思，Schoger 的影片證明了一件事：AI 生成的初版網頁和專業設計師的成品之間，差距不在程式碼，在設計判斷。AI 會用 indigo 當預設色、會把所有東西置中、會用 solid border 配 shadow 製造混濁效果。設計師知道該把它改成什麼，但以前需要自己動手寫 CSS 或在 Figma 裡畫。現在只需要說出來就好。 Schoger 的 before/after 對比很有說服力。同一個 prompt 生成的初版，經過大約 50 次設計師主導的迭代，變成了一個看起來完全不同的網站。差異不在技術，在眼光。

#Figma #Tailwind CSS #Steve Schoger #Claude Code #金融 App #行銷首頁 #命令列 #Adam Wathan #Vite 專案模板

1周前

Google Stitch 大更新：号称是 Vibe Design 对着画布说话就能做设计 Figma 股价大跌8.8% 带来 5 大升级： 🎨 无限画布：以前是输入一句话等出图，现在有了一个真正的工作台。你可以把参考图、文字说明、代码片段全扔上去，AI 结合这些上下文帮你设计，更像在跟一个设计师协作。 🧠 更智能的设计 Agent：它现在能记住你整个项目的修改历史，不是每次从零开始理解你的需求。还能同时帮你推进多个方案，比如你想试三种不同风格的首页，它并行帮你搞，互不干扰。 🎙️ 语音交互：“这个按钮大一点""配色换暖色调""导航栏改成深色"，对着它说就行。不用停下来打字，边看边改，效率高很多。 ⚡ 即时原型：以前出的是静态图，现在点一下播放键，设计稿直接变成可以点击交互的原型。系统自动帮你算好"点这个按钮跳到哪个页面"。不用手动一根根连线了。 📐 新增了 DESIGN.md：把你的设计规范（配色、字体、风格）写成一个文件，不管是给 Stitch 用还是给 Claude Code、Cursor 这些 AI 编程工具用，都能读懂。设计规范不再锁死在一个工具里。

#Google #Stitch #Vibe Design #Figma #AI设计助手 #股价下跌 #大更新

1周前

没想到腾讯版的 Figma，也要来了。目前产品名为 Ardot，正在内测阶段。根据网站上的信息显示，相比于普通的设计软件，Ardot 引入了 AI 对话功能，从而让用户下指令给 AI，来完成生成模版、修改设计稿、调整细节的需求。该 AI 模型底层是 DeepSeek。

#腾讯 #Figma #Ardot #内测 #AI对话 #设计软件 #DeepSeek

4个月前

本来以为 Figma 可以做 Display P3 下的 HDR 高光效果放在 app 里用，试了一下午不行。换 Affinity 瞬间搞定😎

#Figma #Affinity #Display P3 #HDR #设计工具

4个月前

说下我现在做落地页的流程，30分钟从设计到上线。用的工具是 Stitch 生成设计，Figma 改细节，v0 出代码。具体是这样，Stitch 输入需求直接生成 UI，然后一键粘到 Figma 里。这个好就好在不用转格式，图层结构都保留，省很多事。粘进去之后就是改改文字颜色间距这些，Figma 我装了几个插件挺方便，Iconify 找图标、Content Reel 填假数据、Image Palette 取配色、Autoflow 画流程、Crowdin 多语言。装插件就右键 Plugins 搜名字。改完了选 Frame，Export PNG，扔给 v0，写清楚要实现什么功能，等几分钟就能拿到 Next.js 代码。 Figma 的 Community 也能省不少时间，搜 Landing Page 一堆模板，我一般拼几个改改就用。浏览器开就行，免费版够用。以前我做页面要么花钱外包等一周，要么自己找参考抄来抄去搞几天。现在半小时到一小时搞定，主要时间花在想文案和调细节。 v0 对设计稿还原度挺高的，基本不用大改代码。分享这套是因为我之前走了弯路，你们能直接用省时间。

#落地页 #Stitch #Figma #v0 #效率工具

4个月前

用GPT-5.1教我如何使用figma实现一个小feature. 虽然目前LLM无法控制浏览器替代人类在figma上完整地绘画，但是有视觉的LLM仍然可以看见，并且指导我这种小白用文字来step by step执行。缺点是GPT-5.1老是喜欢用Rect而不是Frame，而且经常忘记auto layout，小白一个。但整体用来练习小功能挺不错。类似的，可以用LLM来设计design system.

OpenAI GPT-5发布引发用户不满，阿尔特曼回应质疑· 158 条信息

#GPT-5.1 #Figma #LLM #设计工具 #Design System

4个月前

figma 总是在我需要它的时候打不开

#Figma #打不开 #软件故障 #用户体验 #负面

4个月前

想用 figma 设计一个页面了

#Figma #UI设计 #页面设计

4个月前

您能想象吗？仅凭一张角色图，就能延展整套IP视觉系统，甚至为IP创建有趣的动画，并无缝应用于工作项目。周末加班加点，终于把这个教程剪完了。本次使用到的工具是Lovart、Figma、AE。本次我将从 IP 生图到角色动画再到开发交付全流程演示，让你快速掌握这套工作流。学完你也能应用到自己的项目中

AI视频井喷：Midjourney领跑，多模态混战· 337 条信息

#IP #角色动画 #Lovart #Figma #AE

4个月前

做产品原型的时候试了下 Google 的 Stitch 以前我做原型都是先画线框图，再找人设计，现在直接说一句话就出来了。我跟它说： "做个语音记账 APP，说话就能记账，要账单列表、数据统计、分类管理" 两分钟，所有页面都出来了。虽然不是那种特别精细的设计，但做原型够用了。改东西也方便：改整体风格就直接说改局部就框起来或者用调色板调调颜色啥的有两个模式，一个快一个慢。慢的那个能上传手绘稿，它帮你转成正式界面。弄完之后能导代码，也能粘贴到 Figma。我现在基本就是用它快速搞个原型出来，然后把代码给 Cursor 继续写后端逻辑。不会设计的话，用这个能省不少事。

#语音记账APP #原型设计 #效率工具 #AI辅助 #Figma

5个月前

Figma收购以色列初创公司 Weavy 并将推出全新的工具 Figma Weave 你将可以在 Figma 画布中直接调用多个AI模型、更多工具，在同一界面完成生成、编辑与创作。设计、编辑、脑洞，全在一张画布搞定

#Figma #Weavy #Figma Weave #AI模型 #设计工具

5个月前

感觉 Affinity Designer 2 的上手门槛是远远超过 Sketch 和 Figma 的。比如你想导出一张图片，要切成 Export Persona，不同的尺寸的文件名字带一个变量编辑器，操作感极强但也相对复杂很多

#Affinity Designer 2 #sketch #Figma #用户体验 #软件

5个月前

一边在用ChatGPT Atlas的Agent模式操作Figma生图，一边用codex vibe coding，谁也别想闲着🫤

#ChatGPT #Atlas #agent模式 #Figma #Codex

5个月前

今天看到这个「Benchmark Prompts」开源数据集，是用来测试 AI Agent 前端真实任务表现的。数据集有 200+ 真实前端任务，包含各种 Figma 设计和文本指令，覆盖不同前端技术栈（如 React/Next.js、组件库、CSS 框架），聚焦复杂、非基准式任务。从编译成功率、代码审查通过率和功能实现率三个方面判定。测试结果 Kombai 这个前端 AI Agent 表现整体都不错，特别是在 Figma 设计视觉保真和特征实现方面，继续深挖它能做到的原因，它的 Figma interpretation engine 在 ProductHunt 发布中有更多信息披露，当时还拿到了 Day/Week/Month 榜首：技术基础：集成模型与无预处理 · 集成模型：深度学习 + 启发式子模型，针对布局/元素/样式子任务训练于专属数据集（真实 UI + HTML 映射），推导隐式推理（如层级功能性） · 无预处理：经 Figma API 直接读取矢量数据，精确捕获属性（颜色、阴影、字体），适用于 Dribbble 等平台文件，避免图像检测低精度关键能力：鲁棒解读与生成 · 设计解读：自动校正非理想模式（如重叠节点、隐形元素、意外阴影） · 资产生成：提取 SVG/图标，输出逻辑 DOM、React 组件、无硬编码 CSS（Flex 等），含功能逻辑 + 视觉预览，支持 IDE 集成。 · 上下文适配：融合代码库（组件/主题），匹配 React/Next.js 等栈，降低集成风险。

#AI Agent #Benchmark Prompts #前端任务 #Figma #Kombai

5个月前

我让 ChatGPT Atlas 的 Agent 在 Figma 里画了一个爱心设计师要没工作了

#ChatGPT #Figma #AI设计 #爱心 #设计工具

5个月前

另外一个Vibe Coding小技巧：最佳实践。如果不知道某功能怎么开发，就告诉AI按最佳实践来写。比如开发画布时，我不知道怎么描述画笔等功能交互。就告诉 AI，你参考Canva或Figma的最佳实践。哪怕不给参考的产品名，只说用“最佳实践”来写，出来质量也会很高。

AI编程工具激战：Claude Code、Gemini Cli崛起· 1256 条信息

#Vibe Coding #AI #最佳实践 #Canva #Figma

5个月前

同样的提示词，Figma Make 也不差

#Figma #Figma Make #效率工具 #设计工具 #竞品分析

5个月前

今日美股最大赢家： 1）Figma 2）AMD 表现最平： 1）TSLA 2）META 中概股普遍回调

美股新行情：就业数据下修引恐慌· 322 条信息

#美股 #Figma #AMD #中概股回调

5个月前

谁能讲讲Figma 到底有什么moat护城河？它套壳一个GPT比自己用adobe加GPT有什么更大的优势？ $fig

#Figma #GPT #Adobe #设计工具 #技术分析

5个月前

准备系统性的学习一下figma了第一步，先去冲个账号。

#Figma #UI设计 #学习 #软件 #账号

枯白啃设计

6个月前

今天送的是一组小蜜蜂～也是过程方案，感兴趣且有图标需求的朋友可以 RT，私发工程文件 #icon #Figma #iOS26

#小蜜蜂 #图标设计 #Figma #iOS26 #工程文件分享

歸藏(guizang.ai)

6个月前

终于！figma 上线了 AI 设计和编辑设计稿的能力只需要选中对应画布然后评论就行

#Figma #AI设计 #设计编辑 #积极 #设计稿

6个月前

liquid glass的效果，在figma里面点一下就行。现在的工具啊，真是“有手就会” 🤣 这是学工具、用工具最好的时代。当然，ai是最有价值的工具。学ai，用ai～

苹果Liquid Glass：开发者适配陷两难，AI助力AR或成未来· 104 条信息

#Figma #Liquid Glass效果 #AI工具 #易用性 #效率提升

6个月前

这个 Figma Design for beginners 值得一看，挺适合会 Sketch 但是又想了解些细节或者想学习设计的入门同学，将从头开始设计一个作品集网站，涵盖基础内容，如形状、文本和框架，并探索更高级的功能，如自动布局、组件和原型设计等方面，学完基本可以出师。

#Figma #UI设计 #教程 #作品集网站 #入门

三秋十李 Sergio

6个月前

发现我已经将近一年没打开过 Adobe 的软件了，设计使用 figma，剪辑用剪映，修图用像素蛋糕。但是这个老流氓却一直在我的菜单栏挂着，看他太不顺眼了今天准备抄家，清理门户！

#Adobe #Figma #剪映 #像素蛋糕 #卸载