DOCSEARCHbyAlgolia
Submit Docs

Uncodixfy

repository·main·Indexed 25 days ago

https://github.com/cyxzdev/uncodixfy

A rule set and agent skill designed to prevent AI models from generating repetitive, low-quality 'Codex UI' patterns—such as glassmorphism, oversized rounded corners, and decorative gradients—in favor of professional, human-designed interfaces. It provides specific component standards for sidebars, headers, and buttons, along with predefined light and dark color schemes to ensure clean, functional frontend UI generation in HTML, CSS, React, Vue, and Svelte.

Tokens
3.3K
Snippets
6
Records
12
Agent score
83%

What's inside Uncodixfy

  1. Apply the Uncodixify skill for frontend UI generation

    main

    Use the uncodixfy skill when generating HTML, CSS, React, Vue, Svelte, or any frontend UI code. The goal is to prevent generic 'AI/Codex UI' patterns (soft gradients, floating panels, eyebrow labels, dramatic shadows) and instead enforce clean, human-designed aesthetics inspired by Linear, Raycast, Stripe, and GitHub.

    Core Principles:

    • Avoid 'Codex UI': Do not use oversized rounded corners, pill shapes, glassmorphism, or decorative copy.
    • Embrace 'Normal' UI: Use standard sidebars (240-260px), simple headers, standard padding (20-30px), and subtle borders (1px solid).
    • Design Philosophy: Interfaces should be functional and honest, not trying too hard to look 'premium' through visual noise.
    name: uncodixfy
description: Prevents generic AI/Codex UI patterns when generating frontend code.

  2. Follow Uncodexy-UI Standards for components

    main

    To achieve a 'human-designed' look, follow these specific component standards:

    ComponentStandard Implementation
    Sidebars240-260px fixed width, solid background, simple border-right, no floating shells
    HeadersSimple text (h1/h2), no eyebrow labels, no uppercase labels, no gradient text
    ButtonsSolid fills or simple borders, 8-10px radius max, no pill shapes, no gradients
    CardsSimple containers, 8-12px radius max, subtle borders, max 8px blur shadow
    Inputs/FormsStandard inputs, clear labels above fields, simple focus states
    TypographySystem fonts or simple sans-serif, 14-16px body size
    SpacingConsistent scale (4/8/12/16/24/32px)
    Borders1px solid, subtle colors
    Transitions100-200ms ease, simple opacity/color changes (no bouncy/transform effects)

  3. Avoid banned Codex UI patterns

    main

    Do not use the following patterns which characterize generic AI-generated interfaces:

    • Visual Styles: Oversized rounded corners, pill shapes, floating glassmorphism, soft corporate gradients, decorative sidebar blobs, and random glows/blur haze.
    • Layouts: Generic dark SaaS compositions, 'control room' cosplay, metric-card grids as a default, and hero sections inside internal dashboards.
    • Typography/Labels: Eyebrow labels (e.g., uppercase with letter-spacing), decorative copy (e.g., 'Operational clarity without the clutter'), and serif headline + system sans fallbacks.
    • Specific HTML/CSS Bans:
      • Do NOT use <small> inside headers for labels.
      • Do NOT use rounded <span>s for labels.
      • Avoid colors trending towards blue; use dark muted colors instead.
      • Avoid transform animations on hover (e.g., translateX(2px)).
      • Avoid dramatic box shadows (e.g., 0 24px 60px rgba(0,0,0,0.35)).

  4. Follow the Uncodexy-UI Standard for normal components

    main

    To avoid the 'Codex UI' (generic AI) aesthetic, follow these standard implementation rules for UI components:

    • Sidebars: 240-260px fixed width, solid background, simple border-right, no floating shells or rounded outer corners.
    • Headers: Simple text hierarchy (h1/h2), no eyebrow labels, no uppercase labels, no gradient text.
    • Buttons: Solid fills or simple borders, 8-10px max radius, no pill shapes, no gradient backgrounds.
    • Cards: Simple containers, 8-12px max radius, subtle borders, max 8px blur for shadows, no floating effects.
    • Inputs/Forms: Standard inputs, clear labels above fields, simple focus states, no floating labels or morphing shapes.
    • Typography: System fonts or simple sans-serif, 14-16px body text, clear hierarchy.
    • Spacing: Use a consistent scale (4/8/12/16/24/32px).
    • Borders/Shadows: 1px solid subtle borders; shadows should be subtle (e.g., 0 2px 8px rgba(0,0,0,0.1) max).
    • Transitions: 100-200ms ease, simple opacity/color changes; avoid bouncy or transform animations.
    • Layouts: Standard grid/flex, predictable structure, max-width 1200-1400px centered.

  5. Use Uncodixify to improve GPT UI generation

    main

    Uncodixify provides a rule set (uncodixify.md) designed to prevent LLMs (like GPT) from falling into repetitive, poor UI design patterns such as floating cards, oversized rounded corners, gradient-heavy dashboards, decorative labels, and glass panels.

    To use it, include the contents of uncodixify.md in your prompt or system instructions when requesting UI generation. This forces the model away from its default 'GPT UI' habits toward more standard, professional interfaces.

  6. Install Uncodixify as an Agent Skill

    main

    Uncodixify can be installed as an agent skill for AI coding agents that support the skill format (such as Codex or Claude Code). Use the following command to add the skill to your environment.

    npx skills add cyxzdev/Uncodixfy

  7. Select colors using the Uncodixfy priority order

    main

    When choosing a color palette, follow this strict priority order:

    1. Highest priority: Use existing colors from the user's project (search project files for existing tokens).
    2. Secondary priority: If no project palette exists, select a palette from the predefined Uncodixfy palettes (Dark or Light).
    3. Constraint: Do NOT invent random color combinations unless explicitly requested. Do not use blue-heavy palettes if dark muted colors are more appropriate.

  9. Select Light Color Schemes

    main

    When designing or drawing inspiration for Uncodexy-UI, you can choose from several predefined Light Color Schemes. Each palette provides specific hex codes for Background, Surface, Primary, Secondary, Accent, and Text colors. You do not have to always choose the first palette; you can select one randomly to maintain variety.

    | Palette | Background | Surface | Primary | Secondary | Accent | Text |
