AI SummaryA specialized skill for designing and building credible B2B SaaS marketing websites that balance product positioning with consultancy capability, prioritizing layout systems and information architecture over component libraries. Ideal for founders, marketing teams, and designers building Genesis or similar enterprise-focused platforms.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "genesis-site-design" skill in my project. Please run this command in my terminal: # Install skill into the correct directory (2 files) mkdir -p .claude/skills/.claude && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/.claude/SKILL.md "https://raw.githubusercontent.com/ashgar99/GenesisPreviewSite/main/.claude/skill.md" && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/.claude/settings.local.json "https://raw.githubusercontent.com/ashgar99/GenesisPreviewSite/main/.claude/settings.local.json" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Design and build Genesis' marketing website as a B2B SaaS product that can also scale into an international "neo-consultancy" (product + services). This skill is for marketing sites (not dashboards). It prioritises layout systems, information architecture, proof, and technical excellence over component demos.
Output Requirements (What you must return)
• Reference Digest: the 12-site reference list with "borrow / avoid". • Site Map + Section Inventory (with variants). • Design System Tokens: spacing, type scale, colours, radii, shadows. • One page fully specified (Home) as a layout blueprint: • Section order • Copy placeholders • Proof placement • Component requirements • Only then: production code (Next.js preferred) implementing the section system. ---
Genesis Site Design
Genesis is a marketing-intelligence B2B SaaS platform that must look credible to enterprise buyers, investors, and future partners; whilst also signalling hands-on delivery capability (a consultancy/agency layer) without feeling like a traditional agency site. This skill exists because most coding outputs nail components but fail the thing buyers actually feel first: layout, hierarchy, and narrative.
Scope
Use for • Marketing website pages (home, product, platform, pricing, resources, case studies, company, careers, legal) • Section systems, page templates, content models, and sitewide design tokens • Responsive layout, motion, accessibility, performance, and SEO Not for • Product UI (dashboards, admin panels, in-app flows). Use /interface-design. ---
Success Criteria
A Genesis page is "professional" when it: • Reads like a confident, specific product; not a general agency • Demonstrates proof (numbers, logos, case studies, methodology, security posture) • Feels intentional on mobile and desktop (type scale, spacing rhythm, grid) • Loads fast, passes Lighthouse, and is accessible by default If another model could produce the same site from a generic prompt, the work failed. ---
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster