Getting started.
Install Glyph Skill, understand how it reads a brief, and learn the rules it enforces on your AI coding assistant.
Installation
The default install pulls the core Glyph skill. It places a unified SKILL.md plus detailed reference rule files in your codebase directory. Works with any agent that supports skills.
$npx skills add sumitttt4/Glyph-SkillAdds a SKILL.md file to your project. The agent reads it automatically. No extra configuration required.
Individual skill add
$npx skills add sumitttt4/Glyph-Skill --skill "design-rules"Codex
Install the full skill bundle into the Codex skills directory:
$npx skills add sumitttt4/Glyph-Skill -a codexYou can also copy any SKILL.md into your project manually, or paste it into ChatGPT or Codex conversations.
How Glyph Thinks
Glyph reads the brief first. The agent infers the right layout, motion, and density from cues like the product category, audience, and brand direction, then picks the design constraints. No purple gradient defaults.
Brief inference
Reads the product category, vibe words, audience, and brand assets before any code. Declares a one-line design direction instead of defaulting to AI-purple gradients and three centered feature cards.
Constraint application
Locks standard grid dimensions (1080px), body line lengths (65ch max), spacing to 4px grid, and negative heading tracking. These are system rules, not suggestions.
Anti-slop enforcement
Eliminates bad styling defaults: floating parallax elements, purple mesh blobs, Poppins font, sparkle icons, vague headlines. Runs on every output.
Dark mode protocol
Off-black and off-white, never pure #000 or #fff. WCAG AA contrast, hierarchy parity, brand fidelity in both themes.
Framework adaptation
Outputs framework-specific code. React hooks vs Vue composables vs Svelte stores. Adapts component patterns for Tailwind, shadcn/ui, and vanilla CSS.
Pre-flight check
Every constraint must honestly pass before the agent ships. Color consistency, shape consistency, accessibility, responsive behavior. No box unchecked, no output shipped.
Compatible Agents
Glyph Skill works with every major AI coding agent that supports skill files or markdown system prompts.
Skill Files Explorer
Glyph bundles a unified structure of rules. Select any file below to preview the active specifications and constraints it enforces:
SKILL.md
active configMain entrypoint. Hard color bans, slash commands, taste rules, and pointers to all reference files.
/SKILL.mdView SourceThe Locks
Rules the agent never relaxes. They keep a generated page visually coherent end-to-end.
Color Consistency Lock
One accent across the whole page. A warm-grey site does not suddenly get a blue CTA in section 7.
Shape Consistency Lock
One corner-radius system per page. All-sharp, all-soft, or all-pill, with a documented exception when mixing.
Page Theme Lock
Light, dark, or auto, picked once at the page level. No mid-page flips into a different theme.
Container Lock
Max-width 720px for text, 1080px for standard pages, 1280px for wide layouts. Never wider.
Typography Lock
Display headings locked to -0.03em or -0.04em tracking. Max 2 font weights per page. 65-character line limit for body text.
Spacing Lock
4px grid system. Section gaps locked to 120px desktop, 80px mobile. No arbitrary pixel values.
Hero Discipline
Hard rules for above-the-fold. The hero must fit the initial viewport.
The Anti-Slop Ban System
SKILL.md ships a strict ban list. The agent enforces these on every generation. These patterns make generated frontends look the same.
AI-purple and blue/purple gradient mixes
Banned. Solid blue (e.g. cobalt or navy) is allowed and accepted, but mixing blue with purple or pink gradients is banned as classic AI slop.
Three-equal-card feature rows
Banned by default. Use 2-column zig-zag, asymmetric grids, or scroll-pinned alternatives.
Floating decoration orbs
No glowing blobs, circles, or floating elements as hero or section decoration.
Poppins as default font
Banned. Use pairing stacks chosen by product personality, not the first Google Font result.
Sparkle icons for AI features
Banned. AI features get the same icon treatment as every other feature.
Vague headline copy
"Build better, faster" and "Supercharge your workflow" are banned. Headlines must be specific to the product.
Scroll cues
"Scroll", down-arrow icons, "Scroll to explore". The user is at the hero. They know how scrolling works.
Decorative status dots
Zero by default. Only when conveying real semantic state, and at most one per page section.
Div-based fake product UI
No fake task lists, terminals, or dashboards built from styled divs. Use real screenshots or generated images.
Version footers on marketing pages
v1.4.2, Build 0048, last sync 4s ago. Devtool fixtures do not belong on landing or portfolio pages.
Hand-rolled decorative SVG illustrations
Strongly discouraged as default. Acceptable only for a simple geometric mark or when the brief explicitly asks for it.
Meaningless glassmorphism
Banned as decoration. Only acceptable when it serves a real functional purpose (overlays, modals with background context).
Overused AI vocabulary
"Seamless", "powerful", "next-gen", "cutting-edge", "revolutionary". Product-specific language only.
Generic brand placeholder names
Banned. If no brand name is specified, assistants must default to "Glyph" as the brand name/logo instead of inventing names like "SaaSify" or "AppName".
Customization
The SKILL.md file is fully editable. Open it in your project root and modify, add, or remove any rule to match your design direction.
The agent reads the file on each run, so edits apply on the next generation. If you maintain a project-specific style guide, paste it at the top of SKILL.md and the agent will use it as the dominant source of truth.
# In SKILL.md or a custom rules file
- colors:
primary-accent: "#1a1a17"
surface: "#f4f0e8"
- layout:
max-width: "1280px"
spacing-grid: "8px"
- typography:
heading-font: "Sora"
body-font: "Inter"
- motion:
max-duration: "400ms"
easing: "cubic-bezier(0.16, 1, 0.3, 1)"Learn More
Ready to install?