CleanUI — 让 Codex 生成像真实 App 一样好看的 UI

cleanui

GitHub: https://github.com/PeterHdd/cleanui

指标	值
Stars	20
Language
License	MIT
Topics	N/A

README 摘要

CleanUI

A UI design skill for Codex that produces better-looking mobile apps and websites.

Output

Without the skill	With the skill

All of these images were created using Expo, and are the web version, which means you can run them in the terminal with expo start –web.

The Problem

Codex generates UIs that look like AI made them — dark floating nav bars, Unicode icons, the same layout template for every app, no metadata on list items, and overall flat, lifeless designs.

The Fix

CleanUI is a skill that teaches Codex to generate UIs that look like real shipping apps. It enforces proper structure, layout variety, platform-native patterns, and design taste.

Install

npx skills add peterhdd/cleanui

What It Covers

• Hard No List — Banned patterns that AI generators consistently produce
• Layout Intelligence — Match layout to content type instead of reusing the same template
• Design Taste — Color restraint, category icons, metadata on list items, filters
• Mobile Rules — iOS (HIG), Android (Material 3), React Native cross-platform
• Web Rules — Landing pages, sign-in pages, dashboards, navigation, pricing, testimonials
• Pre-Output Checklist — Verification list to catch issues before code is returned

Tested Across

Domain	Platform	Result
Banking app	Expo (iOS/Android)	Category icons, metadata, filters, proper nav
Fitness tracker	Expo (iOS/Android)	Activity metrics, workout icons, streak cards
Recipe app	Expo (iOS/Android)	Image grids, horizontal scroll categories
SaaS landing page	React + Tailwind	Proper hero, sections, pricing, footer
Sign-in page	React + Tailwind	Two-column brand + form layout
Dashboard	React + Tailwind	Sidebar, stat cards, filtered lists, activity feed

License

MIT

---

本文基于 GitHub 项目 PeterHdd/cleanui 整理。