Agent skill

Design

by yangyuan-zhen in yangyuan-zhen/PolyWeather

[OMX] Canonical repo-local DESIGN.md workflow for product, UI/UX, and frontend decision source of truth

AGPL-3.0Auto-check passedFrontend & Design

Install Design

skills CLI

$ npx skills add yangyuan-zhen/PolyWeather --skill design -a claude-code

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

GitHub CLI

$ gh skill install yangyuan-zhen/PolyWeather 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/yangyuan-zhen/PolyWeather.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.codex/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/

Paste into Claude Code

Install the "design" agent skill from https://github.com/yangyuan-zhen/PolyWeather/tree/main/.codex/skills/design into .claude/skills/design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "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

$skill-installer install https://github.com/yangyuan-zhen/PolyWeather/tree/main/.codex/skills/design

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

skills CLI

$ npx skills add yangyuan-zhen/PolyWeather --skill design -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install yangyuan-zhen/PolyWeather design --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/yangyuan-zhen/PolyWeather.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.codex/skills/design .agents/skills/design && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "design" agent skill from https://github.com/yangyuan-zhen/PolyWeather/tree/main/.codex/skills/design into .agents/skills/design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "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.

skills CLI

$ npx skills add yangyuan-zhen/PolyWeather --skill design -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install yangyuan-zhen/PolyWeather design --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/yangyuan-zhen/PolyWeather.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.codex/skills/design .cursor/skills/design && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "design" agent skill from https://github.com/yangyuan-zhen/PolyWeather/tree/main/.codex/skills/design into .cursor/skills/design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "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

$ gemini skills install https://github.com/yangyuan-zhen/PolyWeather.git --path .codex/skills/design

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add yangyuan-zhen/PolyWeather --skill design -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install yangyuan-zhen/PolyWeather design --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/yangyuan-zhen/PolyWeather.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.codex/skills/design .gemini/skills/design && rm -rf skills-src

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

Paste into Gemini CLI

Install the "design" agent skill from https://github.com/yangyuan-zhen/PolyWeather/tree/main/.codex/skills/design into .gemini/skills/design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "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.

GitHub CLI

$ gh skill install yangyuan-zhen/PolyWeather design

Installs 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).

skills CLI

$ npx skills add yangyuan-zhen/PolyWeather --skill design -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/yangyuan-zhen/PolyWeather.git skills-src && mkdir -p .github/skills && cp -r skills-src/.codex/skills/design .github/skills/design && rm -rf skills-src

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

Paste into GitHub Copilot

Install the "design" agent skill from https://github.com/yangyuan-zhen/PolyWeather/tree/main/.codex/skills/design into .github/skills/design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "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.

skills CLI

$ npx skills add yangyuan-zhen/PolyWeather --skill design -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install yangyuan-zhen/PolyWeather design --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/yangyuan-zhen/PolyWeather.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.codex/skills/design .opencode/skills/design && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "design" agent skill from https://github.com/yangyuan-zhen/PolyWeather/tree/main/.codex/skills/design into .opencode/skills/design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "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: design
GitHub stars: 316
Token cost: ~1.8k tokens
SKILL.md length: 693 words
Files: 1
Skills in repo: 26
Repo updated: Sep 20, 2026
First seen: Oct 7, 2026
Licence: AGPL-3.0

At a glance

[OMX] Canonical repo-local DESIGN.md workflow for product, UI/UX, and frontend decision source of truth

Works in 5 steps: Discover local design evidence → Interview only for missing context → Create or refresh DESIGN.md → …
Tasks that involve Design tokens
SKILL.md covers Purpose, Use when, Do not use when and Relationship to $visual-ralph, plus 2 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Design is an agent skill from yangyuan-zhen/PolyWeather. [OMX] Canonical repo-local DESIGN.md workflow for product, UI/UX, and frontend decision source of truth

