→ mrfatworm: yes 07/28 14:17
Oh ha
※ 編輯: mrfatworm (36.231.187.114 臺灣), 07/28/2026 14:18:00
※ 編輯: mrfatworm (36.231.187.114 臺灣), 07/28/2026 14:18:32
非常清楚的風格參考，是日系極簡主義海報設計 — 莫蘭迪色系、留白大量、大字排版、
幾何形狀、角落十字標記。我來打造符合這個美感的演講投影片。
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://www.ptt.cc/bbs/Test/M.1785219449.A.C5B.html