Design Skill

Design Logic

1. Product Dissection

• Materiality: Is it a heavy industrial tool, a soft wellness app, a high-speed trading desk, a premium brand, a consumer product, or something else entirely?
• Primary interaction: Reading, data entry, visual exploration, comparison, workflow control, or browsing?
• Commit to one strong visual hook such as oversized typography, a visible grid, layered glass, a framed product surface, an editorial split, a proof rail, or a strong typographic contrast.

2. Design Dimensions

• PRECISION vs. EXPRESSION

  : database tools and operational products need precision, grids, mono support text, and tighter spacing. Portfolios and premium brands need expression, whitespace, serif-led contrast, and more fluid pacing.

• DENSITY vs. AIR

  : dashboards and workflow-heavy products need density. Landing pages and high-end showcases need air, larger margins, and clearer focal jumps.

• STRUCTURE vs. FLOW

  : professional tools celebrate structure with visible borders, explicit framing, and stronger geometry. Creative products celebrate flow with softer transitions, more asymmetry, and less rigid segmentation.

3. Typographic Hierarchy

• Use extreme scale when the page needs impact. Do not stay trapped in small utility jumps.
• Use micro-detail intentionally for labels, metadata, or support text.
• Pair fonts with clear roles:

  Inter

  for utility,

  Playfair Display

  for elegance,

  JetBrains Mono

  for precision and data.
• Create hierarchy through contrast, not through tiny changes between heading sizes.

4. Color And Materiality

• Avoid generic palettes. Reach for neutrals like zinc, slate, and stone.
• Use opacity, blur, layering, borders, and contrast to create depth instead of default shadow spam.
• Use borders as structural elements.
• Let surfaces feel designed, not auto-generated.

Anti-Patterns

1. No generic purple or blue gradients.
2. No default box-shadow on every card.
3. No identical padding and margins everywhere.
4. No endless "modern cards on gray background" as the whole page.
5. No generic "Welcome to [App Name]" hero copy.
6. No repetitive section shells with different content inside them.
7. No mobile layout that is just a shrunken desktop stack.

Variation And Section Range

• centered thesis sections
• editorial split sections
• bento grids
• proof rails
• framed product stages
• sticky story sections
• pinned demo sections
• horizontal rails
• comparison bands
• quiet reset sections
• editorial quote sections

External Content And Scraping

1. Replicate the exact sections, fonts, layout, and DOM structure based on the provided material.
2. Do not redesign the page unless the user explicitly asks for redesign.
3. Make only surgical edits when the user asks for copy or content changes.
4. Extract spacing, typography, and layout logic from the screenshot and source instead of substituting a generic template.

Imagery

• generated product mock
• abstract brand composition
• diagram system
• 3D object scene
• editorial texture
• no-image typography-only

Animation

• staggered entries for lists or modular groups
• layout-aware state transitions
• subtle parallax or scroll-triggered reveals
• tactile hover and press behavior
• progress-linked motion in sticky or pinned sections

Scale And Complexity

1. Build enough structure for the product to feel real and complete.
2. Avoid sparse pages with only a hero and a few weak cards.
3. Sweat the details so the result feels like an award-level product surface, not a quick mock.

Final Rule

• what the product feels like
• what the user is mainly doing on the page
• what section sequence makes sense
• what typography system fits
• what imagery mode fits
• what motion level fits