https://nateparrott.com/42pages/index.html

1<!DOCTYPE html>
2<html>
3<head>
4	<title>42pages</title>
5	<meta name="viewport" content="width=device-width, initial-scale=1"/>
6	<style>
7	body {
8		background-color: #111;
9		font-family: "Helvetica Neue", "Helvetica", sans-serif;
10		margin: 0;
11		color: white;
12	}
13    a {
14        color: white;
15    }
16	.blue {
17		background-color: #234EF3;
18		color: white;
19		padding: 2em;
20		margin-block-start: 0;
21	}
22	article {
23		max-width: 740px;
24		margin: auto;
25		font-size: large;
26		line-height: 1.5;
27		padding-left: 2em;
28		padding-right: 2em;
29	}
30	video, img {
31		width: 100%;
32	}
33    .hero {
34        width: 100%;
35        max-height: 80vh;
36    }
37	@media screen and (min-width: 700px) {
38		body {
39			font-size: 20px;
40		}
41		h1 {
42			font-size: 3em;
43		}
44	}
45    h1 {
46        margin-bottom: 0;
47    }
48	section {
49		margin-block-start: 3em;
50		margin-block-end: 3em;
51	}
52	.images {
53		display: flex;
54		width: 100%;
55		gap: 1em;
56	}
57	.images * {
58		width: 0;
59		flex-basis: 0;
60		flex-grow: 1;
61	}
62	figcaption {
63		margin: 1em;
64		opacity: 0.5;
65		text-align: center;
66	}
67	</style>
68</head>
69<body>
70    <video class="hero" src="Generating a Clickable Button.mp4" controls loop></video>
71	<article>
72        <h1>42pages</h1>
73		<p>
74            A personal experiment in a new way to make software. It feels like a design tool: mock something up, then the LLM infers the functionality, turning it into real code. I hosted it online for a while, but it's no longer up.
75		</p>
76
77		<p>
78			Your designs are converted to HTML and given to the LLM. We say "please make this work without changing the UI!" It's pretty good at inferring functionality from context — no code or prompts needed.
79		</p>
80
81		<section>
82			<video src="todos.mp4" controls loop></video>
83			<figcaption>Building a todo list with pixel-perfect results</figcaption>
84		</section>
85
86        <p>
87            You don't need to design if you don't want to. Just ask the computer to code something up. It's like Claude artifacts, but the canvas makes it easier to iterate. You can even chat.
88        </p>
89
90		<p>
91			One cool thing about 42pages is that every design is just HTML. This makes things complicated (perf, layout) but enables some cool things, like infinite effects.
92		</p>
93
94		<section>
95			<video src="vfx.mp4" controls loop></video>
96			<figcaption>Type the effect you want — if it's possible with CSS, the bot creates your very own effects panel</figcaption>
97		</section>
98
99		<p>
100			HTML is also nice because you can trivially export your design to the web. Still missing some basic web-publishing features, but pretty powerful overall.
101		</p>
102
103		<section>
104			<video src="Chatbot.mp4" controls loop></video>
105			<figcaption>A more complicated example: a chatbot with a database and two pages</figcaption>
106		</section>
107
108		<p>
109			A little experiment in UI: magic wand. Can you tell the computer to modify part of a complicated document by "pointing" at it?
110		</p>
111
112		<section>
113			<video src="magic wand.mp4" controls loop></video>
114			<figcaption>Magic wand for targeted modifications</figcaption>
115		</section>
116
117		<p>
118			Had to reimplement a lot of Figma logic: object hierarchy, undo/redo, copy/paste, property panels, autolayout, click and drag logic, grouping and ungrouping, group resize, reparenting, a scalable, compact design system with floating panels, various input types, containers, panels, etc.
119		</p>
120	</article>
121</body>
122</html>