4 ms·

I had a play with this and you’re right, it does have a style, but first: this is awesome, and good fun, well done! I think the system prompt or training data

I had a play with this and you’re right, it does have a style, but first: this is awesome, and good fun, well done! I think the system prompt or training data probably focuses on marketing websites, it didnt manage to make a settings page or a canvas game, but did make a site telling me how to make a canvas game :) How does it interpolate the path to make the prompt? (Havent checked the code yet…)

jasonthorsness 1y ago
Thanks! This is my favorite someone made: https://ginprov.com/a-dating-site-for-gnomes/ https://ginprov.com/a-dating-site-for-gnomes/ Interpolation happens in two steps. First, there's a prompt for an outline (below). Then, a prompt with the same construction rules but says like "given the outline..." and puts the outline into the context. You are a professional web designer. Create a concise outline in markdown format of a site for the topic "{{slug}}". Construction rules: - Do **not** reference any external resources (fonts, CDNs, embeds, etc.). - No JavaScript or SVG. - All images must be JPG. - All <img> tags must have a width and height. - In CSS any image use must include object-fit: cover. - All links must be relative to the root and be a long, descriptive slug of the content (like company-owner-with-hat.jpg or goat-facts-continued.html). - The site must display well on both desktop and mobile devices. - Never use position: sticky; The outline should include the following sections: - **Site Name And Paragraph Summary** - a short description of the site and its purpose - **Style guide** – typography (built-in font classes only), spacing, imagery tone, theme - **Color scheme** – primary, secondary, accent, neutrals (name + hex) - **Layout** – grid/flex description, breakpoints, reusable components - **Site map** – unordered list of important pages with slug filenames - **Key features** – bullet list - **Reusable CSS/HTML snippet** – fenced code blocks showing the skeleton for nav, hero, article, and footer Write clearly enough that different teammates could each build a page and the finished site will remain cohesive and on-brand.Make sure you capture the essence of the topic in the design, be creative! https://github.com/jasonthorsness/ginprov/blob/main/server/prompter.go#L39 https://github.com/jasonthorsness/ginprov/blob/main/server/p...

jasonthorsness 1y ago

Thanks! This is my favorite someone made: https://ginprov.com/a-dating-site-for-gnomes/ https://ginprov.com/a-dating-site-for-gnomes/ Interpolation happens in two steps. First, there's a prompt for an outline (below). Then, a prompt with the same construction rules but says like "given the outline..." and puts the outline into the context. You are a professional web designer. Create a concise outline in markdown format of a site for the topic "{{slug}}". Construction rules: - Do **not** reference any external resources (fonts, CDNs, embeds, etc.). - No JavaScript or SVG. - All images must be JPG. - All <img> tags must have a width and height. - In CSS any image use must include object-fit: cover. - All links must be relative to the root and be a long, descriptive slug of the content (like company-owner-with-hat.jpg or goat-facts-continued.html). - The site must display well on both desktop and mobile devices. - Never use position: sticky; The outline should include the following sections: - **Site Name And Paragraph Summary** - a short description of the site and its purpose - **Style guide** – typography (built-in font classes only), spacing, imagery tone, theme - **Color scheme** – primary, secondary, accent, neutrals (name + hex) - **Layout** – grid/flex description, breakpoints, reusable components - **Site map** – unordered list of important pages with slug filenames - **Key features** – bullet list - **Reusable CSS/HTML snippet** – fenced code blocks showing the skeleton for nav, hero, article, and footer Write clearly enough that different teammates could each build a page and the finished site will remain cohesive and on-brand.Make sure you capture the essence of the topic in the design, be creative! https://github.com/jasonthorsness/ginprov/blob/main/server/prompter.go#L39 https://github.com/jasonthorsness/ginprov/blob/main/server/p...