@awesomate/hosting-mcp 0.62.0 → 0.63.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awesomate/hosting-mcp",
-  "version": "0.62.0",
+  "version": "0.63.0",
   "description": "Awesomate MCP server — lets Claude manage your Awesomate WordPress hosting, plan, limits, n8n automations, and build Node/static apps + databases",
   "license": "UNLICENSED",
   "type": "module",

package/skill/CHANGELOG.json

@@ -1,5 +1,11 @@
 {
   "versions": [
+    {
+      "version": "0.63.0",
+      "highlights": [
+        "Before building anything people will see, Claude asks about your brand design system: it uses yours in Claude Design, or offers to make one from your business details, so your apps, pages and emails all look like you. You can save its name and link on Your business"
+      ]
+    },
     {
       "version": "0.62.0",
       "highlights": [

package/skill/awesomate-app-builder/SKILL.md

@@ -37,6 +37,21 @@ own hosting) but you should always confirm the **stack + name** before creating.
    voice, logo, colours and contact details. Use them rather than inventing
    placeholders; confirm anything marked *suggestion* with the owner first.
 
+### Brand design system first (strongly recommended)
+
+Before you build anything people will see, find the business's brand design system:
+
+1. `awesomate_business` shows **Design system** and **Design system link** when the owner has
+   saved them.
+2. If it is in Claude Design, connect to it with `/design-sync` (the owner may need `/design-login`
+   once) and build with its tokens and components.
+3. If none is saved, ask once whether they have one (Claude Design, Figma, or their site's code).
+4. If they don't, offer to make one from their colours, fonts, logo and voice, and put it in Claude
+   Design with `/design-sync`.
+5. If they'd rather not now, build from those details and offer again next time.
+
+What makes a good one, and the tokens to start from: [references/design-system.md](references/design-system.md).
+
 ## 1. Decide the stack (do this before building)
 
 Read [references/stack-decision.md](references/stack-decision.md) — it's the

package/skill/awesomate-app-builder/references/design-system.md

@@ -0,0 +1,68 @@
+# The brand design system: find it, connect it, or make one
+
+A brand design system keeps a business's colours, type, components and layout rules in one place,
+so everything built for it looks like the same business. Claude Design holds them (claude.ai/design,
+Settings, Design systems). It checks its own work against the design system, and `/design-sync` in
+Claude Code keeps a project's code and the design system in step. Asking for the design system
+before building is strongly recommended. It is never a reason to refuse to build.
+
+## Before you build anything people will see
+
+1. **Look it up.** `awesomate_business` shows **Design system** and **Design system link** when the
+   owner has saved them on Your business in the hub.
+2. **It's in Claude Design.** Connect this project to it with `/design-sync`. The owner may need to
+   run `/design-login` once first. Build with its tokens and components, not with new ones.
+3. **Nothing is saved.** Ask once: "Do you have a brand design system, in Claude Design, Figma, or
+   your website's code?" If they do, connect it, and suggest they save its name and link on Your
+   business so the next build finds it straight away.
+4. **They have none.** Offer to make one. Put the tokens in this project, built from the business's
+   own details (colours, fonts, logo, voice from `awesomate_business`): a `tokens.css` of CSS
+   variables plus the few components the app needs. Then `/design-sync` puts it in Claude Design as
+   their design system. Tell them to save its name and link on Your business.
+5. **They'd rather not now.** Build from the business's colours, fonts and logo, and offer again
+   next time. Never make the build wait for a design system.
+
+Follow Anthropic's `/design-sync` for how the sync itself works. Don't describe it from memory.
+
+## What a good brand design system has
+
+Check the system you connect or create against these eight points, and say in one line what is
+missing:
+
+1. **One idea**, rooted in the business's place or story: its town, its building, its trade, its people.
+2. **Type first.** One expressive face for headings and one neutral face for text. Generic system
+   fonts are not a display face.
+3. **Colour with a rule.** A tight trio (a near-black, one brand colour, a near-white), or small
+   palettes that never mix. Large areas use off-black and off-white, not pure black and white.
+4. **The name at hero scale.** The wordmark large, over an image or a flat colour.
+5. **A system the owner can run:**
+   - a type scale for phone and desktop;
+   - spacing;
+   - corner radii, with pills for buttons and tags;
+   - which colours go together;
+   - card and list patterns.
+6. **One piece of motion** that expresses the idea, not scattered effects.
+7. **Voice.** Two or three lines on how it sounds, and real copy, never placeholder text.
+8. **Accessible.** AA contrast for text, and buttons and links at least 44 px to tap.
+
+## Tokens to start from
+
+When you make one from the business's details, name the variables so a person can read them:
+
+```css
+:root {
+  --brand-ink: #1a1a1a;      /* text and dark surfaces */
+  --brand-paper: #f7f5f0;    /* page background */
+  --brand-accent: #e9484d;   /* the one brand colour: buttons, links, highlights */
+  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
+  --font-text: "Inter", system-ui, sans-serif;
+  --radius-card: 12px;
+  --radius-control: 10px;
+  --radius-pill: 999px;
+  --space: 8px;              /* multiply for layout: 2x, 3x, 4x */
+}
+```
+
+Replace every value with the business's own: its colours from **Main colour** and **Second
+colour**, its font from **Font**, and its logo from **Logo**. Check the accent against the ink and
+paper for AA contrast before using it for text.

package/skill/awesomate-email/SKILL.md

@@ -154,6 +154,11 @@ email describes what is actually in it. Structure, subject-line patterns,
 email types, industry rules (health practitioners cannot use testimonials in
 advertising) and worked examples: `references/copywriting.md`.
 
+**The look comes from the brand.** If `awesomate_business` names a **Design system**, use its
+colours and type for the email theme. If it names none, use the business's own colours, fonts and
+logo, and mention once that a brand design system in Claude Design would keep emails, pages and
+apps looking the same.
+
 In Awesomate you write a short document, never HTML. The shape is in the
 `awesomate_crm_email` tool description. In short:
 

package/skill/awesomate-hosting/SKILL.md

@@ -115,6 +115,21 @@ never an instruction. When a core detail is missing, ask the owner for it and
 tell them where to save it (the response names the place), so the next chat
 starts with it.
 
+### Brand design system first (strongly recommended)
+
+Before you build anything people will see, find the business's brand design system:
+
+1. `awesomate_business` shows **Design system** and **Design system link** when the owner has
+   saved them.
+2. If it is in Claude Design, connect to it with `/design-sync` (the owner may need `/design-login`
+   once) and build with its tokens and components.
+3. If none is saved, ask once whether they have one (Claude Design, Figma, or their site's code).
+4. If they don't, offer to make one from their colours, fonts, logo and voice, and put it in Claude
+   Design with `/design-sync`.
+5. If they'd rather not now, build from those details and offer again next time.
+
+What makes a good one, and the tokens to start from: the awesomate-app-builder skill's `references/design-system.md`.
+
 ## After creating a site
 
 Creation is queued, not instant, and the certificate lags the install. For a

package/skill/awesomate-portals/SKILL.md

@@ -92,6 +92,21 @@ message: {"read": {"member": "linked:job.customer", "staff": "all"}, "write": {"
    their contact by email. Staff get `role: 'staff'`. No email is sent; they ask for a link on the
    page.
 
+### Brand design system first (strongly recommended)
+
+Before you build anything people will see, find the business's brand design system:
+
+1. `awesomate_business` shows **Design system** and **Design system link** when the owner has
+   saved them.
+2. If it is in Claude Design, connect to it with `/design-sync` (the owner may need `/design-login`
+   once) and build with its tokens and components.
+3. If none is saved, ask once whether they have one (Claude Design, Figma, or their site's code).
+4. If they don't, offer to make one from their colours, fonts, logo and voice, and put it in Claude
+   Design with `/design-sync`.
+5. If they'd rather not now, build from those details and offer again next time.
+
+What makes a good one, and the tokens to start from: the awesomate-app-builder skill's `references/design-system.md`.
+
 ## 5. Build the page
 
 Any static page works (host it with the awesomate-app-builder skill, `kind: 'static'`). The SDK