非常清楚的風格參考，是日系極簡主義海報設計 — 莫蘭迪色系、留白大量、大字排版、 幾何形狀、角落十字標記。我來打造符合這個美感的演講投影片。 Now I have a clear picture. Let me build the presentation. The aesthetic from the image is: Colors: Muted pastels - beige/cream (#F5F0E8), soft pink (#E8C5BE), terracotta/salmon (#D4826A or similar), light blue (#B8C8D8), sage green (#8BA8A0), light purple (#C4B8CC), white with colored blocks Typography: Large bold Chinese characters as hero (needs a Chinese font) Small sans-serif for subtitles/annotations The reference uses what looks like a rounded/clean sans-serif Layout: Registration marks and geometric shapes scattered throughout with generous whitespace and small text callouts, creating a poster-like composition for each slide For the fonts, I'll go with Noto Sans TC for the Chinese text since the bold weight works well for the large display text, and pair it with something clean for the annotations. Now I'm mapping out the eleven slides: starting with a cover slide featuring Lance's name and the camp details on a beige background with a circle element, then an introduction slide about being an Android developer and UI designer with some stats, followed by a slide about being the engineer in design classes with a soft pink background. Next comes a collaboration slide about helping other designers implement their work on Le-Move-Android with five designers and one engineer, then a discussion slide about the gaps between design specs and engineering reality with a terracotta tone. I'm planning a dedicated slide for the ZZZ-Archive side project, then moving into design systems and how Figma connects to code with a beige background, and finally a slide about supporting four different platforms with a single design system. Continuing with the remaining slides: a metrics showcase highlighting 209 stars with a bold white design, then a closing message about design thinking in the "Vibe Coding" era, and finally a simple thank you slide for Q&A. I'm also considering the layout compositions—left-right splits, top-bottom arrangements, and diagonal compositions—to keep the visual variety engaging throughout the presentation. For the design system, I'm planning to use registration marks (small plus symbols) in the corners of slides like printing marks, and I'll incorporate various geometric shapes including circles, rectangular color blocks, triangles, and thin lines to match the poster aesthetic. I'm defining a color palette with warm beige, dusty rose, terracotta, and blue tones to support the different slide themes. Building the slideshow component... Building out the remaining slides with their color schemes and layouts — slide 2 focuses on a left-right split introducing myself, slide 3 uses a dusty rose background to highlight being the engineer in a design class, slide 4 shifts to powder blue for discussing product work with other teams, and slide 5 contrasts designer expectations versus engineer reality on a terracotta background. Writing the React component... Writing component markup... I'm reconsidering the font strategy—the bold weight of Noto Sans TC works well for the large display text, while lighter weights suit the smaller annotations. For the presentation itself, I need to decide between a portrait orientation matching the reference images or a standard 16:9 landscape format for the slides. Writing the React component... Building the cover slide layout... Writing component markup... I'm reconsidering the navigation approach for a 20-minute presentation—click-to-advance anywhere on the slide, arrow keys for navigation, a prev button that appears on hover at the left edge, and position dots at the bottom. I'll use CSS transitions with opacity and subtle translateX effects for the slide transitions rather than animation libraries, keeping the implementation straightforward. For the aesthetic, I'm simplifying to just a clean crossfade with opacity transitions over 0.6 seconds to match the minimal poster design. I'm also importing Noto Sans TC with multiple weights and DM Mono for the typography, and establishing a muted color palette with a warm cream background and dark brown-black text. Now I'm building out the full implementation, keeping in mind the key design principles from the reference images: the Chinese text should dominate as the largest element, geometric shapes stay simple and flat-colored, metadata text is thin and uppercase with wide letter spacing, and all colors are muted pastels. Building the component structure... Writing component styles... Writing component markup... Writing component markup... Writing component markup... I'm planning out all 10 slides with their distinct visual styles—cream backgrounds with pink accents for the cover, blue blocks for the speaker section, rose tones for the minority theme, dark charcoal for the archive slide, and light backgrounds for the scattered list layout. I should also set the font family globally in the body CSS to ensure consistency across all slides. Now I'm ready to write the actual code, being careful to use motion.div for individual slide animations without AnimatePresence, keeping the JSX properly balanced, and importing from motion/react correctly. I'm realizing I need to be careful about how I merge the Chinese font styles with other style properties on the same element. I'll create a helper function that combines the font family with any additional styles, so I can cleanly apply both className and style attributes without duplication. Writing component code... Writing the Cross component... Building the slide layout with decorative elements like a pink circle and vertical line, then setting up a flex container for the main content. Writing the second slide layout... Writing component markup... Writing component markup... Writing component markup... Writing component layout... Writing component layout... Writing component layout... Writing component layout... Writing component layout... Writing component layout... Writing component markup... Writing component markup... Writing component markup... Writing component layout... Writing component logic... Writing component UI... Finishing the dot styling... I'm noticing an issue with the Le-Move-Android slide where the math formula doesn't quite work visually. The "5 + 1 = 1" doesn't make sense, so I should rethink how to present the team composition narrative instead. For the platform icons on Slide08, I'm considering whether to use lucide-react icons like Smartphone, Tablet, Monitor, and Laptop for the different platforms, but that might be overcomplicating things. Simple text labels with colored blocks would fit the minimal aesthetic better and keep things straightforward. I'm going to completely reconsider Slide04's layout—splitting the top half left-right to contrast designers versus engineers, then building out the rest of the content from there. 777 -- test test2 test3 test4 --

※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.231.187.114 (臺灣) ※ 文章網址: https://webptt.com/m.aspx?n=bbs/Test/M.1785219449.A.C5B.html Oh ha ※ 編輯: mrfatworm (36.231.187.114 臺灣), 07/28/2026 14:18:00 ※ 編輯: mrfatworm (36.231.187.114 臺灣), 07/28/2026 14:18:32