Build the reusable brand-and-website Claude Skill
2-4 hours once
2-4 hours once
This is a **one-time foundation step**, not work you repeat for every page. **Collect the reference pack** - Upload the approved brand guidelines, logo rules, color values, typography, spacing, button styles, icon style, and accessibility requirements. - Capture full-page screenshots of **at least 5-10 representative pages** from the live site. Include the homepage, a product or service page, a campaign page, a proof or case-study page, a resource page, and any page with the preferred form treatment. - Add 3-5 strong copy samples that show how the company writes headlines, proof, CTAs, technical claims, and customer outcomes. - Save reusable header, footer, navigation, cookie, analytics, and form conventions in a short component-rules document. **Create the Skill package** - Create a dedicated Skill folder with `SKILL.md`, `/references`, `/screenshots`, `/copy-samples`, `/templates`, and `/output-contract`. - In `SKILL.md`, tell Claude how to study the references, how closely to match the site, which patterns it may reuse, and which elements it must never invent. - Define the required page types: event page, campaign page, gated offer page, ABM page, and sales follow-up microsite. - Require source-grounded claims, one primary CTA, responsive code, accessible markup, and a human approval gate. **Test the Skill** - Ask it to recreate one existing page from the supplied screenshots without publishing it. - Compare layout hierarchy, spacing, typography, tone, CTA treatment, and mobile behavior. - Correct the Skill instructions until the test page feels like the same company, not a generic AI template.
A reusable Claude Skill that understands the company’s brand, page patterns, copy style, code requirements, and approval rules.
Use screenshots from pages with different jobs, not ten visually identical product pages. Claude needs to see the boundaries of the design system as well as its most common pattern.
Create a reusable Claude Skill for producing on-brand, single-purpose landing pages for {{company_name}}.
REFERENCE FILES
- Brand guidelines: {{brand_guideline_files}}
- Full-page website screenshots: {{website_screenshot_files}}
- Approved copy samples: {{copy_sample_files}}
- Component and implementation rules: {{component_rules}}
- Existing page URLs to research: {{reference_urls}}
THE SKILL MUST LEARN
- Visual hierarchy, typography, spacing, grids, cards, buttons, forms, icons, and image treatment
- The company’s writing style, terminology, proof style, CTA style, and prohibited claims
- Which page sections are reusable and which are campaign-specific
- The difference between event, campaign, gated offer, ABM, and sales follow-up pages
- How to generate Webflow-safe HTML, scoped CSS, and minimal JavaScript
- How to produce an asset manifest before the code
- How to cite or list the internal and website sources used for every factual claim
PACKAGE
Create:
1. `SKILL.md`
2. `/references/brand-rules.md`
3. `/references/component-rules.md`
4. `/references/copy-voice.md`
5. `/templates/page-request.md`
6. `/templates/source-map.md`
7. `/templates/asset-manifest.md`
8. `/templates/output-contract.md`
9. `/qa/pre-publish-checklist.md`
NON-NEGOTIABLE RULES
- One primary job and one primary CTA per page
- Never invent proof, customers, numbers, urgency, deadlines, or product capabilities
- Match the supplied site patterns before introducing a new pattern
- Mobile-first and accessible
- Return Webflow-embeddable code without `<html>`, `<head>`, or `<body>` tags
- Scope CSS beneath one unique wrapper class
- Name every required image and list it in the asset manifest
- Require human approval before publishing
Return the complete Skill package with file names and contents.