Skip to main content
Use these patterns to get intentional, reusable UI instead of generic layouts.

​
Why it works

  • Component-first prompts give you control and reuse.
  • Real content sets spacing and hierarchy correctly.
  • Style direction up front prevents late-stage redesign churn.

​
Core patterns

  • Build by component: hero, nav, feature grid, CTA, testimonials, pricing, footer.
  • Provide real-ish copy and data, not lorem ipsum.
  • Set aesthetic: mood words, spacing, shapes, typography, motion.
  • Sequence flows: map what a user sees and does across screens.

​
Prompt templates

  • Component-first: “Design a <component> for <goal>. Include content: <headline/subcopy/CTA>. Style: <mood/colors/shape/spacing>. Return as structured markup.”
  • Style direction: “Theme is <adjectives>. Colors: <palette>. Shapes: <rounded/sharp>. Typography: <font vibe>. Motion: <animations>. Apply consistently.”
  • Real content: “Use this copy: <real text>. Avoid placeholders. Adjust layout to fit.”
  • Journey mapping: “Map the flow for <task>. Screens/sections, key actions, trust-builders, error states. Suggest components per step.”

​
Bad vs. good (design)

  • Bad: “Make a landing page.”
  • Good: “Create a landing page for <product>. Components: hero, proof bar, feature grid (3 cards), CTA, FAQ. Style: bold, high-contrast, geometric. Copy: <real headlines>. Keep CTAs consistent.”

​
Validation asks

  • Check accessibility: contrast, focus states, keyboard paths.
  • Consistency: spacing scale, typography, and CTA styles reused.
  • Responsiveness: ask for mobile/desktop adjustments and layout swaps.