從設計思維到工程邏輯 學習用AI幫助設計 From Design Thinking to Engineering Logic: Learning to Use AI for Design

這場工作坊不需要任何程式設計基礎，但能讓你輕鬆透過AI開發應用程式！我們將運用Cursor AI撰寫一系列有效的提示詞，一步步從介面到功能開發，再到串接OpenAI模型，最終打造一個Chrome AI設計助理外掛。這個AI助理能即時分析網頁內容、整理資訊，甚至提供設計優化建議，幫助你提升設計效率！

在AI輔助開發中，有一種常見問題是AI產出的結果有可能與最新技術文件不符，導致對接失敗。我們也將學習如何在不耗費過多時間閱讀文件的情況下，協助AI Update最新且正確的技術文件來進行開發。

雖然Chrome AI設計助理只是本課程的範例。實際能做的事情遠遠不止於此，透過客製化OpenAI模型的系統提示詞，讓它根據你的需求提供色彩建議、UX文案建議甚至產出設計規範…等。

This workshop does not require any programming background, yet it will enable you to develop applications effortlessly using AI! We will utilize Cursor AI to craft a series of effective prompts, step by step—from interface design to functional development, integrating OpenAI models, and ultimately building a Chrome AI Design Assistant Extension. This AI assistant can analyze webpage content, organize information, and even provide design optimization suggestions, helping you boost design efficiency!

A common issue in AI-assisted development is that AI-generated results may sometimes be inconsistent with the latest technical documentation, leading to integration failures. In this workshop, we will also learn how to update AI with the latest and most accurate technical documentation efficiently without spending excessive time reading through complex files.

Although the Chrome AI Design Assistant is just an example in this course, the possibilities extend far beyond! By customizing OpenAI model system prompts, you can tailor AI to suggest color palettes, UX copy, generate design guidelines and much more.

✍️［參與這個工作坊的學員，可獲得的Takeaway］

• 零程式基礎AI開發能力：即使沒有程式設計經驗，你也能學會如何透過Cursor AI撰寫有效提示詞來開發應用程式。
• 實作完整Chrome AI外掛：學習從介面設計、功能開發到整合OpenAI模型的完整流程，實際打造一個能分析網頁、整理資訊並提供設計建議的AI助理外掛。
• AI協作開發技巧：掌握如何引導AI產出更準確的結果，特別是克服AI與最新技術文件不符的常見問題。
• 文件整合效率提升：學習如何讓AI快速更新並正確理解最新技術文件，避免耗費過多時間閱讀複雜文件。
• AI客製化設計應用：了解如何通過系統提示詞客製化OpenAI模型，使其能根據特定需求提供色彩建議、UX文案建議或產出設計規範。
• 實用技能拓展：獲得將所學技能應用到其他AI輔助開發項目的能力，遠超出工作坊範例的應用可能性。
• 設計流程優化思維：培養利用AI工具提升設計效率的思考方式，掌握設計師與AI協作的最佳實踐。

✍️ What You Will Take Away from This Workshop

✅ AI Development with No Coding Background Required: Learn how to create applications using Cursor AI and effective prompts, even without programming experience.
✅ Hands-on Chrome AI Extension Development: From interface design to feature development and OpenAI model integration, build a functional AI-powered assistant that analyzes webpages, organizes information and offers design suggestions.
✅ AI Collaboration Techniques: Master how to guide AI for more accurate outputs and tackle discrepancies between AI results and the latest technical documentation.
✅ Efficiency in Documentation Integration: Learn to quickly update and help AI interpret new technical documents, reducing time spent reading lengthy files.
✅ Customized AI Design Applications: Understand how to tailor OpenAI models with system prompts to generate color recommendations, UX copy and design guidelines according to your needs.
✅ Expanding Practical AI Skills: Apply the acquired skills beyond this workshop to other AI-assisted development projects.
✅ Optimizing Design Workflows: Develop a strategic mindset for integrating AI into design, improving efficiency through AI collaboration best practices.

✍️［適合什麼樣的人參加］

• 非設計背景的自學轉職者：想要獲得AI產品開發的能力
• UXUI設計師：想要跨領域了解AI的重點
• 不需會寫程式，但要理解基礎技術名詞，以便與AI溝通。
  • 例如：
    • React框架特性
    • 共用元件設計概念
    • 常用套件功能
    • OpenAI模型差異
    • 資料儲存方案選擇等。

✍️ Who Should Attend?

👩‍💻 Career Switchers & Self-learners: Looking to acquire AI product development skills without a design background.
🎨 UX/UI Designers: Interested in exploring key AI concepts without needing coding skills but willing to grasp basic technical terminology to communicate with AI effectively.

Basic understanding of the following is helpful:

• React framework characteristics
• Shared component design concepts
• Commonly used libraries & functions
• Differences between OpenAI models
• Storage solution choices

關於講者 About the Speaker

Andy是一位資深的前端工程師和教育工作者，過去曾擔任共生智能股份有限公司（Kyosei.ai）的共同創辦人兼前端工程師。在網站無障礙領域有豐富經驗，連續三年擔任網站無障礙規範座談會委員。

Andy is a senior frontend engineer and educator with extensive experience. Previously, he co-founded Kyosei.ai, where he worked as a frontend engineer. He has also been actively involved in web accessibility standards discussions for three consecutive years.

技術專長 Technical Expertise

