Battle-Tested AI Instructions

AI Prompts Library & System Rules Manager

Eliminate AI hallucination and broken styling. Copy battle-tested system rules (.cursorrules, AGENTS.md) that force Claude, Cursor, and Windsurf to generate flawless frontend UI.

Explore Prompts Try Design Generator

simple explanation

5th grade clarity

What are AI Prompts & Rules? (5th Grade Explanation)

Think of an AI Prompt like super clear instructions for your robot helper. Without good instructions, the robot might paint your wall red when you wanted blue. System rules keep the robot on track.

1. Clear Super Rules

System rules tell your AI coding tool exactly which colors, font sizes, and layout rules to follow before it writes a single line of code.

2. Stops Mistakes (Zero Hallucination)

It prevents the AI from creating ugly colors, random font sizes, or non-working buttons that ruin your website.

3. Copy & Paste Ready

Copy our pre-made .cursorrules or AGENTS.md file into your project folder and you are ready to build!

prompts explorer

system rules library

Battle-Tested System Rules & Prompts

Select your target AI tool to view, copy, and deploy pre-tuned system prompt rule files.

Cursor IDE (.cursorrules)

Strict Design System Enforcer

You are a world-class senior frontend engineer.
When generating or modifying web pages in this codebase, strictly follow these non-negotiable rules:

1. COLOR SYSTEM (OKLCH):
   - Always use defined semantic colors from styles.css (--color-primary, --color-background, --color-card, --color-border).
   - NEVER invent or hardcode raw hexadecimal colors like #3b82f6 or rgb() values.

2. TYPOGRAPHY & SPACING:
   - Use Satoshi as the primary font-family and Geist Mono for code elements.
   - Headers MUST use font-bold with tracking-tight (-0.03em) and line-height 1.15.

3. ACCESSIBILITY (WCAG 2.1 AA):
   - Every text element on card/background surfaces MUST achieve minimum 4.5:1 contrast.
   - All buttons, inputs, and interactive controls MUST feature visible focus rings (focus-visible:outline-ring).

prompt anatomy

the 3-part recipe

The Anatomy of a Flawless AI Prompt

How to structure prompts for maximum precision and minimum token waste.

Part 1

Role & Context

Establish the AI's identity (e.g. "You are a senior frontend architect specializing in React 19 and Tailwind CSS v4").

Part 2

Design Constraints

Provide strict boundaries (e.g. "Only use OKLCH colors from styles.css and Satoshi typography scale").

Part 3

Output Format

Specify exact deliverables (e.g. "Return pure TypeScript TSX components with zero external runtime dependencies").

faq

ai prompts faq

AI Prompts FAQ

Common questions about deploying custom rule files to AI editors.

Where do I place the .cursorrules file in my project?

Place the .cursorrules file in the root directory of your workspace project folder. Cursor automatically detects and loads it for every prompt interaction.

Does this work with Claude Code and Windsurf?

Yes! For Claude Code, save the file as CLAUDE.md or AGENTS.md in your root directory. Windsurf reads rules from .windsurfrules.

Supercharge Your AI Assistant Today

Copy battle-tested prompt rules or extract a custom DESIGN.md file from any live website URL.

Copy Prompts Above Run Design Extraction