Samples
真实网页的 DESIGN.md 输出
Each sample documents a real brand website design style, including visual DNA, CSS evidence, typography, color, spacing, motion, components, and recreation notes.
23
Sites
23
English
MD + Preview
Formats
Case Library
Brand Design Style Cases
Showing English cases. Switch language to browse Chinese and English samples separately.
Markdown only
airbnb_DESIGN.md
airbnb.com
Before coding, understand the context and define a bold aesthetic direction:
Visual tokens
apple_DESIGN.md
apple.com
Before coding, understand the context and define a bold aesthetic direction:
Visual tokens
Arc_DESIGN.md
arc.net
Before coding, understand the context and define a bold aesthetic direction:
Markdown only
chromewebstore_DESIGN.md
chromewebstore.google.com
Before coding, understand the context and define a bold aesthetic direction:
Visual tokens
dokie_DESIGN.MD
dokie.com
Before coding, understand the context and define a bold aesthetic direction:
Visual tokens
everlane_DESIGN.md
everlane.com
Before coding, understand the context and define a bold aesthetic direction:
Visual tokens
design_scenes_DESIGN.md
fenx.work
Before coding, understand the context and define a bold aesthetic direction:
Markdown only
getwebdesign_DESIGN.md
getwebdesign.top
Cyber-noir SaaS aesthetic with deep void blacks and ethereal indigo glows. Glass morphism dominates the interface through translucent layered panels with backdrop blurs, creating depth against a near-black canvas. Typography pairs geometric precision (Inter) with editorial elegance (Georgia) for high-impact headings. The system employs expressive motion with glowing focus states and smooth state transitions, optimized for developer tools and technical workflows.
Visual tokens
linear_DESIGN.md
linear.com
Before coding, understand the context and define a bold aesthetic direction:
Visual tokens
lovable_DESIGN.md
lovable.com
Before coding, understand the context and define a bold aesthetic direction:
Visual tokens
lusion_DESIGN.md
lusion.co
Before coding, understand the context and define a bold aesthetic direction:
Visual tokens
monopo_DESIGN.md
monopo.com
Before coding, understand the context and define a bold aesthetic direction:
Visual tokens
moonshot_DESIGN.md
moonshot.ai
Before coding, understand the context and define a bold aesthetic direction:
Visual tokens
moxt_DESIGN.md
moxt.ai
Before coding, understand the context and define a bold aesthetic direction:
Visual tokens
ycombinator_DESIGN.md
news.ycombinator.com
Before coding, understand the context and define a bold aesthetic direction:
Visual tokens
notion_DESIGN.md
notion.com
Before coding, understand the context and define a bold aesthetic direction:
Visual tokens
perplexity_DESIGN.md
perplexity.ai
Before coding, understand the context and define a bold aesthetic direction:
Visual tokens
claude_DESIGN.md
platform.claude.com
Before coding, understand the context and define a bold aesthetic direction:
Visual tokens
pmthinking_DESIGN.md
read.pmthinking.com
Before coding, understand the context and define a bold aesthetic direction:
Visual tokens
relume_DESIGN.md
relume.com
Before coding, understand the context and define a bold aesthetic direction:
Visual tokens
stripe_DESIGN.md
stripe.com
Before coding, understand the context and define a bold aesthetic direction:
Visual tokens
tabbit_design.md
tabbit.com
Before coding, understand the context and define a bold aesthetic direction:
Visual tokens
vercel_DESIGN.md
vercel.com
Before coding, understand the context and define a bold aesthetic direction: