read.pmthinking.com Sample

# Design Thinking
Before coding, understand the context and define a bold aesthetic direction:
- **Purpose**: What problem does this interface solve? Who is using it?
- **Style**: Choose an extreme style: minimalism, maximalism, retro-futurism, organic/natural, luxury/artisanal, playful/toy-like, magazine/editorial, raw/rough, art deco/geometric, soft pastel, industrial/practical, etc. There are many styles to choose from. You can draw inspiration from them, but ensure your design truly aligns with the selected aesthetic direction.
- **Constraints**: Technical requirements (frameworks, performance, accessibility).
- **Differentiation**: What makes it memorable? What one thing will people remember?
**Key**: Choose a clear conceptual direction and execute it precisely. Both bold maximalism and refined minimalism are viable — the key is intention, not intensity.
## Aesthetic Default Settings
- Start with composition, not components.
- Prioritize full-bleed hero images or full-canvas visual anchors.
- Make the brand or product name the most prominent text.
- Keep copy concise for quick scanning.
- Use white space, alignment, scaling, cropping, and contrast before adding borders.
- Default constraint system: no more than two fonts and one accent color.

# Overall Atmosphere
## Design System
### 1. Core Style
Editorial "digital garden" aesthetic combining long-form reading with immersive visual storytelling. Asymmetrical layout featuring a fixed navigation sidebar alongside a scroll-snap content theater. Gradient-driven backgrounds create emotional depth while maintaining content readability.

### 2. Color Palette
Dynamic gradient pairs (coral-red to slate-gray, teal to brown, etc.) for article backgrounds; pure white for utility sections; high-contrast white text on dark/gradient surfaces; muted gray for secondary text; vibrant accent colors for project icons (blue, red, black, orange).

### 3. Font Stack
Clean sans-serif system optimized for Chinese readability (Noto Sans SC or equivalent); bold weight for article headings (H2); regular weight for body text; small caps or muted gray for section labels.

### 4. Texture
Smooth linear gradients without grain; subtle drop shadows creating floating card effects; clean white negative space in footer/project sections; rounded-corner containers softening the editorial experience.

### 5. Motion Design
CSS scroll-snapping (mandatory y-axis) locking article cards to viewport center; smooth transitions between active/inactive navigation states; hover scale effects on interactive project icons.

## Component Guidelines
### Button / Card / Navigation / Input / Typography
Cards utilize heavy border-radius (16-24px) with gradient backgrounds; navigation is minimalist text links without decorative markers; typography relies on size contrast rather than weight variations for hierarchy; no visible input fields in current view.

## Distinctive Element Few-shot Examples

### 1. Gradient Article Card (Snap Item)
**Purpose:**
Primary content container displaying individual articles with immersive gradient backgrounds, featured imagery, and excerpt text in a theater-like presentation.

**Evidence:**
- DOM: `article#article-351` with class `snap-item`, containing `div.article-card`
- JSON data: `"gradientStart":"#E95464","gradientEnd":"#6C848D"`
- Position: Fixed width (667px), centered layout, height ~889px
- Screenshot: Peter Thiel article card with red-to-gray gradient and embedded podcast screenshot

**Visual Rules:**
- Layout: Centered fixed-width container (~660-700px), vertical stack (image top, content bottom), scroll-snap alignment
- Color: Dynamic two-tone linear gradients (135deg angle), white text overlay, dark semi-transparent image overlays
- Typography: Large bold Chinese headings (24-28px), smaller English subtitles (14px, opacity 0.8), readable body text (16px)
- Spacing: Internal padding 40-48px, large gap between media and content (32px)
- Radius / border / shadow: Border-radius 20-24px, box-shadow 0 25px 50px -12px rgba(0,0,0,0.4)
- Motion: `scroll-snap-align: center`, smooth opacity transitions on scroll, subtle parallax on gradient background

