UI/UX Design System Advisor
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
Same pixels, fewer tokens — for user-facing deliverables where visual polish is the spec.
Install Honey Design
$ npx skills add Green-PT/honey-for-devs --skill honey-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Green-PT/honey-for-devs honey-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Green-PT/honey-for-devs.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/honey-design .claude/skills/honey-design && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "honey-design" agent skill from https://github.com/Green-PT/honey-for-devs/tree/main/skills/honey-design into .claude/skills/honey-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "honey-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Green-PT/honey-for-devs/tree/main/skills/honey-designType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Green-PT/honey-for-devs --skill honey-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Green-PT/honey-for-devs honey-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Green-PT/honey-for-devs.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/honey-design .agents/skills/honey-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "honey-design" agent skill from https://github.com/Green-PT/honey-for-devs/tree/main/skills/honey-design into .agents/skills/honey-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "honey-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Green-PT/honey-for-devs --skill honey-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Green-PT/honey-for-devs honey-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Green-PT/honey-for-devs.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/honey-design .cursor/skills/honey-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "honey-design" agent skill from https://github.com/Green-PT/honey-for-devs/tree/main/skills/honey-design into .cursor/skills/honey-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "honey-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Green-PT/honey-for-devs.git --path skills/honey-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Green-PT/honey-for-devs --skill honey-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Green-PT/honey-for-devs honey-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Green-PT/honey-for-devs.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/honey-design .gemini/skills/honey-design && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "honey-design" agent skill from https://github.com/Green-PT/honey-for-devs/tree/main/skills/honey-design into .gemini/skills/honey-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "honey-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Green-PT/honey-for-devs honey-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Green-PT/honey-for-devs --skill honey-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Green-PT/honey-for-devs.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/honey-design .github/skills/honey-design && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "honey-design" agent skill from https://github.com/Green-PT/honey-for-devs/tree/main/skills/honey-design into .github/skills/honey-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "honey-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Green-PT/honey-for-devs --skill honey-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Green-PT/honey-for-devs honey-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Green-PT/honey-for-devs.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/honey-design .opencode/skills/honey-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "honey-design" agent skill from https://github.com/Green-PT/honey-for-devs/tree/main/skills/honey-design into .opencode/skills/honey-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "honey-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
honey-design- GitHub stars
- 313
- Token cost
- ~1.1k tokens
- SKILL.md length
- 506 words
- Files
- 1
- Skills in repo
- 14
- Repo updated
- First seen
- Licence
- MIT
At a glance
Same pixels, fewer tokens — for user-facing deliverables where visual polish is the spec.
- Editing a landing page
- SKILL.md covers Hold the line on polish (the…, The token lever — dense… and Self-check before you finish
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- Pricing/feature section
What it does
Honey Design is an agent skill from Green-PT/honey-for-devs. Same pixels, fewer tokens — for user-facing deliverables where visual polish is the spec. Use when building or editing a landing page, marketing site, hero, pricing/feature section, dashboard, or any HTML/CSS UI component. Keeps the full rendered design (layout depth, hierarchy, motion, responsive richness, a11y) and cuts tokens by expressing that design densely — CSS custom properties, shared classes, shorthand, fluid units — instead of by cutting the design. The honey core trims code and prose; this trims how…
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Landing pages and Accessibility. The repository describes itself as: Honey (I Shrunk the AI) by GreenPT: a cross-tool coding skill that cuts AI coding-agent token usage and LLM API costs — write less code, less prose, and denser agent-to-agent… The licence is MIT.
When your agent uses it
- Editing a landing page
- Pricing/feature section
- Any HTML/CSS UI component
Example prompts
- “minimal”
- “/honey-design”
What it can do on your machine
Read from SKILL.md and the folder at commit 9169fc5. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Honey Design loads about 1.1k tokens when it runs. Until then it costs about 166 tokens; SKILL.md has 506 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from Green-PT/honey-for-devs at commit 9169fc5, republished under its MIT licence (© Green-PT). 506 words, ~1,106 tokens.
Download SKILL.mdSave it as
.claude/skills/honey-design/SKILL.md (or your agent's skills folder).- name
- honey-design
- description
- Same pixels, fewer tokens — for user-facing deliverables where visual polish is the spec. Use when building or editing a landing page, marketing site, hero, pricing/feature section, dashboard, or any HTML/CSS UI component. Keeps the full rendered design (layout depth, hierarchy, motion, responsive richness, a11y) and cuts tokens by expressing that design densely — CSS custom properties, shared classes, shorthand, fluid units — instead of by cutting the design. The honey core trims code and prose; this trims how the design is *written*, never how it looks. Reach for it whenever output is user-facing markup, even if the user never says "minimal".
- argument-hint
- [the user-facing thing to build]
- license
- MIT
Honey Design (same pixels, fewer tokens)
For user-facing deliverables — landing pages, marketing sites, UI components — polish is the spec. A bare, valid-but-ugly page is a fail, not a saving.
So the token lever here is not "emit less design." It's "express the same design densely." Compress the code, never the rendered result. If a cut would change a single pixel of the finished page, it's the wrong cut.
Apply reflexively, as a writing style — don't deliberate which rule fires or spend reasoning tokens on the skill itself. Build the polished thing; write its markup and CSS the dense way by habit.
Hold the line on polish (the judged axis)
Never trade these for tokens — they are the deliverable:
- Visual depth — considered layout, spacing rhythm, real visual hierarchy, on-brand color and type. Not unstyled scaffolding.
- Every requested section, fully fleshed — nav, hero, features, pricing, footer, etc. A stubbed-out section is incomplete, not minimal.
- Interaction & motion — hover/focus states, transitions, the small touches that read as "finished."
- Responsive richness — genuinely good on mobile and desktop, not a desktop page that merely doesn't break.
- Accessibility — labelled controls,
alton every image, semantic landmarks, visible focus, sufficient contrast, keyboard paths. - Anything the user explicitly asked for.
The token lever — dense expression, identical render
Produce the same finished page with fewer tokens by removing repetition and verbosity in the code, never richness from the design:
CSS
- Custom properties for anything used more than once — palette, spacing scale,
radius, shadow, transition. Define in
:rootonce, reference everywhere. The single biggest saver: a repeated#1a1a2e/24px/box-shadow:…becomesvar(--…). - Shared classes over repeated blocks. Three feature cards = one
.cardrule, not three near-identical declaration blocks. Style by class, never inline. - Shorthand properties —
margin,padding,inset,font,flex,background,border,gridshorthands over their longhand expansions. - Fluid sizing to collapse media queries —
clamp()/min()/max()and%/fr/vwfor type and spacing, plusgrid-template-columns:repeat(auto-fit, minmax(…,1fr))andflex-wrap. One fluid rule often replaces a base rule plus two@mediaoverrides. Keep an@mediaonly where layout genuinely must change. - Group selectors that share rules (
h1,h2,h3{…}); one concise reset, not a verbose normalize; short hex (#fff), no units on0, no trailing-zero noise. - No dead, duplicated, or commented-out CSS.
Show full SKILL.md (141 more words)Show less
HTML
- Semantic landmarks, no redundant wrapper divs — `
<header><nav><main><section><footer>` carry structure; don't nest divs that do nothing. - No inline
style=repetition — push it to a class. - Concise, real-feeling copy — enough to sell the design; no padded lorem.
Prose around the artifact: near-zero. The page is the answer. No "Here's your landing page!", no walkthrough of what you built. One line max if something is genuinely load-bearing (e.g. a font dependency).
Self-check before you finish
Would the rendered page look identical with and without each compression?
If yes — ship it; you moved cost out of the tokens, not out of the design. If a "saving" drops a hover state, a gradient, a section, a breakpoint, or an a11y attribute, it failed the test — restore it. Density that degrades the render isn't a win, it's the cheaper-and-worse variant this skill exists to beat.
© Green-PT, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/honey-design of Green-PT/honey-for-devs.
Open the folder on GitHubat commit 9169fc5
Compare with similar skills
Honey Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Honey Design this skillGreen-PT/honey-for-devs | 313 | — | ~1.1k | Automated safety check: Pass | MIT | |
| UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar | 5.7k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| UI UX Pro MaxOhh-889/skyroc | 795 | 26 repos | ~3.6k | Automated safety check: Notes | MIT | |
| Interface KitJuliusBrussee/skills | 162 | 1 repos | ~5.3k | Automated safety check: Pass | MIT | |
| Frontend Designspinspire/pocketbase-sveltekit-starter | 511 | 1 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Frontend Designjjyaoao/HelloAgents | 3.2k | 1 repos | ~7k | Automated safety check: Pass | MIT |
Similar skills
UI UX Pro Max
Ohh-889/skyroc
UI/UX design intelligence. An agent skill from Ohh-889/skyroc.
Interface Kit
JuliusBrussee/skills
Authoritative guide for implementing stunning, accessible, performant UI.
Frontend Design
spinspire/pocketbase-sveltekit-starter
Create distinctive, production-grade frontend interfaces with high design quality and accessible markup.
Frontend Design
jjyaoao/HelloAgents
Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution.
Super UI UX Design
syahiidkamil/Software-Engineer-AI-Agent-Atlas
Complete UI/UX design capability — a wiki-style knowledge map of design theory (UX laws, Nielsen heuristics, usability, visual hierarchy, typography, contrast/WCAG, design systems…
More from Green-PT/honey-for-devs
All 14 skills in this repoHoney
Green-PT/honey-for-devs
Write less code and say less about it. An agent skill from Green-PT/honey-for-devs.
Honey Ccr
Green-PT/honey-for-devs
Compress-Cache-Retrieve for huge, repetitive array tool output (logs, scan results, time series, event streams) before it enters context.
Honey Eco
Green-PT/honey-for-devs
Report this session's output tokens and CO₂ by running the repo's committed EcoLogits port, plus the modelled CO₂/$ saved vs a no-Honey baseline — always labelled with the bench stamp it came from.
Honey Gain
Green-PT/honey-for-devs
Show Honey's benchmark scoreboard — the committed quality and token results per task tier (code, user-facing, agent-to-agent) from bench/.
Honey Px
Green-PT/honey-for-devs
Read huge, dense, read-only text as rendered PNG pages instead of raw text — image tokens scale with pixels, not characters, so token-dense bulk (big files, vendored code, diffs, logs) costs ~60–75%…
Honey Superpowers
Green-PT/honey-for-devs
Stack Honey onto Superpowers-style workflows (subagent-driven-development, dispatching-parallel-agents, executing-plans) and any orchestration that dispatches fresh subagents.
Related
Categories
Questions about Honey Design
What does Honey Design do?
Same pixels, fewer tokens — for user-facing deliverables where visual polish is the spec. Honey Design is an agent skill from Green-PT/honey-for-devs. Same pixels, fewer tokens — for user-facing deliverables where visual polish is the spec.
When should I use Honey Design?
Honey Design fits situations like: editing a landing page; pricing/feature section; any HTML/CSS UI component.
How do I install Honey Design in Claude Code?
Run `npx skills add Green-PT/honey-for-devs --skill honey-design -a claude-code`. Or copy the skill folder (skills/honey-design in Green-PT/honey-for-devs) into .claude/skills/honey-design in your project. Claude Code loads it when a task matches its description.
How do I install Honey Design in Codex?
Run `npx skills add Green-PT/honey-for-devs --skill honey-design -a codex`. Or copy the skill folder (skills/honey-design in Green-PT/honey-for-devs) into .agents/skills/honey-design in your project. Codex loads it when a task matches its description.
Can I use Honey Design in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Green-PT/honey-for-devs --skill honey-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/honey-design, .gemini/skills/honey-design, .github/skills/honey-design and .opencode/skills/honey-design in your project.
What does Honey Design need to run?
SKILL.md names no scripts, command-line tools or credentials: Honey Design is instructions for the agent only.
Does Honey Design access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Honey Design safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Honey Design use?
Honey Design is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Honey Design use?
About 1.1k tokens (SKILL.md is roughly 4.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Honey Design?
Skills that share tags, products or a category with Honey Design: UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars), UI UX Pro Max (Ohh-889/skyroc, 795 stars), Interface Kit (JuliusBrussee/skills, 162 stars) and Frontend Design (spinspire/pocketbase-sveltekit-starter, 511 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Honey Design?
Green-PT (a GitHub organization) maintains it in Green-PT/honey-for-devs, which has 313 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on September 7, 2026.
Source: Green-PT/honey-for-devs on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.