Knowledge native to the web medium that web-pack-curator follows when distilling web styles into packs.
How the web differs from PPT
- Fluid viewport. Mobile to desktop. Specify content max width, breakpoints, and
clamp()typography. - Component-level composition. Header / hero / section / card / form / footer. Not slides but a scroll flow.
- Interaction is part of the style. The character of hover, scroll, and transition motion (none/restrained/snappy/playful) is the identity.
- Accessibility. Body text contrast at WCAG AA (4.5:1) or higher. Even dark/low-contrast packs preserve text legibility.
Component hierarchy
A pack's prompt.md contains instructions for at least these components:
- Header/nav — whether fixed, logo/menu placement, background treatment.
- Hero — heading typography scale, layout (centered/left/split), background/image treatment.
- Section/content block — vertical rhythm between sections, content width.
- Card — border, corners, shadow, hover.
- Footer — density, whether colors are inverted.
Translating into verifiable instructions
Because diversity-qa performs visual comparison, vague terms do not pass. Write values that are directly implementable in CSS:
| Vague (forbidden) | Verifiable (use) |
|---|---|
| "Clean layout" | "Content max width 1100px, section spacing 96px, 12-column grid" |
| "Readable body text" | "Body 1618px, line-height 1.7, measure 6575자" |
| "Smooth motion" | "Transition 200ms ease-out, translateY(-2px) on hover" |
| "Card design" | "radius 0, border 1px solid text color, no shadow, background inverts on hover" |
| "Accent color" | "1 accent color, only for CTA/links, area 5% or less" |
Exaggerate the pack identity
Diversity is the goal. Each pack pushes its own style to the limit:
- Swiss minimal — hairline borders, achromatic colors, strict grid, almost no motion.
- Neobrutal — 3px+ hard borders, offset hard shadows, primary-color blocks, snappy transitions.
- Glassmorphism —
backdrop-filter: blur, translucent surfaces, light gradient background. If it is not distinguishable at a glance from the baseline (the default AI aesthetic of purple gradients, rounded cards, and uniform shadows), it is a failure.
"Do not" cues (blocking Claude's default regression)
What Claude commonly regresses to by default on the web — specified in prompt.md under "Do not" to match the pack's character:
- Purple/indigo gradients / uniform rounded cards / the same soft shadow on every card.
- Meaningless emoji / unconditional repetition of a centered hero / gradient text.
- Unidentifiable illustrations / blob shapes / excessive overuse of glass.
- Repeating the same 3-card grid for every section.
Feasibility
sample-renderer renders actual HTML/CSS (or Tailwind) from prompt.md alone. Instructions must be translatable into standard CSS properties — do not include unachievable effects or dependence on external paid assets. Specify fonts as public web fonts such as Google Fonts or system fonts.