# web-design-base-v1
A structured skill for language models that turns any website request into a subject-specific, accessible, production-ready HTML page.
Instead of generic templates, the model is forced to:
- name a concrete visual idea taken from the subject
- build a three-colour palette with computed contrast ratios
- choose two typefaces justified by the content
- plan real content before writing a single line of code
- deliver a complete page that works without JavaScript and under reduced-motion preferences
## What it produces
- Landing pages, portfolios, shops, editorial sites, documentation, dashboards and tools
- Plain HTML + CSS + minimal JS (one optional motion script)
- Optional Tailwind or React when explicitly requested
- Strong accessibility baseline (WCAG 2.1 AA+)
- No placeholder text, no dead links, no animated hero headlines
## Design gates (non-negotiable)
1. Hero headline visible on first paint, never animated or clipped
2. Body text ≥ 7:1 contrast, muted text ≥ 4.5:1
3. Maximum three hues (background, ink, one accent) – no gradients or glow
4. Every section has real substance
5. The resulting design must not be transferable to a different subject unchanged
## Modes
| Mode | Use case |
|-------------|-----------------------------------|
| Showcase | Landing, portfolio, shop, editorial|
| Product UI | Dashboards, admin tools, forms |
| Docs | Documentation, model cards |
| Audit | Review / improve an existing page |
| Iterate | Small targeted changes |
## How to use with local models
1. Place `SKILL.md` in your model’s skill / system-prompt directory.
2. (Optional) Point the model at the skill when the user asks for a website, redesign or UI.
3. The model is expected to write a short plan first, then the complete HTML file.
Works best with models that follow long, structured instructions well (≥ 8k–16k context recommended).
## Privacy note
The skill suggests Google Fonts for convenience. For any real project, self-host the font files (woff2 + `@font-face`) to avoid transmitting visitor IPs.
## License
Licensed under the [Apache License 2.0](LICENSE).
## Credits
Originally developed as an internal design system for high-quality, subject-driven web output. Released for local and open-weight models.
