gentle-design skill | PlugMCP

gentle-design

Gentleman-Programming2.5kstars

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

Developer ToolsDesign ToolsAutonomous Agents

Install GitHub

1---2name: gentle-design3description: Trigger: design a screen or page, mockup, landing page, UI directions, artboards, try a different approach…4---56# skills/design/SKILL.md

SKILL.mdAgent skill

Transport: File
Status: Listed

SKILL.md

Install

The skill file stays in the publisher's repository.

Paste the copied command in a terminal. It installs this SKILL.md into that agent.

shterminal

1npx skills add Gentleman-Programming/gentle-shell --skill design -a cursor -y

Paste the copied command in a terminal. It installs this SKILL.md into that agent.

shterminal

1npx skills add Gentleman-Programming/gentle-shell --skill design -a claude-code -y

Paste the copied command in a terminal. It installs this SKILL.md into that agent.

shterminal

1npx skills add Gentleman-Programming/gentle-shell --skill design -a codex -y

Paste the copied command in a terminal. It installs this SKILL.md into that agent.

shterminal

1npx skills add Gentleman-Programming/gentle-shell --skill design -a grok -y

Send the copied message in a Grok Bot chat. The Bot fetches this SKILL.md from GitHub and adds it to the skills all your Bots share.

txtGrok Bot chat

1Install this skill: https://github.com/Gentleman-Programming/gentle-shell/tree/HEAD/skills/design

Download skill skills/design/SKILL.md on GitHub

skills/design/SKILL.mdMarkdown · UTF-8

Skill facts

Agent skill

File: skills/design/SKILL.md
Publisher: Gentleman-Programming
Hosting

FAQ

Questions

From the publisher

SKILL.md

name: gentle-design
description: Trigger: design a screen or page, mockup, landing page, UI directions, artboards, try a different approach, design system sync. HTML design directions in design/<slug>/.
license: Apache-2.0
metadata: author: gentleman-programming version: "1.0"

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. When gentle_design or gentle_design_comments is not declared, call it from codemode as tools.gentle_design({...}) or tools.gentle_design_comments({...}) with the same arguments.

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

Situation	Action
New brief	Write N clearly different directions (3 by default, or the number asked) to a new `design/<slug>/`
Feedback on one artboard	Edit that file only; keep its manifest entry, update `tradeoff` if it changed
"Save and try a different approach"	Add a new artboard with the next `NN`; keep previous ones; append it to the manifest
User wants to tune values (spacing, color, type scale)	Add sliders or controls in the artboard plus a "Copy as prompt" button that copies the chosen values as a prompt

`list` reports	Action
`system.exists` false and `designSources` present	Run "Design system sync" first, tell the user in one line that you synced the project's design system, then design with it
No `designSources`	Skip the sync and design freely
`system.staleSources` present	Name those sources, say `design/system.md` may be outdated, and offer to sync again before designing; re-sync only with the user's OK, and never use the stale tokens silently

{
  "title": "Pricing page",
  "brief": "Pricing page for a note-taking app aimed at students",
  "feature": "odd/tasks/pricing-page.md",
  "artboards": [
    { "file": "01-comparison-table.html", "title": "Comparison table", "tradeoff": "Dense and scannable; weaker emotional pull", "width": 1440, "height": 900 },
    { "file": "02-single-plan-hero.html", "title": "Single plan hero", "tradeoff": "Strong focus; hides plan differences", "width": 1440, "height": 900 }
  ]
}

{
  "version": 1,
  "comments": [
    { "id": "k3x9p2ab", "file": "02-bold.html", "selector": "body > header > h1", "excerpt": "Ship faster", "comment": "Make the headline shorter.", "createdAt": "2026-10-26T10:00:00.000Z", "status": "open", "sentAt": null, "resolvedAt": null },
    { "id": "m7q2w9cd", "file": "02-bold.html", "selector": "#cta", "excerpt": "Start", "comment": "The button jumps during the hover transition.", "screenshot": ".screenshots/m7q2w9cd.png", "createdAt": "2026-10-26T10:05:00.000Z", "status": "open", "sentAt": null, "resolvedAt": null }
  ]
}

gentle-design

Install

Skill facts

Questions

How do I install gentle-design?

Where does gentle-design live?

Which agents can use gentle-design?

SKILL.md

Activation Contract

Hard Rules

Decision Gates

Before designing

Execution Steps

Design system sync

Canvas comments

Output Contract

References