What is design-md-generator copilot-instructions.md?

Instructions for turning a website's visual style into a DESIGN.md file, a document describing its colors, typography, spacing, and other design choices. The process starts from a website URL and includes generated previews and checks.

Use them when copying a website's look, building a matching interface, or creating and validating a DESIGN.md report.

They provide a repeatable way to capture a site's visual rules and verify that the resulting design document matches the source.

How jasonhnd/design-md-generator configures GitHub Copilot

Reuse

Borrowing it

Nothing to install: this file belongs to jasonhnd/design-md-generator. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file

curl -O https://raw.githubusercontent.com/jasonhnd/design-md-generator/main/.github/copilot-instructions.md

Clone the repo

git clone --depth 1 https://github.com/jasonhnd/design-md-generator

Made for: GitHub Copilot.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/instructions/jasonhnd/design-md-generator/copilot-instructions/github.svg)](https://agentmods.dev/instructions/jasonhnd/design-md-generator/copilot-instructions)

Your own site

<a href="https://agentmods.dev/instructions/jasonhnd/design-md-generator/copilot-instructions"><img src="https://agentmods.dev/badge/instructions/jasonhnd/design-md-generator/copilot-instructions/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/instructions/jasonhnd/design-md-generator/copilot-instructions"><img src="https://agentmods.dev/badge/instructions/jasonhnd/design-md-generator/copilot-instructions.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 460 This file is loaded in full into every session.

When invoked 460 The same file — it is already loaded in full.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00460	$0.00460
Opus 5.5	$0.00184	$0.00184
Sonnet 5.5	$0.00092	$0.00092
Haiku 4.5	$0.00046	$0.00046

Measured 2mo ago against content hash 66c061b571b7, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

design-md-generator copilot-instructions.md scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

Copies of this mod

3 near-identical copies found in the catalogue:

design-md-generator CLAUDE.md — 100% identical, 0 lines differ
design-md-generator GEMINI.md — 100% identical, 0 lines differ
design-md-generator AGENTS.md — 100% identical, 0 lines differ

.github/copilot-instructions.md · 48 lines

What it actually says

Design MD Generator

You have access to a design system extraction tool. When the user asks you to match a website's visual style, build UI that looks like a specific site, or create a DESIGN.md:

Run the full pipeline without stopping. Do not ask "should I proceed?" between steps.

Full Pipeline (one command flow)

# 1. Extract design tokens
cd /path/to/dmdg && npx ts-node scripts/extract.ts <URL>

# 2. [YOU] Read tokens.json + screenshots, write DESIGN.md following SKILL.md spec
#    Write all 9 sections without pausing. Self-audit. Fix issues.

# 3. Validate
cd /path/to/dmdg && npx ts-node scripts/validate.ts output/<domain>/DESIGN.md output/<domain>/tokens.json

# 4. Generate report + proof
cd /path/to/dmdg && npx ts-node scripts/preview-gen.ts output/<domain>/tokens.json output/<domain>/
cd /path/to/dmdg && npx ts-node scripts/proof.ts <URL> output/<domain>/tokens.json output/<domain>/
cd /path/to/dmdg && npx ts-node scripts/report-gen.ts output/<domain>/tokens.json output/<domain>/ output/<domain>/DESIGN.md

# 5. Open report for user
open output/<domain>/report.html

Using an Existing DESIGN.md

If a DESIGN.md already exists in the project:

Read it completely before writing any UI code
Use ONLY the colors, fonts, sizes, and shadows specified in it
Do NOT invent values not present in the document
Follow Section 9 (Agent Prompt Guide) for quick reference

Critical Rules

ALL numerical values MUST come from tokens.json — never hallucinate
6-digit lowercase hex (#ffffff, not #FFF)
Numeric font weights (400, 700) not words (bold)
Do not stop between steps to ask for confirmation
Present only the final result

Full Specification

See SKILL.md for the complete 21-step workflow, format spec, writing style guide, and quality checklist.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

2mo ago First seen · 48 lines · 460 tokens per session scan A 66c061b571b7

Subscribe to this mod's changes

design-md-generator copilot-instructions.md is an instructions file published in the GitHub repository jasonhnd/design-md-generator (17 stars, last pushed 6mo ago), licensed MIT. It adds 460 tokens to every session, about $0.0018 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Design and UX ai-agent automation claude-code-skill css-analyzer design-system design-tokens

design-md-generator copilot-instructions.md next to 6 instructions from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
design-md-generator copilot-instructions.mdjasonhnd/design-md-generator	Instructions file	17	6mo ago	MIT	A	460	GitHub Copilot
vscode buildNext.instructions.mdmicrosoft/vscode	Instructions file	195k	yesterday	MIT	A	9,719	GitHub Copilot
next.js AGENTS.mdvercel/next.js	Instructions file	143k	today	MIT	A	7,461	Codex, OpenCode
langchain AGENTS.mdlangchain-ai/langchain	Instructions file	149k	today	MIT	A	4,680	Codex, OpenCode
vscode oss-third-party-notices.instructions.mdmicrosoft/vscode	Instructions file	195k	yesterday	MIT	A	5,516	GitHub Copilot
vscode copilot-instructions.mdmicrosoft/vscode	Instructions file	195k	yesterday	MIT	A	3,093	GitHub Copilot
deepseek-harness AGENTS.mddeepseek-ai/deepseek-harness	Instructions file	274k	2d ago	MIT	A	4,313	Codex, OpenCode

design-md-generator: Instructions file for GitHub Copilot