[PebblesHD]

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]

Thanks! This is my favorite someone made: 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/p...