ChatGPT Style Design — Design skill for Claude Code

ChatGPT-Like Minimal UI Skill

An unofficial, ChatGPT-inspired design system skill. Not affiliated with or endorsed by OpenAI.

A reusable design-system skill for interfaces that should feel calm, minimal, black/white/gray dominant, softly rounded, and only lightly accented with blue.

Included

• SKILL.md — complete behavior and design rules
• assets/password-gate-reference.png — approved password-gate visual reference
• assets/home-reference.png — approved home-page visual reference
• references/design-system.md — implementable light/dark tokens, typography, spacing, sizing, and accessibility defaults

Important implementation choices

• Uses Inter, not Söhne, unless the product owner explicitly supplies licensed Söhne assets and usage rights.
• Includes Chinese font fallbacks: PingFang SC, Noto Sans SC, and Microsoft YaHei.
• Uses a 4px spacing scale and explicit control/type sizing.
• Includes a neutral dark theme.
• Keeps #007AFF as this system's intentionally Apple-like accent, not as an OpenAI/ChatGPT brand color.

Before design work, inspect both reference images in `assets/`.

Installation

Whichever method you use, keep the folder name as `chatgpt-style-design` so it matches the `name` field in `SKILL.md` (some tools, such as Cursor, require this).

Claude (claude.ai and desktop app)

1. Download chatgpt-style-design.zip from the Releases page.
2. Go to Customize → Skills, click +, choose Upload a skill, and select the zip.

Claude Code

git clone https://github.com/ItsLucasLi/chatgpt-style-design.git ~/.claude/skills/chatgpt-style-design

To install for a single project only, clone into `.claude/skills/chatgpt-style-design` inside the project instead.

ChatGPT

1. Download chatgpt-style-design.zip from the Releases page.
2. In the sidebar, open Plugins, switch to