**Recreation Prompt:**
> Create a centered article card component with a dynamic gradient background transitioning from coral red (#E95464) to slate gray (#6C848D). The card should have a large border-radius (20px) and contain an embedded media preview at the top (screenshot or image with rounded top corners), followed by a content area with a large Chinese title "看看 Peter Thiel 在2015年都说了些什么" and an English subtitle. Use white text for high contrast. Implement CSS scroll-snap-align: center so the card locks into view when scrolling vertically. Add a subtle box-shadow to create floating depth against the page background.

**Structure Sketch:**
```html
<article class="snap-item" id="article-351">
  <div class="article-card" style="background: linear-gradient(135deg, #E95464, #6C848D);">
    <div class="card-media">
      <img src="screenshot.png" alt="Article preview" />
    </div>
    <div class="card-content">
      <h2>看看 Peter Thiel 在2015年都说了些什么</h2>
      <p class="subtitle">Peter Thiel's Views on Innovation and Globalization</p>
      <p class="excerpt">Peter Thiel在2015年的访谈中讨论了技术创新的停滞...</p>
    </div>
  </div>
</article>
```

### 2. Fixed Sidebar Navigation
**Purpose:**
Persistent table-of-contents navigation allowing quick article jumping while providing spatial orientation within the content library.

**Evidence:**
- DOM: `nav.sidebar-nav` positioned at `left: 53px`, `width: 372px`, `height: 599px`
- Content: Contains 30+ article titles in Chinese text
- Structure: Child `ul` element containing navigation links

**Visual Rules:**
- Layout: Fixed position left side, vertical flex column, ~370px width, independent scrolling
- Color: Semi-transparent background matching page, muted text (rgba(255,255,255,0.6)), active state in pure white
- Typography: 14-16px Chinese text, generous line-height (1.6), no text decoration, overflow ellipsis for long titles
- Spacing: 12px vertical padding between items, 24px left indentation
- Radius / border / shadow: No borders or backgrounds on individual items, clean typographic hierarchy only
- Motion: Smooth scroll-to-section on click, active item highlight transition (opacity or color shift)

**Recreation Prompt:**
> Create a fixed sidebar navigation positioned at the left side of the viewport (width: 370px, left: 50px) containing a vertical scrollable list of 30+ Chinese article titles. Use a muted text color (rgba(255,255,255,0.7)) that brightens to white on hover. Each link should have padding 12px vertical and trigger smooth scroll to corresponding article IDs. Hide the scrollbar (scrollbar-width: none) while maintaining scroll functionality. The active article link should have a distinct visual indicator (left border or background highlight).

**Structure Sketch:**
```html
<aside class="sidebar">
  <nav class="sidebar-nav">
    <ul>
      <li><a href="#article-351" class="active">看看 Peter Thiel 在2015年都说了些什么</a></li>
      <li><a href="#article-210">AI 领域的「数据网络效应」</a></li>
      <li><a href="#article-77">十年十亿美金 WordPress 插件帝国</a></li>
      <li><a href="#article-24">设计协议，而非产品</a></li>
    </ul>
  </nav>
</aside>
```

### 3. Project & Tool Icon Grid
**Purpose:**
Showcase affiliated projects and internal research tools in an app-launcher style grid, creating a directory of related resources.

**Evidence:**
- Screenshots: Footer section displaying "当前项目" and "研究工具" with icon grids
- Icons: 羔羊计划 (portrait photo), 历史文章 (blue compass), Give Me Five (illustration), Poche 小报 (orange P), 小阅读 (black quote), 时光鸡 (black "now"), X 捕手 (blue bird), 小红搜 (red square), 听歌签名 (green character)
- Layout: 4-5 column grid arrangement with centered icons and labels

**Visual Rules:**
- Layout: CSS Grid, 4-5 columns, gap 24-32px, centered alignment within white background section
- Color: White/light gray background, colorful app icons (circular or rounded-square with brand colors), dark charcoal text labels
- Typography: Small Chinese labels (12-14px) centered below icons, section headers in muted gray (14px, letter-spacing 0.05em)
- Spacing: Section padding 60px vertical, 40px between icon and label
- Radius / border / shadow: Icons have 12px border-radius or circular shape, subtle shadow on hover
- Motion: Hover scale transform (1.05x), opacity transition 0.2s ease

**Recreation Prompt:**
> Create a project showcase section with a clean white background. Include a section heading "当前项目" in muted gray uppercase text with letter-spacing. Display a grid of 4 project icons (60px size) with circular or rounded-square backgrounds containing images or icons, each followed by a centered Chinese label (e.g., "羔羊计划", "历史文章"). Add a second section "研究工具" with the same grid layout but different icon styles (solid black background with white icons, blue background, etc.). Implement hover effects: scale icon to 1.1x and add box-shadow on hover.

**Structure Sketch:**
```html
<section class="projects-section">
  <h3 class="section-title">当前项目</h3>
  <div class="icon-grid">
    <a href="#" class="project-item">
      <div class="icon-wrap">
        <img src="project-avatar.jpg" alt="羔羊计划" />
      </div>
      <span>羔羊计划</span>
    </a>
    <a href="#" class="project-item">
      <div class="icon-wrap" style="background: #1e3a8a;">
        <svg><!-- compass icon --></svg>
      </div>
      <span>历史文章</span>
    </a>
  </div>
  
  <h3 class="section-title">研究工具</h3>
  <div class="icon-grid">
    <!-- Tool items with different color schemes -->
  </div>
</section>
```

### 4. Scroll-Snap Content Container
**Purpose:**
Main viewport area that presents articles as full-height slides with mandatory snap points, creating a slide-deck reading experience.

**Evidence:**
- DOM: `main.scroll-container` containing sequential `article.snap-item` elements
- Positions: Articles positioned at top: 0, 929, 1857, 2786 (suggesting full-height increments)
- Class names: `snap-item` on articles, `scroll-container` on main
- Behavior: Each article takes approximately 85-90vh height with spacing between

**Visual Rules:**
- Layout: Single column, margin-left to accommodate fixed sidebar (~400px), height 100vh, overflow-y scroll
- Color: Inherits page background (dark gradients visible between cards)
- Spacing: 40px gap between article cards (margin-bottom), cards centered horizontally within container
- Radius / border / shadow: No borders on container, cards have individual shadows
- Motion: `scroll-snap-type: y mandatory`, `scroll-behavior: smooth`, each article `scroll-snap-align: center`

**Recreation Prompt:**
> Create a main content container that occupies the right portion of the viewport (margin-left: 400px to clear the sidebar) with height: 100vh and overflow-y: scroll. Implement CSS scroll-snap-type: y mandatory so content snaps to discrete article cards. Each child article should have scroll-snap-align: center, min-height: 85vh, and margin-bottom: 40px. Hide the scrollbar visually while preserving scroll functionality. The container should allow natural scrolling but lock each article into the center of the viewport when resting.

**Structure Sketch:**
```html
<main class="scroll-container">
  <article class="snap-item" id="article-351">
    <!-- Gradient card content -->
  </article>
  <article class="snap-item" id="article-210">
    <!-- Next gradient card -->
  </article>
  <article class="snap-item" id="article-77">
    <!-- Third gradient card -->
  </article>
</main>
```

## Engineering CSS Evidence

Compressed from live DOM computed styles. This section keeps high-frequency tokens and intent, not raw CSS dumps.

### Compressed Design Tokens

**Mode:** dark

#### Color Roles
- **color.text.primary:** #ffffff (38)
- **color.text.secondary:** #ffffff (19)
- **color.surface.base:** #181a1c (1)
- **color.accent:** #ffffff (28)
- **color.border.default:** #ffffff (38)
- **color.focus.ring:** #ffffff (38)

#### Typography Roles
- **font.family.primary:** Inter (256)
- **font.family.secondary:** __Inter_04b02f (14)
- **font.size.display:** 32px (5)
- **font.size.body:** 16px (11)
- **font.size.label:** 14.8px (8)
- **ratio:** display is 2x body

#### Spacing Rhythm
- **base unit:** 4px
- **space.1:** 8px (776)
- **space.2:** 16px (18)
- **space.3:** 12px (8)
- **space.4:** 24px (2)
- **space.5:** 40px (2)

#### Radius Roles
- Not enough evidence

#### Shadow Intent
- **level:** none
- **usage:** 0
- **note:** flat surfaces dominate

#### Motion Intent
- **level:** moderate
- **range:** 350-350ms
- **common durations:** 350ms (256)
- **easing style:** cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) (256)

### Distinctive Implementation Signals

- Flat surfaces are preferred over decorative depth.
- Motion is moderate, centered around 350-350ms.
- Type hierarchy is ratio-driven: display is 2x body.

### Extraction Diagnostics

- Sampled 280 visible elements from 1099 total DOM elements.
- Confidence: high.
- No extraction warnings.

## Core Principles
1. Firmly Refuse (Negative Constraints):
- Prohibit using purple/blue gradients on white backgrounds
- Prohibit using common fonts (Inter, Roboto, Arial, system-ui)
- Prohibit using predictable hero-CTA-feature-review templates
- Prohibit using common geometric shapes or abstract spots
- Prohibit using visual effects that look like stock images or clichés
## Performance Optimization
- Ensure pages load quickly, avoid unnecessary large resources
- Use modern image formats (WebP) and appropriate compression
- Implement lazy loading techniques for long page content
**Important Note**: The implementation complexity should match the aesthetic vision. Maximalist designs require complex code as well as a lot of animations and effects. Minimalist or refined designs require restraint, precision, and attention to spacing, typography, and subtle details. Elegance comes from a perfect interpretation of the vision.