Skip to content

JSFiddle Page Layout

Create a polished sample page layout for the supplied domain. The result must run by pasting the markup and styles into the JSFiddle HTML and CSS panes.

Supplied Inputs

  • domain: {{domain}}
  • layout_brief: {{layout_brief}}

Inputs

  1. domain: the product, service, organization, or subject represented by the page, including its intended audience when known
  2. layout_brief: optional page type, required sections, content priorities, visual direction, or constraints

Workflow

  1. Infer the page's primary purpose, audience, content hierarchy, and most important user action from the inputs.
  2. If the domain does not provide enough information to choose a useful page type or primary action, ask one concise clarification question before generating code.
  3. Choose a visual direction and information density appropriate to the domain. Build the usable page itself, not a marketing explanation of the page.
  4. Write semantic HTML with realistic domain-specific sample content. Do not use placeholder text such as lorem ipsum.
  5. Build the layout with modern CSS, using CSS Grid for two-dimensional page structure and Flexbox for one-dimensional alignment where each fits naturally.
  6. Make the page responsive at narrow mobile and desktop widths without horizontal overflow, overlapping content, or clipped text.
  7. Keep the example self-contained. Use no JavaScript, build tools, external stylesheets, images, or icon libraries unless the layout brief explicitly requires them.
  8. Include accessible landmarks, heading order, labels, focus styles, color contrast, and reduced-motion handling when animation is present.
  9. Use CSS custom properties for the color, typography, spacing, border, and shadow system. Avoid generic framework styling and tailor the visual language to the domain.

Design References

Use these references as comparative guidance, not as templates to copy. Select principles that fit the domain and layout brief, and do not reproduce a vendor's visual language unless the user requests it.

  1. Material Design 3 foundations for current approaches to layout, interaction states, design tokens, and adaptable UI systems.
  2. Apple Human Interface Guidelines for contemporary principles covering hierarchy, typography, controls, and platform-aware interaction.
  3. web.dev responsive web design basics for content-led breakpoints, flexible layouts, and input-aware responsiveness.
  4. Web Content Accessibility Guidelines (WCAG) 2.2 as the accessibility baseline for structure, contrast, focus, reflow, and target sizing.

Output Contract

Return exactly two fenced code blocks in this order:

  1. An html block containing only the content for JSFiddle's HTML pane.
  2. A css block containing only the content for JSFiddle's CSS pane.

Do not include setup instructions, design commentary, JavaScript, or prose outside the two code blocks.

Quality Rules

  1. Prefer semantic elements such as header, nav, main, section, article, aside, and footer when they match the content.
  2. Reserve large display type for a true hero or primary page title; keep operational interfaces compact and easy to scan.
  3. Use cards only for repeated items or genuinely framed tools. Do not place cards inside cards.
  4. Use stable responsive constraints for grids, controls, media, and navigation so dynamic content does not shift the layout unexpectedly.
  5. Avoid decorative gradients, floating color blobs, excessive rounding, and one-note palettes unless they are explicitly appropriate to the domain.
  6. Ensure controls look and behave like their purpose, with visible hover and keyboard-focus states.
  7. Keep all visible copy relevant to the fictional domain rather than describing the mockup or its implementation.