Design System
affaan-m/ECC
Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with…
Designing side-by-side comparison tools (plan-compare, product-compare, alternative-compare) that help users decide rather than just listing features.
$ npx skills add rampstackco/claude-skills --skill comparison-tool-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install rampstackco/claude-skills comparison-tool-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/rampstackco/claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/comparison-tool-design .claude/skills/comparison-tool-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 "comparison-tool-design" agent skill from https://github.com/rampstackco/claude-skills/tree/main/skills/comparison-tool-design into .claude/skills/comparison-tool-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "comparison-tool-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/rampstackco/claude-skills/tree/main/skills/comparison-tool-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 rampstackco/claude-skills --skill comparison-tool-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install rampstackco/claude-skills comparison-tool-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rampstackco/claude-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/comparison-tool-design .agents/skills/comparison-tool-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 "comparison-tool-design" agent skill from https://github.com/rampstackco/claude-skills/tree/main/skills/comparison-tool-design into .agents/skills/comparison-tool-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "comparison-tool-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 rampstackco/claude-skills --skill comparison-tool-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install rampstackco/claude-skills comparison-tool-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rampstackco/claude-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/comparison-tool-design .cursor/skills/comparison-tool-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 "comparison-tool-design" agent skill from https://github.com/rampstackco/claude-skills/tree/main/skills/comparison-tool-design into .cursor/skills/comparison-tool-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "comparison-tool-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/rampstackco/claude-skills.git --path skills/comparison-tool-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 rampstackco/claude-skills --skill comparison-tool-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install rampstackco/claude-skills comparison-tool-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rampstackco/claude-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/comparison-tool-design .gemini/skills/comparison-tool-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 "comparison-tool-design" agent skill from https://github.com/rampstackco/claude-skills/tree/main/skills/comparison-tool-design into .gemini/skills/comparison-tool-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "comparison-tool-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 rampstackco/claude-skills comparison-tool-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 rampstackco/claude-skills --skill comparison-tool-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/rampstackco/claude-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/comparison-tool-design .github/skills/comparison-tool-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 "comparison-tool-design" agent skill from https://github.com/rampstackco/claude-skills/tree/main/skills/comparison-tool-design into .github/skills/comparison-tool-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "comparison-tool-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 rampstackco/claude-skills --skill comparison-tool-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 rampstackco/claude-skills comparison-tool-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rampstackco/claude-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/comparison-tool-design .opencode/skills/comparison-tool-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 "comparison-tool-design" agent skill from https://github.com/rampstackco/claude-skills/tree/main/skills/comparison-tool-design into .opencode/skills/comparison-tool-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "comparison-tool-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.
comparison-tool-designDesigning side-by-side comparison tools (plan-compare, product-compare, alternative-compare) that help users decide rather than just listing features.
Comparison Tool Design is an agent skill from rampstackco/claude-skills. Designing side-by-side comparison tools (plan-compare, product-compare, alternative-compare) that help users decide rather than just listing features. Axis selection, default-comparison logic, recommendation discipline. Honest about feature-list-dump (every feature in a row, no decision support), hidden-recommendation (biased comparison pretending to be neutral), and honest-comparison-with-guidance (genuine comparison plus opinionated recommendation) patterns. Triggers on comparison tool, plan compare, product…
Its SKILL.md is about 4.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 11 other files, including reference files (for example `README.md`, `references/axis-selection-patterns.md` and `references/common-comparison-failures.md`).
The repository describes itself as: Stack-agnostic Claude Skills covering the full website lifecycle: brand, design, content, SEO, dev, ops, growth, and research. Build, ship, audit, optimize. The licence is MIT.
12 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 482c9bf. It shows what the files ask for, not the result of running them.
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.
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.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Comparison Tool Design loads about 4.2k tokens when it runs, and up to ~17k if it reads all its reference files. Until then it costs about 194 tokens; SKILL.md has 1,906 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.
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.
The full file from rampstackco/claude-skills at commit 482c9bf, republished under its MIT licence (© rampstackco). 1,906 words, ~4,198 tokens.
.claude/skills/comparison-tool-design/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.A senior product marketing director's playbook for designing side-by-side comparison tools that help users decide rather than just listing features. Plan-compare, product-compare, alternative-compare. Axis selection, default-comparison logic, recommendation discipline. The discipline of building a comparison tool that earns the user's trust.
Most comparison tools fail in one of two ways. They dump every feature into a giant grid (4 options × 40 features = 160 cells) and ask the user to weigh everything against everything. The user leaves without choosing. Or they pretend to be neutral comparisons but are actually sales pitches with biased defaults and weighted framing; the user catches the bias and trust collapses.
The comparison tools that work do something different. Genuine like-for-like comparison plus an explicit opinionated recommendation. "For X audience, choose Y." The recommendation is visible, defended, and not the only path; users can override. The tool helps the user decide rather than asking them to decide alone.
The voice is the senior product marketing director who has watched comparison tools double conversion when redesigned with honest recommendations and watched them collapse when feature grids grew without decision support. Practical, opinionated about which axes matter, willing to call out when the comparison is decoration.
When to use this skill: scoping a comparison tool for the first time, auditing a feature-grid comparison that produces no conversion lift, designing recommendation logic that is honest about the recommendation, or deciding which axes earn placement in a comparison tool.
This skill spans side-by-side comparison tools. The growth-tooling distinctions:
calculator-design is calculators that give a number. This skill is comparing known options.quiz-and-assessment-design is quizzes that give a category. This skill is comparing options the user already knows about.comparison-tool-design (this skill) is axis selection, default-comparison logic, recommendation engine, filter-and-toggle UX.landing-page-copy is pricing-page copy; one specific application of comparison tools is the pricing page.content-strategy is upstream; what topics warrant comparison content.The audience: product marketers, growth marketers, content marketers running vs-pages and decision-support tooling, agencies running comparison work for clients.
Out of scope: calculator design (covered by calculator-design); quiz design (covered by quiz-and-assessment-design); the engineering implementation; specific Webflow/Framer/CMS configurations (those stay implementation-side).
Before designing the tool, decide whether a comparison tool is the right answer.
Comparison tools earn investment when:
Comparison tools do NOT earn investment when:
The decision is not "should we have a comparison tool"; it is "is the comparison tool the right tool for this decision."
Detail in references/comparison-tool-decision-criteria.md.
The keystone framing.
Feature-list-dump. Every option's every feature in a giant grid. No decision support. The user is asked to weigh 40 cells against each other; most leave without choosing. Cost: design effort wasted on a grid that does not produce decisions; the audience perceives the grid as overwhelming.
Hidden-recommendation. "Comparison" tool that is actually a sales pitch. Defaults favor one option; framing weights the answer; the recommendation is invisible but baked in. Trust erodes when users notice the bias. Cost: short-term conversion may look fine; long-term brand damage from "manipulative" reputation.
Honest-comparison-with-guidance. Genuine like-for-like comparison plus an explicit opinionated recommendation ("For X audience, choose Y"). The recommendation is visible, defended, and not the only path; users can override. Cost: design effort upfront is significant; conversion typically improves because users feel respected and helped.
The litmus test. Does the tool tell the user what to choose for their specific situation, with reasoning? If yes, honest-comparison-with-guidance. If it dumps features without guidance, feature-list-dump. If it says "the right answer is obviously [our preferred option]" without acknowledgment, hidden-recommendation.
The single most consequential decision in comparison tool design.
The principle. Axes (the rows of the comparison) should be the dimensions that genuinely affect the decision, not every feature available.
Strong axes.
Weak axes.
The 8-12 axis rule. Most production comparison tools work well with 8-12 axes. Beyond that, decision paralysis sets in.
Detail in references/axis-selection-patterns.md.
Which options compare by default, and why.
The principle. Defaults shape the user's first impression. Honest defaults reflect the audience's likely starting point; biased defaults shape conclusions.
Default options.
Default axes.
Bias-flattering defaults.
The discipline. Defaults serve the audience, not the brand. When defaults must reflect brand strength, do so honestly with disclosure.
Detail in references/default-comparison-logic.md.
When to recommend, how to defend the recommendation.
The principle. Comparison tools that recommend are more useful than tools that just list. The recommendation must be defensible.
Recommendation patterns.
Recommendation defense.
Anti-pattern: hidden recommendation. Tool that defaults to one option's victory through axis selection and framing, without explicit recommendation. Users feel manipulated when they catch the pattern.
Detail in references/recommendation-engine-design.md and references/honest-recommendation-discipline.md.
What users can adjust, what should stay fixed.
Filterable elements.
Fixed elements.
The filter-fatigue trap. Too many filters; user paralyzed.
The under-filtered trap. Tool too rigid; user cannot match their context.
The discipline. Filters that materially help; not filters for the sake of customization.
Detail in references/filter-and-toggle-patterns.md.
Why most comparisons fail to produce decisions.
Pattern 1: Too many cells. 40 features × 5 options = 200 cells; cognitive overload.
Pattern 2: All-checkmarks rows. Every option has the feature; the row produces no signal.
Pattern 3: Inconsistent axis terminology. Each vendor names features differently; user confused.
Pattern 4: Hidden costs. Pricing visible; fees, overage, integrations not surfaced.
Pattern 5: Apples-to-oranges options. Comparing genuinely different things; no axis applies cleanly.
Pattern 6: No recommendation. Tool lists; user must decide; user does not.
The cumulative effect. The tool produces no decision; users default to the brand they already heard of.
Detail in references/comparison-fatigue-patterns.md.
Rapid-fire. Diagnoses in references/common-comparison-failures.md.
When designing or auditing a comparison tool, walk these 12 considerations.
The output of the framework is a comparison tool that earns the user's trust by helping them decide, with recommendation that is honest and defensible.
This skill's output depends on data, measurements, or tool results it cannot generate on its own. When a required input, tool, or data source is unavailable or unverifiable, the sanctioned output is the deliverable with the gap stated: what was needed, what was actually obtained or verified, and which parts of the output are affected. Fabricating, estimating, or interpolating a required number to complete the deliverable is never sanctioned. A stated gap is a complete answer.
references/comparison-tool-decision-criteria.md - When comparison tools earn the build vs when written content serves.references/axis-selection-patterns.md - Strong axes, weak axes, the 8-12 rule.references/default-comparison-logic.md - Honest defaults vs bias-flattering defaults.references/recommendation-engine-design.md - When to recommend, how to defend, override path.references/filter-and-toggle-patterns.md - Filterable vs fixed elements; filter-fatigue trap.references/comparison-fatigue-patterns.md - Why most comparisons fail to produce decisions.references/honest-recommendation-discipline.md - The discipline that distinguishes hidden from honest recommendations.references/comparison-anti-patterns.md - The patterns that look like comparisons but degrade trust.references/common-comparison-failures.md - 8+ failure patterns with diagnoses and cures.The comparison tools that work as compounding assets are the ones the audience trusts to help them decide. Not because the tool flatters the brand. Not because the tool dumps features. Because the tool genuinely helps the user pick the option that fits their situation, and is honest about which option that is.
That is the bar. Below the bar are feature-list-dump (no decision support; user leaves without choosing) and hidden-recommendation (biased pretending to be neutral; trust collapses when caught). Above the bar are honest-comparison-with-guidance tools where axis selection, default logic, recommendation engine, and filter UX work together to produce decisions the audience trusts.
The discipline is in the design choices. The decision to build a comparison at all. The axes that earn placement. The defaults that serve the audience. The recommendation that is visible and defended. The filters that help the user match their context. The methodology that is disclosed. The maintenance that keeps the comparison current.
© rampstackco, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 10 other files (references) in skills/comparison-tool-design of rampstackco/claude-skills.
Open the folder on GitHubat commit 482c9bf
Comparison Tool 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 |
|---|---|---|---|---|---|---|
| Comparison Tool Design this skillrampstackco/claude-skills | 935 | — | ~4.2k | Automated safety check: Pass | MIT | |
| Design Systemaffaan-m/ECC | 274k | — | ~698 | Automated safety check: Pass | MIT | |
| Design Guidepaperclipai/paperclip | 98k | 1 repos | ~3.1k | Automated safety check: Pass | MIT | |
| Design Audit Against Rams' Principlesthedotmack/claude-mem | 97k | — | ~4.6k | Automated safety check: Pass | Apache-2.0 | |
| Figma Design to Codewarpdotdev/warp | 65k | 4 repos | ~2.9k | Automated safety check: Pass | AGPL-3.0 | |
| Design Consultationgarrytan/gstack | 136k | — | ~15k | Automated safety check: Notes | MIT |
affaan-m/ECC
Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with…
paperclipai/paperclip
Paperclip UI design system guide for building consistent, reusable frontend components.
thedotmack/claude-mem
Audits a design against Dieter Rams' ten principles of good design, scores each with evidence, and hands off a make-plan prompt for a new, refined or redesigned outcome.
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
garrytan/gstack
Learns about your product, studies the landscape and writes a DESIGN.md with a full design system covering type, color, layout, spacing and motion.
XiaomiMiMo/MiMo-Code
Entry point to a bundle of product design workflows covering context, research, audits, ideation, URL or image to code, design QA and sharing a prototype.
rampstackco/claude-skills
Run a structured after-action review (postmortem, retrospective) on a launch, incident, or completed project to capture timeline, root cause analysis, contributing factors, and actionable lessons.
rampstackco/claude-skills
Design measurement frameworks including event taxonomy, KPI hierarchy, dashboard architecture, attribution models, and analytics implementation strategy.
rampstackco/claude-skills
Build or audit a comprehensive brand style guide that documents the full brand system including story, logo system, color, typography, imagery, voice, applications, and dos/don'ts.
rampstackco/claude-skills
Develop or document a complete brand voice and tone system covering voice attributes, tone shifts by context, vocabulary preferences, grammar rules, and copy examples.
rampstackco/claude-skills
Write or edit website copy, blog content, and editorial pieces with attention to voice, structure, and goal.
rampstackco/claude-skills
Develop a content strategy covering editorial positioning, content pillars, formats, calendar, governance, and topical authority planning.
Designing side-by-side comparison tools (plan-compare, product-compare, alternative-compare) that help users decide rather than just listing features. Comparison Tool Design is an agent skill from rampstackco/claude-skills. Designing side-by-side comparison tools (plan-compare, product-compare, alternative-compare) that help users decide rather than just listing features.
Comparison Tool Design fits situations like: comparison tool; product compare; alternative compare; decision support tool.
Run `npx skills add rampstackco/claude-skills --skill comparison-tool-design -a claude-code`. Or copy the skill folder (skills/comparison-tool-design in rampstackco/claude-skills) into .claude/skills/comparison-tool-design in your project. Claude Code loads it when a task matches its description.
Run `npx skills add rampstackco/claude-skills --skill comparison-tool-design -a codex`. Or copy the skill folder (skills/comparison-tool-design in rampstackco/claude-skills) into .agents/skills/comparison-tool-design in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add rampstackco/claude-skills --skill comparison-tool-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/comparison-tool-design, .gemini/skills/comparison-tool-design, .github/skills/comparison-tool-design and .opencode/skills/comparison-tool-design in your project.
SKILL.md names no scripts, command-line tools or credentials: Comparison Tool Design is instructions for the agent only.
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.
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.
Comparison Tool Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 4.2k tokens (SKILL.md is roughly 17k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 13k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Comparison Tool Design: Design System (affaan-m/ECC, 274k stars), Design Guide (paperclipai/paperclip, 98k stars), Design Audit Against Rams' Principles (thedotmack/claude-mem, 97k stars) and Figma Design to Code (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
rampstackco (a GitHub organization) maintains it in rampstackco/claude-skills, which has 935 GitHub stars. The repository holds 103 skills in this directory. The repository was last updated on October 7, 2026.
Source: rampstackco/claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.