• 專注於前端開發、AI應用整合及使用者介面設計
• 具備全端開發能力，精通HTML、CSS、React、Python等技術

• Specializes in frontend development, AI application integration and UI design
• Proficient in full-stack development, with expertise in HTML, CSS, React, Python

教學經驗 Teaching Experience

• 自2016年起累積超過6,000小時的教學經驗
• 在多所知名機構任教，包括台灣大學、宜蘭大學及國防部
• 教授課程涵蓋AI應用開發、網頁設計、Python程式設計等領域

• Over 6,000 hours of teaching experience since 2016
• Instructor at Taiwan University, Yilan University and the Ministry of National Defense
• Courses cover AI application development, web design, Python programming and more

特殊成就 Achievements

• 2021年獲得經濟日報權證交易競賽年度績效獎
• 持續參與網站無障礙規範制定，推動數位平權

• Awarded 2021 Economic Daily Derivatives Trading Competition Annual Performance Award
• Continually contributes to web accessibility standards, promoting digital inclusivity

工作坊簡介 Workshop Details

✍️［工作坊時間 Date & Time］2025 / 03 / 19（三 Wednesday）19:00-22:00（18:50開始入場 Doors open at 18:50）

✍️［工作坊形式 Format］此為UXY公開工作坊，中文講解為主 Workshop conducted in Chinese

• 課程安排： 觀念講解60% + 實作練習40%
• 課程形式： 線上Google Meet
• 準備物品： 個人電腦、安裝Cursor App
• 課程人數： 最多人數30人

• Format: Online via Google Meet
• Course Breakdown: 60% Theory + 40% Hands-on Practice
• Required Materials: Personal computer with Cursor App installed
• Capacity: Maximum 30 participants

✍️［參加方式 How to Register］新朋友請由ACCUPASS完成購票報名，UXY會員經認證後可享有報名折扣

New Participants: Register via ACCUPASS
UXY Members: Enjoy discounted registration after verification

https://www.accupass.com/eflow/ticket/2502170724501547877706

✍️［活動流程 Workshop Agenda］

1. 觀念講解：（約60分鐘）

• 初探Cursor AI：全程使用提示詞開發
• 用AI實現排版與操作流程原型
• 認識常見資料結構：建立與AI溝通的共通語言
• 整合OpenAI模型：GPT文字模型、JSON模式、電腦視覺模型與語音模型
• 幫AI Update資訊落差：如何讓AI理解最新的技術文件

2. 學員實作（約90分鐘）

3. 講師回饋及QA（約30分鐘）

1. Concept Explanation (Approx. 60 mins)

• Introduction to Cursor AI: Prompt-driven development approach
• Using AI for Layout & Interaction Prototyping
• Understanding Common Data Structures: Establishing a common language for AI communication
• Integrating OpenAI Models: GPT text models, JSON mode, computer vision models and speech models
• Updating AI on Information Gaps: Helping AI understand the latest technical documentation

2. Hands-on Practice (Approx. 90 mins)
3. Instructor Feedback & Q&A (Approx. 30 mins)

✍️［購票資訊 Ticket Information］

• 早鳥票（2/19-2/26）NT$2,000
• 一般票NT$2,400
• UXY會員享有折扣5位，最少8人開班

• Early Bird Ticket (Feb 19 – Feb 26): NT$2,000
• Standard Ticket: NT$2,400
• UXY Members: Special Discount Available
• Minimum 8 participants required to start the workshop

✍️［提醒事項 Notes］

• 工作坊前可以先安裝Cursor，行前通知會附上安裝流程講解。
• 🎥 工作坊會錄影，上課後30天內看回播複習。

• Prior to the workshop, please install Cursor AI (installation guide will be included in the pre-event email).
• 🎥 Session will be recorded and available for 30 days after the workshop for review.

關於 About UXY

UXY是一個設計職涯加速器，專注於幫助轉職的自學設計師建立UX設計思維，並為軟體新創公司提供彈性的遠端設計支援服務。我們提供線上學習工作坊，並與業界設計導師和企業合作夥伴共同協作，協助設計師成長、創造科技職涯和理想生活，同時也幫助新創企業在設計上解決挑戰並加速發展。

加入成為UXY會員方案「探險家 & 深修者」兩種方案給想要持續學習的你。
會員專享每月業師交流、季度技能工作坊、線上讀書會等等，歡迎加入了解UXY會員方案！

也歡迎填寫加入UXY Studio人才庫或至UXY Linkedin了解更多！
有任何問題請加入UXY Discord社群，我們會盡快回覆你。

UXY is a design career accelerator, dedicated to helping self-learners and career switchers build UX design thinking while providing flexible remote design support for startups. We offer online learning workshops and collaborate with industry mentors and corporate partners to foster designer growth, career development and innovative solutions for startups.

Join UXY Membership Plans: Explorer & Advanced Learner Plans offer ongoing learning opportunities, including monthly mentor networking, quarterly skill workshops, online book clubs and more!

Join UXY Studio Talent Pool or follow UXY on LinkedIn for career updates!
Have questions? Join the UXY Discord community, and we’ll respond as soon as possible!

追蹤最新動態 Stay Updated：Instagram｜Linkedin｜Facebook｜Medium

本活動委託ACCUPASS代為處理退款，詳見平台FAQ。

Refund Policy: Managed by ACCUPASS – see platform FAQ for details.