Uncodixfy

Prevents generic AI/Codex UI patterns when generating frontend code. Use this skill whenever generating HTML, CSS, React, Vue, Svelte, or any frontend UI code to enforce clean, human-designed aesthetics inspired by Linear, Raycast, Stripe, and GitHub instead of typical AI-generated UI.

2,674 stars 167 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add cyxzdev/Uncodixfy --skill uncodixfy

Manual install

git clone --depth 1 https://github.com/cyxzdev/Uncodixfy.git /tmp/Uncodixfy
mkdir -p ~/.claude/skills
cp -r /tmp/Uncodixfy/. ~/.claude/skills/uncodixfy

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Uncodixify

This document exists to teach you how to act as non-Codex as possible when building UI.

Codex UI is the default AI aesthetic: soft gradients, floating panels, eyebrow labels, decorative copy, hero sections in dashboards, oversized rounded corners, transform animations, dramatic shadows, and layouts that try too hard to look premium. It's the visual language that screams "an AI made this" because it follows the path of least resistance.

This file is your guide to break that pattern. Everything listed below is what Codex UI does by default. Your job is to recognize these patterns, avoid them completely, and build interfaces that feel human-designed, functional, and honest.

When you read this document, you're learning what NOT to do. The banned patterns are your red flags. The normal implementations are your blueprint. Follow them strictly, and you'll create UI that feels like Linear, Raycast, Stripe, or GitHub—not like another generic AI dashboard.

This is how you Uncodixify.
## Keep It Normal (Uncodexy-UI Standard)

- Sidebars: normal (240-260px fixed width, solid background, simple border-right, no floating shells, no rounded outer corners)
- Headers: normal (simple text, no eyebrows, no uppercase labels, no gradient text, just h1/h2 with proper hierarchy)
- Sections: normal (standard padding 20-30px, no hero blocks inside dashboards, no decorative copy)

Read the full skill on GitHub

Details

Skill name: uncodixfy
Repository: cyxzdev/Uncodixfy
License: MIT
Repo updated: 18 March 2026

FAQ

What does the Uncodixfy skill do?

How do I install the Uncodixfy skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add cyxzdev/Uncodixfy --skill uncodixfy. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Uncodixfy popular?

It lives in cyxzdev/Uncodixfy, which has 2,674 GitHub stars and 167 forks.

Related skills

Design Dna

2.1k

zanwei/design-dna

Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides images, screenshots, or URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions, (3) a user has a Design DNA JSON and content and wants a design generated from it, or (4) any combination of these phases. Triggers on "design DNA", "e

Frontend & Design114

Pixel2motion

2.6k

nolangz/pixel2motion

Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge smoothness as the primary hard gate and IoU optimized as high as reasonably possible without a fixed global threshold, then into a choreographed logo animation delivered as standalone JS-rendered HTML, applying Disney's 12 animation principles. Use when asked to animate a logo, build a logo reveal / splash screen / brand intro, convert a logo image into animated SVG or HTML, add motion to a vectorized mark, or create loading/idle/hover motion for a brand mark. v2: also handles self-crossing draw-on choreography (sp

Frontend & Design212

Logo Generator

2.3k

op7418/logo-generator-skill

Generate professional SVG logos and high-end showcase images. Use when the user wants to: (1) Create a logo or icon for their product/brand, (2) Generate logo design concepts based on product information, (3) Create professional logo showcase presentations with multiple background styles, (4) Export logos in various formats (SVG, PNG), or (5) Iterate on logo designs with different visual styles. Supports geometric patterns, dot matrix designs, line systems, and mixed compositions. Generates showcase images using Nano Banana (Gemini image generation) with 12 professional background styles.

Frontend & Design177

Oil Motion

2.7k

oil-oil/oil-motion

把 AI 生成或已有的视频、序列帧变成随滚动、指针、拖动、触摸、设备方向、音频、数据或状态变化的网页动画：设计动作方向，生成关键帧与视频，整理成图集或视频，编译时间轴并接入运行时。用户需要角色转向、产品拆解、镜头穿越、一镜到底转场，或要清理、抠色、补帧、压缩绿幕视频与雪碧图时使用。不用于纯 CSS、JS、SVG、Lottie 或实时 3D 就能完成的界面过渡与微交互（交给普通前端实现），也不用于独立成片剪辑、单张配图或静态页面。

Frontend & Design201

Zhengxi Views

1.8k

lyra81604/zhengxi-views

郑希观点库——基于易方达基金经理郑希 2012–2026 年全部公开观点原文语料，外加从语料蒸馏、有本人原话佐证的郑希投资方法的可溯源 research skill。能做： (1) 溯源问答——他怎么看 AI算力/光通信/新能源/半导体/ROE 等，引用其原话作答； (2) 讲解他的投资方法/框架/选股逻辑；(3) 前瞻应用——用他的方法分析当下任意主题/行业/个股，语料没谈过也能据框架推演； (4) 风格化点评——用他季报/手记的口吻写市场点评、季度展望； (5) 言行对照——用他全部基金真实数据（季度持仓/净值/业绩/规模/任职回报）核对"说的"与"买的"，或答他的业绩/重仓/规模； (6) 全市场查询对比——内置约 2.7 万只基金列表，按需抓任意基金真实数据做查询或与郑希对比； (7) 郑希框架评分——给一只基金按他的方法打分（多像郑希会买的）。 When the user mentions 郑希/易方达郑希/zhengxi, asks his view on a sector/stock/theme, his 投资方法/框架/选股/风格/持仓/业绩/净值/规模, wants to apply his approach, a commentary 用郑希口吻, to check words vs holdings, or to look up/compare/score A

Frontend & Design192

Markstream Vue2 Vite

Simon-He95/markstream-vue

Integrate markstream-vue2 into a Vue 2 plus Vite app. Use when Codex needs Vite-friendly worker imports, `?worker` or `?worker&inline` setup for Mermaid or KaTeX, modern CSS ordering, or Vue 2 compatibility in a Vite-based repository.

Frontend & DesignIn 2 lists188

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.