日式美学设计提示词

Design a Zen-inspired portfolio website. Background: warm off-white (#f5f0e8) resembling washi paper. Accent colors: muted sage green (#8b9a7b) and charcoal (#3a3a3a). Typography: mix of thin sans-serif (heading) and a comfortable serif (body) with extra line-height (2.0). Layout: single column, max-width 720px, extremely generous vertical spacing (120px between sections). Navigation: minimal, horizontal text links with subtle ink-brush underline animation on hover. Images: full-width with natural aspect ratios, no rounded corners.

Create a wabi-sabi-inspired blog using shadcn/ui. Use warm, imperfect aesthetics: off-white background (#faf6f0), slightly uneven border styles (dashed or dotted in muted brown), hand-drawn-feeling dividers (SVG wavy lines). Typography: serif for headings, sans-serif for body, both in warm charcoal (#4a4540). Cards with paper-like backgrounds and subtle texture. No sharp geometric shapes. Include: post list, about page, and a minimal photo gallery with organic masonry layout.

Build a Zen garden meditation app in Next.js. Color palette: stone (#e8e2d8), moss (#7d8b6e), bamboo (#c4a961), ink (#2d2d2d). Features: animated sand-raking pattern using SVG (CSS animation), daily quote display with fade-in transition, breathing exercise timer with circular animation, ambient sound controls with minimal icon buttons. Use maximum whitespace (Ma principle). All animations should be slow and deliberate (600ms+ duration, ease-in-out). No decorative borders, only subtle dividers.

Generate React components with a Japanese ink wash (sumi-e) design aesthetic. Use: grayscale palette with warm undertones (#1a1a1a to #f5f0e8), ink-brush stroke dividers (SVG paths with organic curves), varying ink opacity for text hierarchy (100%, 70%, 40%). Components: PageSection (with ample Ma spacing), InkDivider (decorative separator), FadeInOnScroll wrapper, QuoteBlock (vertical text option for Japanese quotes). Spacing scale: 16, 32, 64, 96, 128px. All transitions should feel like brush strokes - slightly ease-out with 400ms duration.

Design a booking landing page for a traditional ryokan. Background: washi off-white #f7f3ec; text: sumi charcoal #2f2b28; accents: indigo #264573 for links and matcha #7d8b6e for the reserve button. Hero: full-bleed photograph with a vertical Japanese title on the right edge and a thin 1px #d8d0c2 rule framing the booking card. Booking card: date and guest fields with underline-only inputs, 48px tall, labels in 13px letter-spaced uppercase. Sections separated by 120px of white space, room cards in a 2-column grid with 4:3 photos and serif titles at 22px. Reserve button must keep 4.5:1 contrast (white text on #5c6b4f, the darkened matcha).

Create a Japanese tea e-commerce storefront with shadcn/ui. Palette: kinari base #f5f0e8, sumi text #1f1d1a, hojicha brown #8a6f52 accents, sakura #e8c4c4 used only for a seasonal badge. Product grid: 3 columns with 48px gaps, square photos on subtle paper-texture cards, product names in a serif at 18px with 0.05em letter-spacing, prices in a light sans. Product page: single column max-w-2xl, brewing instructions as a numbered list with 2.0 line-height, temperature and steep time in a bordered spec table. Cart drawer slides in over 500ms ease-out. Buttons: outlined 1px #1f1d1a, filling on hover over 300ms. Alt text on every product image.

Build a haiku journaling app in Next.js. Layout: single centered column, max-width 560px, on #faf7f0. Each entry card: no border, separated only by 96px of vertical space and a small hand-drawn SVG dot ornament. Haiku text: serif 20px, line-height 2.2, centered, ink #33302c at 90% opacity; date below in 12px letter-spaced #9a938a. Compose view: a borderless textarea with a 5-7-5 syllable counter that turns #b0543f only when exceeded (paired with a text hint, not color alone). Save action triggers a slow 700ms ink-fade transition. Optional vertical writing mode using writing-mode: vertical-rl for display. Keyboard shortcuts documented in a minimal help sheet.

Generate a React Native-style mobile meditation UI in React with TypeScript. Screens: today (one session card, nothing else), timer, and history. Palette: stone #ece7dd background, moss #6f7d62, ink #2d2a26, one warm accent kitsune #b39355 for the single primary action per screen. Timer screen: a thin 2px circular progress ring animating over the session length, centered remaining time in a light 48px serif, and nothing else on screen (Ma principle). History: a vertical list where each day is a small filled or hollow circle — include day labels for screen readers. All motion 600-800ms ease-in-out; respect prefers-reduced-motion by replacing animation with opacity fades. Touch targets 48px minimum.