No more generic templates. No more copy-paste UI. No more AI slop.
Quick Start • Features • Rules List • Sponsor
// Generic AI output
<button onClick={handleClick}>
Submit
</button>
<select>
<option>Choose...</option>
</select>
<img src="placeholder.jpg" />
|
// PixelPilot-trained AI output
<Button
onClick={handleClick}
loading={isSubmitting}
disabled={!isValid}
aria-busy={isSubmitting}
>
{isSubmitting ? <Spinner /> : 'Submit'}
</Button>
<CustomSelect
options={options}
theme={theme}
accessible={true}
/>
<picture>
<source srcSet="hero.avif" type="image/avif"/>
<img
src="hero.webp"
alt="Hero image"
width={1200}
height={630}
loading="lazy"
/>
</picture>
|
AI coding assistants generate the same boring UI every time:
- Generic hero sections
- Copy-paste Bootstrap layouts
- No personality, no craft
- Looks like every other AI-generated site
PixelPilot trains your AI to write unique, opinionated, professional UI by enforcing:
- 7 distinct design languages - Not one generic style, but Luxury, Minimalist, Editorial, and more
- 10 component states - Every button handles loading, error, success, not just default
- 20 non-negotiable laws - No
transition: all, no native selects, no grey placeholders - Real design decisions - Mixed image shapes, proper spacing scales, dark mode by default
One-time setup. AI that actually designs.
|
Rule Files Comprehensive coverage |
Design Languages Luxury to Technical |
Component States Every interaction covered |
Editors Supported Use your favorite |
| Editor | Status | Config Location |
|---|---|---|
| Cursor | Full Support | .cursorrules + .cursor/rules/ |
| VS Code (Copilot) | Full Support | .github/copilot-instructions.md |
| Windsurf | Full Support | .windsurf/rules/ |
| OpenCode | Full Support | AGENTS.md + .opencode/rules/ |
| Zed | Full Support | .rules |
PixelPilot is designed for smart rule loading — your AI only loads what it needs, saving tokens and improving response quality.
| Editor | Always Loaded | Selective Loading | Method |
|---|---|---|---|
| OpenCode | AGENTS.md only |
.opencode/rules/ loaded via read_file |
Most token-efficient. Rules loaded on-demand. |
| Cursor | .cursorrules |
.cursor/rules/ based on description: frontmatter |
Context-aware selective loading. |
| VS Code Copilot | copilot-instructions.md |
.instructions.md files via applyTo: glob patterns |
File-type specific loading. Efficient. |
| Windsurf | uiux-main.md (trigger: always_on) |
91 rules via triggers: frontmatter |
Keyword-based matching. Very efficient. |
| Zed | .rules (40-line summary) |
N/A | Single compact file. Minimal tokens. |
- OpenCode — Most efficient.
AGENTS.mdloads first (~2KB), individual rules load on-demand only when needed viaread_file. Zero waste. - Windsurf — Very efficient. Only
uiux-main.mdalways loads. All other 91 rules load only when theirtriggers:match what you're working on (e.g., "form", "animation", "accessibility"). - VS Code Copilot — Efficient. Main instructions always load. Additional
.instructions.mdfiles load only for matching file types viaapplyTo:patterns (e.g.,"**/*.{tsx,jsx}"). - Cursor — Context-aware.
.cursorrulesalways loads. Additional rules in.cursor/rules/load selectively based ondescription:frontmatter and current context. - Zed — Minimal. Single
.rulesfile contains a compact 40-line summary of essential rules. Lowest token usage, but less comprehensive.
git clone https://github.com/dev-lou/PixelPilot.git
cd PixelPilotCursor
# Navigate to your project
cd /path/to/your-project
# Copy the Cursor rules
cp /path/to/pixelpilot/cursor/.cursorrules ./
cp -r /path/to/pixelpilot/cursor/.cursor ./Result:
your-project/
├── .cursorrules # Main rules file
└── .cursor/
└── rules/ # 92 detailed rule files
├── uiux-a11y.md
├── uiux-components.md
├── uiux-tokens.md
└── ...
VS Code (GitHub Copilot)
# Navigate to your project
cd /path/to/your-project
# Copy the Copilot instructions
cp -r /path/to/pixelpilot/vscode/.github ./Result:
your-project/
└── .github/
├── copilot-instructions.md # Main instructions
└── instructions/ # 92 detailed instruction files
├── uiux-a11y.instructions.md
├── uiux-components.instructions.md
└── ...
Windsurf
# Navigate to your project
cd /path/to/your-project
# Copy the Windsurf rules
cp -r /path/to/pixelpilot/windsurf/.windsurf ./Result:
your-project/
└── .windsurf/
└── rules/ # 92 rule files with frontmatter triggers
├── uiux-main.md
├── uiux-a11y.md
└── ...
OpenCode
# Navigate to your project
cd /path/to/your-project
# Copy the OpenCode rules
cp /path/to/pixelpilot/opencode/AGENTS.md ./
cp -r /path/to/pixelpilot/opencode/.opencode ./Result:
your-project/
├── AGENTS.md # Main agent instructions
└── .opencode/
└── rules/ # 92 detailed rule files
├── uiux-a11y.md
└── ...
Zed
# Navigate to your project
cd /path/to/your-project
# Copy the Zed rules
cp /path/to/pixelpilot/zed/.rules ./Result:
your-project/
└── .rules # Combined rules file
That's it! Your AI assistant now follows professional UI/UX standards automatically.
These rules are always enforced by your AI assistant:
| # | Law |
|---|---|
| 1 | Classify design language FIRST — before any code |
| 2 | Brand tokens in :root once — never override per-page or inline |
| 3 | Never window.alert/confirm/prompt — SweetAlert2 or custom toast only |
| 4 | No grey placeholder boxes — Picsum/Unsplash URLs, context-matched |
| 5 | No localhost in any user-visible text or URL |
| 6 | Dark + light mode on every project — [data-theme] on <html> |
| 7 | Mobile-first always — design at 390px, expand outward |
| 8 | transition: all NEVER — specify only changed properties |
| 9 | Every <img>: width, height, loading, alt — no exceptions |
| 10 | Every async state has a skeleton — never blank |
| 11 | prefers-reduced-motion respected in all animations |
| 12 | Only animate transform and opacity (GPU S-Tier) |
| 13 | Every interactive component handles all 10 states |
| 14 | Never native <select>, native date input — always custom |
| 15 | Image grids mix shapes — never all-square |
| 16 | Min contrast: 4.5:1 body, 3:1 large text |
| 17 | Every page has a footer with role="contentinfo" |
| 18 | All spacing on the 8px scale — 4,8,12,16,24,32,48,64,80,96,120,160px |
| 19 | Every empty data state shows an empty-state component |
| 20 | Images: <picture> + AVIF source + WebP fallback |
Every interactive component is built to handle all possible states:
default → hover → focus → active → loading → disabled → error → success → empty → busy
Choose the visual language that matches your project:
| Language | Best For | Key Characteristics |
|---|---|---|
| Luxury | Fashion, hotels, jewelry, art galleries | Slow animations, generous whitespace, sharp typography |
| Premium Modern | SaaS, fintech, B2B, productivity apps | Polished surfaces, confident colors, clean hierarchy |
| Minimalist | Portfolios, studios, agencies | Silent aesthetics, precise alignments, hidden complexity |
| Expressive | Gaming, music, events, youth brands | Bold colors, energetic motion, playful interactions |
| Editorial | News, blogs, magazines, documentation | Typography-first, optimal reading experience |
| Warm & Human | Health, education, NGO, consumer apps | Rounded shapes, friendly colors, approachable feel |
| Technical | Dashboards, dev tools, admin panels | Dense information, zero decoration, maximum utility |
View all 92 rule files
| File | Description |
|---|---|
uiux-tokens.md |
Design tokens, CSS custom properties, color systems |
uiux-components.md |
Component architecture, atomic design |
uiux-a11y.md |
Accessibility requirements, WCAG compliance |
uiux-forms.md |
Form design, validation, error handling |
uiux-motion.md |
Animation principles, transitions, micro-interactions |
uiux-states.md |
Component states, loading, error, empty states |
uiux-performance.md |
Core Web Vitals, optimization techniques |
uiux-layouts.md |
Grid systems, responsive design, breakpoints |
| File | Description |
|---|---|
uiux-ai-frontend.md |
AI/ML integration patterns |
uiux-voice-ui.md |
Voice interface design |
uiux-spatial-ui.md |
3D and spatial interfaces |
uiux-webxr.md |
WebXR/VR/AR experiences |
uiux-biometric-auth.md |
Biometric authentication UX |
uiux-ambient-awareness.md |
Context-aware interfaces |
uiux-temporal-ui.md |
Time-based UI patterns |
| File | Description |
|---|---|
uiux-data-table.md |
Data tables, sorting, filtering |
uiux-admin-dashboard.md |
Admin panel patterns |
uiux-seo.md |
SEO optimization |
uiux-i18n.md |
Internationalization |
uiux-pwa.md |
Progressive Web Apps |
uiux-offline-pwa.md |
Offline-first strategies |
uiux-realtime.md |
Real-time features |
| File | Description |
|---|---|
uiux-laravel.md |
Laravel integration |
uiux-flutter.md |
Flutter patterns |
uiux-graphql.md |
GraphQL best practices |
uiux-edge.md |
Edge computing UI |
uiux-monorepo.md |
Monorepo architecture |
| File | Description |
|---|---|
uiux-testing.md |
UI testing strategies |
uiux-a11y-ci.md |
Accessibility in CI/CD |
uiux-performance-ci.md |
Performance testing |
uiux-audit-automation.md |
Automated audits |
reasoning.md |
AI reasoning patterns |
...and 50+ more specialized rules
pixelpilot/
├── README.md
├── LICENSE
├── CHANGELOG.md
├── CONTRIBUTING.md
│
├── cursor/ # Cursor AI rules
│ ├── .cursorrules
│ └── .cursor/
│ └── rules/
│
├── vscode/ # VS Code / GitHub Copilot
│ └── .github/
│ ├── copilot-instructions.md
│ └── instructions/
│
├── windsurf/ # Windsurf / Codeium
│ └── .windsurf/
│ └── rules/
│
├── opencode/ # OpenCode
│ ├── AGENTS.md
│ └── .opencode/
│ └── rules/
│
└── zed/ # Zed Editor
└── .rules
Do I need all the rule files?
No! The main config file (.cursorrules, copilot-instructions.md, etc.) contains the essential rules. The additional rule files in the rules/ folder are loaded on-demand based on context. Keep all files for the best experience, but the system works with just the main file.
Can I customize the rules?
Absolutely! All rules are in Markdown format. Edit any file to match your team's standards. Consider forking the repo to maintain your customizations.
How do I update to new versions?
Pull the latest changes and re-copy the files to your projects:
cd pixelpilot
git pull origin main
# Then copy to your projects againWhat if my editor isn't listed?
Most AI coding assistants support some form of custom instructions. Check your editor's documentation for "custom rules", "system prompts", or "instructions" features. The rule content is portable — only the file location differs.
Will this slow down my AI or use too many tokens?
No. PixelPilot uses smart loading — each editor only loads the rules relevant to your current task:
- OpenCode and Windsurf are the most token-efficient. Only the main file loads initially; additional rules load on-demand based on what you're working on.
- Cursor and VS Code Copilot load rules selectively based on context and file types.
- Zed uses a single compact 40-line file.
The system is designed to only load what is relevant, so you get comprehensive coverage without token bloat.
We welcome contributions! See CONTRIBUTING.md for guidelines.
Ways to contribute:
- Add new rule files for emerging patterns
- Improve existing rules with better examples
- Add support for additional editors
- Fix typos and improve documentation
- Share your customizations
See CHANGELOG.md for version history and updates.
If PixelPilot helps you build better UIs, consider supporting its development:
Your support helps:
- Maintain and update rule files
- Add support for new editors
- Create video tutorials and documentation
- Keep the project free and open source
MIT License - see LICENSE for details.
If PixelPilot helped you build better UIs, consider giving it a star! Your support helps others discover the project and motivates continued development.
Every star helps. Thank you for your support!
Created by Lou Vincent Baroro
Report Bug • Request Feature • Star on GitHub
If PixelPilot helped you, consider giving it a star!