Claude Code Plugin

RaySpec

RaySpec is a Claude Code plugin that takes any idea, brief, or URL and runs it through a seven-agent Ray Pattern pipeline — one command as the entry point, specialized agents as the rays — to produce a complete, deployed HTML spec page built on The Point CSS framework and optimized for both traditional SEO and AI discoverability.

One command, seven agents, a live spec page. The entry point is a single slash command. The pipeline handles everything else.

Most AI page generators are a single large prompt with no quality gate and no design system. RaySpec is a pipeline: seven specialized agents, each with one job, each producing a reviewed artifact the next agent reads. The last agent is the one nobody else is building — an AI SEO pass that optimizes for answer density and entity clarity, not keyword density, so the page gets found by Claude, ChatGPT, and Perplexity, not just Google.

/spec-page [your idea, brief, or URL]
View on GitHub → See the pipeline
7
Specialized agents
1
Command to run
4
Skill files loaded
2
SEO passes applied
The Architecture

Seven agents. One pipeline.

Not a single large prompt. A sequence of specialized agents, each with one job, each producing a reviewed artifact the next agent reads.

Discovery Blueprint Build Review SEO AI SEO Deploy
01 — Discovery

Takes a brief, URL, or blank slate. Interviews, extracts, confirms. Produces the structured discovery brief.

02 — Blueprint

Design interview. Chooses mood, resolves typography, documents every visual decision. Produces brand.css + design rationale.

03 — Build

Reads llm.md and the brief. Every bp- class it uses must exist in llm.md. Produces the complete single-file HTML.

04 — Code Review

Quality gate. Eight specific checks. Returns PASS or NEEDS WORK. Same failure twice escalates to user.

05 — SEO

Traditional search optimization. Title tag, meta description, Open Graph, canonical URL, structured data, heading hierarchy.

06 — AI SEO

Optimizes for AI discoverability. Answer density, entity clarity, citation structure, AP reading layer, llms.txt entry.

07 — Deploy

Ships to target host. Updates site index and llms.txt. Writes deploy log entry. Reports live URL.

The Agents

Every agent, fully specified.

Seven jobs, seven agents, each with a defined input, a defined output, and a list of what it must not do. Engineers should understand the full system from this section alone.

01 — Discovery

Discovery agent — the human interface

Role
Human interface for the pipeline. Understands what the user wants to build and produces a structured brief the build agent can execute from without asking questions.
Input
Blank slate, inline brief text, or a URL to extract from
Output
NNN.01-dis-[concept].md — eight required sections, confirmed by user
Constraint
Cannot hand off until user explicitly confirms. No section may be empty or contain "TBD."
02 — Blueprint

Blueprint agent — the design decision layer

Role
Makes all visual decisions before the build agent writes one line of HTML. Chooses mood, resolves vocabulary, documents rationale for every choice.
Input
Discovery brief
Output
brand.css + design rationale document
Constraint
May not invent bp- class names. All design decisions must be documented before handoff to build.
03 — Build

Build agent — the implementation layer

Role
Reads llm.md before writing any markup. Produces the complete, self-contained HTML file. Every bp- class used must exist in llm.md — no exceptions.
Input
Discovery brief + brand.css + design rationale
Output
NNN.02-bld-[concept].html — single self-contained file
Constraint
No custom CSS in the HTML file. No inline styles for component-level styling. No invented bp- class names.
04 — Code Review

Code review agent — the quality gate

Role
Validates the built HTML against eight specific checks. Every class, every placeholder, every animation reference. Returns PASS or NEEDS WORK.
Input
Built HTML + brief + brand.css + design rationale
Output
PASS — pipeline proceeds. NEEDS WORK — specific findings sent back to build agent.
Constraint
Same failing check in two or more rounds escalates to the user. Cannot approve pages with invented bp- classes.
05 — SEO

SEO agent — traditional search optimization

Role
Adds and validates the traditional SEO layer. Title tag, meta description, Open Graph, canonical URL, structured data (JSON-LD), heading hierarchy.
Input
Code-reviewed HTML file
Output
HTML with SEO metadata layer applied
Constraint
May not alter body content, layout, or visual design. SEO changes are metadata and document structure only.
06 — AI SEO

AI SEO agent — AI discoverability layer

Role
Optimizes for extraction by AI systems. Answer density, entity clarity, citation structure, AP reading layer attributes, llms.txt site index entry.
Input
SEO-optimized HTML file + brief's speculative elements list
Output
HTML with AI discoverability layer + llms.txt entry for site index
Constraint
Does not state speculative claims as established fact. Unverifiable assertions are flagged, not silently removed.
07 — Deploy

Deploy agent — the last mile

Role
Ships the finished, optimized HTML file to the target host. Updates the site index and site-wide llms.txt. Writes a deploy log entry.
Input
Final HTML file + target filename and URL confirmed by user
Output
Live URL. Deploy log entry. Updated llms.txt.
Constraint
Must confirm target filename and URL with user before deploying. Cannot deploy without explicit user confirmation.
Design System

The Point — the foundation.

Every RaySpec page is built on The Point CSS framework — a design system built for AI agents to read and use. One import, one optional brand file, every component documented in llm.md.

The bp- class system

Every layout primitive, component, and utility is a bp- prefixed class. An invented class silently does nothing in the browser — the system enforces that every class the build agent uses must exist in llm.md.