|--------|-----------|--------|----------|-----------|--------|------|
| Cloud Canvas | `#fafafa` | `#ffffff` | `#2563eb` | `#7c3aed` | `#dc2626` | `#0f172a` |
| Pearl Minimal | `#f8f9fa` | `#ffffff` | `#0066cc` | `#6610f2` | `#ff6b35` | `#212529` |
| Ivory Studio | `#f5f5f4` | `#fafaf9` | `#0891b2` | `#06b6d4` | `#f59e0b` | `#1c1917` |
| Linen Soft | `#fef7f0` | `#fffbf5` | `#d97706` | `#ea580c` | `#0284c7` | `#292524` |
| Porcelain Clean | `#f9fafb` | `#ffffff` | `#4f46e5` | `#8b5cf6` | `#ec4899` | `#111827` |
| Cream Elegance | `#fefce8` | `#fefce8` | `#65a30d` | `#84cc16` | `#f97316` | `#365314` |
| Arctic Breeze | `#f0f9ff` | `#f8fafc` | `#0284c7` | `#0ea5e9` | `#f43f5e` | `#0c4a6e` |
| Alabaster Pure | `#fcfcfc` | `#ffffff` | `#1d4ed8` | `#2563eb` | `#dc2626` | `#1e293b` |
| Sand Warm | `#faf8f5` | `#ffffff` | `#b45309` | `#d97706` | `#059669` | `#451a03` |
| Frost Bright | `#f1f5f9` | `#f8fafc` | `#0f766e` | `#14b8a6` | `#e11d48` | `#0f172a |

  10. Reference Light Color Schemes

    main

    Use these predefined palettes for light mode interfaces. Select one randomly for inspiration if no project colors are provided.

    | Palette | Background | Surface | Primary | Secondary | Accent | Text |
|--------|-----------|---------|---------|-----------|--------|------|
| Cloud Canvas | `#fafafa` | `#ffffff` | `#2563eb` | `#7c3aed` | `#dc2626` | `#0f172a` |
| Pearl Minimal | `#f8f9fa` | `#ffffff` | `#0066cc` | `#6610f2` | `#ff6b35` | `#212529` |
| Ivory Studio | `#f5f5f4` | `#fafaf9` | `#0891b2` | `#06b6d4` | `#f59e0b` | `#1c1917` |
| Linen Soft | `#fef7f0` | `#fffbf5` | `#d97706` | `#ea580c` | `#0284c7` | `#292524` |
| Porcelain Clean | `#f9fafb` | `#ffffff` | `#4f46e5` | `#8b5cf6` | `#ec4899` | `#111827` |
| Cream Elegance | `#fefce8` | `#fefce8` | `#65a30d` | `#84cc16` | `#f97316` | `#365314` |
| Arctic Breeze | `#f0f9ff` | `#f8fafc` | `#0284c7` | `#0ea5e9` | `#f43f5e` | `#0c4a6e` |
| Alabaster Pure | `#fcfcfc` | `#ffffff` | `#1d4ed8` | `#2563eb` | `#dc2626` | `#1e293b` |
| Sand Warm | `#faf8f5` | `#ffffff` | `#b45309` | `#d97706` | `#059669` | `#451a03` |
| Frost Bright | `#f1f5f9` | `#f8fafc` | `#0f766e` | `#14b8a6` | `#e11d48` | `#0f172a` |

  11. Avoid banned UI patterns and mistakes

    main

    Strictly avoid the following patterns to prevent the 'AI-generated' look:

    Structural Bans:

    • No Eyebrow Labels: Avoid <small> tags used as headers or uppercase labels with letter-spacing (e.g., MARCH SNAPSHOT).
    • No Hero Sections in Dashboards: Do not use decorative hero blocks inside internal tools.
    • No Floating Shells: Avoid glassmorphism, frosted panels, or detached floating sidebars.
    • No Excessive Rounding: Avoid border radii in the 20px-32px range; stick to 8-12px.

    Visual Bans:

    • No Decorative Gradients: Avoid soft corporate gradients, conic-gradient donuts, or gradient fills in progress bars.
    • No Dramatic Shadows: Avoid large box shadows (e.g., 0 24px 60px rgba(0,0,0,0.35)).
    • No 'Control Room' Cosplay: Avoid random glows, blur haze, or fake charts used as decoration.
    • No Pill Overload: Avoid using rounded spans or pill-shaped buttons for everything.

  12. Reference Dark Color Schemes

    main

    Use these predefined palettes for dark mode interfaces. Select one randomly for inspiration if no project colors are provided.

    | Palette | Background | Surface | Primary | Secondary | Accent | Text |
