# Gentle Design

Trigger: design a screen or page, mockup, landing page, UI directions, artboards, try a...

- Repository: https://github.com/Gentleman-Programming/gentle-shell (1519 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Gentleman-Programming/gentle-shell --skill gentle-design -g -a claude-code -y`
Codex: `npx skills add Gentleman-Programming/gentle-shell --skill gentle-design -g -a codex -y`
Cursor: `npx skills add Gentleman-Programming/gentle-shell --skill gentle-design -g -a cursor -y`
Gemini CLI: `npx skills add Gentleman-Programming/gentle-shell --skill gentle-design -g -a gemini-cli -y`

## Description

Trigger: design a screen or page, mockup, landing page, UI directions, artboards, try a different approach, design system sync. Write self-contained HTML design directions under design/<slug>/.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

## Activation Contract

Use this skill by default whenever the user asks, in plain words, for a UI design, mockup, screen, landing page, or visual directions, or iterates on artboards under `design/`. Do not use it to implement production code in the project's stack.

The `/gentle:design` commands are optional shortcuts: every action also works from a plain request, through this skill and the `gentle_design` tool (`list`, `open`, `stop`, `implement`, `handoff`).

## Hard Rules

- Every artboard is one self-contained HTML file: inline CSS, JS, and SVG; system font stacks only. Never reference external URLs, CDNs, remote fonts, images, or scripts.
- Use realistic content for the audience; no lorem ipsum or placeholder names.
- Accessible markup: semantic elements and landmarks, WCAG AA contrast, visible focus styles, `prefers-reduced-motion` respected for any motion.
- When `design/system.md` exists, read it first and use only its tokens and component rules; run the Self-check from "Design system sync" before finishing any artboard.
- Ask at most one clarifying question, and only when the brief lacks the goal or the content.
- Iterating edits only the targeted artboard. Never rewrite the others.

## Decision Gates

The rest: https://github.com/Gentleman-Programming/gentle-shell/blob/HEAD/skills/design/SKILL.md