spirewise 1.6.2 → 1.7.0

package/skills/website-design-skills/README.md

@@ -0,0 +1,108 @@
+# Website Design Skills
+
+A dedicated home for **per-website design skills** — one skill folder for each
+website example we want to learn from and reproduce patterns of.
+
+Source inspiration list: [`websites-examples-list.txt`](../../websites-examples-list.txt)
+(35 SaaS website design examples from the
+[Webflow blog](https://webflow.com/blog/saas-website-design-examples)).
+
+## Structure
+
+Each website gets its **own numbered skill folder** inside this directory,
+following the standard Agent Skill format (`SKILL.md` with YAML frontmatter +
+instructions), plus a `README.md`. Folders are **numbered (`NN-slug`)** so they
+are easy to remember and stay ordered to match the examples list:
+
+```
+website-design-skills/
+├── README.md            ← this index
+├── 01-proof/
+│   ├── SKILL.md
+│   └── README.md
+├── 02-kajabi/
+│   ├── SKILL.md
+│   └── README.md
+└── ...                  ← one numbered folder per website example (01–35)
+```
+
+## Naming convention
+
+- Folder name = `NN-slug` — a two-digit number (matching the examples list) plus
+  the website/brand name in **lowercase kebab-case** (e.g. `01-proof`,
+  `05-dropbox-sign`, `30-user-interviews`).
+- Each `SKILL.md` frontmatter `name:` = `NN-slug-designer` (e.g.
+  `01-proof-designer`).
+- Each skill outputs a generated site to `websites/NN-slug/`.
+
+## Site scope (every skill)
+
+Each skill builds a **complete multi-page website**, not just a landing page:
+
+- **15+ pages**, each composed of **10+ distinct sections**, all sharing one
+  design system (tokens, header, footer, components).
+- A dedicated **products listing page** (`products/index.html`) plus **a separate
+  full page per product** (`products/<product-slug>.html`, ≥6 if the count is
+  unknown), each with 10+ sections.
+- A `SITEMAP.md` listing every page and its sections.
+
+See any skill's `SKILL.md` → "Site scope" for the required page list.
+
+## Skill index
+
+One row per website example. All 35 skills are built.
+
+> **Grounding:** `02`–`35` were each **live-scraped** (rendered + raw HTML) so
+> their design tokens (real fonts, hex colors, headlines, section order, CTAs)
+> come from the actual site. `01-proof` is built the same way. Two exceptions are
+> noted below the table.
+
+| # | Skill folder | Website | URL | Status |
+|---|--------------|---------|-----|--------|
+| 1 | `01-proof` | Proof | https://useproof.com/ | ✅ built |
+| 2 | `02-kajabi` | Kajabi | https://kajabi.com/ | ✅ built |
+| 3 | `03-lattice` | Lattice | https://lattice.com/ | ✅ built |
+| 4 | `04-petal` | Petal | https://www.petalcard.com/ | ✅ built |
+| 5 | `05-dropbox-sign` | Dropbox Sign | https://sign.dropbox.com/ | ✅ built |
+| 6 | `06-distributional` | Distributional | https://www.distributional.com/ | ✅ built |
+| 7 | `07-appcues` | Appcues | https://www.appcues.com/ | ✅ built |
+| 8 | `08-memberstack` | Memberstack | https://www.memberstack.com/ | ✅ built |
+| 9 | `09-flank` | Flank | https://www.flank.ai/ | ✅ built |
+| 10 | `10-slidebean` | Slidebean | https://slidebean.com/ | ✅ built |
+| 11 | `11-formstack` | Formstack | https://www.formstack.com/ | ✅ built |
+| 12 | `12-thalamus` | Thalamus | https://www.thalamusgme.com/ | ✅ built |
+| 13 | `13-grow` | Grow | https://www.grow.com/ | ✅ built |
+| 14 | `14-gemnote` | Gemnote | https://www.gemnote.com/ | ✅ built |
+| 15 | `15-draftbit` | Draftbit | https://draftbit.com/ | ✅ built |
+| 16 | `16-payman` | Payman | https://paymanai.com/ | ✅ built |
+| 17 | `17-effortel` | Effortel | https://www.effortel.com/ | ✅ built |
+| 18 | `18-adopt` | Adopt | https://www.adopt.ai/ | ✅ built |
+| 19 | `19-kraftful` | Kraftful | https://www.kraftful.com/ | ✅ built |
+| 20 | `20-greenhouse` | Greenhouse | https://www.greenhouse.com/ | ✅ built |
+| 21 | `21-weavy` | Weavy | https://www.weavy.ai/ | ✅ built |
+| 22 | `22-safetykit` | SafetyKit | https://www.safetykit.com/ | ✅ built |
+| 23 | `23-modulify` | Modulify | https://www.modulify.ai/ | ✅ built |
+| 24 | `24-realm` | Realm | https://www.withrealm.com/ | ✅ built |
+| 25 | `25-modyfi` | Modyfi | https://www.modyfi.com/ | ✅ built |
+| 26 | `26-altitude` | Altitude | https://www.altitude.so/ | ✅ built |
+| 27 | `27-way` | Way | https://www.way.co/ | ✅ built |
+| 28 | `28-zentail` | Zentail | https://www.zentail.com/ | ✅ built |
+| 29 | `29-zams` | Zams | https://www.zams.com/ | ✅ built |
+| 30 | `30-user-interviews` | User Interviews | https://www.userinterviews.com/ | ✅ built |
+| 31 | `31-bland` | Bland | https://www.bland.ai/ | ✅ built |
+| 32 | `32-nauto` | Nauto | https://www.nauto.com/ | ✅ built |
+| 33 | `33-bill` | BILL | https://www.bill.com/ | ✅ built |
+| 34 | `34-localyzer` | Localyzer | https://www.localyzer.io/ | ✅ built |
+| 35 | `35-jasper` | Jasper | https://www.jasper.ai/ | ✅ built |
+
+### Scrape notes / exceptions
+
+- **`25-modyfi`** — the live site `https://www.modyfi.com/` returns **404**
+  (Modyfi joined Figma), so no live fonts/colors could be verified. The skill is
+  built honestly: it flags the unavailable source and **labels all design tokens
+  `(inferred)`**. Supply an archived capture to ground it in real values.
+- **`26-altitude`** — colors are defined in **OKLCH** on the live site; those were
+  scraped, and the **hex equivalents are approximate `(inferred)`** conversions.
+
+All other 32 skills use fully scraped fonts and hex colors (many pulled directly
+from the sites' CSS custom properties / swatch tokens).