Skip to content

Software Oplossing Artifacts

Vuistregels en één complete prompt voor het maken van Claude Artifacts (rapporten, briefings, plannen, memo's) in Flooris-huisstijl — zodat een artifact makkelijk te delen is (voor lezers) of makkelijk te bewerken blijft (voor jezelf/het team).

HTML of Markdown?

Vuistregel: Lezen = HTML. Bewerken = Markdown.

Doel Formaat
Rapporten, briefings, samenvattingen, plannen, retro's, status updates, memo's, decks HTML
Specs, configs, READMEs, projectnotities die blijven muteren Markdown

Twijfel je? Stel de vraag: "Is dit voor iemand om te lezen, of om te bewerken?"

  • Lezen → een self-contained HTML-bestand met inline CSS. Ziet er verzorgd uit, opent direct in de browser, is makkelijk te delen (bv. als Artifact-link) en te printen.
  • Bewerken → gewoon Markdown blijft de brontaal. Geen opmaaklaag die in de weg zit bij latere wijzigingen.

Complete prompt

Gebruik onderstaande prompt in zijn geheel (of een variant ervan) wanneer je Claude vraagt om een rapport, plan of andere leesbare output te genereren als Artifact. Deze prompt bevat het output-formaat, de huisstijl (Open Sans, zwarte tekst) én het Flooris-logo in één geheel.

## Output format
For any artifact intended for human consumption (reports, briefings, summaries, plans, retros, status updates, memos, decks):
- Default to a single self-contained HTML file with inline CSS
- Use semantic HTML (h1, h2, sections) and embedded styles
- Visual style: clean typography, generous whitespace, restrained color use
- Always include a print-friendly stylesheet (@media print)
- Light Mode is the default.
- File extension .html, save in artifacts/ alongside the markdown source
For reference material that will only be edited (specs, configs, READMEs, project notes): keep markdown as the primary format.
When unsure: ask "is this for someone to read or someone to edit?" Read = HTML. Edit = markdown.

## Huisstijl
- Font: Open Sans, loaded via Google Fonts (the only external host allowed under the artifact CSP):
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
  body { font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
- Text color: black (#000)
- Logo: include the Flooris logo below. It is drawn in white (fill: rgb(255, 255, 255)), so place it on a dark surface (e.g. a header bar), or override the fill to a dark color when used on a light background.

Flooris logo (SVG):
<svg class="hidden md:block w-32 h-auto" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 195.87 49.26"><path d="M14.21 0a18.07 18.07 0 0 1 4.34.44 20.84 20.84 0 0 1 2.9.93l-1.63 7.3A9.46 9.46 0 0 0 17.61 8a16.87 16.87 0 0 0-2.46-.18 7.63 7.63 0 0 0-2.84.46 4.2 4.2 0 0 0-1.8 1.25 5 5 0 0 0-.94 2A10 10 0 0 0 9.29 14v1.57h11.47v7.72H9.29v25.08H0V13.84q0-6.36 3.59-10.1T14.21 0Zm25.06 49a23.91 23.91 0 0 1-6.57-.87 9.7 9.7 0 0 1-4-2.28 7.59 7.59 0 0 1-2-3.55 19.33 19.33 0 0 1-.52-4.73V1.5L35.47 0v35.72a11.24 11.24 0 0 0 .19 2.28 3.9 3.9 0 0 0 .71 1.69 4 4 0 0 0 1.56 1.12 8.49 8.49 0 0 0 2.68.56ZM75 31.92A21.27 21.27 0 0 1 73.87 39a15.59 15.59 0 0 1-3.24 5.49A14.69 14.69 0 0 1 65.55 48a18.07 18.07 0 0 1-13.22 0 14.6 14.6 0 0 1-5.08-3.52A16.26 16.26 0 0 1 43.93 39a20.28 20.28 0 0 1-1.19-7.07 19.66 19.66 0 0 1 1.22-7 15.9 15.9 0 0 1 3.37-5.42A14.82 14.82 0 0 1 52.44 16a17.4 17.4 0 0 1 13 0 14.7 14.7 0 0 1 5.08 3.49 15.69 15.69 0 0 1 3.31 5.42A20.13 20.13 0 0 1 75 31.92Zm-9.47 0a11.69 11.69 0 0 0-1.72-6.77 5.6 5.6 0 0 0-4.87-2.46A5.7 5.7 0 0 0 54 25.15a11.61 11.61 0 0 0-1.74 6.77A11.85 11.85 0 0 0 54 38.74a5.64 5.64 0 0 0 4.93 2.53 5.56 5.56 0 0 0 4.89-2.53 12 12 0 0 0 1.7-6.82Zm45.74 0a21.27 21.27 0 0 1-1.12 7.08 15.54 15.54 0 0 1-3.22 5.49 14.69 14.69 0 0 1-5.08 3.51 18.1 18.1 0 0 1-13.22 0 14.6 14.6 0 0 1-5.08-3.52 16.21 16.21 0 0 1-3.3-5.48 20.28 20.28 0 0 1-1.19-7.07 19.66 19.66 0 0 1 1.22-7 16 16 0 0 1 3.36-5.42A15.09 15.09 0 0 1 88.76 16a17.4 17.4 0 0 1 13 0 14.7 14.7 0 0 1 5.08 3.49 15.93 15.93 0 0 1 3.31 5.42 19.87 19.87 0 0 1 1.12 7.01Zm-9.47 0a11.69 11.69 0 0 0-1.72-6.77 5.58 5.58 0 0 0-4.89-2.46 5.7 5.7 0 0 0-4.93 2.46 11.61 11.61 0 0 0-1.74 6.77 11.85 11.85 0 0 0 1.74 6.82 5.64 5.64 0 0 0 4.93 2.53 5.56 5.56 0 0 0 4.89-2.53 12 12 0 0 0 1.72-6.82Zm34.84-8.11c-.83-.2-1.81-.42-2.93-.65A17.3 17.3 0 0 0 128 23a14.2 14.2 0 0 0-1.84.34v25.03h-9.24v-31a54.74 54.74 0 0 1 5.89-1.65 34.44 34.44 0 0 1 7.57-.78 13.61 13.61 0 0 1 1.81.09c.7.09 1.41.15 2.12.25s1.41.23 2.12.38a9.4 9.4 0 0 1 1.81.53Zm15.15-17.7a5.09 5.09 0 0 1-1.65 4 5.91 5.91 0 0 1-7.8 0 5.09 5.09 0 0 1-1.65-4 5.09 5.09 0 0 1 1.65-4 5.91 5.91 0 0 1 7.8 0 5.09 5.09 0 0 1 1.65 4Zm-.86 42.26h-9.3v-32.8h9.3Zm16.57-6.67a9.43 9.43 0 0 0 3.61-.49 1.94 1.94 0 0 0 1.06-1.94 2.37 2.37 0 0 0-1.37-2 26.67 26.67 0 0 0-4.18-1.9 40.42 40.42 0 0 1-4-1.69 11.51 11.51 0 0 1-3-2.08 8.47 8.47 0 0 1-1.93-2.9 10.57 10.57 0 0 1-.69-4.05 8.76 8.76 0 0 1 3.43-7.3q3.44-2.67 9.41-2.68a29.84 29.84 0 0 1 5.74.53 26.91 26.91 0 0 1 4.3 1.2l-1.62 7.23a32.85 32.85 0 0 0-3.52-1 19.11 19.11 0 0 0-4.27-.44c-2.91 0-4.37.81-4.36 2.43a2.46 2.46 0 0 0 .18 1 2.17 2.17 0 0 0 .75.84 10.11 10.11 0 0 0 1.53.88 21.62 21.62 0 0 0 2.46 1 36.63 36.63 0 0 1 5 2.23 12 12 0 0 1 3.15 2.37 7.35 7.35 0 0 1 1.7 2.87 12.56 12.56 0 0 1 .47 3.61 8.32 8.32 0 0 1-3.65 7.34q-3.65 2.49-10.32 2.49a28.79 28.79 0 0 1-11.26-2l1.56-7.54a30.53 30.53 0 0 0 4.86 1.46 23.14 23.14 0 0 0 4.96.53Zm28.36 1.75a5.2 5.2 0 0 1-1.78 4.27 6.25 6.25 0 0 1-8 0 5.26 5.26 0 0 1-1.78-4.27 5.26 5.26 0 0 1 1.78-4.27 6.23 6.23 0 0 1 8 0 5.2 5.2 0 0 1 1.78 4.27Z" style="fill: rgb(255, 255, 255);"></path></svg>

Markdown-bron bewaren

Bewaar bij voorkeur ook een .md-bronbestand naast de .html in artifacts/ — dat blijft de makkelijk te bewerken versie, terwijl de .html de deelbare/leesbare versie is.

Google Fonts als enige uitzondering

Claude Artifacts draaien met een strikte Content Security Policy: externe scripts, stylesheets, afbeeldingen en fetch/XHR-verzoeken worden geblokkeerd. fonts.googleapis.com (en de bijbehorende fonts.gstatic.com) is de enige toegestane uitzondering. Al het andere — logo, overige CSS, JS — moet inline of als data:-URI in het bestand zelf staan.

Checklist voor een nieuw artifact

  • Bepaald: lezen (HTML) of bewerken (Markdown)?
  • Eén self-contained .html-bestand, inline CSS, geen externe dependencies behalve Google Fonts
  • Open Sans ingeladen, tekstkleur zwart
  • Logo verwerkt (op donkere achtergrond, of fill aangepast)
  • @media print-stylesheet aanwezig
  • Light mode als standaard
  • Bestand opgeslagen als .html in artifacts/, eventueel met bijbehorend .md-bronbestand