Code Detail

Prompt

2025年3月25日 15:38

Designed in an extreme version of minimalism, the concept of “less is more” is taken to the extreme.White space must occupy at least 90% of the design space, creating a sense of extreme emptiness.Colors should be limited to black, white and grey, with the possibility of adding an extremely subtle accent color.Typography should be minimalist, with each element positioned to the pixel level, using sans-serif fonts with very fine font weights, and with very small font sizes that must remain readable.Decorative elements should be eliminated completely, leaving only very fine separators or geometric points.Images, if they must be used at all, should be reduced to the barest of lines or outlines.The overall design should present an almost Zen-like purity and restraint, giving each element absolute necessity and purpose, with references to John Pawson's architectural design and Kenya Hara's graphic design work.

Generated Result

import React from 'react';

const App = () => {
  return (
    <div className="min-h-screen bg-white flex flex-col items-center justify-center p-8">
      <header className="w-full max-w-4xl text-center mb-16">
        <h1 className="text-2xl font-thin text-gray-900">Minimalist Design</h1>
        <p className="text-xs text-gray-500 mt-2">Inspired by John Pawson and Kenya Hara</p>
      </header>

      <main className="w-full max-w-4xl space-y-16">
        <section className="text-center">
          <h2 className="text-xl font-thin text-gray-900">Section One</h2>
          <p className="text-xs text-gray-500 mt-2">This is the first section of the minimalist design.</p>
        </section>

        <section className="text-center">
          <h2 className="text-xl font-thin text-gray-900">Section Two</h2>
          <p className="text-xs text-gray-500 mt-2">This is the second section of the minimalist design.</p>
        </section>

        <section className="text-center">
          <h2 className="text-xl font-thin text-gray-900">Section Three</h2>
          <p className="text-xs text-gray-500 mt-2">This is the third section of the minimalist design.</p>
        </section>

        <section className="text-center">
          <h2 className="text-xl font-thin text-gray-900">Section Four</h2>
          <p className="text-xs text-gray-500 mt-2">This is the fourth section of the minimalist design.</p>
        </section>

        <section className="text-center">
          <h2 className="text-xl font-thin text-gray-900">Section Five</h2>
          <p className="text-xs text-gray-500 mt-2">This is the fifth section of the minimalist design.</p>
        </section>

        <section className="text-center">
          <h2 className="text-xl font-thin text-gray-900">Section Six</h2>
          <p className="text-xs text-gray-500 mt-2">This is the sixth section of the minimalist design.</p>
        </section>

        <section className="text-center">
          <h2 className="text-xl font-thin text-gray-900">Section Seven</h2>
          <p className="text-xs text-gray-500 mt-2">This is the seventh section of the minimalist design.</p>
        </section>
      </main>

      <footer className="w-full max-w-4xl text-center mt-16">
        <p className="text-xs text-gray-500">© 2025 Minimalist Design. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;

Open Sandbox