Mood files

Six pre-built color directions. Blueprint chooses one during the design interview. The mood file loads between index.css and brand.css — the CSS @layer system ensures brand.css always wins.

llm.md

The authoritative reference for every bp- class. The build agent reads it before writing any markup. If a component isn't in llm.md, it doesn't go on the page — the code-review agent will catch invented class names.

Available moods
amber
Warm, editorial
slate
Professional, restrained
forest
Natural, calm
violet
Creative, expressive
ember
Bold, high-energy
arctic
Clean, precise

CSS load order is enforced: index.css → mood → brand.css. The @layer system makes brand.css the final word on every property it touches.

AI Discoverability

What regular page generators miss.

AI systems don't rank pages. They extract answers from them. Optimizing for extraction requires a different discipline than optimizing for crawl rank.

Traditional SEO

Ranking signals — what Google crawls

Title tag
Primary keyword + brand signal, under 60 characters
Meta description
Search result snippet, 155 characters
Open Graph
Social sharing cards — og:title, og:description, og:image
Structured data
JSON-LD for rich snippets and knowledge graph
Heading hierarchy
H1 → H2 → H3 document outline
Canonical URL
Deduplication signal for identical content

AI SEO

Extraction signals — what AI systems read

Answer density
Specific, attributable answers to questions the target audience actually asks. Not keyword density — answer density.
Entity clarity
Every named concept defined on first use. No jargon without immediate plain-language definition.
Citation structure
Claims are attributable. Sources are named. Speculative elements are flagged, not stated as fact.
AP reading layer
Semantic HTML attributes (topic and kind) that give AI agents precise XPath addresses into page sections — the structured data layer AI retrieval systems actually use.
llms.txt
The robots.txt for AI systems. Site index at /llms.txt tells crawlers and retrieval systems what to read.
Differentiation questions
Explicit answers to "How is [concept] different from [closest alternative]?" — the question AI systems are most likely to be asked.

RaySpec vs. alternatives

How RaySpec differs from other page generation approaches.

Feature RaySpec MindStudio / Ajelix Mintlify Manual prompting
Pipeline structure 7 specialized agents, each with one job Single large prompt Single pass from code comments One-off, no structure
Quality gate Dedicated code review agent — 8 specific checks None None None
Design system The Point CSS — agent-enforced None Custom, limited to docs None
Traditional SEO pass Dedicated SEO agent None None Manual
AI SEO pass Dedicated AI SEO agent None None None
Claude Code integration Native plugin None None Prompt only
Output type Spec pages for concepts, tools, architectures Generic landing pages API reference docs only Any (no quality guarantee)
Design intent, not proven outcome
RaySpec is built to be found by AI systems — Claude, ChatGPT, Perplexity. The claim that optimizing for answer density and entity clarity measurably improves citation frequency is a well-reasoned hypothesis. It has not yet been measured empirically. "Built to be found by AI systems" is accurate. "Proven to rank higher in AI responses" is not.
Knowledge Layer

Skills — domain knowledge for agents.

Agents are the execution layer. Skills are the knowledge layer. Each skill file is loaded by the relevant agent before it does any work.

spec-page-brief-format
Loaded by: Discovery agent

Defines the eight required sections of a complete brief. The contractor must be able to build from the permit alone. If the brief is vague, the building will be wrong. This skill prevents the discovery agent from handing off an incomplete brief.

the-point-llm
Loaded by: Build agent

Loads the path to llm.md and enforces the hard rule: do not write any bp- class that is not in llm.md. An invented class silently does nothing in the browser. Reading llm.md is the build agent's most critical action.

anime-js-animations
Loaded by: Build agent

Six named animation patterns for Anime.js v4. Scroll-triggered reveals (Pattern 1), SVG path drawing (Pattern 2), counter animation (Pattern 3), hero word-by-word entrance (Pattern 4), tab transitions (Pattern 5), terminal typewriter (Pattern 6). Pattern selection is deterministic — section type maps directly to pattern.

ai-seo-principles
Loaded by: AI SEO agent

The five AI SEO signals. AP reading layer annotation patterns. Differentiation question structure. Citation audit criteria. llms.txt format and site index conventions. The knowledge layer the AI SEO agent reads before touching any HTML.

Self-Referential Proof

The first page RaySpec builds is its own.

The plugin is working when it can generate this page from the README. The README points to the page. The page points to the README. The circularity is the demonstration.

RaySpec ships as a Claude Code plugin. Every agent is an agent file. Every skill is a skill file. The pipeline is the plugin.json manifest listing each agent in sequence. Nothing is hidden in a prompt — the architecture is the implementation.

The source is public. The Ray Pattern is a pipeline architecture where one command serves as the single entry point and specialized agents fan out from it as rays — each with one job, reviewed artifacts at each handoff, and a clean separation between discovery and execution. Every pipeline you build from this pattern shares the same skeleton: one entry command, N specialized agents, reviewed artifacts at each handoff.

License
MIT
Format
Claude Code plugin
Install
Requires
Claude Code, The Point CSS
Pattern
The Ray Pattern — one entry point, N specialized agents
First build
This page
Get Started

Get started with RaySpec.

One command. The pipeline handles the rest.

Install instructions: see README at github.com/revans/rayspec