Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add Adit-Jain-srm/skill-forge --skill design-modegit clone --depth 1 https://github.com/Adit-Jain-srm/skill-forgeWrote 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.
[](https://agentmods.dev/skills/adit-jain-srm/skill-forge/design-mode)<a href="https://agentmods.dev/skills/adit-jain-srm/skill-forge/design-mode"><img src="https://agentmods.dev/badge/skills/adit-jain-srm/skill-forge/design-mode.svg" alt="Measured on agentmods" height="20"></a>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.00081 | $0.01054 |
| Opus 5 | $0.00041 | $0.00527 |
| Sonnet 5 | $0.00016 | $0.00211 |
| Haiku 4.5 | $0.00008 | $0.00105 |
Grade A, and why
design-mode 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 8d 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.
How it starts
The opening of the file, as written. The whole thing — 121 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Overview
Cursor Design Mode lets users point, click, draw, and speak to direct UI changes — giving you spatial context, component identity, and visual relationships. This skill teaches you to use that context effectively: make targeted, precise edits instead of broad rewrites.
When to Use
- User selected element(s) in the integrated browser
- User drew an annotation highlighting a region
- User gave voice instruction about a visual change
- You received DOM context, layout data, or element identity from Design Mode
- Task involves CSS, layout, spacing, color, typography, or component styling
- User says "make this look like X" or "fix this button" with visual context
Process
When Design Mode provides visual context:
1. IDENTIFY — What exact element(s) were selected? Which component file owns them?
2. SCOPE — Change ONLY what was pointed at. Don't refactor surrounding code.
3. PRESERVE — Keep existing styles, classes, and behavior. Only modify what was asked.
4. TARGETED — Make the minimal CSS/JSX change that achieves the visual result.
5. VERIFY — After edit, confirm the change renders correctly (hot-reload shows result).
Key Principles
Precision Over Ambition
Design Mode gives you a SPECIFIC element. Don't:
- Refactor the entire component when only one style was requested
- Change the component's API when only its appearance was pointed at
- Touch logic when only visuals were selected
DO:
- Find the exact file and line for the selected element
- Make the minimal edit that achieves the described visual change
- Preserve all existing behavior, event handlers, accessibility
Parallel Edits
Users can send multiple Design Mode edits simultaneously. Each edit is independent:
- Don't wait for one to complete before processing another
- Each edit targets its own element — no cross-contamination
- If two edits conflict (same element, different requests), handle the most recent
Voice + Visual = High Confidence
When user provides BOTH voice description AND visual selection:
- The visual selection tells you WHAT to change
- The voice tells you HOW to change it
- Trust the combination — this is higher confidence than text alone
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.
- 8d ago First seen · 121 lines · 81 tokens per session scan A 978815d55ae2
design-mode is a skill published in the GitHub repository Adit-Jain-srm/skill-forge (2 stars, last pushed 2mo ago), licensed MIT. It adds 81 tokens to every session and 1,054 once invoked, about $0.0004 per session on Opus 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.
Other skills, from other repositories
looks-expensive
Full-stack design methodology that makes any website look like a $150k agency build. Nine gated phases: positioning, research, design contract, screen spec, build, subtraction, audit, hardening, handoff. Includes illustration system, animation tiers, 12 hero patterns, 16 section layouts, UX writing guide, icon system…
ui-ux-design-pro
Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, SaaS, AI tools) from scratch 2. Generate comprehensive design systems (tokens, palettes, typography) 3. Audit existing UI for quality, accessibility, and "craft"…
21st-ui
Find, install, and generate UI with 21st.dev. Use when the user asks for a UI component (pricing table, hero, navbar, dashboard, form, etc.), wants design inspiration, needs a brand logo as an SVG component, or wants to generate new UI from a prompt.
vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
frontend
Builds, styles, and polishes web UI and UX. Use for any frontend, page, component, styling, layout, animation, or visual-quality task, or when asked to make an interface look or feel a certain way.
openai-frontend-design
Use for new frontend applications, dashboards, games, creative websites, hero sections, and visually driven UI from scratch, or when the user explicitly asks for a redesign/restyle/modernization. Builds from clean, airy, high-taste, readable image-generated concept design with section-specific references, faithful…