|--------|-----------|---------|---------|-----------|--------|------|
| Midnight Canvas | `#0a0e27` | `#151b3d` | `#6c8eff` | `#a78bfa` | `#f472b6` | `#e2e8f0` |
| Obsidian Depth | `#0f0f0f` | `#1a1a1a` | `#00d4aa` | `#00a3cc` | `#ff6b9d` | `#f5f5f5` |
| Slate Noir | `#0f172a` | `#1e293b` | `#38bdf8` | `#818cf8` | `#fb923c` | `#f1f5f9` |
| Carbon Elegance | `#121212` | `#1e1e1e` | `#bb86fc` | `#03dac6` | `#cf6679` | `#e1e1e1` |
| Deep Ocean | `#001e3c` | `#0a2744` | `#4fc3f7` | `#29b6f6` | `#ffa726` | `#eceff1` |
| Charcoal Studio | `#1c1c1e` | `#2c2c2e` | `#0a84ff` | `#5e5ce6` | `#ff375f` | `#f2f2f7` |
| Graphite Pro | `#18181b` | `#27272a` | `#a855f7` | `#ec4899` | `#14b8a6` | `#fafafa` |
| Void Space | `#0d1117` | `#161b22` | `#58a6ff` | `#79c0ff` | `#f78166` | `#c9d1d9` |
| Twilight Mist | `#1a1625` | `#2d2438` | `#9d7cd8` | `#7aa2f7` | `#ff9e64` | `#dcd7e8` |
| Onyx Matrix | `#0e0e10` | `#1c1c21` | `#00ff9f` | `#00e0ff` | `#ff0080` | `#f0f0f0` |