{"version":"2.1.267","anchor":"new-responsive-design-system-guidance-for-artifact-page-gene","canonical_anchor":"new-responsive-design-system-guidance-for-artifact-page-gene","heading":"New responsive-design system guidance for Artifact page generation","tier":"notice","area":"Artifacts","scope":null,"heads_up":null,"url":"https:\/\/changelogs.core-directive.com\/v\/2.1.267\/e\/new-responsive-design-system-guidance-for-artifact-page-gene","release_url":"https:\/\/changelogs.core-directive.com\/v\/2.1.267","markdown":"### New responsive-design system guidance for Artifact page generation\n\nArtifact generation now gets more detailed instructions for making responsive web pages\n\n**What**\n\nWhen Claude Code builds web-page Artifacts, the prompt guiding the model now includes more detailed responsive-design instructions:\n\n- Keep the page usable at widths as small as roughly 400px\n\n- Keep 16px side margins using `padding-block` (never a padding shorthand that zeroes it out)\n\n- Use relative units instead of fixed pixel sizes\n\n- Let grids wrap or stack on narrow screens\n\n- Cap the width of images and elements with a fixed aspect ratio\n\n- Confine any horizontal scrolling to tables, diagrams, or code blocks, each in its own scrolling container, so the page body itself never scrolls sideways\n\n**Why**\n\nThis should produce Artifacts that look right and stay usable on narrow screens and mobile-sized viewports, instead of overflowing or requiring awkward horizontal scrolling.\n\n- Area: Artifacts\n- Tier: You'll notice\n- Useful: 2\/5\n- Signal: 1\/5"}