By revans
Agentic design system for Claude Code. Blueprint interviews and builds complete HTML + CSS pages. Artisan makes targeted design changes on existing builds. Forge maintains the component system. Copy writes brand-voice content. Review runs the automated quality loop with self-healing. Scout researches domain visual conventions.
Direct design session with The Point's craftsperson agent. Describe a visual change and @artisan reads the file, applies the change with full token compliance, and screenshots the result. No pipeline, no interview — just the change you asked for.
Run the Blueprint design agent. Interviews you, resolves your brand vocabulary, and generates a complete HTML + CSS landing page using The Point design system. Automatically spawns @copy and @review when the build is done.
The Point design craftsperson. Direct human collaborator for targeted visual changes to existing builds. Reads the file, applies the change with full token compliance and taste-gate awareness, screenshots the result, reports the delta. Not part of the automated pipeline — this is the human-directed design session.
Blueprint design agent. Interviews the user (or reads a URL / image / existing brand.css) to understand their product, brand, and audience. Generates a brand.css file and a complete HTML landing page using The Point design system. Then hands off to the @copy agent for all text. Four entry points: (1) blank-slate interview, (2) URL to extract visual style, (3) image/screenshot to match aesthetic, (4) existing brand.css to read and extend.
Blueprint copywriter agent. Reads an HTML file, finds all placeholder text, and replaces it with real product copy derived from a short interview. Runs the two-branch interview (customers or no customers yet), then writes directly to the HTML file. Use for copy-only work on existing pages.
The Point system architect and component forge. Creates new bp- components that work natively in the token cascade, promotes brand-specific patterns to core, and maintains the system's three canonical files (assets/core/components.css, llm.md, examples/showcase.html). Four entry points: (1) component gap request from @blueprint mid-build, (2) direct user request, (3) pattern promotion from brand CSS, (4) system audit. Calls @scout for domain-specific research before building when the component's appearance depends on visual vocabulary the system doesn't already know.
Blueprint build review agent. Reads the build notes from a Blueprint session and verifies the generated brand.css and HTML against the vocabulary skill, taste gate banned list, and structural hard constraints. Reports pass/fail/warn per check and provides specific fixes for every failure. Part of the autonomous pipeline — automatically spawns @blueprint fix-mode when FAILs > 0 (up to 3 iterations), then stops and surfaces to human. No human confirmation needed between iterations.
Uses power tools
Uses Bash, Write, or Edit tools
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
A CSS design system with a blueprint aesthetic. Use bp- classes in your markup, set one attribute on <html>, and you have a fully designed UI. Add a single brand file to make it yours.
Works in React, Rails, Electron, and plain HTML. Any project that renders HTML works.
Most design systems make you choose between a blank slate (too much work) and an opinionated framework (too hard to escape). The Point takes a different approach: it has a strong default aesthetic (a technical blueprint style) that looks deliberate without any customization. When you're ready to brand it, one small CSS file is all it takes.
Without a brand file: your site looks like a blueprint. Clean and structured.
With a brand file: the blueprint structure stays, your brand sits on top. Change as much or as little as you want.
HTML
<link rel="stylesheet" href="path/to/the-point/index.css">
React / Vite
import 'path/to/the-point/index.css'
Rails
*= require the-point/index
bp- classesUse the library's component classes in your HTML. A minimal page looks like:
<nav class="bp-nav">...</nav>
<main>
<section class="bp-hero bp-section">
<div class="bp-container">
<h1 class="bp-hero-title">...</h1>
<p class="bp-hero-subtitle">...</p>
<div class="bp-hero-actions">
<a href="#" class="bp-btn bp-btn-primary">Get started</a>
</div>
</div>
</section>
</main>
See llm.md for full HTML patterns for every component. The examples/ directory has nine complete pages you can copy from.
Add one attribute to your <html> element:
<html data-bp-theme="dark"> <!-- deep navy, light blue lines -->
<html data-bp-theme="light"> <!-- drafting paper, blueprint blue lines -->
<html data-bp-theme="auto"> <!-- follows OS dark/light preference -->
That's the last step. Your page is designed.
Copy brand-template.css into your project and rename it brand.css. Uncomment and set the variables you want to change:
@layer brand-state {
:root {
--color-primary: #f97316; /* your brand color */
--color-primary-hover: #ea580c;
--font-heading: 'Outfit', sans-serif;
}
}
Import it after the main library:
<link rel="stylesheet" href="path/to/the-point/index.css">
<link rel="stylesheet" href="./brand.css">
The minimum meaningful brand override is just --color-primary and --color-primary-hover. Buttons, links, focus rings, badges, and active states all inherit from those two values.
| Dark | Light | |
|---|---|---|
| Background | Deep navy | Off-white drafting paper |
| Lines | Light blue | Blueprint blue |
| Text | White / pale blue | Dark navy |
| Feel | Technical drawing on film | Architect's drafting table |
Toggle with a single attribute. No JavaScript required.
The blueprint grid is part of the default aesthetic. To remove it in your brand file:
@layer brand-state {
:root {
--bp-grid-color: transparent;
--bp-grid-color-bold: transparent;
}
}
The brand file is a spectrum, not a switch:
Six pre-built color directions. Drop one in between index.css and your brand.css to get a full primary color family without writing one yourself:
<link rel="stylesheet" href="the-point/index.css">
<link rel="stylesheet" href="the-point/moods/amber.css">
<link rel="stylesheet" href="./brand.css">
| Mood | Feel | Primary color |
|---|---|---|
amber.css | Warm, editorial, confident | #d97706 |
slate.css | Professional, restrained, trustworthy | #475569 |
forest.css | Natural, calm, approachable | #16a34a |
violet.css | Creative, expressive, modern | #7c3aed |
ember.css | Bold, warm, high-energy | #ea580c |
arctic.css | Clean, precise, cold-functional | #0ea5e9 |
Mood files only set the primary color family. Your brand.css overrides any of them.
The Point uses CSS @layer to make override order deterministic:
blueprint ← The Point core (lowest priority)
brand-base ← Mood files
brand-seasonal ← Campaign / seasonal overrides
brand-state ← Your brand.css (always wins)
This means you can load a mood file AND a brand.css. The brand.css wins on any variable both files touch, without needing !important or higher specificity.
Give the mood <link> an id and swap href to change palettes without a reload:
npx claudepluginhub revans/the-pointExtracts architecture, design principles, and practical applications from system components into structured technical documentation
Lens — dynamic context switching for Claude. Load behavioral lenses to change how Claude operates. Reality is the default.
The Agent Spec Protocol (AP) — a standard for HTML documents that are both human-readable pages and machine-navigable agent workspaces. Defines ap- prefixed attributes for agent routing, pipeline state, and content contracts.
Comprehensive PR review agents specializing in comments, tests, error handling, type design, code quality, and code simplification
Comprehensive feature development workflow with specialized agents for codebase exploration, architecture design, and quality review
Unity Development Toolkit - Expert agents for scripting/refactoring/optimization, script templates, and Agent Skills for Unity C# development
Complete creative writing suite with 10 specialized agents covering the full writing process: research gathering, character development, story architecture, world-building, dialogue coaching, editing/review, outlining, content strategy, believability auditing, and prose style/voice analysis. Includes genre-specific guides, templates, and quality checklists.
Comprehensive .NET development skills for modern C#, ASP.NET, MAUI, Blazor, Aspire, EF Core, Native AOT, testing, security, performance optimization, CI/CD, and cloud-native applications
Complete collection of battle-tested Claude Code configs from an Anthropic hackathon winner - agents, skills, hooks, and rules evolved over 10+ months of intensive daily use