FLARE
A community safety PWA that delivers real-time ICE enforcement alerts to protect immigrant communities — built as a web app so no government can remove it from an app store. 一款社區安全漸進式網頁應用程式,即時傳遞移民執法警報,保護移民社群 — 以網頁形式建造,確保任何政府無法將其從應用程式商店下架。
"For many immigrant communities in the US, knowing where ICE is active isn't paranoia — it's survival. I wanted to build the tool I'd want my family to have." 「對於美國許多移民社群來說,了解移民執法局的活動位置不是偏執 — 而是生存之道。我想建造一個我希望自己家人能擁有的工具。」
Real-time awareness 即時感知
Live map aggregating alerts from ICEout.org, StopICE.net, and community reports — filtered to the user's location. 即時地圖整合來自 ICEout.org、StopICE.net 及社群通報的警報 — 依用戶位置篩選。
Know your rights, fast 快速了解你的權利
Emergency-first legal guide in 6 languages. When approached by ICE, the first screen shows exactly what to say and do. 6 種語言的緊急優先法律指南。被移民執法局接觸時,第一個畫面直接顯示該說什麼、該做什麼。
Privacy by design 設計即隱私
Anonymous mode is always on — no accounts, no user data stored. A PWA that can't be pulled from any app store. 匿名模式永遠開啟 — 無需帳號,不儲存用戶資料。無法被任何應用程式商店下架的網頁應用程式。
Status: Paused. 狀態:暫停。 The Trump administration has begun pursuing legal action against developers of tools that interfere with ICE operations. As someone directly affected by the current immigration climate, continuing public distribution creates personal legal risk I'm not in a position to take right now. FLARE exists. The work is done. What happens next depends on what becomes safe. 川普政府已開始對製作干擾移民執法工具的開發者提起法律訴訟。作為一個直接受當前移民政策影響的人,繼續公開發布會帶來我目前無法承擔的個人法律風險。FLARE 存在。這份工作已完成。接下來會發生什麼,取決於什麼時候是安全的。
There are two distinct mental states that open FLARE — and the entire information architecture was designed around the harder one. 打開 FLARE 的人有兩種截然不同的心理狀態 — 整個資訊架構是為了更艱難的那種而設計的。
Calm, routine. Opens the app each morning to confirm the neighborhood is clear before leaving. Needs quick reassurance and a clean "all safe" signal — then closes the app and moves on. 平靜、日常化。每天早上打開 app 確認附近安全再出門。需要快速的安心感和明確的「安全」訊號 — 然後關掉繼續過日子。
Already anxious — heard something, sensed something. Opens FLARE to confirm what they fear might be true. Every second of confusion or loading is a second of compounded panic. 已經很緊張 — 聽到了什麼、感覺到什麼。打開 FLARE 是為了確認他們害怕是真實的事情。每一秒的困惑或載入都是加倍的恐慌。
Design implication: Every screen is designed for the second user first — information visible in under 3 seconds, alert status auto-loaded by geolocation. Most ICE alert platforms show national-level data, which tells you what's happening across the country but can't answer "should I leave my house right now?" FLARE opens to your city, not a map of America. 設計影響:每個畫面都優先為第二種使用者設計 — 資訊在 3 秒內可見,警報狀態依地理位置自動載入。大多數 ICE 警報平台顯示全國性資訊,能告訴你全國動態,但無法回答「我現在應該出門嗎?」FLARE 打開時直接顯示你所在的城市,不是美國地圖。
The "Tactical HUD" concept came from a specific feeling: life in America for many immigrants right now doesn't feel like citizenship — it feels like a survival game, where the government isn't a protector but a threat. Checking ICE activity is the equivalent of knowing where the enemy is on the map. I wanted the interface to reflect that reality honestly, without making it feel brutal. In a life already full of pressure, a little tactile playfulness matters. 「戰術抬頭顯示器」這個概念來自一種具體的感受:對許多移民來說,現在在美國的生活感覺不像公民身份 — 更像是生存遊戲,政府不是保護者而是威脅。查看 ICE 動態等同於在地圖上確認敵人的位置。我希望界面誠實地反映這個現實,但不讓它感覺殘酷。在本來就充滿壓力的生活裡,一點觸感的趣味性是有意義的。
Orange — not red 橘,而非紅
Red felt too hostile — it shuts people down. Orange signals urgency without aggression. And on the internet, orange is Trump's color. Using it as a warning marker carries its own quiet meaning. 紅色感覺太具敵意 — 會讓人心理關閉。橘色傳達緊迫感而不帶攻擊性。而在網路上,橘色是川普的代表色。用它作為警戒色,本身帶有一層安靜的隱喻。
DM Sans + IBM Plex Mono DM Sans + IBM Plex Mono
DM Sans for warmth and legibility under stress. IBM Plex Mono for timestamps and data — the visual precision of a system you can trust with your safety. DM Sans 帶來溫度與壓力下的可讀性。IBM Plex Mono 用於時間戳與數據 — 傳遞一個可以信任的系統的視覺精確感。
Dark & light modes 深淺色模式
Dark mode for low-light or nighttime use. Light mode for daylight. The interface should never draw attention to you when you're checking it in public. 深色模式用於低光源或夜間情境。淺色模式用於白天。當你在公共場合查看時,界面不應該讓你顯眼。
FLARE was built entirely by one designer — no engineers. Using Cursor AI (powered by Claude), I directed every technical decision through natural-language prompts, over 22+ AI sessions spanning 3 weeks. I had the product vision; Cursor had the code. FLARE 完全由一位設計師建造 — 沒有工程師。透過 Cursor AI(由 Claude 驅動),我在 3 週內透過超過 22 個 AI 工作階段,以自然語言指引每一個技術決策。我有產品願景;Cursor 負責程式碼。
Initial Next.js scaffolding, first components, SSR fix for react-leaflet ("window is not defined"). Defined the 9-point product vision: alert levels, multi-language, PWA-first, government-proof. 初始 Next.js 架構搭建、第一批元件、修復 react-leaflet 的 SSR 問題(「window is not defined」)。定義 9 點產品願景:警報等級、多語言、PWA 優先、防政府干預。
Full UI overhaul in one day. Defined the "Tactical HUD" design language: 5-level alert system, 4-tab nav → 3-tab nav, dark/light modes, React Context state management. Created a full HTML prototype with 4 screens and tab switching. 一天完成全面 UI 改版。定義「戰術抬頭顯示器」設計語言:5 級警報系統、4 個頁籤 → 3 個頁籤、深/淺色模式、React Context 狀態管理。建立含 4 個畫面與頁籤切換的完整 HTML 原型。
13 CSS tweaks synced from browser to code. Navigation restructured (Settings → hamburger menu). City-name search via Nominatim API. Privacy audit found git commit history contained real name — added .gitignore rules, deleted exposed history files. 13 個從瀏覽器同步至程式碼的 CSS 調整。導航結構重組(設定 → 漢堡選單)。透過 Nominatim API 支援城市名稱搜尋。隱私審查發現 git 提交紀錄包含真實姓名 — 新增 .gitignore 規則,刪除已暴露的歷史檔案。
Custom SVG map markers colored by alert level. Push notifications via service worker. Know Your Rights redesigned for emergency use — English script always visible regardless of language setting. Fonts locked: DM Sans + IBM Plex Mono. Alert names changed from tactical jargon to plain language (Safe / Caution / Warning / Danger). 依警報等級上色的自訂 SVG 地圖標記。透過 service worker 推送通知。「了解你的權利」針對緊急情境重新設計 — 無論語言設定,英文腳本始終可見。字型確定:DM Sans + IBM Plex Mono。警報名稱從戰術術語改為日常語言(安全/注意/警告/危險)。
Fully collapsible BottomSheet with drag gestures. Map default: NYC → Seattle. v.2 pivot: FLARE became a read-only aggregator (removed Signal tab) pulling from external ICE alert systems — more trustworthy data, less infrastructure risk. 帶拖曳手勢的全可收合底部卡片。地圖預設:紐約 → 西雅圖。v.2 轉型:FLARE 成為唯讀聚合器(移除 Signal 頁籤),從外部移民執法警報系統拉取資料 — 更可信的數據,更低的基礎設施風險。
Connected 3 live sources: ICEout.org (REST API), StopICE.net (XML scraping), Google News RSS. Zero mock data policy — if the API is down, the app shows an empty state. HTTPS for mobile development via mkcert. 6-language QA across all components. 連接 3 個即時資料來源:ICEout.org(REST API)、StopICE.net(XML 爬取)、Google News RSS。零假資料政策 — 若 API 中斷,應用程式顯示空狀態。透過 mkcert 為行動裝置開發設置 HTTPS。所有元件的 6 語言品質檢測。