CCOS Plugin
Site Builder
Plan and build professional website pages — sales pages, landing pages, lead magnets, and more — calibrated to your brand.
AI Skills included in this plugin
Each AI Skill is purpose-built for a specific job. Click any card to see sample prompts and use cases.
Start Site Builder
Your starting point for website work — routes you to the right skill based on what you're building.
See detailsWebsite DNA
Analyze the creator's CCOS DNA context and generate structured markdown page briefs in my-ccos-dna/site-pages/ for a front-end design agent to build from. Use when the creator wants to plan their website pages or needs page briefs for new pages.
See detailsSales Page Builder
Build visually striking, premium site pages as self-contained HTML using an opinionated design engine that eliminates generic AI aesthetics.
See detailsLead Magnet Page Builder
Create opt-in pages, thank-you pages, and supporting copy for list-building assets so creators can grow their audience with less friction.
See detailsPage HTML Finisher
Finish AI-generated website page HTML for embedding — strip scaffold headers/footers, replace placeholder links and media with real assets, wire up responsive behavior and CTA buttons, and prepare the page for embedding on platforms like Thinkific, WordPress, or Squarespace. Use after any AI tool generates page HTML that needs finishing.
See detailsMake HTML Embeddable
Convert a full-page HTML file into a minimal embed-ready snippet. Strips document wrappers, scopes CSS under a unique container, and leaves all inner HTML, JS, and styling untouched.
See detailsSections Kit DNA Builder
Generates a library of markdown section DNA/context files for website pages, based on the user's company, audience, and design system context. Use when the user wants to create or expand their sections kit DNA.
See detailsStitch
Generate UI screens from CCOS context files using Google Stitch via MCP. Use when the creator has DNA context and page/lesson briefs ready and wants to turn them into real visual designs.
See detailsComparison Table
Build a standalone comparison table as paste-ready HTML — "us vs them", before/after, or feature-by-feature comparison with checkmarks, highlights, and responsive layout.
See detailsCTA Section
Build a standalone call-to-action section as paste-ready HTML — bold conversion block with headline, supporting text, button, and optional guarantee or urgency element.
See detailsFAQ Accordion
Build a standalone FAQ accordion section as paste-ready HTML — smooth animated expand/collapse, optional category grouping, search filter, and SEO schema markup.
See detailsFeatures Grid
Build a standalone features or benefits grid as paste-ready HTML — icon cards in 2/3/4-column responsive layout with optional alternating rows for longer lists.
See detailsHero Section
Build a standalone hero section as paste-ready HTML — centered, split-image, video background, or gradient variants with responsive layout and optional animation.
See detailsNewsletter Signup
Build a standalone email signup section as paste-ready HTML — inline form with headline, input field, submit button, and optional lead magnet callout.
See detailsPricing Table
Build a standalone pricing comparison table as paste-ready HTML — 2-4 tiers with feature lists, highlighted recommended plan, monthly/annual toggle, and responsive layout.
See detailsSite Footer
Build a polished, embeddable site footer with brand-matched styling — links, social icons, legal text, and newsletter signup. Generates scoped HTML ready to paste into any platform's footer code area.
See detailsSite Navigation
Build a polished, embeddable site navigation header — logo, menu links, mobile hamburger, sign-in/sign-out handling, and optional CTA button. Generates scoped HTML ready for Thinkific, WordPress, or any platform.
See detailsSocial Proof Bar
Build a standalone social proof bar as paste-ready HTML — logo parade, trust badges, enrollment counters, rating displays, and "as seen in" strips.
See detailsStats Counter
Build a standalone animated stats counter section as paste-ready HTML — large numbers that count up on scroll with labels, icons, and responsive layout.
See detailsTeam Section
Build a standalone team or instructor section as paste-ready HTML — photo cards with name, title, bio, and social links in grid or horizontal scroll layout.
See detailsTestimonial Section
Build a standalone testimonials section as paste-ready HTML — card grid, carousel slider, single spotlight, or marquee variants with star ratings, photos, and attribution.
See detailsVideo Showcase
Build a standalone video showcase section as paste-ready HTML — responsive video embed with supporting text, play button overlay, and optional transcript toggle or chapter markers.
See detailsUp and running in 3 steps
No coding. No complicated setup. Just paste a command and go.
Get CCOS
Download and install your CCOS workspace. It takes about 5 minutes and comes with everything you need to get started.
Get CCOS →Add the plugin
Download the Site Builder plugin and add it to your AI platform. The install instructions are included — it's a one-time setup.
Start building
Open your AI assistant and type the command below. The guide skill will walk you through everything.
/cc-start-site-builder Website pages that look like a premium agency built them
From strategic page briefs to production-ready HTML — every page is self-contained, embeddable, and designed to convert.
Works with Claude, ChatGPT, Gemini, and other AI platforms.