A skill your agent uses when the user wants the visual/experiential design of a product done systematically — a design system, a screen, a landing page, or a visual identity — grounded in researched…

MITAuto-check passedFrontend & Design

Install Design

skills CLI
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install jeremylongshore/tons-of-skills-marketplace design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/ai-agency/hyperflow/skills/design .claude/skills/design && rm -rf skills-src

Use ~/.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/

Facts

Skill name
design
GitHub stars
2.8k
Token cost
~1.9k tokens
SKILL.md length
747 words
Files
1
Skills in repo
3,342
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when the user wants the visual/experiential design of a product done systematically — a design system, a screen, a landing page, or a visual identity — grounded in researched…

  • Works in 6 steps: Triage → Design system → Research + direction → …
  • The user wants the visual/experiential design of a product done systematically — a design system
  • SKILL.md covers Iron Rules, Per-Step Agent Map (DOCTRINE…, Approval Gates and Flow, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Design is an agent skill from jeremylongshore/tons-of-skills-marketplace. Use when the user wants the visual/experiential design of a product done systematically — a design system, a screen, a landing page, or a visual identity — grounded in researched real-world prior art and free of AI slop. Establishes/extends the design system, invokes the matching local taste skill, dispatches the designer specialist, and reviews for taste + accessibility. Standalone — ends with a handoff gate into the chain. Trigger with /hyperflow:design, "design the UI", "make a design system", "design this…

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: Designed for Claude Code

It sits in Frontend & Design, covering Design systems, Logo and visual identity and Intellectual property. The repository describes itself as: Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com. The licence is MIT.

When your agent uses it

  • The user wants the visual/experiential design of a product done systematically — a design system
  • A visual identity — grounded in researched real-world prior art and free of AI slop
  • With /hyperflow:design
  • Make a design system

Example prompts

  • “design the UI”
  • “make a design system”
  • “design this screen”
  • “/design”

Requirements

  • Compatibility (from SKILL.md): Designed for Claude Code
  • Pre-approved tools (allowed-tools): Read, Glob, Grep, Agent, Skill, AskUserQuestion

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Triage
  2. Design system
  3. Research + direction
  4. Design spec
  5. Taste + accessibility review
  6. Handoff gate (STRUCTURAL GATE · DOCTRINE rule 8)

What it can do on your machine

Read from SKILL.md and the folder at commit cfae287. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Glob
    • Grep
    • Agent
    • Skill
    • AskUserQuestion

    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.

  • Compatibility

    Designed for Claude Code

    From compatibility in the SKILL.md frontmatter.

Context cost

Design loads about 1.9k tokens when it runs. Until then it costs about 145 tokens; SKILL.md has 747 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~145
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k

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 jeremylongshore/tons-of-skills-marketplace at commit cfae287, republished under its MIT licence (© jeremylongshore). 747 words, ~1,947 tokens.

Download SKILL.mdSave it as .claude/skills/design/SKILL.md (or your agent's skills folder).
name
design
description
Use when the user wants the visual/experiential design of a product done systematically — a design system, a screen, a landing page, or a visual identity — grounded in researched real-world prior art and free of AI slop. Establishes/extends the design system, invokes the matching local taste skill, dispatches the designer specialist, and reviews for taste + accessibility. Standalone — ends with a handoff gate into the chain. Trigger with /hyperflow:design, "design the UI", "make a design system", "design this screen", "give this a visual identity", "redesign this".
allowed-tools
Read, Glob, Grep, Agent, Skill, AskUserQuestion
compatibility
Designed for Claude Code
argument-hint
[target | brief]
version
1.0.0
license
MIT
tags
design, design-system, ui, creative, anti-slop, multi-agent

Design

Systematic, anti-slop product design. All agents inherit the session model. Reviewers bold-labeled; Workers plain.

This skill exercises Layer 4 (Brainstorming/Spec) and the design layer of Layer 0 (Project Analysis). It is thinking, not building — no source code is written here. The only writes are to .hyperflow/design/system.md and .hyperflow/specs/. It ends with a handoff gate into /hyperflow:plan → /hyperflow:dispatch for the build.

Iron Rules

  • Design system first. Every run establishes or extends .hyperflow/design/system.md before designing a screen, per ../hyperflow/design-system.md. The system is created once and extended, never regenerated.
  • Researched, not invented. Ground every direction in ≥2 real products from the project's field, combine them, then diverge with one deliberate signature (the method in design-system.md).
  • Local taste skills are invoked live. The main session calls Skill to invoke the matching taste skill; the dispatched designer agent Reads the SKILL.md and applies it (it has no Skill tool).
  • Per-step agents (DOCTRINE rule 12). No inline design — the designer specialist does the work; an accessibility-reviewer pass gates the result.
  • No code in the design phase. Design produces a system file and a design spec; dispatch executes them.
  • Failure recovery (DOCTRINE rule 14) per ../hyperflow/failure-recovery.md.
  • No AI attribution in any file written.

Per-Step Agent Map (DOCTRINE rule 12)

StepSub-phaseWorkersReviewersNotes
1 — Triage———Mechanical classification (exempt) per ../hyperflow/task-triage.md
2 — Design system2a — establish/extend .hyperflow/design/system.mddesignerReviewerCreates if missing; extends if present
3 — Research + direction3a — prior-art research + combine + divergedesigner (fan-out ≤ 3 by dimension)ReviewerWeb-research-first; ≥2 references
4 — Design spec4a — translate direction into tokens/specdesignerReviewerWritten to .hyperflow/specs/<slug>.md
5 — Taste + a11y review——designer verdict + accessibility-reviewerAnti-slop floor + WCAG floor
6 — Handoff gate———AskUserQuestion only (exempt — structural gate)

Approval Gates

GateWhenFormat
Handoff gateStep 6, after the spec is writtenAskUserQuestion — build now / plan first / stop

Flow

Step 1 — Triage

Classify the request per ../hyperflow/task-triage.md. types will include ui and/or creative; the Brain confirms designer on the roster.

Step 2 — Design system

Read .hyperflow/design/system.md. If missing, dispatch designer — establish design system to create it (domain, tokens, type scale, spacing, motion, voice, components, references, anti-patterns) per design-system.md. If present, dispatch designer — extend design system to add only what this brief needs. Then **Reviewer** — design-system coverage check.

Step 3 — Research + direction

Invoke the matching local taste skill(s) live via Skill (per the index in design-system.md). Then dispatch designer — research prior art + propose direction (fan-out ≤ 3 by visual language / motion+interaction / IA when the surface is broad): study ≥2 real systems in the field, combine, diverge with one named signature. Then **Reviewer** — direction grounding check (≥2 references combined, not copied; signature is deliberate).

Step 4 — Design spec

Dispatch designer — author design spec to translate the chosen direction into the bound design-system tokens and write it to .hyperflow/specs/<slug>.md (format per ../hyperflow/artefact-format.md). Then **Reviewer** — spec sanity check.

Show full SKILL.md (284 more words)Show less
Step 5 — Taste + accessibility review

Dispatch in parallel: **designer** — taste verdict (anti-slop floor) ∥ **accessibility-reviewer** — a11y floor (WCAG AA, focus, reduced-motion, RTL). On a11y conflict, the floor wins (Step 5 defers to the a11y verdict).

Step 6 — Handoff gate (STRUCTURAL GATE · DOCTRINE rule 8)
?  Design spec ready at .hyperflow/specs/<slug>.md — build it?

   Build now (Recommended)  — chain to /hyperflow:plan → /hyperflow:dispatch
   Plan first               — open /hyperflow:plan to decompose without building yet
   Stop                     — leave the spec; build later

On Build now → invoke Skill with skill: plan and args: "session=one spec=.hyperflow/specs/<slug>.md". On Plan first → invoke plan without auto-dispatch. On Stop → print one line and stop. If AskUserQuestion is unavailable, print the gate as a Hyperflow Question block and wait — never auto-build silently.

Output Format

Two outputs:

  1. The design system at .hyperflow/design/system.md — living token document (created or extended this run).
  2. The design spec at .hyperflow/specs/<slug>.md — the direction, tokens, signature, and References: block.

Chat shows one status box pointing at the files, never the token dump (file-first, rule 8):

── Design Result ─────────────────────
Brief:    <one line>
System:   .hyperflow/design/system.md (created | extended)
Spec:     .hyperflow/specs/<slug>.md
Verdict:  taste PASS · a11y PASS
─────────────────────────────────────

Hand-off

  • Plan it — auto-chain to /hyperflow:plan for decomposition; plan then stops at its build-location gate and asks where to build (it never auto-implements).
  • Stop — spec persists for a later build.

Doctrine

Full rules in DOCTRINE.md. Design method, taste-skill index, and anti-slop floor in design-system.md. Persona standards (ui, creative) in personas-A.md — bound by the designer, never restated.

Overview

/hyperflow:design runs systematic product design: it establishes or extends the project's design system, researches real-world prior art in the project's field, invokes the matching local taste skill, dispatches the designer specialist to combine references and diverge with one deliberate signature, and gates the result on a taste + accessibility review before handing off to the build chain.

Prerequisites

  • .hyperflow/ cache recommended (Layer 0 analysis improves design context). Run /hyperflow:scaffold first if missing.
  • Local taste skills installed under ~/.claude/skills/ (the skill degrades gracefully to the anti-slop floor in design-system.md when a specific taste skill is absent).

© jeremylongshore, 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 plugins/ai-agency/hyperflow/skills/design of jeremylongshore/tons-of-skills-marketplace.

Open the folder on GitHubat commit cfae287

Compare with similar skills

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.

Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Design this skilljeremylongshore/tons-of-skills-marketplace2.8k—~1.9kAutomated safety check: PassMIT
UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar5.7k1 repos~1.1kAutomated safety check: PassMIT
Ark UIBrandon030722/ark-ui-skill268—~3.7kAutomated safety check: PassNone
Replica DesignJakeschincariol/replica-skill1.4k—~994Automated safety check: PassMIT
Interface KitJuliusBrussee/skills1621 repos~5.3kAutomated safety check: PassMIT
Super UI UX Designsyahiidkamil/Software-Engineer-AI-Agent-Atlas401—~9kAutomated safety check: PassNone

Similar skills

  • 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.

    5.7k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed
  • Ark UI

    Brandon030722/ark-ui-skill

    Design, implement, audit, or refactor web and game-adjacent interfaces using an evidence-based Hypergryph visual language with two independent choices: product family and application depth (1…

    268 GitHub stars~3.7k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed
  • Replica Design

    Jakeschincariol/replica-skill

    Rebuilds an app's design system for a clone: colour roles, type scale, spacing, radius, shadows and every component with its states, as design tokens plus component specs, with original assets…

    1.4k GitHub stars~994 tokensUpdated 7 days ago
    Frontend & DesignAuto-check passed
  • Interface Kit

    JuliusBrussee/skills

    Authoritative guide for implementing stunning, accessible, performant UI.

    162 GitHub starsUsed in 1 repo~5.3k tokens
    Frontend & DesignAuto-check passed
  • 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…

    401 GitHub stars~9k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed
  • Ijfw Ship

    FerroxLabs/ijfw

    A skill your agent uses when the user says 'ship it', 'ship this', 'release', 'publish', 'launch', 'deploy', 'go live', 'wrap this up', 'time to ship', or invokes '/ijfw-ship'.

    212 GitHub stars~2k tokensUpdated 6 days ago
    Frontend & DesignAuto-check: notes

More from jeremylongshore/tons-of-skills-marketplace

All 3,342 skills in this repo
  • Performing Security Code Review

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to conduct a security-focused code review using the security-agent plugin.

    2.8k GitHub starsUsed in 2 repos~1.3k tokens
    Auto-check: notes
  • Adapting Transfer Learning Models

    jeremylongshore/tons-of-skills-marketplace

    Build this skill automates the adaptation of pre-trained machine learning models using transfer learning techniques.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Agent Context Loader

    jeremylongshore/tons-of-skills-marketplace

    Execute proactive auto-loading: automatically detects and loads agents.md files.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Aggregating Performance Metrics

    jeremylongshore/tons-of-skills-marketplace

    Aggregate and centralize performance metrics from applications, systems, databases, caches, and services.

    2.8k GitHub stars~1.2k tokensUpdated today
    Auto-check passed
  • Analyzing Capacity Planning

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to analyze capacity requirements and plan for future growth.

    2.8k GitHub stars~947 tokensUpdated today
    Auto-check passed
  • Analyzing Database Indexes

    jeremylongshore/tons-of-skills-marketplace

    Process use when you need to work with database indexing. An agent skill from jeremylongshore/tons-of-skills-marketplace.

    2.8k GitHub stars~2k tokensUpdated today
    Auto-check passed

Questions about Design

What does Design do?

A skill your agent uses when the user wants the visual/experiential design of a product done systematically — a design system, a screen, a landing page, or a visual identity — grounded in researched…. Design is an agent skill from jeremylongshore/tons-of-skills-marketplace. Use when the user wants the visual/experiential design of a product done systematically — a design system, a screen, a landing page, or a visual identity — grounded in researched real-world prior art and free of AI slop.

When should I use Design?

Design fits situations like: the user wants the visual/experiential design of a product done systematically — a design system; A visual identity — grounded in researched real-world prior art and free of AI slop; with /hyperflow:design; make a design system.

How do I install Design in Claude Code?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill design -a claude-code`. Or copy the skill folder (plugins/ai-agency/hyperflow/skills/design in jeremylongshore/tons-of-skills-marketplace) into .claude/skills/design in your project. Claude Code loads it when a task matches its description.

How do I install Design in Codex?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill design -a codex`. Or copy the skill folder (plugins/ai-agency/hyperflow/skills/design in jeremylongshore/tons-of-skills-marketplace) into .agents/skills/design in your project. Codex loads it when a task matches its description.

Can I use 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 jeremylongshore/tons-of-skills-marketplace --skill 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/design, .gemini/skills/design, .github/skills/design and .opencode/skills/design in your project.

What does Design need to run?

SKILL.md names no scripts, command-line tools or credentials: Design is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Glob, Grep, Agent, Skill, AskUserQuestion. Compatibility (from SKILL.md): Designed for Claude Code.

Does 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 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 Design use?

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 Design use?

About 1.9k tokens (SKILL.md is roughly 7.8k 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 Design?

Skills that share tags, products or a category with Design: UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars), Ark UI (Brandon030722/ark-ui-skill, 268 stars), Replica Design (Jakeschincariol/replica-skill, 1.4k stars) and Interface Kit (JuliusBrussee/skills, 162 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Design?

jeremylongshore (a GitHub user) maintains it in jeremylongshore/tons-of-skills-marketplace, which has 2,827 GitHub stars. The repository holds 3,342 skills in this directory. The repository was last updated on October 10, 2026.

Source: jeremylongshore/tons-of-skills-marketplace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.