Its SKILL.md is about 1.8k 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 Design tokens and UI design. The repository describes itself as: polymarket Intelligent Weather Quant Analysis Bot. The licence is AGPL-3.0.

When your agent uses it

Tasks that involve Design tokens
Tasks that involve UI design

Example prompts

“/design”

Workflow steps

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

Discover local design evidence
Interview only for missing context
Create or refresh DESIGN.md
Use DESIGN.md as the decision contract
Handoff to implementation or Visual Ralph when appropriate

What it can do on your machine

Read from SKILL.md and the folder at commit 43e658b. 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 (its code samples are markdown).
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

Design loads about 1.8k tokens when it runs. Until then it costs about 28 tokens; SKILL.md has 693 words of instructions outside code blocks.

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

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 yangyuan-zhen/PolyWeather at commit 43e658b, republished under its AGPL-3.0 licence (© yangyuan-zhen). 693 words, ~1,782 tokens.

Download SKILL.mdSave it as .claude/skills/design/SKILL.md (or your agent's skills folder).

name: design
description: [OMX] Canonical repo-local DESIGN.md workflow for product, UI/UX, and frontend decision source of truth

Design Skill

Use $design when product, UI/UX, frontend, or design-system decisions need a durable source of truth in the repository. This skill discovers existing design context, interviews for missing product/design information, and creates or refreshes repo-local DESIGN.md so future UI/UX/frontend work is grounded instead of improvised.

Purpose

Make repo-local DESIGN.md source of truth and canonical design contract for the current repository:

existing repo evidence -> missing-context interview -> create/refresh DESIGN.md -> use DESIGN.md for UI/UX/frontend decisions.

The output is not a pixel-matching loop and not a one-off visual critique. It is the maintained design brief/checklist that implementation, review, and future visual work should cite.

Use when

The user asks for design direction, UX guidance, frontend planning, or design-system alignment.
A repo needs a design brief before UI/frontend implementation begins.
Existing UI/components/assets/screenshots need to be summarized into a reusable design source of truth.
UI/UX/frontend decisions are ambiguous and should be resolved through product context, constraints, and documented principles.
A feature needs DESIGN.md created or refreshed before $ralph, a designer lane, or implementation work proceeds.

Do not use when

The user provides or requests a visual reference/image/live URL and wants measured implementation until screenshots match. Use $visual-ralph for that visual-reference implementation loop.
The task is pure backend/API/infrastructure work with no user-facing design consequence.
The user only asks to compare screenshots or score visual fidelity. Use $visual-ralph and its built-in visual verdict flow.

Relationship to `$visual-ralph`

$design owns the durable repo design source of truth: product goals, users, IA, visual language, components, accessibility, constraints, and open questions in DESIGN.md.

$visual-ralph owns implementation against an approved generated/static/live-URL visual reference, with screenshot capture, Visual Ralph verdict scoring, and pixel-diff evidence. $visual-ralph may read DESIGN.md, and it may leave design-system artifacts behind, but it does not replace the DESIGN.md discovery/interview/refresh workflow.

If both are needed, run $design first to establish the design contract, then run $visual-ralph only after the visual reference/baseline is approved.

Workflow

1. Discover local design evidence

Inspect the repository before writing guidance. Look for:

DESIGN.md, docs/design*, docs/ux*, docs/frontend*, README.md, product specs, PRDs, and issue notes.
Existing UI source: routes, pages, layouts, components, stories, examples, demos, theme files, CSS variables, Tailwind/theme config, tokens, icons, and assets.
Screenshots, mockups, brand files, logos, Figma/export notes, Storybook snapshots, Playwright screenshots, visual-regression baselines, or .omx/artifacts/visual-ralph/* references.
Accessibility, responsive, i18n, content, and platform constraints already encoded in code or docs.

Record evidence with file paths. Distinguish observed facts from design inferences.

Show full SKILL.md (294 more words)Show less

2. Interview only for missing context

Ask concise questions only when repo evidence cannot answer design-critical context. Prefer one focused round that closes the biggest gaps, such as:

target users/personas and jobs to be done,
product/business goals and non-goals,
brand personality or forbidden aesthetics,
primary flows and information architecture,
accessibility level, device/browser support, and implementation constraints,
existing design assets or references the repo does not contain.

If the user wants autonomous progress or cannot answer, create DESIGN.md with explicit assumptions and open questions instead of blocking.

3. Create or refresh `DESIGN.md`

Use the structure below. Preserve useful existing content, remove contradictions, and mark unknowns as open questions. Keep it actionable for implementers and reviewers.

Required `DESIGN.md` structure/checklist

markdown

# Design

## Source of truth
- Status: Draft | Active | Needs refresh
- Last refreshed: YYYY-MM-DD
- Primary product surfaces:
- Evidence reviewed:

## Brand
- Personality:
- Trust signals:
- Avoid:

## Product goals
- Goals:
- Non-goals:
- Success signals:

## Personas and jobs
- Primary personas:
- User jobs:
- Key contexts of use:

## Information architecture
- Primary navigation:
- Core routes/screens:
- Content hierarchy:

## Design principles
- Principle 1:
- Principle 2:
- Tradeoffs:

## Visual language
- Color:
- Typography:
- Spacing/layout rhythm:
- Shape/radius/elevation:
- Motion:
- Imagery/iconography:

## Components
- Existing components to reuse:
- New/changed components:
- Variants and states:
- Token/component ownership:

## Accessibility
- Target standard:
- Keyboard/focus behavior:
- Contrast/readability:
- Screen-reader semantics:
- Reduced motion and sensory considerations:

## Responsive behavior
- Supported breakpoints/devices:
- Layout adaptations:
- Touch/hover differences:

## Interaction states
- Loading:
- Empty:
- Error:
- Success:
- Disabled:
- Offline/slow network, if applicable:

## Content voice
- Tone:
- Terminology:
- Microcopy rules:

## Implementation constraints
- Framework/styling system:
- Design-token constraints:
- Performance constraints:
- Compatibility constraints:
- Test/screenshot expectations:

## Open questions
- [ ] Question / owner / impact

4. Use `DESIGN.md` as the decision contract

For UI/UX/frontend work after the refresh:

Cite the relevant DESIGN.md sections before making design choices.
Prefer existing components, tokens, and documented constraints.
If implementation reveals a design contradiction, update DESIGN.md or add an open question before proceeding.
Do not introduce a new design-system layer when existing repo-native patterns can be extended.

5. Handoff to implementation or Visual Ralph when appropriate

For normal frontend implementation, hand off with the relevant DESIGN.md sections, repo evidence, and acceptance criteria.
For visual-reference/image/live-URL matching, hand off to $visual-ralph with the approved reference/baseline and note that DESIGN.md is supporting context, not the visual verdict target.

Completion checklist

Do not declare the design workflow complete until:

Existing design docs/assets/components/screenshots have been inspected or explicitly noted as absent.
Missing product/design context has been answered, assumed, or listed in DESIGN.md open questions.
DESIGN.md exists at the repo root and contains all required checklist sections.
UI/UX/frontend recommendations cite DESIGN.md rather than relying on unstated preferences.
Any $visual-ralph handoff is clearly separated as visual implementation matching, not DESIGN.md governance.

Task: {{ARGUMENTS}}

Files

Just SKILL.md in .codex/skills/design of yangyuan-zhen/PolyWeather.

Open the folder on GitHubat commit 43e658b

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
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Design this skillyangyuan-zhen/PolyWeather	316	—	~1.8k	Automated safety check: Pass	AGPL-3.0	20 days ago
Design Dnazanwei/design-dna	1.9k	1 repos	~2.1k	Automated safety check: Pass	MIT	1 mo ago
Figma Design to Codewarpdotdev/warp	65k	4 repos	~2.9k	Automated safety check: Pass	AGPL-3.0	today
Design Guidepaperclipai/paperclip	100k	1 repos	~3.1k	Automated safety check: Pass	MIT	today
Web Designxiaopu-ai/web-design	783	—	~3k	Automated safety check: Pass	MIT	3 mo ago
Liuguang Banlan UIsickn33/agentic-awesome-skills	47k	1 repos	~2.5k	Automated safety check: Pass	MIT	yesterday

Similar skills

Design Dna
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
1.9k GitHub starsUsed in 1 repo~2.1k tokens
Frontend & DesignAuto-check passed
Figma Design to Code
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.
65k GitHub starsUsed in 4 repos~2.9k tokens
Frontend & DesignAuto-check passed
Design Guide
paperclipai/paperclip
Paperclip UI design system guide for building consistent, reusable frontend components.
100k GitHub starsUsed in 1 repo~3.1k tokens
Frontend & DesignAuto-check passed
Web Design
xiaopu-ai/web-design
Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词（任意组合），先产出一份标准化 DESIGN.md 设计规范，用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端：Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX…
783 GitHub stars~3k tokensUpdated 3 mo ago
Frontend & DesignAuto-check passed
Liuguang Banlan UI
sickn33/agentic-awesome-skills
Implements an interface in one of two named color modes, iridescent white or colorful black, from a parameterized starter that reports measured color intensity.
47k GitHub starsUsed in 1 repo~2.5k tokens
Frontend & DesignAuto-check passed
Website Design Taste Extractor
senlindesign/taste-skill
Reverse-engineers a website's design from its URL into a Markdown and JSON pair holding concrete tokens and the trade-offs behind the look.
385 GitHub stars~5.3k tokensUpdated 3 mo ago
Frontend & DesignAuto-check passed

Questions about Design

What does Design do?

[OMX] Canonical repo-local DESIGN.md workflow for product, UI/UX, and frontend decision source of truth. Design is an agent skill from yangyuan-zhen/PolyWeather.

When should I use Design?

Design fits situations like: tasks that involve Design tokens; tasks that involve UI design.

How do I install Design in Claude Code?

Run `npx skills add yangyuan-zhen/PolyWeather --skill design -a claude-code`. Or copy the skill folder (.codex/skills/design in yangyuan-zhen/PolyWeather) 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 yangyuan-zhen/PolyWeather --skill design -a codex`. Or copy the skill folder (.codex/skills/design in yangyuan-zhen/PolyWeather) 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 yangyuan-zhen/PolyWeather --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.

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 AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Design use?

About 1.8k tokens (SKILL.md is roughly 7.1k 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: Design Dna (zanwei/design-dna, 1.9k stars), Figma Design to Code (warpdotdev/warp, 65k stars), Design Guide (paperclipai/paperclip, 100k stars) and Web Design (xiaopu-ai/web-design, 783 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Design?

yangyuan-zhen (a GitHub user) maintains it in yangyuan-zhen/PolyWeather, which has 316 GitHub stars. The repository holds 26 skills in this directory. The repository was last updated on September 20, 2026.

Source: yangyuan-zhen/PolyWeather on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Design

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Design Skill

Purpose

Use when

Do not use when

Relationship to $visual-ralph

Workflow

1. Discover local design evidence

2. Interview only for missing context

3. Create or refresh DESIGN.md

Required DESIGN.md structure/checklist

4. Use DESIGN.md as the decision contract

5. Handoff to implementation or Visual Ralph when appropriate

Completion checklist

Files

Compare with similar skills

Similar skills

More from yangyuan-zhen/PolyWeather

Related

Questions about Design

Relationship to `$visual-ralph`

3. Create or refresh `DESIGN.md`

Required `DESIGN.md` structure/checklist

4. Use `DESIGN.md` as the decision contract